Avatar billede neoman Novice
30. oktober 2007 - 16:29 Der er 27 kommentarer og
1 løsning

Flydende tag i højre side

Jeg har en side med en centreret div med fast bredde, inde i den ligger der de sædvanlige float:left , float:right og en centreret kolonne.

Jeg vil gerne have hjælp til placering af en tag på samme måde som
Sign in | Join øverst til højre på http://www.asp.net/

Ønsker:
1. Hvis brugeren kører med fuld skærm og i større opløsning end 1024 så skal den stadig flugte med højre kant af min 1000px centerdiv.

2. Hvis brugeren trækker i højrekant af vinduet, skal taggen holde samme afstand til højre kant, indtil skærmbredden er 800, hvorpå den godt må krybe ind under kanten.

Jeg har bakset med div'er indtil blå i hovedet, men uden held.

Det skal virke i IE6/7 og FF.
Avatar billede w13 Novice
30. oktober 2007 - 18:17 #1
Har du prøvet med noget:

<div style="position:absolute;top:0;text-align:right">
  Tagget her
</div>
Avatar billede neoman Novice
30. oktober 2007 - 19:49 #2
det funker slet ikke - den sidder bare i det venstre hjørne og glor :-(

Desuden kan jeg ikke helt se noget i dit forslag som stopper den i at køre helt frem og tilbage på skærmen - kræver det virkelig at jeg laver en tabel med to celler og lægger et eller andet div i den højre celle eller hvordan ?
Avatar billede w13 Novice
30. oktober 2007 - 19:59 #3
Hvad med:

<div style="position:absolute;top:0;width:100%;text-align:right">
  Tagget her
</div>

Div'er burde dog som standard være 100%.
Avatar billede w13 Novice
30. oktober 2007 - 19:59 #4
Nej, intet i mit forslag stopper den i at rykke hele vejen, når vinduet ændres.

Det kræver noget JavaScript, og jeg ved ikke lige, hvordan det skal gøre, sådan på stående fod.
Avatar billede neoman Novice
30. oktober 2007 - 20:01 #5
nu sidder den i højre hjørne som den skal i starten, men rokker sig ikke når jeg krymper  vinduet :-(
Avatar billede neoman Novice
30. oktober 2007 - 20:03 #6
Det med at stoppe den - kan man ikke bare lægge noget invisible til venstre for den, et div  eller noget i en tabel? Hvordan pokker gør de det på www.asp.net ? (selv om, deres rykker formentligt ud til højre når man kører med større opløsning end 1024
Avatar billede neoman Novice
30. oktober 2007 - 20:10 #7
Og jeg kan ikke få den til at flyde ind til venstre heller :-(
Avatar billede w13 Novice
30. oktober 2007 - 21:01 #8
Ja, okey, så er jeg også lidt lost..
Avatar billede neoman Novice
30. oktober 2007 - 21:02 #9
tak for hjælpne so far - men det må lade sig gøre. Eftersom css er hverken min stærke side eller interesse, så håber jeg lige nogen trækker noget ud af en hat :)
Avatar billede neoman Novice
30. oktober 2007 - 21:04 #10
så har jeg lige oppet points til 200 - det er langt "billigere" at gi' dem til en specialist end bakse med det selv:)
Avatar billede neoman Novice
30. oktober 2007 - 23:01 #11
bump - anyone?
Avatar billede soerenlyn Nybegynder
30. oktober 2007 - 23:05 #12
Du siger du har fået den op i højre hjørne? PRøv position:fixed..
Og hvis du ikke har fået den op i højre hjørne, så sæt det med javascript, screenWidth og screenHeight ..
Avatar billede neoman Novice
30. oktober 2007 - 23:11 #13
Prøvet alle parametre for "position" - og det skal ikke køre via JS men blot med css.

Sorry soerenlyn, men jeg ønsker ikke længere at eksperimentere. Jeg vil gerne høre fra nogen som VED hvordan det gøres via CSS, eller som med sikkerhed kan sige det IKKE kan gøres via css (men kun js, i hvilket fald jeg må finde på noget andet).
Avatar billede soerenlyn Nybegynder
30. oktober 2007 - 23:14 #14
Okay, det er fint.
Avatar billede comodin Nybegynder
31. oktober 2007 - 09:36 #15
nu har jeg testet her, og hvis du kører en 1000px i bredden på dit design så virker det her i hvert fald... har dog lige et par men'er...
du skriver at din bredde er 1000px, hvorfor skal den så kunne krympes til 800px? så er dit design jo allerede "ødelagt" mit forslag virker i hvert fald med 1000px.

CSS:
body {
    margin:0;
    padding:0;
    background:#003366;   
}

#middle_box {
    position:relative;
    width:1000px;
    height:500px;
    background-color:#006699;
    margin-left:auto;
    margin-right:auto;
}

#top_right {
    position:absolute;
    width:100px;
    height:50px;
    right:0px;
    top:0px;
    background-color:#00FF66;
}

XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test align right</title>
<link rel="stylesheet" type="text/css" href="alignright.css" />
</head>
<body>
<div id="middle_box">
    <div id="top_right"></div>
</div>
</body>
</html>
Avatar billede comodin Nybegynder
31. oktober 2007 - 09:40 #16
btw har ikke haft mulighed for at teste i IE6 ;-/
Avatar billede neoman Novice
31. oktober 2007 - 09:41 #17
tak for dit forslag. Jeg kan desværre ikke kigge på det lige nu, men vender tilbage, formentligt  sent i aften eller i morgen.
Avatar billede comodin Nybegynder
31. oktober 2007 - 20:44 #18
har lige rettet lidt i den da vi vel også lige skulle have de tre kolonner ind ;-)

