HTML/CSS design - Problemer med element som lever sitt eget liv

affe90 · 1. januar 2008

God aften, kjære forumbrukere. Mitt navn er Jørgen Pedersen og jeg er ny her. Jeg har studert forumet en del ganger før og det virker som er kjempefint forum. Til topic:

Når har det slik at jeg holder på med produksjon av en webside med CSS/HTML. Siden ser så utrolig smooth ut i IE, men med en gang jeg starter den i FireFox så er menyen/navigasjonen på et annet sted og jeg får ikke flyttet den. Hvorfor er det sånn? Hvordan får jeg fikset problemet? Om dere ser her:

Slik ser det ut i IE

Slik ser det ut i FireFox

HTML-kode:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>affe design - Om meg</title>
</head>
<body>
<div id="main">
<div id="header">

</div>


<div id="text">
<h1>Om meg</h1>
<div id="lipsum"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus massa, ullamcorper quis, nonummy at, viverra vel, lorem. Praesent felis lorem, convallis eu, viverra eu, nonummy ut, lectus. Curabitur vitae leo a nunc placerat elementum. Suspendisse tincidunt vehicula velit. Etiam turpis. Donec gravida nulla vel augue. Ut convallis tincidunt urna. Quisque dapibus porta urna. Aliquam mattis, diam vel scelerisque euismod, orci eros imperdiet dui, nec blandit mi augue eu est. Donec pulvinar. Morbi accumsan porta neque. Curabitur nec nunc. Fusce sed tellus a eros elementum porttitor. Aenean nulla justo, rutrum non, feugiat at, consequat non, nunc. Mauris tincidunt, lacus sit amet vestibulum sagittis, ligula felis dignissim lacus, ac fringilla augue odio et pede. Vivamus quis metus. Maecenas justo magna, feugiat eu, elementum a, placerat vel, purus. Morbi nulla. Nullam dictum nibh vitae tortor. Donec nec ligula tristique eros scelerisque mattis. </p>


<hr style="width:300px;" size="1" align="left" />



</div>
</div>

<div id="meny">
<h3>Navigasjon</h3>
<ul>
<li><a href="index.html">Forsiden</a></li>
<li><a href="aboutme.html">Om meg</a></li>
<li><a href="nyheter.html">Nyheter</a></li>
  <li><a href="portfolio.html">Portefølje</a></li>
<li><a href="blogg.html">Blogg</a></li>
<li><a href="lenker.html">Lenker</a></li>
<li><a href="kontakt.html">Kontakt</a></li>		
</ul>
</div>

</div>
<div class="end"></div>
</body>
</html>

CSS-kode:

body {
background:url(bg.gif);
text-align:center;
font-size:15px;
margin: 0px auto;
font-family:Verdana,;
}

.end {
clear: both;
}

a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

#header {
margin:5 px auto;
background:#1E7BA8;
background:url(banner.gif);
width:750px;
height:150px;
margin-bottom:10px;
}

#main {
background:#FFFFFF;
padding:5px;
padding-top:0px;
text-align:left;
margin: 0px auto;
width:750px;
height:100%;
border-right:5px solid #68879F;
border-left:5px solid #68879F;
}
#text {
float:right;
padding-left:0px;
padding-right:30px;
text-align:left;
margin: 0px auto;
width:575px;
border-right:1px dashed #CCCCCC;

}
#text h1 {
font-size:14px;
font-weight:normal;
background:#E9F5F8;
padding:5px;
border:1px solid #999999;
width:250px;
height: 27px;
color:#256F9A;
font-weight:bold;
}

#meny {
padding-right: 29px;
text-align:left;
float:right;
padding-left: 0px;
}
#meny h3 {
background:#EFF5F8;
border:1px solid #999999;
padding:5px;
color:#256F9A;
font-size:14px;
text-align:center;
width:125px;
height: 27px;
}

#meny ul {
padding-left: 5px;
margin: 0;
list-style:none;
}
#meny li {
line-height:25px;
font-size:14px;
}
#meny li a {
color:#4A83A2;

}

Om noen skjønner problemet å finner ut av det hadde jeg blitt evig takknemmelig. Begynner å få små spasmer og aggresjonsanfall siden jeg ikke får det til. Makan til tull.

Mvh

Jørgen

Endret 1. januar 2008 av affe90

Kim T · 1. januar 2008

hvorfor floater du både #text og #meny til right? En av dem burde vel strengt tatt ha blitt floatet til left. Eller du kan floate begge til left og sette width på dem. Pass på at disse ikke overstiger 750px som du har valgt som bredden på siden din. Du må huske å trekke fra marginer som du eventuelt bruker.

EDIT: glemte å si at når du floater begge til samme retning. Så må du legge margin-left på f.eks #text tilsvarende bredden på #meny.

Kim...

Endret 1. januar 2008 av Kim T

Merko · 1. januar 2008

Heisann.

Har ikke så mye peiling jeg, men her står det diverse eksempler som gjør at det ikke funker i Firefox:

http://w3schools.com/css/

Les gjennom der så finner du kanskje feilen din

1¤: Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

2¤: Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

3¤: Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

4¤:

Endret 1. januar 2008 av vbPro

dottenno · 3. januar 2008

Som Kim T var inne på, så er nok den beste løsningen her å floate #meny og #text til venstre, i stedet for til høyre. Du må da gi #meny fast bredde, og gi #text margin-left lik bredden til #meny. Dessuten må du da bytte plass på dem i HTMLen, slik at #meny kommer først.

Tungt forklart, men det går fortere enn å skrive koden . Håper det går seg til .

Logg inn

HTML/CSS design - Problemer med element som lever sitt eget liv

Anbefalte innlegg

affe90

Lenke til kommentar

Videoannonse

Kim T

Lenke til kommentar

Merko

Lenke til kommentar

dottenno

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer