højden på siden i %

prøv at sætte body, html med height: 100%;

body, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
   
}
.layout {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 700px;
    height: 500px;
    text-align: center;
    background-position: center;
   
           
}
.top {
    width: 700px;
}
.menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 20px;
    width: auto;
    background-color: #0603AA;
    color:#0603AA;
    text-align: center;
   
}
.middle {
    background-color: #F4F4EF;
    width: 700px;
   
           
}
.footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    text-align: center;
    background-color: #F4F4EF;
   
}

Ups.. glemte at sætte heigh.. når du sætter height i % er det i forhold til størrelsen på de elementer dit element er i.. hvis html og body er 0px høj vil din iframe også blive 0px høj..

body, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    height: 100%;
   
}
.layout {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 700px;
    height: 500px;
    text-align: center;
    background-position: center;
   
           
}
.top {
    width: 700px;
}
.menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 20px;
    width: auto;
    background-color: #0603AA;
    color:#0603AA;
    text-align: center;
   
}
.middle {
    background-color: #F4F4EF;
    width: 700px;
   
           
}
.footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    text-align: center;
    background-color: #F4F4EF;
   
}

det giver kun en lille ændring.
men når jeg laver middel om til 80 % sker det samme.

har lavet min css om nu så den hedder

body html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    height:100%;

Du skal sætte height: 100%; på din menu class og bare glemme height på html og body.

<ole>

Når et elements højde sættes i procent, skal browseren beregne højden udfra det omkransende elements højde - som derfor eksplicit skal være sat. Ligger din iframe f.eks. i et div med klassen 'middle', skal dette element altså også have sat en højde

/mvh
</bole>

når jeg sætter min height til 100% i min .middle så bliver den stadig kun 1 cm høj
det er en iframe som jeg prøver at styre højden på...

kvadratrodenaf1 >> Nej, nu må vi lige holde tungen lige i munden  ;o)

Hvis 'menu' ligger i body-elementet, skal både menu-, body- og html-elementerne have sat en højde på 100% ... ellers er der ikke noget at beregne de 100% udfra  :)

mr_y >> Du er nødt til at lægge et link. Ellers bliver det en længere quiz, hvis vi skal finde udaf, hvordan din markup hænger sammen  :)

siden hedder som overstående
www.ikhono.com

Olebole>> Der er et link i toppen.. Havde overset at table elementet er i %.
html, body og td skal derfor have sat height til 100%.

/1.

samt self middle from er din ifram.

Og med td mener jeg Menu classen.

ups ... jeg havde til gengæld overset linket ... sorry  :)

mr_y >> Som kvadratrodenaf1 helt korrekt skriver, så skal alle omkransende elementer i kæden fra iframe til html-element have sat en højde - når de alle sættes i procent  ;o)

Arghh.. gør jeg mig overhoved forståelig med alle de slåfejl og retten på mig selv?

body, html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0px;
    height: 100%;
   
}
.layout {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 700px;
    height: 500px;
    text-align: center;
    background-position: center;
   
           
}
.top {
    width: 700px;
}
.menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: 100%;
    width: auto;
    background-color: #0603AA;
    color:#0603AA;
    text-align: center;
   
}
.middle {
    background-color: #F4F4EF;
    width: 700px;
    height: 100%;
   
           
}
.footer {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    text-align: center;
    background-color: #F4F4EF;
   
}

det virker stadig ikke.
Når jeg retter i min css fil så bliver siden 1 cm høj.
prøver lige at tage et skjærm dump.
kommer med et link til filen om lidt..

MR_Y

se billed af hjemmesiden når jeg laver

}
.middle {
    background-color: #F4F4EF;
    width: 700px;
    height: 100%;

på www.ikhono.com/index.jpg

<!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>Dansk Design. Karen hansen design. Danske Design Produkter</title>

<META name="description" content="Dansk Design.  Dansk design produkter. Unique Danish Design collection.">
<META name="keywords" content="dansk design, Unique Danish Design,unikt dansk design,dansk,design,designer,Ikhono,ikono,ikone,karen,lund,hansen,Trådkurve,wirebaskets,telefon,wire,telefonwirebasket,basket,telefonwire,gave firma,dinner,ware,plates,glas,zebra,exhibition,chokolade,online,webshop,bestilling,firmagaver,firma gaver,vin,julegaver, jule gaver, gaver,">

<link href="css/styles.css" rel="stylesheet" type="text/css"></head>

<body>

<div id="cont">

<div id="top"><a href="index.htm"><img src="img/hjemmesideimg/KHD2.jpg"></a><div id="topmenu">-<a  href="startdk.htm" target="ifmain">Hjem</a> ---- <a  href="nyhederdk.htm" target="ifmain">Nyheder</a> ---- <a  href="kontaktdk.htm" target="ifmain">Kontakt</a>---- <a href="omkhddk.htm" target="ifmain">OmKHD</a>---- <a href="produkterdk.htm" target="ifmain">Produkter</a>----<a href="NERMESTEFORHANDLER.HTM" target="ifmain">Forhandler </a></div></div>

<iframe src="startdk.htm" name="ifmain" id="main" scrolling="yes"></iframe>

<div id="footer">&copy;&nbsp;Karen Hansen Design &reg;  | <a href="kontakt.htm" title="E-Mail" onMouseOver="this.href='mai' + 'lto:' + 'm%61il' + '@' + 'k%61ren%68a%6Esendes%69gn.dk'" onFocus="this.href='mai' + 'lto:' + 'm%61il' + '@' + 'k%61ren%68a%6Esendes%69gn.dk'"> E-Mail </a><a href="indexuk.htm" id="flag"><img src="img/hjemmesideimg/flaguk.gif" alt="English" width="27" height="20"></a><a href="http://www.statcounter.com/" target="_blank"><img src="http://c15.statcounter.com/counter.php?sc_project=1533508&amp;java=0&amp;security=957ff1ff&amp;invisible=1" alt="website free tracking" border="0"></a></div>

</div>

</body></html>








styles.css

html,body{
  margin:0px;padding:0px;height:100%;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
}

html{overflow:auto;}
body{background:#f4f4ef;}

a img{border:0px;}

#cont{
  width:700px;
  margin:0px auto;
  height:100%;
}


#top{
  margin-top:20px;
  height: 10%;
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  overflow:hidden;
}

#topmenu a{
  font-size: 13px;
  text-decoration:none;
  background:transparent;
  color: #fff;
}

#topmenu a:hover  {
  font-weight: bold;
}

#main{
  height:80%;
  width: 700px;           
}

#footer{
  margin-top:5px;
  background: #f4f4ef;
  font-size: 9px;
  text-align: center;
}

#flag{margin-left:20px;}

Er struktur og css ok? ... Jeg ved godt jeg har rodet lidt :D

rettelser:

#top{
  margin-top:20px;
  height: 10%;
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  overflow:hidden;
}


rettes til:


#top{
  height: 10%;
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  overflow:hidden;
}

#topspc{height:20px;}






og i html markup:

<div id="cont">

rettes til:

<div id="cont">
<div id="topspc"></div>



... (glemte at checke Firefox)

Regner med at mellemrummet ikke skulle være i toppen?
... Ellers er det 18/08-2006 21:09:44 med denne css
rettelse istedet for ovenstående:

slet margin-top:20px; inde i #top css delen
og øg evt. margin-top:5px; inde i #footer css delen til du er glad :o)

Edit: Regner med at mellemrummet [ordet, ikke, skulle ikke have stå i ovenstående indlæg på denne linje] skulle være i toppen?

jeg er godt nok rundforviret men prøver lige at copy paste det du har lavet og ser på det med det samme...  :)

18/08-2006 21:09:44 sammen med 18/08-2006 21:20:50
Giver siden som den ser ud nu ...

18/08-2006 21:09:44 sammen med 18/08-2006 21:27:31
Giver siden som den ser ud nu - men uden mellemrum i toppen ...

... Sig lige til hvis jeg skal rette 18/08-2006 21:09:44 så rettelsen i css delen er inkluderet - og hvis jeg skal så sig lige til om det skal være med mellemrum i toppen ned til dit logo (som nu) eller uden mellemrummet fra toppen ned til logoet :o)

