|
|
 | Div layout driller
Fra : Thomas Møller Nexø |
Dato : 07-11-07 22:57 |
|
Hejsa.
Jeg er ved at lave en hjemmeside med noget boks layout, men det
driller en smule.
Siden kan ses på http://www.afterworld.dk/test/
Det virker fint i firefox, men i IE 7, vises den venstre hvide
boks ikke i sin fulde bredde.
Det er meningen at begge bokse skal have den samme margin ud til
deres respektive side (højre/venstre side), men den venstre vises
med et stort mellemrum til den højre boks.
Jeg har forsøgt med noget absolute positioning, men det vil jeg
helst undgå. Jeg vil helst sætte så fleksibelt layout som muligt,
altså, hvor boksene defineres så lidt som muligt og bare 'flyder'
med layputet, men dette virker ikke umiddelbart.
--
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
| |
 Per Rasmussen (07-11-2007)
| Kommentar
Fra : Per Rasmussen |
Dato : 07-11-07 23:07 |
|
Thomas Møller Nexø wrote in dk.edb.internet.webdesign.html:
> Hejsa.
>
> Jeg er ved at lave en hjemmeside med noget boks layout, men det
> driller en smule.
> Siden kan ses på http://www.afterworld.dk/test/
>
> Det virker fint i firefox, men i IE 7, vises den venstre hvide
> boks ikke i sin fulde bredde.
Start med at validere siden.
Og ret fejlene
PerR
--
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
| |
Birger (07-11-2007)
| Kommentar
Fra : Birger |
Dato : 07-11-07 23:21 |
|
"Thomas Møller Nexø" <html@test.dk> skrev i en meddelelse
news:47323498$0$90268$14726298@news.sunsite.dk...
> Hejsa.
>
> Jeg er ved at lave en hjemmeside med noget boks layout, men det
> driller en smule.
> Siden kan ses på http://www.afterworld.dk/test/
>
> Det virker fint i firefox, men i IE 7, vises den venstre hvide
> boks ikke i sin fulde bredde.
> Det er meningen at begge bokse skal have den samme margin ud til
> deres respektive side (højre/venstre side), men den venstre vises
> med et stort mellemrum til den højre boks.
>
> Jeg har forsøgt med noget absolute positioning, men det vil jeg
> helst undgå. Jeg vil helst sætte så fleksibelt layout som muligt,
> altså, hvor boksene defineres så lidt som muligt og bare 'flyder'
> med layputet, men dette virker ikke umiddelbart.
>
> --
> 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
Vandrette margins overlapper.
Derfor er din
margin-right : 0;
i #mainMenu overflødig.
Men det løser ikke dit problem.
100% er ikke det hele i IE - desværre.
Det værste er, at 100% nogen gange er mere end det hele - andre gange
mindre... ;>)
(Tror faktisk at det er forklaret med, at scrollbaren nogen gange regnes
med, og andre ikke - og det uanset om den vises eller ej.)
Du kunne prøve at definere
#mainContent {
left : 28%;
right : 1%;
....
}
i stedet for width:66% (går vist ikke i IE6).
Birger
| |
Thomas Møller Nexø (08-11-2007)
| Kommentar
Fra : Thomas Møller Nexø |
Dato : 08-11-07 08:15 |
|
> Vandrette margins overlapper.
> Derfor er din
> margin-right : 0;
> i #mainMenu overflødig.
>
> Men det løser ikke dit problem.
> 100% er ikke det hele i IE - desværre.
> Det værste er, at 100% nogen gange er mere end det hele - andre gange
> mindre... ;>)
> (Tror faktisk at det er forklaret med, at scrollbaren nogen gange regnes
> med, og andre ikke - og det uanset om den vises eller ej.)
Hej Birger.
Problemet blev løst ved at sætte <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ind i toppen af
siden 
Men jeg ved ikke om du måske kan give mig et hint om et andet problem jeg
har med siden.
Jeg vil gerne have en baggrund/baggrundsfarve i den div, der hedder main,
hvor de to midterste div'er er placeret.
Som det er nu skubber de ud over selve mail div'en når der fyldes indhold i
dem og dermed kan jeg ikke lave den fælles baggrundseffekt jeg gerne vil
have.
Jeg vil med andre ord gerne have den midterste div til at rykke med de to
andre - altså udvidde sig i takt med dem.
--
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
| |
 Birger (08-11-2007)
| Kommentar
Fra : Birger |
Dato : 08-11-07 10:42 |
|
"Thomas Møller Nexø" <tnsdfds@fds.dk> skrev i en meddelelse
news:4732b789$0$90268$14726298@news.sunsite.dk...
>
> Men jeg ved ikke om du måske kan give mig et hint om et andet problem jeg
> har med siden.
> Jeg vil gerne have en baggrund/baggrundsfarve i den div, der hedder main,
> hvor de to midterste div'er er placeret.
>
> Som det er nu skubber de ud over selve mail div'en når der fyldes indhold
> i
> dem og dermed kan jeg ikke lave den fælles baggrundseffekt jeg gerne vil
> have.
> Jeg vil med andre ord gerne have den midterste div til at rykke med de to
> andre - altså udvidde sig i takt med dem.
>
Beklager, jeg ikke lige så doctypen manglede (det gør den stadig på nettet,
hvor din side ikke vises rigtigt i IE7).
Det er så basalt, at det bør være det første enhver "hjemmeside designer",
tænker på. Og er derfor ikke det første sted jeg ser efter fejl.
Men "uerfarne" skal jo også lære det.
Et hint vil være at læse Jørgens sider - hvis jeg forstår dig rigtigt.
Du vil have den omgivende div, til at følge med størrelsen af dem den
indeholder.
Og det har vi vist set adskillige gange efterhånden...
http://webdesign101.dk
Kan ikke lige give dig et mere præcist link - men det kan Jørgen... ;>)
Og under alle omstændigheder, er hans sider gode at få både forstand og
inspiration.
Birger
| |
Jørgen Farum Jensen (08-11-2007)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 08-11-07 11:07 |
| | |
Thomas Møller Nexø (08-11-2007)
| Kommentar
Fra : Thomas Møller Nexø |
Dato : 08-11-07 23:44 |
|
> Tak for de pæne ord. Artiklen, der forklarer
> hvilke mekanismer, der er på spil, er
> http://webdesign101.dk/css/floatcontainer.php
> Og de model-layouts, der udnytter disse mekanismer,
> gennemgås i artiklen
> http://webdesign101.dk/layout/
Hejsa.
Det var lige det jeg manglede.
Jeg var tæt på, men valgte at bruge dit eksempel med at smide sidefoden ind
i selve den omkransende div og det virkede fint
Takker for hjælpen!
Med venlig hilsen,
Thomas
--
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
| |
Thomas Møller Nexø (08-11-2007)
| Kommentar
Fra : Thomas Møller Nexø |
Dato : 08-11-07 23:48 |
|
> Beklager, jeg ikke lige så doctypen manglede (det gør den stadig på nettet,
> hvor din side ikke vises rigtigt i IE7).
> Det er så basalt, at det bør være det første enhver "hjemmeside designer",
> tænker på. Og er derfor ikke det første sted jeg ser efter fejl.
> Men "uerfarne" skal jo også lære det.
Ja, jeg vil nu hverken kalde mig uerfaren eller erfaren. Har arbejdet en del
med design af hjemmesider, men når der går et år mellem hver gang man vælger
at starte et nyt projekt (dette her er privat), så glemmer man hurtigt de små,
men vigtige finesser.
> http://webdesign101.dk
Super godt. Tak for det. Det var netop det jeg stod og manglede. Tingene som
jeg efterlyste er nu rettet. Jeg har lagt den ændrede version af siden på
http://www.thomasnexoe.dk, som er der siden kommer til at ligge når den nu
engang bliver helt færdig.
Tak for hjælpen!
Med venlig hilsen,
Thomas
--
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
| |
Allan Vebel (09-11-2007)
| Kommentar
Fra : Allan Vebel |
Dato : 09-11-07 15:29 |
|
Thomas Møller Nexø skrev:
> når den nu engang bliver helt færdig.
Du kan få dine h2-billeder til at ligge pænere ved at
indføre en placering for dem:
background: url(grafik/h2_img.gif) 0 50% no-repeat;
.... og så skal du lige se siden i IE6 - det er højst
uforudsigeligt hvor menuen bliver placeret, afhængig
af vinduets bredde.
--
Allan Vebel
http://html-faq.dk
| |
Thomas Møller Nexø (11-11-2007)
| Kommentar
Fra : Thomas Møller Nexø |
Dato : 11-11-07 20:36 |
|
> Du kan få dine h2-billeder til at ligge pænere ved at
> indføre en placering for dem:
>
> background: url(grafik/h2_img.gif) 0 50% no-repeat;
>
Tak for det Allan. Dit råd er nu fulgt og det ser jo en del bedre
ud.
> .... og så skal du lige se siden i IE6 - det er højst
> uforudsigeligt hvor menuen bliver placeret, afhængig
> af vinduets bredde.
Hov, den var jeg ikke opmærkdom på. Men jeg har nu siddet og
fiflet lidt med layoutet og nu ser det ud til at holde i IE6. Men
det har så gjort at jeg har været nødt til at gå på kompromis med
bredden på de to div'er, der igen gar resulteret i at det ser
mindre godt ud i IE7 og firefox...
Skal der noget browser detection til her, eller er der en måde at
få IE6 til at vise bredden på samme måde som firefox - altså ud
fra standarderne?
--
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
| |
Allan Vebel (11-11-2007)
| Kommentar
Fra : Allan Vebel |
Dato : 11-11-07 22:45 |
|
Thomas Møller Nexø skrev:
> nu siddet og fiflet lidt med layoutet og nu ser det
> ud til at holde i IE6. Men det har så gjort at jeg har
> været nødt til at gå på kompromis med bredden
> på de to div'er, der igen gar resulteret i at det ser
> mindre godt ud i IE7 og firefox...
Jeg ville have opbygget det på en helt anden måde
end med float - jeg har prøvet at lege lidt med det,
hvor jeg har fjernet float:
#mainContent {
padding:10px 10px 0px 300px;
}
..mainMenu{
width:230px;
position:absolute;
top:130px;
left:10px;
}
Det virker også forkert at menuen bliver bredere eller
smallere med vinduets bredde.
> Skal der noget browser detection til her
Nej, det er slet ikke nødvendigt.
--
Allan Vebel
http://html-faq.dk
| |
Thomas Møller Nexø (14-11-2007)
| Kommentar
Fra : Thomas Møller Nexø |
Dato : 14-11-07 02:42 |
|
> Det virker også forkert at menuen bliver bredere eller
> smallere med vinduets bredde.
Hej Allan.
Ja, det er jo smag og behag. Selv kan jeg godt lide at siden har
et ensartet layout i de fleste opløsninger.
Jeg kører selv 1920 x 1200 og her vises de fleste sider som små
frimærker på skærmen.
Hvis jeg havde en menu, der var fx. 230px bred ville resten af
indholdet strække sig over alt for stor bredde, der igen ville
skade læsevenligheden mere end godt er.
Men det er jo bare min mening
Tak for dine input!
Med venlig hilsen,
Thomas
--
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
| |
Allan Vebel (08-11-2007)
| Kommentar
Fra : Allan Vebel |
Dato : 08-11-07 00:59 |
| | |
Thomas Møller Nexø (08-11-2007)
| Kommentar
Fra : Thomas Møller Nexø |
Dato : 08-11-07 08:17 |
|
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
Hej Allan.
Tak for input. Jeg har netop fundet ud af dette af anden vej, som du kan læse i mit svar til
Birger længere oppe i denne tråd.
Med venlig hilsen,
Thomas
--
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
| |
|
|