CSS:
body {
    margin:0;
    padding:0;
    background:#003366;   
}

#container {
    position:relative;
    width:1000px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
}

#link_der_rykker {
    position:absolute;
    width:100px;
    height:50px;
    right:0px;
    top:0px;
    background-color:#555555;
}

#midte {
    width:600px;
    height:500px;
    margin-left:auto;
    margin-right:auto;
    background-color:#555555;
}

#venstre {
    width:200px;
    height:500px;
    position:absolute;
    top:0px;
    left:0px;
    background-color:#444444;
}

#hojre {
    width:200px;
    height:500px;
    position:absolute;
    top:0px;
    right:0px;
    background-color:#444444;
}

XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test til h&oslash;jre</title>
<link rel="stylesheet" type="text/css" href="tilhøjremedsig.css" />
</head>
<body>
<div id="container">
    <div id="venstre">venstre side</div>
    <div id="midte">midter stykke</div>
    <div id="hojre">h&oslash;jre side
        <div id="link_der_rykker">link</div>
    </div>
</div>
</body>
</html>
Avatar billede soerenlyn Nybegynder
31. oktober 2007 - 20:46 #19
Det er overflødigt at skrive "px" efter noget som du angiver til 0 :)
Avatar billede neoman Novice
03. november 2007 - 12:22 #20
Beklager forsinkelsen - life !:)

Nu har jeg prøvet i FF og IE6, og det link sidder som muret fast i højre side. Jeg har ikke IE7 i huset, så må lige prøve et andet sted på mandag.
Avatar billede comodin Nybegynder
05. november 2007 - 08:50 #21
nå men det er jeg da ked af at høre...
jeg kan ikke lige se hvad problemet er (kan være jeg ikke har forstået det korrekt)
i min browser her (ff 1.5 og ie7) har jeg de tre rækker hvori den til højre har en "link" boks... denne følger højre kant af højre række indtil jeg går under 1000px så ryger den ud af skærmen... men som sagt så tror jeg ikke jeg har forstået hvad det er du vil opnå ;-/
Avatar billede neoman Novice
05. november 2007 - 09:46 #22
ah de kanter ! :)

Taggen skulle opføre sig på  samme måde som
Sign in | Join øverst til højre på http://www.asp.net/ så jeg burde have skrevet SKÆRMENS kant, ganske som på linket. Deres side har ikke fast bredde, så den tag har konstant afstand fra browservinduets højre kant, så længe vindueet er ca 800 px eller mere (per øjemål), mens hvis bredden for browservinduet bliver mindre end de ca. 800 px så begynder den at krybe ind under højre browservindueskant.

Min side har en fast bredde, så deri ligger problemet formentligt.

Så længe jeg har en konstruktion som din:
<div id="container">
    <div id="venstre">venstre side</div>
    <div id="midte">midter stykke</div>
    <div id="hojre">h&oslash;jre side
        <div id="link_der_rykker">link</div>
    </div>
</div>

så kan jeg ikke få taggen til at flyde.

Hvis jeg laver noget i stil med:
<en masse div i div>     
  <div id="link_der_rykker">link</div>
</en masse div i div>
<div id="container">
    <div id="venstre">venstre side</div>
    <div id="midte">midter stykke</div>
    <div id="hojre">h&oslash;jre side

    </div>
</div>

så kan jeg godt lave en effekt som ligner den som ses på linket,  men kan ikke finde ud af at begrænse den flydende tag til MAX at flyde ud til højre til 1000 px, som er samme bredde som #container. I IE6 kan jeg stil gengæld stoppe den med at komme længre ind end ca 800 px, mens FF6 er ligeglad, og taggen følger vinduets højre kant uanset hvor meget jeg krymper bredden.


http://www.asp.net/ opfører sig til gengæld ganske ens  i ie6 og ff.
Avatar billede neoman Novice
05. november 2007 - 10:06 #23
Så lige for at tydeliggøre det: Hvis http://www.asp.net/ også havde en max bredde på f.eks. 1000 px, og den tag stadig flød ganske som den gør nu, blot imellem de ca. 800px og de 1000, så ville det være hvad jeg ønsker mig. Kan man strikke det sammen ud af statisk css uden js ?
Avatar billede comodin Nybegynder
05. november 2007 - 11:14 #24
ok tror jeg forstår det nu, men... hvis "log ind" skal ligge konstant i forhold til højre side af skærmen/browser går det så ikke ud over dit design som skal være i 1000px?
da hele din container rykker centreret og "log ind" rykker i forhold til noget andet, kommer det jo til at hoppe ud af dine 1000px.
ja tror det er lettere bare at have width til 100%, kan desvæære først kigge på det i aften...
Avatar billede neoman Novice
05. november 2007 - 12:44 #25
Det må kunne lade sig gøre. Man kan åbenbart godt lave en hel del sjove ting, hvis man har totalt styr på css:  http://www.cssplay.co.uk/layouts/fixed.html

Det går ikke mere ud over mit design end www.asp.net.. eller prøv at se hvad der sker med "sign in" øverst til højre på denne side : http://news.google.com/nwshp?hl=en&tab=wn&q=
Avatar billede neoman Novice
05. november 2007 - 20:46 #26
Hej comodin - hvis du trækker en løsning op af hatten så sig endeligt til, ellers læg et svar og så deler vi. Jeg kan ikke bruge mere tid på en "nice-to-have" detalje, så må jeg hitte på noget andet:)
Avatar billede comodin Nybegynder
05. november 2007 - 22:38 #27
jeg bliver nød til at melde pas på denne desværre...
men umiddelbart, som du selv har sagt, så tror jeg det ligger i den width der er på 100%. Denne gør jo at sidens bredde hele tiden er 100% dog skaleret til at passe til browservinduet, derfor følger "log ind" hele tiden højre side hvis den er sat til f.eks right:0;
hvis man sætter #container til width:1000px; og derefter sætter "log ind" til at klæbe sig op af browserens højre side, vil den da i følge mit indre visuelle billede, hoppe ud over de 1000px. hvis browser vinduet er større end 1000px.
nå men nevermind, du har vist forklaret dig på den rette måde ;-)

tag pointene selv da det jo ikke har hjulpet noget det jeg har kommet med ;-)
Avatar billede neoman Novice
05. november 2007 - 23:44 #28
Lukket med uforrettet sag :(
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester