/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
XHTML Layout uden tabeller
Fra : Peter Theill

Dato : 20-01-04 23:36
Hej NG,

Jeg har store problemer med at lave et design uden tabeller. Jeg har testet
det paa Windows med nyeste versioner af IE, MZ, Opera og Firebird saa det er
helt sikkert min XHTML der har skyldes *G*.

Jeg har en simpel struktur der skal se saaledes ud:

<div id="Header" />

<div id="Page">
<div id="Menu" />
<div id="Content" />
</div>

<div id="Footer" />

Jeg oensker at "Header" skal vaere i toppen af siden og fylde 100% i
bredden. "Page" skal ligeledes fylde 100% i bredden og saa meget som "Menu"
+ "Content" fylder i hoejden. "Menu" og "Content" skal vaere sidestillede
med "Menu" i venstre side og med fast defineret bredde. "Content" fylder saa
resten af bredden. Endelig skal "Footer" vaere under "Page" og fylde 100% i
bredden.

Mit nuvaerende test-eksempel ser saaledes ud:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title></title>
<style type="text/css">
#Header {
height: 64px;
background-color: #f00;
color: #000;
}

#Page {
background-color: #0f0;
color: #000;
position: relative;
}

#Menu {
position: absolute;
top: 0;
left: 0;
width: 112px;
}

#Content {
position: absolute;
top: 0;
left: 128px;
}

#Footer {
height: 64px;
background-color: #0ff;
color: #000;
}
</style>
</head>

<body>

<div id="Header">
Header
</div>

<div id="Page">
<div id="Menu">
MenuItem1<br />
MenuItem2<br />
</div>
<div id="Content">
123 <br />
123 <br />
123 <br />
123 <br />
123 <br />
123 <br />
123 <br />
123 <br />
Lige under denne linie burde "Footer" vaere placeret.
</div>
</div>

<div id="Footer">
Footer
</div>

</body>
</html>

--

Jeg mangler at faa "Page" til at skubbe min "Footer" baseret paa sit
indhold. Kan det lade sig goere? Jeg mangler sikkert et eller andet oplagt
men jeg kan ikke lige finde det.

// pt



 
 
Uffe (20-01-2004)
Kommentar
Fra : Uffe

Dato : 20-01-04 23:55

"Peter Theill" <asdf@asdf.com> skrev i en meddelelse
news:400dad3b$0$29359$edfadb0f@dread15.news.tele.dk...
> Hej NG,
>
> Jeg har store problemer med at lave et design uden tabeller. Jeg har
testet
> det paa Windows med nyeste versioner af IE, MZ, Opera og Firebird saa det
er
> helt sikkert min XHTML der har skyldes *G*.
>
> Jeg har en simpel struktur der skal se saaledes ud:
>
> <div id="Header" />
>
> <div id="Page">
> <div id="Menu" />
> <div id="Content" />
> </div>
>
> <div id="Footer" />
>
> Jeg oensker at "Header" skal vaere i toppen af siden og fylde 100% i
> bredden. "Page" skal ligeledes fylde 100% i bredden og saa meget som
"Menu"
> + "Content" fylder i hoejden. "Menu" og "Content" skal vaere sidestillede
> med "Menu" i venstre side og med fast defineret bredde. "Content" fylder
saa
> resten af bredden. Endelig skal "Footer" vaere under "Page" og fylde 100%
i
> bredden.
>
> Mit nuvaerende test-eksempel ser saaledes ud:
>
> <!DOCTYPE html
> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html lang="en">
> <head>
> <title></title>
> <style type="text/css">
> #Header {
> height: 64px;
> background-color: #f00;
> color: #000;
> }
>
> #Page {
> background-color: #0f0;
> color: #000;
> position: relative;
> }
>
> #Menu {
> position: absolute;
> top: 0;
> left: 0;
> width: 112px;
> }
>
> #Content {
> position: absolute;
> top: 0;
> left: 128px;
> }
>
> #Footer {
> height: 64px;
> background-color: #0ff;
> color: #000;
> }
> </style>
> </head>
>
> <body>
>
> <div id="Header">
> Header
> </div>
>
> <div id="Page">
> <div id="Menu">
> MenuItem1<br />
> MenuItem2<br />
> </div>
> <div id="Content">
> 123 <br />
> 123 <br />
> 123 <br />
> 123 <br />
> 123 <br />
> 123 <br />
> 123 <br />
> 123 <br />
> Lige under denne linie burde "Footer" vaere placeret.
> </div>
> </div>
>
> <div id="Footer">
> Footer
> </div>
>
> </body>
> </html>
>
> --
>
> Jeg mangler at faa "Page" til at skubbe min "Footer" baseret paa sit
> indhold. Kan det lade sig goere? Jeg mangler sikkert et eller andet oplagt
> men jeg kan ikke lige finde det.
>
Du skal flytte nogle div'er sådan her
Lige under denne linie burde "Footer" vaere placeret.

<div id="Footer">
Footer
</div></div></div>

</body>
</html>
Mvh
Uffe andersen



Peter Theill (21-01-2004)
Kommentar
Fra : Peter Theill

Dato : 21-01-04 00:12
> Du skal flytte nogle div'er sådan her
> Lige under denne linie burde "Footer" vaere placeret.
>
> <div id="Footer">
> Footer
> </div></div></div>
>
> </body>
> </html>

