höjd problem

13 svar · 681 visningar · startad av smileenergy 24 feb. 2007

smileenergyMedlem sedan jan. 200781 inlägg

Frågan24 feb. 2007 12:09#1

hej, jag har div som jag har en meny i horisontalt men nu är det som så att diven +menyn åker ned 20px från där den sitter om jag inte har något i diven.. vad beror detta på. Samma problem uppstår om jag t.ex. placerar en h1 tagg på texten i den diven.

#submenu { width:634px; height:20px; background:#ccc;}
#submeny li{display: inline; list-style-type: none; height:20px;}
#submeny a:link{color: #000000; text-decoration: none;}
#submeny a:visited{color: #000000; text-decoration: none;}
#submeny a:hover{color: #0099FF;}

zcorpanMedlem sedan dec. 20042 245 inlägg

24 feb. 2007 13:43#2

Det har att göra med kollapsande marginaler. Jag tror jag har försökt förklara konceptet tidigare så testa söka på det. :)

smileenergyMedlem sedan jan. 200781 inlägg

24 feb. 2007 16:49#3

tack!
det var det men då kanske du även kan förklara varför en meny som denna hamnar så långt åt höger, jag vill att texten ska börja direkt och inte ha en massa tomrum till vänster. http://www.webdesignskolan.se/css-meny/exempel/meny5.htm
sen undrar jag om det finns något enkelt och smart sätt att centrera en rad text vertikalt i en div.

edit: det blev rätt i firefox och opera med de kollapsade kolumnerna men i ie blev det fel, i ie var det rätt från början men blev fel nu... kan man t.ex. göra en if sats eller något som kollar om det är ie så att den får speciella egenskaper?

zcorpanMedlem sedan dec. 20042 245 inlägg

24 feb. 2007 17:29#4

#meny { margin-left:0; padding-left:0; }

Om du vet höjden på diven, sätt samma radhöjd så blir din rad centrerad vertikalt.

div#foo { height:300px; line-height:300px; }

Du vill inte använda "if-satser", det är bättre att använda samma kod som fungerar överallt (till den mån det går). Visa din kod så kan vi se vad som är fel.

smileenergyMedlem sedan jan. 200781 inlägg

24 feb. 2007 17:56#5

#submenu { width:634px; height:22px; margin:-16px 0; background:#ccc;}
#subtitle { width:634px; height:22px; line-height:22px; margin:16px 0; background:url('pic/menu_bg.jpg');}

Där har du koden, jag fick dock inte line-height att fungera heller men menyn fungerar nu.

zcorpanMedlem sedan dec. 20042 245 inlägg

24 feb. 2007 17:58#6

Kan du visa all kod, inklusive HTML? Och beskriva exakt vad det är som blir fel?

smileenergyMedlem sedan jan. 200781 inlägg

24 feb. 2007 21:03#7

här får du htmlkoden

<div id="submenu">
<ul id="submeny">
    <li class="small"><a href="News.aspx">Lägg till </a></li>| <li class="small"><a href="SelectNews.aspx">Ändra & Radera</a></li></ul></div>
<div id="subtitle"><h1 class="white bold textindent">Lägg till Nyheter</h1></div>
<div id="subcontent">
    <asp:Label ID="lblStatus" runat="server" CssClass="red"></asp:Label><br />
    Rubrik:<br />
    <asp:TextBox ID="txtSubject" runat="server" Width="600px"></asp:TextBox><br />
    Nyhet:<br />
    <asp:TextBox ID="txtNews" runat="server" Height="200px" TextMode="MultiLine" Width="600px"></asp:TextBox><br />
    <asp:Button ID="btnSave" runat="server" Text="Spara nyheten" OnClick="btnSave_Click" /></div>

det som händer är att i ie hamnar divarna #submenu och #subtitle hamnar 16px för högt i ie medan de hamnar på rätt plats i firefox och opera. Även texten i #subtitle som skulle centreras vertikalt med hjälp av line-height fungerar inte utan hamnar högst upp...
tar jag bort margin på #submenu och #subtitle så blir det stora mellanrum mellan dem istället i firefox och opera medan det ser bra ut i ie.

zcorpanMedlem sedan dec. 20042 245 inlägg

24 feb. 2007 21:45#8

Har du någon doctype, och i så fall, hur ser den ut?

smileenergyMedlem sedan jan. 200781 inlägg

24 feb. 2007 23:37#9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

zcorpanMedlem sedan dec. 20042 245 inlägg

25 feb. 2007 00:23#10

#submenu ul { margin:0; }
#subtitle h1 { margin:0; }

smileenergyMedlem sedan jan. 200781 inlägg

25 feb. 2007 00:34#11

tack, nu verkar de ligga på rätt plats :)
bara line-height kvar och reda ut då som inte vill fungera. som du ser är min height på #subtitle diven 22px liksom line-height på den.

zcorpanMedlem sedan dec. 20042 245 inlägg

25 feb. 2007 01:26#12

Det är då centrerat för mig. Testa med olika font-size på h1 så ser du att den är centrerad vertikalt (eller det är det för mig iaf). Annars är det bara ändra värdet på line-height tills det blir som du vill ha det.

smileenergyMedlem sedan jan. 200781 inlägg

25 feb. 2007 10:36#13

Det fungerade om jag gjorde en h1 till diven:
#subtitle h1 { margin:0; line-height:22px;}
men inte om jag la den direkt i #subtitle diven, hur kommer detta sig?

zcorpanMedlem sedan dec. 20042 245 inlägg

25 feb. 2007 11:15#14

'line-height' borde ärvas så det måste vara nåt annat i din stilmall; har du en 'font'-egenskap som gäller för h1 nånstans? ('line-height' ingår som egenskap i shorthand-egenskapen 'font'.)