Problemer med css (footer og meny)

JV · 1. november 2005

Hei,

jeg holder på å lage en ny webside, og da har jeg som vanlig kommet borti problemer med IE.

Siden ser "fin" ut i Firefox men i IE ser den helt på tryne ut.

om noen kunne ha sjekket http://80.202.217.210/tpbb2/ i IE of Firefox, og så hjulpet meg å få (i første omgang) sentrert siden i IE, slik som den er i Firefox.

i andre omgang her jeg problem med menyen i IE. dere blir store mellomrom mellom linjene i menyen. Men det ser dere også om dere tester med IE...

håper noen kan hjelpe

Endret 4. november 2005 av JV

Torjus · 1. november 2005

Kommer ikke inn på siden her...

JV · 1. november 2005

Kommer ikke inn på siden her...

5091809[/snapback]

hmmm... snedig. Fikk en annen til å teste og da fungerte det fint...

gozzer · 2. november 2005

Anngående midstilling, så kan du prøve å legge til text-align: center; i body-elementet i CSS-fila.

Edit: jeg kom inn på siden din forresten, men det sa seg vel kanskje selv

Endret 2. november 2005 av gozzer

JV · 2. november 2005

Anngående midstilling, så kan du prøve å legge til text-align: center; i body-elementet i CSS-fila.

Edit: jeg kom inn på siden din forresten, men det sa seg vel kanskje selv

5093282[/snapback]

ok.. skal teste dette når jeg kommer hjem fra jobb.. takk så langt

Steinmann · 2. november 2005

hva skjer med å ikke ha noe docktype a?

og man kan ikke skrive

<li>dsfdsf</li>

<ul>

dsfdsf

</ul>

<li>

ul må i såfall ligge i en li

også sette display: block; på block elementer?

Rydd opp litt å prøv igjen

JV · 3. november 2005

hva skjer med å ikke ha noe docktype a?
og man kan ikke skrive

<li>dsfdsf</li>

<ul>

dsfdsf

</ul>

<li>

ul må i såfall ligge i en li

også sette display: block; på block elementer?

Rydd opp litt å prøv igjen

5094461[/snapback]

har rydda litt nå... og jeg fikk sentrert siden med text-align: center; i body...

men om dere ser på siden i IE nå, så prøver jeg å få til en footer... og den legger seg forsåvidt rett i IE, men så absolutt ikke i Firefox... opera har jeg gitt helt opp å få til... værre enn IE faktisk...

noen som ser hvordan jeg kan få footeren til å legge seg rett i Firefox? Og evt. hvordan jeg får menyen til å se bedre ut i IE (altså slik som den ser ut i Firefox)

JV · 4. november 2005

Ingen som har noe tips? Har har prøvd litt mer nå, men nå legger den seg ca midt på siden i IE og rett under headern i Firefox... er det noe galt med wrap'en min? går den ikke helt ned (height: 100% ?)

JV · 4. november 2005

Ok... skal gjøre det litt lettere her... kanskje noen ser noe som kan hjelpe

her er koden i cssfila:

* {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}

body {
color: #000000;
background-image: url(../gfx/mainbg.jpg);
background-repeat: repeat-y;
background-position: top center;
background-color: #445460;
font-family: Verdana, Helvetica, Arial, Sans-serif;
font-size: 1em;
height: 100%;
text-align: center;
}

p {
font-size: 0.8em;
text-align: justify;
line-height: 1.2em;
}

h1 {
color: #FFA200;
font-size: 1.1em;
text-align: left;
letter-spacing: 2px;
line-height: 1.7em;
}

h2 {
color: #FFA200;
font-size: 1em;
text-align: left;
}

a:link {
color: #FFA200;
text-decoration: none;
}

a:hover {
color: #FFA200;
text-decoration: underline;
}

a:visited {
color: #FFA200;
text-decoration: none;
}

a:active {
background-color: #FFA100;
text-decoration: none;
}

#wrap {
margin:0 auto;
width: 603px;
border: 0px;
height: 100%;
height: auto !important;

}

#header {
background: url(../gfx/header.jpg) no-repeat 0px top;
height: 178px;
width: 604px;
margin: 0 auto;
}

#footer {
clear: both;
background: url(../gfx/footer.jpg) no-repeat 0px bottom;
height: 10px;
width: 603px !important;
width: 604px;
}

#hoved-innhold {
padding-top: 0px;
padding-bottom: 9px;
}

#text {
width: 427px !important;
width: 443px;
padding-right: 6px;
padding-left: 6px;
padding-bottom: 6px;
float: right;

}

#meny {
text-align: left;
width: 151px !important;
width: 153px;
margin-left: 0px;
margin-top: 0px;
padding: 0px;
float: left;
font-size: 0.8em;
border-left: 1px #445460 solid;
border-right: 1px #445460 solid;
background-image: url(../gfx/menybg.jpg);
background-repeat: repeat-y;
background-position: top left;
}

#meny ul {
padding: 0;
margin: 0;
border-left: 0;
border-right: 0;
}

#menypunkt {
background-image: url(../gfx/arrow.gif);
background-repeat: no-repeat;
background-position: 3px .5em;
background-color: transparent;
font-weight: bold;
font-size: 11px;
}

#meny a {
text-decoration: none;
padding-left: 10px;
color: #FFA200;
display: block;
}

#meny a:hover {
background-color: #F0F0F0;
color: #000;
background-image: url(../gfx/arrow.gif);
background-repeat: no-repeat;
background-position: 2px .5em;
}

#submeny {
color: #000;
padding: 0px 0px;
text-decoration: none;
padding-left: 10px;
font-size: 11px;
}

#menyformat {
color: #000;
padding: 0px 3px;
font-weight: bold;
background-color: #FFA200;
}

