Søg
Avatar billede kongen72 Nybegynder
17. december 2008 - 11:49 Der er 25 kommentarer og
1 løsning

Hvordan løses dette problem??

Hej.

Har pænt mange problemer med denne her - håber i kan hjælpe:


Jeg skal bruge 3 lodrette kolonner på min side, som skal fylde hele siden altså 100%.

#toppen
#midten
#bunden

Der skal kunne indsættes ting og sager i alle kolonner. #midten skal have en en fast højde på 200px. #toppen og #bunden skal følge med #midten.

*Skal Selvfølgelig kunne fungere optimalt i alle browsere..

tak på forhånd..:-)
Avatar billede zips Juniormester
17. december 2008 - 12:21 #1
Prøv at se her http://www.dynamicdrive.com/style/layouts/category/C13/
Avatar billede kongen72 Nybegynder
17. december 2008 - 12:31 #2
desværre ikke hvad jeg søger.. :-(
Avatar billede ssv Nybegynder
17. december 2008 - 12:58 #3
Det lyder som om du skal ud i noget equalHeight javascript, med mindre alle kolonner skal have samme højde. Og så siden være 100% bred eller høj, eller hvad mener du :-)?
Avatar billede zips Juniormester
17. december 2008 - 12:59 #4
Nu du skrev 3 lodrette kolonner med top, midt og bund gik jeg udfra at det var vandrette kolonner, men måske forstå jeg ikke helt dit problem.

Er det sådan her 1

-------------------------
|      |      |      |
|      |      |      |
-------------------------

Eller sådan her 2

-------------------------
|                      |
-------------------------
|                      |
-------------------------
|                      |
-------------------------

Og midt skal være 200px og top og bund fylde efter som indholdet

Hvis det er som 1 er det så noget med at du ønsker alle div i samme højde?
Så er det måske noget i denne stil http://alistapart.com/articles/holygrail
Avatar billede kongen72 Nybegynder
17. december 2008 - 13:27 #5
ssv: Med 100% mener jeg bare at kolonnerne skal fylde hele side ud. Indholdet skal følge med, når man scoller ud og ind..

Har fundet ud af lidt, men det må kunne gøres nemmere og smartere.. Har også problemer med at få indhold ind i #toppen og #bottom. Som om det forsvinder. :-0



Her er min kode indtil videre:

CSS:

html,body{
width:100%;
height:100%;
margin:0;
}
wrap{
width:auto;
height:auto;
margin:auto;
}
#top{
width:100%;
height:50%;
margin-top:-50px;
margin-bottom:-50px;
background-color:white;
}
#middle{
width:100%;
height:200px;
background-color:blue;
position:absolute;
}
#bottom{
width:100%;
height:50%;
margin-bottom:-50px;
margin-top:-50px;
background-color:white;
}

HTML:

<div id="wrap">   
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
Avatar billede zips Juniormester
17. december 2008 - 13:40 #6
Måske dette kunne bruges

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<style type="text/css">
body{
margin:0;
padding:0;
}
#maincontainer {
margin:0;
padding:0;
}
#header{
background-color: #EAEAEA;
height: 90px;
}
#content{
background-color: #EAEA00;
height: 200px;
width: 100%;
}
#footer{
width: 100%;
background-color: #000;
color: #FFF;
text-align: center;
padding: 4px 0;
}
</style>

</head>
<body>
<div id="maincontainer">
<div id="header">Din head</div>
<div id="content">Dit side indhold</div>
<div id="footer">Din footer</div>
</div>
</body>
</html>
Avatar billede kongen72 Nybegynder
17. december 2008 - 14:47 #7
ja Zips!! så mangler du bare at få #content til at være i center. :-)
Avatar billede zips Juniormester
17. december 2008 - 14:57 #8
Hvis din tekst skal være i center på content sættes dette i css text-align: center; under #content

#content{
background-color: #EAEA00;
height: 200px;
width: 100%;
text-align: center;
}
Avatar billede kongen72 Nybegynder
17. december 2008 - 15:06 #9
Det er jeg godt klar over.. :-)

Men selve boksen #content skal være i center på siden.
Avatar billede zips Juniormester
17. december 2008 - 15:13 #10
Med en brede på 100% vil content jo fylde hele sidebredden, så hvad er det du ønsker?

