Avatar billede TiHs Nybegynder
28. februar 2007 - 15:40 Der er 19 kommentarer og
1 løsning

css placering af div id

Hvis jeg nu har følgende:

<div id="banner">
<h1><span>Se min flotte hjemmeside!</span></h1>
</div>

Så kan jeg i min css placere den på følgende måde:

#banner {
position: absolute;
top: 0px;
left: 0px;
height: 38px;
width: 500;
margin: 0px;
background-color: black;
color: white;
}

Hvis jeg nu vil have den placeret vandret midt på siden, hvad skriver jeg så istedet ?
Avatar billede elskermad.dk Nybegynder
01. marts 2007 - 00:09 #1
html, body { width: 100%; height: 100% }
h1.banner { width: 400px; height: 38px; background-color: #000000; color: #FFFFFF; margin: 0px auto }

...
<body>
<h1 class='banner'>Se min flotte hjemmeside!</h1>
</body>
...
Avatar billede TiHs Nybegynder
01. marts 2007 - 15:29 #2
hvor skriver jeg så at den skal centreres på siden ?
Avatar billede skovge Novice
02. marts 2007 - 11:52 #3
Du laver følgende i din css:

#center {   
padding:0px;           
width:500px;
height:38px;
margin-left:-250px;
position:absolute;
left:50%
}

Hvis du også vil centrere den vertikalt så tilføjer du:
top: 50%

I din html indkapsler du så alt indhold på din side i din <div id="center"></div>  således:

<div id="center">

<div id="banner">
banner her
</div>

<div id="evt. andet indhold her">
Bla bla bla
</div>

</div>

(husk at hvis du putter mere indhold ind skal du selv ændre heigth og width på center div'et)
Avatar billede TiHs Nybegynder
06. oktober 2008 - 16:49 #4
Hey, send et svar så jeg kan lukke denne ...
Avatar billede skovge Novice
06. oktober 2008 - 18:12 #5
Svar  ;-)
Avatar billede TiHs Nybegynder
07. oktober 2008 - 22:36 #6
Det var en kommentar ... prøv igen :o)
Avatar billede skovge Novice
08. oktober 2008 - 07:19 #7
Ja hov, flot.  :-)

Så er der svar.
Avatar billede olebole Juniormester
11. oktober 2008 - 17:34 #8
<ole>

I stedet for at bruge et 'hack', kunne man jo også bare bruge den CSS-property, der er beregnet til centrering af HTML-elementer:

#center {
    padding:0px;           
    width:500px;
    height:38px;
    margin: 0 auto;
}

Ifølge CSS skal værdien 'auto' for en margin, fordele den overskydende plads mellem de sider, der har fået tildelt værdien. Sættes både højre- og venstremargin til 'auto', centeres elementet derfor  ;o)

/mvh
</bole>
Avatar billede skovge Novice
11. oktober 2008 - 18:02 #9
>>olebole

Burde den kode egentlig ikke centrere vertikalt også så?
Avatar billede olebole Juniormester
11. oktober 2008 - 21:03 #10
Nej, kun horisontalt  =)
Avatar billede skovge Novice
11. oktober 2008 - 23:12 #11
Ja, jeg kan godt se at den kun går det horisontalt - undrede mig bare over hvorfor den egentlig ikke gjorde det vertikalt også?

Hvad bruger du så til det?
Avatar billede olebole Juniormester
11. oktober 2008 - 23:16 #12
Det gør jeg ikke. Jeg designer til teknologien  ;o)
Avatar billede skovge Novice
12. oktober 2008 - 09:49 #13
Jooooooo, men nu er der jo bare nogen gange de der irriterende folk der gerne vil bestemme hvordan det skal se ud - kunder, du ved.    ;-)
Avatar billede keysersoze Ekspert
12. oktober 2008 - 13:05 #14
så må man enten forklare hvad teknologien kan håndtere og ikke håndtere - eller snyde sig ud af det; http://web-dev.dk/post/2007/12/Absolut-centrering-af-hjemmeside-med-layers.aspx
Avatar billede skovge Novice
12. oktober 2008 - 13:15 #15
>>keysersoze
Hø - ved ikke med dig, men mine kunder er sgu tit ligeglade med hvad teknologien kan håndtere og ikke kan håndtere, de ved bare hvordan de vil have det til at se ud - og så må man jo trylle.    :-)

Det du linker til er jo det jeg selv har givet som svar på dette spørgsmål længere oppe i tråden - så deeeet!!?  ;-)
Avatar billede skovge Novice
12. oktober 2008 - 13:19 #16
BTW - det fungerer desværre ikke ens i alle browsere - så når man får det til at spille i ex.vis firefox 2/3 og ie7 så bloater det i ie6 - når man så får det rettet giver det problemer i opera eller mac ie osv. - har endnu ikke fundet noget der fungerer 100% på alle platforme og i alle browsere.
Avatar billede keysersoze Ekspert
12. oktober 2008 - 17:03 #17
problemet med at forsøge at trylle er bare at kunden ikke nødvendigvis får hvad de vil have - så vil man på forhånd lægge kortene på bordet og sige hvad teknologien tillader eller vil man lave en hovsa-løsning der kun virker nogle gange?

Det forslag du giver er ikke det samme som i linket - så deeeeet.
Avatar billede olebole Juniormester
12. oktober 2008 - 19:48 #18
Du _kan_ ikke trylle - og det er ikke fair at lade somom, selvom kunden forventer det. Derfor må man holde fast i, hvad der kan lade sig gøre, og hvad der ikke kan - ellers ender man med at tage kunden i røven (undskyld, mit fransk).

Hvis det betyder, man mister kunden, er man blot sluppet af med en potentiel utilfreds kunde. Beholder man derimod kunden, har man en tilfreds kunde. Utilfredse kunder har man alligevel ikke råd til at have i det lange løb.

Det er en misforståelse, hvis du tror, du tjener kundens interesser ved at snakke ham efter munden. Du gør i virkeligheden det stik modsatte ... i forsøget på at pleje dine egne!  ;o)
Avatar billede olebole Juniormester
12. oktober 2008 - 19:54 #19
- som jeg engang fortalte en bankrådgiver:
    "Din opgave er at give mig råd - men det gør du ikke. Du giver mig derimod råd!"

Hint: De to versioner af ordet 'råd' skal udtales forskelligt - og med deraf følgende fundamental forskel i betydningen  ;o)
Avatar billede olebole Juniormester
12. oktober 2008 - 20:15 #20
skovge >> I øvrigt passer det ikke, hvad du skriver om, at koden ovenfor ikke duer i IE6. Det funker fint i FF, Opera og IE - både 6 og 7. Jeg er ikke 100% sikker på Safari/Mac, men jeg formoder, det også virker der, da der jo er tale om helt basal CSS, som har været bredt understøttet i årevis.

Har du problemer med at få koden til at virke, er jeg sikker på, du laver andre fejl. Hvis du laver et eksempel, skal jeg gerne finde ud af, hvilke.

Det betyder dog ikke, der ikke er problemer med teknikken. Man skal således på forhånd kende elementets dimensioner - hvilket jo ofte er umuligt
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
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

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