Nope. Tak for hjaelpen men det er noedvendigt at "Footer" skal fylde 100% i
bredden. Det vil ikke vaere tilfaeldet hvis jeg laegger den ind under
"Content".

// pt



Erik Ginnerskov (21-01-2004)
Kommentar
Fra : Erik Ginnerskov

Dato : 21-01-04 00:40

"Peter Theill" <asdf@asdf.com> skrev

> Jeg har store problemer med at lave et design uden tabeller. Jeg har
testet
> det paa Windows med nyeste versioner af IE, MZ, Opera og Firebird saa det
er
> helt sikkert min XHTML der har skyldes *G*.
>
> Jeg har en simpel struktur der skal se saaledes ud:
>
> <div id="Header" />
>
> <div id="Page">
> <div id="Menu" />
> <div id="Content" />
> </div>
>
> <div id="Footer" />

[klip]

> #Menu {
> position: absolute;
> top: 0;
> left: 0;
> width: 112px;
> }
>
> #Content {
> position: absolute;
> top: 0;
> left: 128px;
> }
>
> #Footer {
> height: 64px;
> background-color: #0ff;
> color: #000;
> }

Fejlen ligger i de absolut positionerede div'er menu og content. Et absolut
positioneret element 'skubber' ikke det efterfølgende element ned.

Prøv i stedet at indsætte <div id="menu"> med float:left og indsæt <div
id="content"> med padding-left lidt større end bredden på menuen.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/egin



Peter Theill (21-01-2004)
Kommentar
Fra : Peter Theill

Dato : 21-01-04 00:52
> Fejlen ligger i de absolut positionerede div'er menu og content. Et
absolut
> positioneret element 'skubber' ikke det efterfølgende element ned.
>
> Prøv i stedet at indsætte <div id="menu"> med float:left og indsæt <div
> id="content"> med padding-left lidt større end bredden på menuen.

Tak Erik, det var et rigtig godt forslag; jeg proevede det tidligere men gik
vaek fra loesningen da en hoejere "Menu" vil faa "Footer" til at komme lige
efter "Content" og altsaa sidestille "Footer" med menu. Jeg har lagt den
modificerede side op her:

http://www.theill.com/stuff/xhtml.html

Jeg oensker min "Footer" skal vaere under "Menu". Din loesning er perfekt
hvis bare "Content" er hoejere end "Menu" .. men det kan jeg ikke vaere
sikker paa den er.

// pt



Erik Ginnerskov (21-01-2004)
Kommentar
Fra : Erik Ginnerskov

Dato : 21-01-04 03:08

"Peter Theill" <asdf@asdf.com> skrev

> Jeg oensker min "Footer" skal vaere under "Menu". Din loesning er perfekt
> hvis bare "Content" er hoejere end "Menu" .. men det kan jeg ikke vaere
> sikker paa den er.

Hvis du tildeler footer en clear:both, skulle du være helgarderet.

--
Med venlig hilsen
Erik Ginnerskov
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/egin



Peter Theill (21-01-2004)
Kommentar
Fra : Peter Theill

Dato : 21-01-04 11:32
> Hvis du tildeler footer en clear:both, skulle du være helgarderet.

Erik! Tak! Det var lige praecis den attribut jeg manglede. Nu virker det som
det skal. Mange tak.


// pt



Jens Gyldenkærne Cla~ (21-01-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~

Dato : 21-01-04 11:55
Peter Theill skrev:

> Jeg oensker min "Footer" skal vaere under "Menu". Din loesning
> er perfekt hvis bare "Content" er hoejere end "Menu" .. men
> det kan jeg ikke vaere sikker paa den er.

Erik har (så vidt jeg kan se) givet løsningen med clear: both. Jeg
vil bare tilføje 2 små kommentarer.

1) Din xml-erklæring sætter IE6 samt Opera 7.0-7.03 i quirks mode
mens Mozilla og nyere udgaver af Opera går i standardmode. Det er
ofte uhensigtsmæssigt at have en side der vises i quirksmode i
nogle browsere og i standardmode i andre. Du kan se en side om
doctype switching her: <http://www.hut.fi/u/hsivonen/doctype.html>.


2) XHTML bør leveres (af webserveren) med mimetypen
'application/xhtml+xml'. Denne mimetype understøttes bare ikke af
den mest udbredte webbrowser - Internet Explorer. Af hensyn til
bagudkompatibilitet kan XHTML 1.0-dokumenter skrives så de også
overholder HTML-standarden (bl.a. med <br /> i stedet for <br/>).
HTML-kompatible XHTML 1.0-dokumenter kan ligeledes af hensyn til
kompatibiliteten sendes i den traditionelle html-medietype
text/html. Denne mulighed er bare forbeholdt XHTML 1.0 - bruger man
XHTML 1.1 skal man også benytte 'application/xhtml+xml'.

Samtidig er forskellene mellem XHTML 1.0 Strict og XHTML 1.1
minimale. Martin Hintzmann har redegjort for dem flere gange i
denne gruppe - det er _meget_ få tilfælde hvor de nye ting i XHTML
1.1 har noget praktisk formål for en dansk webskribent.

Du kan se W3's side om medietyper til XHTML her:
<http://www.w3.org/TR/xhtml-media-types/>. Den side er i øvrigt et
fint eksempel på hvordan man kan levere XHTML 1.1 til de browsere
der forstår det og standard HTML til resten (Opera og Mozilla går
direkte ind på XHTML-siden, mens IE havner på en "vælg version"-
side).
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.