og her er koden i index.php

<html>

<head> 

 <title>TPBB - Trondheim Politis Brassband</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" type="text/css" href="style/style.css">  
 
</head> 

<body> 
 <div id="wrap">  
 	<div id="header"></div>	
   <div id="hoved-innhold">    
   	<div id="meny">    	
   	<ul>
     <li id="menyformat">Meny</li>
     <li id="menypunkt"><a href="index.php">Hovedside</a></li>
     <li id="menypunkt"><a href="nyheter.php">Nyheter</a></li>
     <li id="menypunkt"><a href="Om.php">Om TPBB</a></li>
     <li id="menypunkt"><a href="konserter.php">Konserter og oppdrag</a></li>
     <li id="menypunkt"><a href="info.php">Informasjon til medlemmer</a></li>
     <li id="menypunkt"><a href="kontaktinfo.php">Kontaktinformasjon</a></li>
     <li id="menypunkt"><a href="skravlebok.php">Skravlebok</a></li>
     <li id="menypunkt"><a href="gjestebok.php">Gjestebok</a></li>
     <li id="menypunkt"><a href="lenker.php">Lenker</a></li>
   	</ul>      
   	</div>    	
   	<div id="text">    	
     <h1>Velkommen</h1>      
     <p>Første paragraf...</p>      
     <h2>Overskrift 2</h2>      
     <p>Andre paragraf...</p>    	
   </div>  	
 	</div>	
 	<div id="footer"></div>	
 </div>  	
</body>
 
</html>

Har lagt med ett bilde fra IE og ett fra Firefox.

Som dere ser i IE så ligger footern ca midt på siden.. (den skal selvfølgelig være neders). I Firefox ligger den rett under headern....

Her kan du se siden "live" http://80.202.217.210/tpbb2/

Endret 4. november 2005 av JV

Kim T · 4. november 2005

#footer {
clear: both;
}

Da vil den legge seg nederst på siden.....

Endret 4. november 2005 av kimthoma

JV · 4. november 2005

#footer {
clear: both;
}
Da vil den legge seg nederst på siden.....

5104975[/snapback]

takk for tipset.. det hjalp forsåvidt.. men det ligger fremdeles ikke neders... kan det være at min #wrap ikke går lenger ned? hvordan fixer jeg i såfall det?

har oppdatert koden i min forrige post nå.. og de 2 bildene er nye... sånn som det ser ut nå..

Endret 4. november 2005 av JV

Kim T · 4. november 2005

Hva skjer om du legger footer under wrap? slik som dette.

<h2>Overskrift 2</h2>      
    <p>Andre paragraf...</p>     
  </div>   
 </div> 
</div>   
<div id="footer"></div> 
</body>
</html>

JV · 4. november 2005

Hva skjer om du legger footer under wrap? slik som dette.
<h2>Overskrift 2</h2>      
    <p>Andre paragraf...</p>     
  </div>   
 </div> 
</div>   
<div id="footer"></div> 
</body>
</html>
5105529[/snapback]

Ikke noe som fungerte det nei. I IE skjedde det absolutt ingen ting. I Firefox flyttet den seg helt til venstre, akkurat like langt ned på siden som den er på det siste bildet...

Kim T · 4. november 2005

Skjønner egentlig ikke hvorfor du har "div meny'en" inni " div innhold". Hvorfor ikke ha dem i to forskjellige div og floate meny left og innhold right?

JV · 4. november 2005

... leste feil ... vent litt

Endret 4. november 2005 av JV

JV · 4. november 2005

har fjernet den nå.. hadde ingen invirkning.. så den var vertfall ikke nødvendig...

JV · 5. november 2005

Jeg har gitt opp footeren nå.. men nå er det bare menyen igjen...

Jeg fant ut at om jeg skriver menyen slik blir det bra i IE også.. men da ser jo koden helt ubrukelig ut... alt på en linje...

     <ul>
    <li id="menyformat">Meny</li><li id="menypunkt"><a href="index.php">Hovedside</a></li><li id="menypunkt"><a href="nyheter.php">Nyheter</a></li><li id="menypunkt"><a href="Om.php">Om TPBB</a></li><li id="menypunkt"><a href="konserter.php">Konserter og oppdrag</a></li><li id="menypunkt"><a href="info.php">Informasjon til medlemmer</a></li><li id="menypunkt"><a href="kontaktinfo.php">Kontaktinformasjon</a></li><li id="menypunkt"><a href="skravlebok.php">Skravlebok</a></li><li id="menypunkt"><a href="gjestebok.php">Gjestebok</a></li><li id="menypunkt"><a href="lenker.php">Lenker</a></li>
   </ul>

dette blir bra i opera og firefox:

     <ul>
    <li id="menyformat">Meny</li>
    <li id="menypunkt"><a href="index.php">Hovedside</a></li>
    <li id="menypunkt"><a href="nyheter.php">Nyheter</a></li>
    <li id="menypunkt"><a href="Om.php">Om TPBB</a></li>
    <li id="menypunkt"><a href="konserter.php">Konserter og oppdrag</a></li>
    <li id="menypunkt"><a href="info.php">Informasjon til medlemmer</a></li>
    <li id="menypunkt"><a href="kontaktinfo.php">Kontaktinformasjon</a></li>
    <li id="menypunkt"><a href="skravlebok.php">Skravlebok</a></li>
    <li id="menypunkt"><a href="gjestebok.php">Gjestebok</a></li>
    <li id="menypunkt"><a href="lenker.php">Lenker</a></li>
   </ul>

noen som har en løsning som gjør at jeg slipper å ha alt på en linje... vanskelig å vedlikeholde...

Problemer med css (footer og meny)

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer