|
|
 | css 100% højde og baggrundsbilleder
Fra : memborg |
Dato : 03-04-07 13:25 |
|
Hej Alle sammen
Jeg har et problem med at få baggrundsbilleder i en div til at gentage
sig selv i højden, når højden er 100%.
Hvis den sætning ikke gav meget mening så kig lige på
http://90.185.48.223/test/index.php , som er min test server.
Der ligger også en css som er main.css hvor det hele er sat op i.
HTML
...............................................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/index_03.jpg"/></div>
<div id="content">
<div id="left">
RIGHT
</div>
<div id="right">
LEFT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
</html>
CSS filen er for lang til at jeg vil ligge den ind. Så den kan findes
på http://90.185.48.223/test/main.css
igen problemet er at baggrunden på "LEFT" og "RIGHT" ikke vil
fortsætte ned ad. Er der noget css der kan klare dette eller jeg nødt
til at ty til finde højden med JS også sætte den højde med JS. hvilket
jeg synes er den dårlig løsning.
Med Venlig hilsen og på forhånd tak
Memborg
| |
 Birger Sørensen (03-04-2007)
| Kommentar
Fra : Birger Sørensen |
Dato : 03-04-07 14:51 |
|
memborg wrote in dk.edb.internet.webdesign.html:
> Hej Alle sammen
>
> Jeg har et problem med at få baggrundsbilleder i en div til at gentage
> sig selv i højden, når højden er 100%.
>
> Hvis den sætning ikke gav meget mening så kig lige på
> http://90.185.48.223/test/index.php , som er min test server.
>
Memborg
Tror vist godt jeg kan se det..
Du definerer ikke nogen højde på "left" og "right" divs - derfor er de
kun så høje som indholdet - een linie.
På min skærm ser det ud somom der bare er ensfarvet baggrund (men
forskellig for de to div's), hvis det er rigtigt, er det nemmere bare at
sætte baggrundsfarven.
I øvrigt er der andre problemer : footeren er ved siden af "content" div
i IE7. Kan ikke umiddelbart se grunden til det i din kode - den burde
være indenfor.
Måske skal du bruger HTML 4 i stedet for XHTML?
Jeg har haft lidt bøvl med at få CSS fortolket rigtigt i XHTML. Derfor
bruger jeg denne deklaration, som er fundet på MS's sider om problemet,
men jeg kan ikke huske præcist hvor :
<?xml-stylesheet href=" http://www.w3.org/StyleSheets/TR/W3C-REC.css"
type="text/css"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="da">
og det får det til at gøre som tænkt, i hvert fald i IE.
Birger
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Martin (03-04-2007)
| Kommentar
Fra : Martin |
Dato : 03-04-07 16:49 |
| | |
 Birger Sørensen (04-04-2007)
| Kommentar
Fra : Birger Sørensen |
Dato : 04-04-07 14:25 |
|
Martin wrote in dk.edb.internet.webdesign.html:
> Birger Sørensen wrote:
> > <?xml-stylesheet href=" http://www.w3.org/StyleSheets/TR/W3C-REC.css"
> > type="text/css"?>
> > <?xml-stylesheet href="#internalStyle" type="text/css"?>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> > <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="da">
>
> Som straks sætter IE i Quirksmode(1), også begynder det først at blive
> umuligt at lave et cross browser stylesheet.
>
> (1) < http://www.hintzmann.dk/articles/doctype/#standardsvsquirks>
>
> Jeg har aldrig mødt problemer med stylesheet og xhtml1 strict doctypen,
> så den ville jeg klart beholde.
Det er jo en fin kommentar.
En foklaring ville være på sin plads også...
Hvis jeg ikke medtager de to linier, vises en tom skærm, med body'ens
baggrund, og intet andet.
"Vis kilde" afslører at koden er der - den bliver bare ikke vist (IE7).
Siderne validerer både XHTML og CSS, både med og uden de to linier.
Quirk eller quirk ikke - Det er stadig noget med at anvende det der får
tingene vist som forventet.
Birger
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Martin (05-04-2007)
| Kommentar
Fra : Martin |
Dato : 05-04-07 14:49 |
|
Birger Sørensen wrote:
> Martin wrote in dk.edb.internet.webdesign.html:
>> Birger Sørensen wrote:
>>> <?xml-stylesheet href=" http://www.w3.org/StyleSheets/TR/W3C-REC.css"
>>> type="text/css"?>
>>> <?xml-stylesheet href="#internalStyle" type="text/css"?>
>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>>> " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>>> <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="da">
>>
>> Som straks sætter IE i Quirksmode(1), også begynder det først at blive
>> umuligt at lave et cross browser stylesheet.
>>
>> (1) < http://www.hintzmann.dk/articles/doctype/#standardsvsquirks>
>>
>> Jeg har aldrig mødt problemer med stylesheet og xhtml1 strict doctypen,
>> så den ville jeg klart beholde.
>
> Det er jo en fin kommentar.
> En foklaring ville være på sin plads også...
> Hvis jeg ikke medtager de to linier, vises en tom skærm, med body'ens
> baggrund, og intet andet.
> "Vis kilde" afslører at koden er der - den bliver bare ikke vist (IE7).
> Siderne validerer både XHTML og CSS, både med og uden de to linier.
> Quirk eller quirk ikke - Det er stadig noget med at anvende det der får
> tingene vist som forventet.
Nu regner jeg med når du siger "de 2 linjer" at du tænker på disse 2 linjer
<?xml-stylesheet href=" http://www.w3.org/StyleSheets/TR/W3C-REC.css"
type="text/css"?>
<?xml-stylesheet href="#internalStyle" type="text/css"?>
Det er højst sandsynligt fordi man siger til IE og andre browsere at
dette skal læses som XML, og HTML er jo langt fra XML. IE6 ville helt
sikkert få dens motor til at fortolke koden som den nu selv ville, altså
quirks mode.
Jeg må indrømme jeg aner meget lidt om IE7, da hverken IE6 eller 7
interesserer mig :)
| |
Erik Ginnerskov (05-04-2007)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 05-04-07 15:18 |
|
Martin wrote:
> <?xml-stylesheet href=" http://www.w3.org/StyleSheets/TR/W3C-REC.css"
> type="text/css"?>
> Det er højst sandsynligt fordi man siger til IE og andre browsere at
> dette skal læses som XML,....ville,
> altså quirks mode.
Det er ikke helt rigtigt. Det er rigtigt, at linjen får IE 6 til at gå i
quirks-mode - ikke på grund af havd der står i linjen, men fordi linjen
overhovedet er der. Alt andet end et tomt linjeskift før DocType declaration
vil sætte IE 6 i quirks-mode.
> Jeg må indrømme jeg aner meget lidt om IE7, da hverken IE6 eller 7
> interesserer mig :)
Den holdning har man som forbruger lov til at have. Men som udvikler af
hjemmesider - på hobbybasis eller som professionel - er det ikke en farbar
vej al den stund at IE dækker ca. 75% markedet for browsere.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk
| |
Jørn Andersen (05-04-2007)
| Kommentar
Fra : Jørn Andersen |
Dato : 05-04-07 15:41 |
|
On Thu, 05 Apr 2007 15:49:06 +0200, Martin <news@natten-i.dk> wrote:
>Jeg må indrømme jeg aner meget lidt om IE7, da hverken IE6 eller 7
>interesserer mig :)
Så må du have en ret atypisk bruger-kreds.
Mvh. Jørn
--
Jørn Andersen, Brønshøj
Stop Bush's krige - og Foghs støtte til dem
www.nejtilkrig.dk
| |
Birger Sørensen (05-04-2007)
| Kommentar
Fra : Birger Sørensen |
Dato : 05-04-07 22:09 |
|
Ved at andet end <!DOCTYPE... > som det første, får IE6 til at miste
jordforbindelsen.
Som det ser ud for mig, er linierne nødvendige for at få IE7 til at forstå
CSS.
Har egentlig aldrig prøvet at sætte dem efter DOCTYPE. Artiklen de er fundet
i, påstod det var nødvendigt de stod før, så det har jeg altid gjort.
Birger
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Erik Ginnerskov (06-04-2007)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 06-04-07 00:18 |
|
Birger Sørensen wrote:
> Som det ser ud for mig, er linierne nødvendige for at få IE7 til at forstå
> CSS.
> Har egentlig aldrig prøvet at sætte dem efter DOCTYPE. Artiklen de er
> fundet i, påstod det var nødvendigt de stod før, så det har jeg altid
> gjort.
Den artikel må du da meget gerne finde adressen på, for det er da noget
lodret sludder. Det eneste, du behøver at gøre for at få IE 7 til at
(indlæse og) forstå css er, at sætte et helt almindeligt link til css efter
<head>
<link rel="stylesheet" type="text/css" href="foo.css">
At der så stadig er enkelte css2-definitioner, som IE 7 ikke forstår, kan du
alligevel ikke lave om på ved at indlæse css før DTD.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk
| |
Birger Sørensen (07-04-2007)
| Kommentar
Fra : Birger Sørensen |
Dato : 07-04-07 19:46 |
|
Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Birger Sørensen wrote:
>
> > Som det ser ud for mig, er linierne nødvendige for at få IE7 til at forstå
> > CSS.
> > Har egentlig aldrig prøvet at sætte dem efter DOCTYPE. Artiklen de er
> > fundet i, påstod det var nødvendigt de stod før, så det har jeg altid
> > gjort.
>
> Den artikel må du da meget gerne finde adressen på, for det er da noget
> lodret sludder. Det eneste, du behøver at gøre for at få IE 7 til at
> (indlæse og) forstå css er, at sætte et helt almindeligt link til css efter
> <head>
>
> <link rel="stylesheet" type="text/css" href="foo.css">
>
> At der så stadig er enkelte css2-definitioner, som IE 7 ikke forstår, kan du
> alligevel ikke lave om på ved at indlæse css før DTD.
>
> --
> Med venlig hilsen
> Erik Ginnerskov
> http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
> http://html-faq.dk
>
>
Hej Erik.
Skal prøve at finde det igen.
Teori og praksis.
IE7 forstår ikke (min?) CSS uden de to linier - og de skal stå før DTD for at
få det til at virke.
http://familie.mortove.dk/ (med linierne før DTD)
http://familie.mortove.dk/index2.php (uden linierne)
skulle illustrere forskellen. Har prøvet at have linierne efter DTD - og det
virker lige så godt som ikke at have dem...
Birger
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Erik Ginnerskov (08-04-2007)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 08-04-07 00:10 |
|
Birger Sørensen wrote:
> http://familie.mortove.dk/ (med linierne før DTD)
> http://familie.mortove.dk/index2.php (uden linierne)
Har du prøvet at se de sider i FF eller Op?
Jeg kan ikke forklare, hvorfor siden uden de koder før DTD ikke kan ses i
IE. Det ændrer dog ikke på, at der ikke bør sendes noget til borwserne før
DTD, hvis ikke man vil sætte IE 6 i quirks-mode.
Jeg har heller aldrig selv sat noget før DTD og mine sider ses da uden nogen
problemer i alle versioner af IE fra 5 og op samt i alle andre nyere
browsere, jeg har testet i.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk
| |
Allan Vebel (08-04-2007)
| Kommentar
Fra : Allan Vebel |
Dato : 08-04-07 03:16 |
| | |
Martin (03-04-2007)
| Kommentar
Fra : Martin |
Dato : 03-04-07 16:57 |
|
memborg wrote:
> Hej Alle sammen
>
> Jeg har et problem med at få baggrundsbilleder i en div til at gentage
> sig selv i højden, når højden er 100%.
Tableless designs er faktisk pæænt umulige at lave 100% i højden.
Derimod hvis du sætter en table udenfor så kan du give den 100%.
Der er også en anden metode som jeg læste et eller andet sted, men kan
ikke huske hvor :)
Det jeg kan huske er at det så nogenlunde sådan her ud - men der var
også noget mere, som jeg ikke kan huske.
div#container {
display: table;
height:100%;
}
div#left {
display:table-row;
height:100%;
}
div#right {
display:table-row;
height:100%;
}
| |
memborg (04-04-2007)
| Kommentar
Fra : memborg |
Dato : 04-04-07 07:12 |
|
Tak for svarerne.
Jeg tror jeg vil holde mig fra at bruge andet en XHTML. Det skulle jo
helst virke i alle browsere og et browser check er ikke den første
løsning jeg ville vælge, så hellere prøve at lave noget som alle
browsere kan lide.
Jeg kunne ikke få display: table og display: table-row til at give
nogen effekt.
Den bagggrundsfarve der er sat ligger på #container. Hvorfor vil
content, left og right ikke arve den højde?
Skal man skrive en anden rækkefølge?
Jeg tror jeg har en ide. Vender lige tilbage.
| |
memborg (04-04-2007)
| Kommentar
Fra : memborg |
Dato : 04-04-07 07:45 |
| | |
Birger Sørensen (04-04-2007)
| Kommentar
Fra : Birger Sørensen |
Dato : 04-04-07 10:28 |
| | |
Jørn Andersen (04-04-2007)
| Kommentar
Fra : Jørn Andersen |
Dato : 04-04-07 15:56 |
|
On 3 Apr 2007 23:44:41 -0700, "memborg" <memborg81@gmail.com> wrote:
>Her er mit nye layout:
>
>HTML
<snip en masse kode>
>Som i kan se er der ændret en del.
Nej, det kan jeg ikke se, medmindre jeg: Opretter en HTML-fil + kopierer
din kode ind + retter linieombrydning + oprettter en CSS-fil + starter
HTML-filen.
Det ville være langt lettere, hvis du lagde et link ud til siden, så vi
alle så på det samme, frem for at vi hver især skal nørkle rundt 
Mvh. Jørn
--
Jørn Andersen, Brønshøj
Stop Bush's krige - og Foghs støtte til dem
www.nejtilkrig.dk
| |
|
|