Er det en anden boks i content med en fast brede som er centeret på siden.
Avatar billede kongen72 Nybegynder
17. december 2008 - 15:29 #11
jeg ønsker 3 kasser over på hinanden (#top, #middle og #bottom), alle kasser skal have en brede på 100%, så de fylder hele siden.

#Middle kassen skal være centeret i midten på siden. Med en højde på 200px;.

Det er hvad jeg ønsker.. :-)
Avatar billede ssv Nybegynder
17. december 2008 - 15:49 #12
Centreret? Så den midterste boks ligger deadcentre?

Jeg tror det udvikler sig til en gætteleg - kunne du ikke lave et billede så vi er sikre på hvad du mener?
Avatar billede zips Juniormester
17. december 2008 - 15:55 #13
Ja det må være det der menes, kik her http://web-dev.dk/post/2007/12/Absolut-centrering-af-hjemmeside-med-layers.aspx
Avatar billede kongen72 Nybegynder
17. december 2008 - 16:18 #14
Har lagt et billede ud af hvad jeg mener..
http://img140.imageshack.us/my.php?image=testerxe4.png

-Måske der skal javascript til, for at det kan virke??
Avatar billede ssv Nybegynder
17. december 2008 - 16:43 #15
Skal det være både 100% i højden og bredden?
Avatar billede kongen72 Nybegynder
17. december 2008 - 16:56 #16
ja det skal være 100% i både højde og bredde.
Siden skal følge browseren.

Har du fundet en løsning???
Avatar billede kongen72 Nybegynder
17. december 2008 - 21:00 #17
Ingen der kan hjælpe?? :-(
Avatar billede ssv Nybegynder
17. december 2008 - 22:54 #18
Kunne det være noget i denne stil?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titel</title>
<style type="text/css">
html,body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; font: 11px/17px Verdana, Arial, Helvetica, sans-serif; }
.top { height: 50%; background: red; width: 100%; float: left; }
.midt { height: 200px; background: green; width: 100%; position: absolute; z-index: 1; top: 50%; left: 0; margin: -100px 0 0 0; }
.bund { height: 50%; background: yellow; width: 100%; float: left; }
.bund .inner { margin: 100px 0 0 0; }
</style>
</head>

<body>
<div class="top">Tekst her</div>
<div class="midt">Tekst her</div>
<div class="bund"><div class="inner">Tekst her</div></div>
</body>
</html>

--
Jeg ved ikke præcis om det er det du skal bruge, da jeg ikke helt har forstået dine beskeder ;-)
Avatar billede zips Juniormester
18. december 2008 - 00:15 #19
Udfra ssv kode har jeg rette så det også virker i IE6, er testet i IE6, IE7. Opera, Safari, Chome og Flock.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
html,body{width:100%;height:100%;margin:0;overflow: hidden;}
#top{width:100%;height:50%;margin-bottom:-100px;background-color:red;}
#midt{width:100%;height:200px;background-color:green;position:absolute;top: 50%; margin: -100px 0 0 0;}
#bund{width:100%;height:100%;padding-top:200px;background-color:yellow;}

</style>

</head>
<body>
        <div id="top">Tekst her</div>
        <div id="midt">Tekst her</div>
        <div id="bund">Tekst her</div>
</body>
</html>

Men hvad skal det bruges til... jeg har ikke testet med indhold i alle bokse, for ved jo slet ikke om det er det du ønsker?
Avatar billede kongen72 Nybegynder
18. december 2008 - 08:30 #20
Det er perfekt.. :-) Mange tak for hjælpen. Dejligt..

Smider du et svar??
Avatar billede zips Juniormester
18. december 2008 - 16:52 #21
Går udfra at det er ssv du ønsker svar fra, da det var hans kode som kom til at virke :)
Avatar billede ssv Nybegynder
18. december 2008 - 17:05 #22
Nu rettede du min kode til IE6, så jeg vil lade pointene tilgå dig ;-)
Avatar billede zips Juniormester
18. december 2008 - 17:12 #23
ssv >> deler gerne point med dig.

Her er et svar :)
Avatar billede ssv Nybegynder
18. december 2008 - 17:32 #24
Jeg klarer mig nok uden ;-)
Avatar billede kongen72 Nybegynder
18. december 2008 - 21:27 #25
Takker mange gange igen.. -og beklager at jeg fik skreven lodret istedet for vandret.. :-0
Avatar billede zips Juniormester
18. december 2008 - 21:38 #26
Tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 23:00 Hyperlink til tekst Af Nanarsi i Excel
18/0121:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows
16/0110:29 Negativ billeder på samsung Af ALICE i Småopgaver
White papers
Flere white papers »