[ men prøver lige at copy paste det du har lavet ] God ide :o)

hvis du ser på den nye side kommer scrolling ikke som den skal i start siden. ?

jeg har rettet det hele nu men der kommer stadig et lille mellemrum i menuen

Du skal ikke bruge css filen jeg lagde til både iframen og selve forsiden - den jeg lagde var kun til selve siden (ikke iframen) - ret lige href der peger på stylesheetet på forsiden så den peger på en anden css fil (omdøb css filen jeg lagde til noget andet) ...

Update, kigger lige ...

jeg bruger --- hjem--- --- ---  til spacer for jeg aner ikke hvordan jeg ellers skal lave mellemrum så det passer i alle skærm størrelser ?

jeg bruger kun en css fil
det er den samme som jeg bruger på all mine sider.
er det en dårlig ide ?

&nbsp; kan bruges til mellemrum hvis det er ...
- prøv at skifte navnet på href'en her:

<link href="css/styles.css" rel="stylesheet" type="text/css"></head>

og skifte navnet på filen også ...

og så finde den anden css fil til iframen så iframen bruger den gamle css fil.

[ er det en dårlig ide ? ] Jeg har ikke designet den så den matcher op med iframe problemet (det tidligere width problem der var inde i din iframe ... så css filen er lavet til den side som er den side hvor dit iframe tag står)

nu har jeg 2 css filer en der hedder styles.css og en der hedder stylesg.css
så har jeg rettet i startdk.htm så den læser den gamle og nu virker scroll igen :)

her er den nye css fil i sin helhed

html,body{
  margin:0px;padding:0px;height:100%;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
}

html{overflow:auto;}
body{background:#f4f4ef;}

a img{border:0px;}

#cont{
  width:700px;
  margin:0px auto;
  height:100%;
}


#top{
  height: 10%;
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  overflow:hidden;
}

#topspc{height:20px;}



#topmenu a{
  font-size: 13px;
  text-decoration:none;
  background:transparent;
  color: #fff;
}

#topmenu a:hover  {
  font-weight: bold;
}

#main{
  height:80%;
  width: 700px;           
}

#footer{
  margin-top:5px;
  background: #f4f4ef;
  font-size: 9px;
  text-align: center;
}

#flag{margin-left:20px;}


#photoholder {
        width:114px;
        height:174px;
        background:#fff url(/img/loading.gif) 50% 50% no-repeat;
}

#thephoto  {
        width:114px;
        height:174px;
}


.h1 {font-size: large;
    font-family: Verdana, Arial, Helvetica, sans-serif;   
}

.h2 {font-size: 16px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.h3 {font-size:small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.over {
    font-size:12px;
    font-weight: bold;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.tekst {
    font-size:10px;
    font-weight: normal;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.date {
    font-size:10px;
    color:#999999;
    font-weight:normal;
    text-decoration:none;
}
.Link a {
    font-size:16px;
    font-weight:Bold;
    text-decoration:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}
.linktekst {
    font-weight:normal;
    font-size:9px;
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}

skal jeg rette i den så den ikke indenholder alt det som ikke er nødvendigt altså

dette her:_

#photoholder {
        width:114px;
        height:174px;
        background:#fff url(/img/loading.gif) 50% 50% no-repeat;
}

#thephoto  {
        width:114px;
        height:174px;
}


.h1 {font-size: large;
    font-family: Verdana, Arial, Helvetica, sans-serif;   
}

.h2 {font-size: 16px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.h3 {font-size:small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.over {
    font-size:12px;
    font-weight: bold;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.tekst {
    font-size:10px;
    font-weight: normal;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.date {
    font-size:10px;
    color:#999999;
    font-weight:normal;
    text-decoration:none;
}
.Link a {
    font-size:16px;
    font-weight:Bold;
    text-decoration:none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}
.linktekst {
    font-weight:normal;
    font-size:9px;
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}

til her

Du sparer kb ved det ... og der er jo
ingen grund til at have det dobbelt :o)

hvad laver den her i min css fil

#topspc{height:20px;}

er det den der laver menuen 20px højer en den skal være

er der ellers andet du vil babere af :)

Sludder ikke dobbelt jeg mente når du ikke
har brug for css'en på selve siden hvor dit
iframe tag står :o)

#topspc{height:20px;}

... den definerer afstanden til toppen af siden ...
- prøv at reducere eller øge den hvis det er :o)

hvad er grunden til at min menu er for høj på min skærm
vil gerne have at den passer til tekst størrelsen.

Ved ikke hvad du præcis mener med for høj (sidder i 1024x768) men tror det er den height jeg har givet top der driller i din opløsning ... og den bør nok ikke lige være der :o)

#top{
  height: 10%;
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  overflow:hidden;
}

