height problems, skjønner ingenting!

[makeway] · 23. mai 2005

Hei!

Alle mine css sider har dette altid vært mitt største problem. Tekst og meny overlapper main diven!

Det ser ut som at bare explorer skjønner åssen det skal se ut (nå snakker jeg bare om main diven)

Opera og firefox er litt mer tricky!

Er det noen som kan hjelpe meg med dette?

CSS

/* Skeleton  */
body {  
   background: #fff url(images/bg.png) repeat-x fixed top center;
background-color: #CFC3B0;
margin: 0px;
padding: 0px;
}

#wrapper {
   width: 592px;
   margin: 0 auto;
   background: #FFFFFF;
   border-left: 10px solid #FFFFFF;
   border-right: 10px solid #FFFFFF;
   border-bottom: 10px solid #FFFFFF;
height: auto;
   }

#main {
width: 441px;
background: transparent;
text-align: left;
float: left;
height: auto;
margin-top: 3px;
}


#header {
   background-image:url(images/header.jpg);
   width: 612px;
   height: 309px;
   margin: 0 auto;
   }

 
#headcon{
   background: transparent;
   width: 100%;
   margin: 0;
   }

#meny {
   background: #FFFFFF;
   width: auto;
   height: auto;
   float: right;
   }

#arkiv {
   width: 120px;
   margin-top: 10px;
   background: #C2B6A2;
   }

#copyright {
   background: #FFFFFF;
   width: auto;
   height: auto;
   margin: 0 auto;
text-align: center;
   }

.bl {background: url(images/bl.gif) 0 100% no-repeat #C2B6A2; width: 291px; float: left}
   .tr {background: url(images/tr.gif) 100% 0 no-repeat; padding: 10px; float: right}
   .clear {font-size: 1px; height: 1px}

.bll {background: url(images/bl.gif) 0 100% no-repeat #C2B6A2; width: 291px; float: right}
   .trr {background: url(images/tr.gif) 100% 0 no-repeat; padding: 10px; float: right}
   .clear {font-size: 1px; height: 1px}

/* Navigation */
#navcontainer { 
   margin-top: 10px;
margin-left: 0px; 
   background: #C2B6A2;
   }

#navcontainer ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
font-weight: bold;
   }

#navcontainer li { 
   margin: 0;
   }

#navcontainer a {
   display: block;
   color: #333;
   background-color: transparent;
   width: 100px;
   padding: 2px 10px;
   text-decoration: none;
   font-size: 9pt;
font: "Century Gothic";
   }

#navcontainer a:hover {
   background-color: #fff;
   color: #2A2A2A;
   border-right: 9px solid #8AA800;
   padding: 2px 1px 2px 10px;
   }

#navcontainer ul ul {
   margin-left: 0px;
   padding: 0;
   list-style-type: none;
   }

#navcontainer li li a {
   display: block;
   color: #333;
   background-color: transparent;
   width: 110px;
   padding: 1px;
   margin: 0;
   border-top: none;
   border-left: 1px solid #aaa;
   text-decoration: none;
   font-size: 8pt;
   }
/* +++ Text & News +++ */

h1 {    
   font-family: "Trebuchet MS";
font-size: 2em;
color: #8AA800;
padding: 0px 0px;
   margin: -1.5px;
  }

h2 {
font-size: 11px;
   color: #004A5F;
   background-color: transparent;
   font-family: "Trebuchet MS";
   margin: 1px;
   }

h3 {
   padding: 2px 4px;
   margin: 0px;
   font-size: 28px;
   color: #B7DE00;
   font: "Trebuchet MS";
   }

a {
text-decoration: none;
color: #B7DE00;
   font-size: 11px;
   background-color:transparent;
   font-family: "Trebuchet MS";
   }

strong {
font-style: italic;
text-transform: uppercase;
   }

pre {
   font-family: "Trebuchet MS";
   color: #B7DE00;
   font-size: 11px;
   background-color: #fefefe;
padding: 2px 4px;
   margin: 0px;
   }

p {
   font-family: "Trebuchet MS";
font-size: 12px;
letter-spacing: 0.0em;
word-spacing: 0.1em;
line-height: 1.5em;
text-align: left;
color: #666666;
   }

h4 {
   color: #333;
   background-color: transparent;
   width: 100px;
   padding: 2px 10px;
   font-size: 9pt;
font-family: "Century Gothic";
   }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Thinkstyle.</title>
<style type="text/css" media="all">@import "stylesheet.css";</style>
</head>

<body>
<div id="header"></div>
<div id="wrapper">
<div id="headcon"><div class="bl">
 <div class="tr">
   <p>Thinkstyle.no er den digitale kolleksjon av mine kreative tiltak og tanker. Jeg er Alexanader Christoffersen, en freelance designer og illustratør fra skandinavia.</p>
   </div>
</div>
<div class="clear">
</div>
<div id="headcon"><div class="bll">
 <div class="trr">
   <p>Thinkstyle.no er den digitale kolleksjon av mine kreative tiltak og tanker. Jeg er Alexanader Christoffersen, en freelance designer og illustratør fra skandinavia.</p>
   </div>
</div>
<div class="clear">
</div>
</div>
<div id="main">
<?PHP
include("fork/show_news.php");
?></div>
 <div id="meny">
 <div id="navcontainer">
   <ul id="navlist">
     <li id="active"><a href="#" id="current">ROOT</a></li>
     <li id="active"><a href="#" id="current">ABOUTME</a></li>
     <li id="active"><a href="#" id="current">THOUGHTS</a></li>
     <li id="active"><a href="#" id="current">SERVICES</a></li>
     <li id="active"><a href="#" id="current">PORTFOLIO</a></li>
     <li id="active"><a href="#" id="current">GALLERIES</a></li>
     <li id="active"><a href="#" id="current">GUESTBOOK</a></li>
     <li id="active"><a href="#" id="current">CONTACTME</a></li>
   </ul>
</div>
<div id="arkiv"><h4>MAKEWAY<br>MAKEWAY<br>MAKEWAY</h4></div>
 </div>
</div>
</div>
</body>
</html>

Takk for alle innlegg!

phax · 23. mai 2005

prøv og legg til noe slik:

min-height : 100%;

height: auto !important;

height: 100%;

i body og wrapper, tror det er noe slikt jeg har måtte bruke for og få det til..

[makeway] · 23. mai 2005

har nå lagt den i body og wrapper, men ingenting skjedde !?

phax · 23. mai 2005

hm, rare greier. da vet jeg ikke. men sikkert mange andre flinke hoder her som kan hjelpe deg.

DevN · 23. mai 2005

Høyde med CSS er jo et rent hel**** - for meg i hvertfall.

Jeg prøver å "floate" i et skjema, slik at jeg får tekst og tekstfelter på hver sin side. Men det går over footer og alt, div-boksen skjemaet ligger i følger heller ikke med.

Siden skjemaet er rotet inn i masse PHP-scripts og sånt, så kan jeg ikke publisere det. Men satte sammen et "lorem ipsum"-eksempel med floating, i Opera og FF følger ikke ytterste div-boksen resten.

Hvordan kan det løses? < Link >

Drømmemannen · 23. mai 2005

Prøvd å legge til <div style="clear:both"></div> under div-ene som flyter?

Edit: Eventuelt med noe innhold og display:none eller visibility:hidden for å skjule innholdet

Endret 23. mai 2005 av balletryne

joe45 · 23. mai 2005

Ta en validering av siden din. Fjern/omdefiner div'er som er brukt flere ganger (bla.a er div headcon brukt to ganger)i html/css doumentet ditt. (En div skal kun brukes en gang) Det er alltid lurt å rydde opp i slike feil.

Hvis du vil ha en hvit bakgrunn som strekker 100% av siden , kan du lage et hvit bilde 2-3px høyt og med den bredden du ønsker. Bildet plasserer du som bakgrunn i wrapper og repeterer det langs y aksen (altså nedover). Dette blir på samme måte som du har som du har gjort i body hvor du har repetert langs x aksen (altså bortover)

Les om 100% høyde på f.eks www.paradoxia.org

ingveh · 23. mai 2005

En div skal kun brukes en gang

Feil på siden er at han har brukt id istedenfor class.

Bytter han ut

<div id="headcon">

med

<div class="headcon">

og i css-filen bytter om til

.headcon

vil siden validere

Man må selvsagt gjøre dette med active og current også...

Endret 23. mai 2005 av <ingve>

[makeway] · 23. mai 2005

Takk for hjelpen! Paradoxia, THANK YOU!

EDIT: Det funka ikke

Endret 23. mai 2005 av [makeway]

DevN · 23. mai 2005

Jeg løste ikke mitt problem på en så akseptabel måte:

Feilen.

Ikke akseptabel løsning.

Løsningen krevde en "float: left" på containeren.

Blir jo bare surr hvis containeren skal være midtstilt.

[makeway] · 23. mai 2005

Noen som kan hjelpe DevN?

DevN · 23. mai 2005

Ok, jeg klarte å fikse en akseptabel løsning ved å ha to div-bokser rundt boksene som "floater".

Slik som dette.

Skal ikke mye til for å bli forvirra av alle boksene, så hvis noen har en annen løsning: Spytt ut!

[makeway] · 23. mai 2005

åssen da?

legg ut css

ingveh · 23. mai 2005

Kildekode er en fin ting

<style type="text/css">
<!--
.divbox { margin: 0 auto; width: 600px }
.divbox2 { border: 3px solid #000000; float: left; padding: 3px; width: 600px }
#left {  border: 1px solid #000000; float: left; width: 270px }
#right { border: 1px solid #000000; float: right; width: 270px }
-->
</style>

Endret 23. mai 2005 av <ingve>

[makeway] · 23. mai 2005

<ingve> - ja det ser veldig fint ut men hva er det ? :blush:

EDIT: siden min ser sånn ut akkurat nå.... main diven liker meg rett å slett bare ikke!

Endret 23. mai 2005 av [makeway]

DevN · 23. mai 2005

,23/05/2005 : 22:54] <ingve> - ja det ser veldig fint ut men hva er det ?

Hva i all verden snakker du om?

På eksemplet jeg linket til, trykker du "Vis - Kildekode" eller "View - Source".

EDIT: Siden ser jo bra ut nå, unntatt litt under midten i IE, der body-bakgrunnen ikke er smooth.

Endret 23. mai 2005 av DevN

[makeway] · 23. mai 2005

argh.... sorry - skjønte nå :w00t:

Noen må vel ha løst dette problemet?

Endret 23. mai 2005 av [makeway]

Drømmemannen · 23. mai 2005

Her er løsningen jeg foreslo litt lengre oppe: test.html

DevN · 23. mai 2005

Her er løsningen jeg foreslo litt lengre oppe: test.html

Ahh, takk. Trodde den var til han andre karen.

Har dessuten aldri forstått helt hvordan "clear" fungerer.

Skal se om Google kan gjøre meg litt smartere på det området.

EDIT: Leif.

Endret 23. mai 2005 av DevN

Drømmemannen · 23. mai 2005

clear:both sier bare at diven ikke vil ha noe flytende på noen av sidene sine, så den vil dermed legge seg under alt som flyter og dermed trekke ned wrapperen.

height problems, skjønner ingenting!

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

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer