12. november 2007 - 23:34Der er
21 kommentarer og 1 løsning
Hvad er forskellen på "hop: 10px;" og "margin: 10px;"
Hej eksperter
Nårh så kom jeg til næste spørgsmål.
Står og skal lave en boks til min menu. Og vil gerne have boksen til at være 50 px fra toppen af selve vinduet, 1000 px bred og 18 px høj. Og så skal teksten stå HELT ude til venstre i boksen, dog være i midten rent højde mæssigt. hvis i forstår
Havde selv forestillet mig at koden skulle se ca. således ud i min css fil:
mere præcis gør? for det er åbenbert noget som kan gå ind og betyde ret meget hvor den enkelte boks er på siden, men også hvor resten af boksene som ellers ikke burge have ngoet med den at gøre, placere sig.
position:relative; betyder, at elementet skal positioneres ud fra sin egentlige position efter dokument-flowet, men evt. flyttet noget med f.eks. top og left (kan give overraskende virknnger, hvis andre elementer skal starte umiddelbart efter !-)
margin: auto; betyder, at der skal sættes en lige stor margin på begge sider af et element, der har en eksplicit bredde (skrives ofte, som du har vist det, med en lodret margin og auto vandret !-)
-- så mon det ikke skal være: #menuleft{ text-align: left; width: 1000px; height:18px; margin:50px auto 0; /* 3 parametre betyder top right/left bottom; */ font-size: 7.5px; line-height: 15px; /* Du skal nok lige fifle med denne værdi, før det bliver perfekt !-) */ z-index:1; }
margin skal efter rekommendationerne indregnes som en del af elementet (og kan derfor ikke give de overraskende bivirkninger !-)
top angiver en forskydning fra det sted, som elementet ellers ville have haft; med position:relative; 'optager' elementet stadig den oprindelige plads, med position:absolute; optager elementet ingen plads i forhold til dokument-flowet (det kan dog hentes hjem med en ekstra ting, der clearer floats m.v. !-)
Arhh.. Så har jeg lige angivet et laaaang svar tilbage, trykket send, og så sletter den bare teksten..! Typisk.. Nårh men om igen..!!
Ja okay, tror jeg har forstået det der margin auto 0 nu. Men hvordan kan man gøre så ens side kun er 1000 px bred? mener lige nu er der ingen grænser for hvor bred den rentfaktisk er. Så er bare lige så bred som ens computer skræm er. Kunne man bare skrive:
width: 1000px;
inde i: body, html{}
Eller hvordan gør man det mest korrekt?
Hvad betyder line-heigt ??? ud over det retter på hvor teksten står henne, højde mæssigt i boksen?
Okay, så derfor skal jeg helt lave være med at bruge position:relative kan jeg godt høre på det hele.
Men man skal heller ikke bruge position:absolute; vel?
Brug et indre element, som omkranser alle andre elementer, skitse:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- head-elementer --> <style type="text/css"> html,body{margin:0;padding:0;height:100%;} #site{height:500px;width:1000px;margin: 0 auto;position:relative;background-color:#a30;/*baggrund med for at det er synligt !-)*/} </style> </head> <body> <div id="site">
<!-- Alt andet indhold, også absolut positioneret, hvilket position:relative; sørger for virker -->
</div> </body> </html>
line-height betyder tekstens højde fra stedet hvor teksten starter til dens grundlinje, og det er bare en nem måde at flytte tekst på plads, en anden kunne være at sætte padding-top til f.eks. 5px !-)
-- og position:relative; er nødvendigt, hvis man vil have adgang til position:absolute; indenfor et bestemt område, da absolut position ellers beregnes ud fra browser-vinduets indre kanter !o]
-- absolut positionering er absolut brugbart, men man skal absolut(?) ikke bruge det til grundlæggende design, men som spændende krydderi !-)
"line-height betyder tekstens højde fra stedet hvor teksten starter til dens grundlinje, og det er bare en nem måde at flytte tekst på plads, en anden kunne være at sætte padding-top til f.eks. 5px !-)" --- (Perfekt, så forstår jeg det)
"-- og position:relative; er nødvendigt, hvis man vil have adgang til position:absolute; indenfor et bestemt område, da absolut position ellers beregnes ud fra browser-vinduets indre kanter !o]" --- (Det var den måde jeg valgte og løse hele problemer på, lavede min body, html om til at være position:relative. For så virkede det helt perfekt med at sætte de der forskellige bokse ind senere hen.) Men er det en forkert måde og gøre det på? min csskode ser sådeles ud nu:
Hmm okay. så du ville ikke lave det på den måde som jeg har gjort det? du ville hellere lave en div som du kaldte f.eks. #site og så skulle hele hjemmesiden være inde i dette div eller hva???
jamen det var da så lidt.. - Mig som takker fordi du gider bruge tiden på at hjælpe :)
Synes godt om
Ny brugerNybegynder
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.