rettes til:

#top{
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  overflow:hidden;
}

(height slettet)

i første omgang ville jeg gerne have flaget i menuen men den rykker ved min centrering af menu punkterne har lagt den der op igen men den flytter ved  resten af menu teksten. er det noget jeg kan gre ved det. :)

takker for din hurtige respons. ville ønske at man kunne få et kursus i det her css. af en kyndig person som dig.

nu har jeg fået styr på hight i top som den hedder nu og ikke menu som jeg heletide kalder den. :)

kan du se jeg har rykket flaget 200 px i magin og det trykker min center af teksten helt ud til venstre. :(

#top {
  font-size: 12px;
  background: #0603AA;
  color:#fff;
  text-align: center;
  position:relative;
}



#flag {
position:absolute;right:10px;top:10px;
}

- efter det kan du så i #flag definere afstanden til højre placering ved at øge/sænke antallet af right px og du kan øge/sænke antal px defineret i top for at rykke ned eller op ...

WOW

jeg er måløs du kan sku dit kram.

kan snart ikke tillade mig at spørge mere "men". der er altid et men.
---hjem---
hvordan slipper jeg for dem :)

[ takker for din hurtige respons. ville ønske at man kunne få et kursus i det her css. af en kyndig person som dig. ] Tak for ros, kyndig er så meget sagt ... men har fået mine knubs i de gode gamle table dage hvor jeg har siddet og talt px :D (kører en internetforretning - det her er blot lidt træning / genopfriskning - samt til tider udfordringer for at øge mine evner indenfor javascript ... )

18/08-2006 21:49:48 : &nbsp; istedet for - ... eller virkede det ikke?

Man kan også definere margin-right på a tags hvis det er ... prøver lige at teste ...

der var den....
læste det som noget volapyk i starten men nu virker der.... :) :) :) :) :) :) :) dobbelt :)

Alternativt:

css rettelse:


#topmenu a{
  font-size: 13px;
  text-decoration:none;
  background:transparent;
  color: #fff;
  margin-right:20px;
}

#flag {
position:absolute;right:10px;top:10px;
margin:0px!important;
}


og tilføj denne:

.nomarg{margin:0px!important;}


og så markup rettelse:

<div id="top"><a href="http://www.ikhono.com/index.htm"><img src="123_files/dansk%2520design.jpg" height="45" width="700"></a>
<div id="topmenu"><a  href="startdk.htm" target="ifmain">Hjem</a> <a  href="nyhederdk.htm" target="ifmain">Nyheder</a> <a  href="kontaktdk.htm" target="ifmain">Kontakt</a> <a href="omkhddk.htm" target="ifmain">OmKHD</a> <a href="produkterdk.htm" target="ifmain">Produkter</a> <a href="NERMESTEFORHANDLER.HTM" target="ifmain" class="nomarg">Forhandler</a> <a href="indexuk.htm" id="flag"><img src="img/hjemmesideimg/dansk%20design.gif" alt="English" width="30" height="20"></a></div>
</div>


... så sparer du et par bytes ...

... men hvis afstanden skal variere er &nbsp; også god istedet :o)
- hvis du vælger css delen så kan du øge eller sænke den generalle afstand
ved at pille på margin-right i #topmenu a

Takker for din hjælp med alle mine problemer. :)

Velbekom, har lagt et svar ;)

Hehe, update - og tak for point :o)

er der ellers noger som falder dig i øjnene på siden som jeg i god skik bør rette.

Jeg har glemt at skrive alt="" ved et af dine billeder (havde ikke valideret dokumentet)
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ikhono.com%2F

<div id="top"><a href="http://www.ikhono.com/index.htm"><img src="123_files/dansk%2520design.jpg" height="45" width="700" alt=""></a>

... eller evt. en tekst ...

Og det var vist det hele :o) ... Jeg ved dog ikke om dreamweaver
kan lide det jeg lavede med strukturen (koder selv i notesblok) ...

så er den fixet. :)

Lækkert :o)

når jeg validerer min css skriver den
Warnings
URI : http://www.ikhono.com/css/styles.css
Line : 7 (Level : 1) You have no color with your background-color : body
Line : 35 (Level : 1) You have no background-color with your color : #topmenu a
Line : 53 (Level : 1) You have no color with your background-color : #footer

hvad betyder i min css at
html{overflow:auto;}
betyder det at det er ok at mit flag ligger oven på et billed. ?

Det er advarsler og ikke fejl - advarslen består i at jeg måske kan være kommet til at vælge en farve der gør at man ikke kan se teksten ovenpå den baggrund den er lagt på... kigger den lige igennem ... den er trals at have en "advarsel" men det er ikke en "fejl" - ser lige om jeg kan fjerne dem ;)

[ betyder det at det er ok at mit flag ligger oven på et billed. ? ] Nej, det betyder at html objectet der er det yderste object - det object som har scrollabren tilknyttet (såfremt man ikke har IE i quirks mode) - kun skal vise en scrollbar hvis behovet er der - altså den vertikale scroller der altid er der i IE skjules hvis der ikke er behov for det (så fungerer IE ligesom Firefox standard når det kommer til scrollbaren) ... men normalt foretrækker jeg at scrolleren vises - men med height:100% hvor højden ikke overskrides på nogen sider er det af ingen betydning...

- ellers hvis højden blev overskredet på nogle sider og ikke andre kunne designet stå op hoppe lidt til højre eller venstre afhængig af om scrolleren vises (sker kun ved centreret design)


... kigger lige på den css ...

body{background:#f4f4ef;}

rettes til:

body{background:#f4f4ef;color:#000;}

...

#topmenu a{
  font-size: 13px;
  text-decoration:none;
  background:transparent;
  color: #fff;
}

rettes til:

#topmenu a{
  font-size: 13px;
  text-decoration:none;
  background:transparent;
  color: #fff;
  background: #0603AA;
}

...

#footer{
  margin-top:5px;
  background: #f4f4ef;
  font-size: 9px;
  text-align: center;
}

rettes til:

#footer{
  margin-top:5px;
  color:#000;
  background: #f4f4ef;
  font-size: 9px;
  text-align: center;
}

så kommer der kun en advarsel op


Line : 36 (Level : 2) Redefinition of background-color : #topmenu a

Fremragende eksempel lod ikke selv mærke til det:

#topmenu a{
  font-size: 13px;
  text-decoration:none;
  background:transparent;
  color: #fff;
  background: #0603AA;
}

^ - Hvis du kigger på den havde jeg defineret baggrunden til transparent - det er helt iorden da den sommetider skal være transparent - tag et eksempel hvor man har en flerfarvet billede fil som baggrund - så ville det se dumt ud med en farvet baggrund ... men i dit tilfælde har det ingen betydning så den skal se sådan her ud:


#topmenu a{
  font-size: 13px;
  text-decoration:none;
  color: #fff;
  background: #0603AA;
}


( background:transparent; slettet , det er en advarsel om at jeg overskriver en tidligere defineret baggrund - og det kunne måske tyde på at det kunne være farligt - altså samme tekstfarve som baggrund ... den advarer fordi at man måske har lavet en fejl - det havde jeg så også - jeg havde defineret baggrunden to gange... Det er nok med 1 gang selvom en dobbelt definering ikke gør noget - men den hjælper heller ikke :o) )

så er det helt perfekt takker for hjælpen :)

Velbekom :o)

M.h.t. at warnings ikke betyder noget kan du se på
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.eksperten.dk&usermedium=all
... fejl har dog /kan have betydning ...

... når w3c virker ...