|
|
 | Dynamisk centrering af block-level element~
Fra : Kenneth |
Dato : 14-11-08 15:39 |
|
Hej alle,
Jeg har fået et lidt for udfordrende problem. Problemet er
illustreret i bunden af følgende side:
http://www.eof7.com/Kenneth/front.php
Mit første spørgsmål er som følger: Hvorfor kan man I Internet
Explorerer se tre farver (pink, rød, grå) i den midderste box,
mens man i FireFox kun kan se to (pink, rød)?
Min hovedpine er imidlertid at få de røde boxe centreret i den
pink box. Problemer er, at brugeren selv kan vælge, hvor mange
topics, han vil have på hver side, så antallet af røde boxe
varierer. Jeg tænkte, at jeg ville putte de røde boxe ind i en
box (den grå box i Internet Explorer), som så er centreret i den
pink box. Dette virker også fint, hvis den grå box har en fast
bredde - og så udvider den sig jo ikke længere dynamisk! Sætter
jeg ingen længde på den grå box, er det som om, at den ikke
eksisterer, og de røde boxe bliver venstre-justeret i den pink
box.
Alle boxe er divs styret fra et eksternt stylesheet, så der er
ingen tabeller på siden. Den pink box har text-aline sat til
center, og den grå box har sine margin sat til auto og har
text-align sat til venstre. Både den tyrkis, pink og grønne box
er defineret med fast bredde i px.
Jeg har brug for hjælp venner ;)
Mvh Kenneth
--
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 Sørensen (14-11-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 14-11-08 17:52 |
|
Kenneth frembragte:
> Hej alle,
>
> Jeg har fået et lidt for udfordrende problem. Problemet er
> illustreret i bunden af følgende side:
>
> http://www.eof7.com/Kenneth/front.php
>
> Mit første spørgsmål er som følger: Hvorfor kan man I Internet
> Explorerer se tre farver (pink, rød, grå) i den midderste box,
> mens man i FireFox kun kan se to (pink, rød)?
>
> Min hovedpine er imidlertid at få de røde boxe centreret i den
> pink box. Problemer er, at brugeren selv kan vælge, hvor mange
> topics, han vil have på hver side, så antallet af røde boxe
> varierer. Jeg tænkte, at jeg ville putte de røde boxe ind i en
> box (den grå box i Internet Explorer), som så er centreret i den
> pink box. Dette virker også fint, hvis den grå box har en fast
> bredde - og så udvider den sig jo ikke længere dynamisk! Sætter
> jeg ingen længde på den grå box, er det som om, at den ikke
> eksisterer, og de røde boxe bliver venstre-justeret i den pink
> box.
>
> Alle boxe er divs styret fra et eksternt stylesheet, så der er
> ingen tabeller på siden. Den pink box har text-aline sat til
> center, og den grå box har sine margin sat til auto og har
> text-align sat til venstre. Både den tyrkis, pink og grønne box
> er defineret med fast bredde i px.
>
> Jeg har brug for hjælp venner ;)
>
> Mvh Kenneth
Når folk siger "dynamisk", er det noget med scripting.
Altså at sætte padding på den grå box, eller margin på de røde, efter
hvor meget de røde fylder, (måske ligefrem en class?) via script.
Et alternativ kan være at definere forskellige css'er, efter hvor mange
røde bokse der er.
Begge metoder vil give mulighed for også at holde samme afstand mellem
de røde - altså fordele dem jævnt.
Jeg ville nok fortrække css modellen - men vi ved jo ikke hvordan du
hitter ud af hvor mange røde bokse der skal være..
..rod1 { margin : 0px auto; } /* skift 0 med det du bruger */
..rod2 { margin : 0px 30px; }
..rod3 { margin : 0px 15px; }
brug rod1 på den røde boks, hvis der kun er een.
brug rod2 på begge de røde bokse, hvis der er to.
brug rod3 på alle de røde bokse hvis der er tre.
osv., etc.
Umiddelbart ligner den forsvindende grå boks, noget med noget ikke
clearet float. Jeg har ikke kigget kode, så det kan sikkert være
temmelig mange andre ting, også.
I øvrigt sætter din doc-type browserne i quirks mode - der mangler det
halve af den..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loo.dtd">
er det rigtige (begge linier - og de må gerne stå på een i din kode,
men kan ikke her).
Der er 19 fejl og 1 advarsel. Har ikke set på dem, men de bør tages
hånd om, før du kan regne med hvad du ser. (Og de kan også være årsag
til forskellighederne fra een browser til en anden.)
Så så jeg lige på koden alligevel. Du har mange XHTML afslutninger på
single tages (<meta /><img />) Det er forkert i HTML.
<FONT> eksisterer ikke længere - brug css. Du bruger adskillige ikke
eksisterende attributer.
Man er nødt til at snakke et sprog browseren forstår, hvis man vil have
først sine visiner ud i livet, som man havde tænkt sig.
Anbefaling : hent HTML validator til FF, og brug den når du udvikler.
Så får du en kode, som stort set opfører sig ens, på tværs af alle
browsre.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Birger Sørensen (14-11-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 14-11-08 18:43 |
| | |
Phecdaret (14-11-2008)
| Kommentar
Fra : Phecdaret |
Dato : 14-11-08 21:21 |
|
Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Kenneth frembragte:
> > Hej alle,
> >
> > Jeg har fået et lidt for udfordrende problem. Problemet er
> > illustreret i bunden af følgende side:
> >
> > http://www.eof7.com/Kenneth/front.php
> >
> > Mit første spørgsmål er som følger: Hvorfor kan man I Internet
> > Explorerer se tre farver (pink, rød, grå) i den midderste box,
> > mens man i FireFox kun kan se to (pink, rød)?
> >
> > Min hovedpine er imidlertid at få de røde boxe centreret i den
> > pink box. Problemer er, at brugeren selv kan vælge, hvor mange
> > topics, han vil have på hver side, så antallet af røde boxe
> > varierer. Jeg tænkte, at jeg ville putte de røde boxe ind i en
> > box (den grå box i Internet Explorer), som så er centreret i den
> > pink box. Dette virker også fint, hvis den grå box har en fast
> > bredde - og så udvider den sig jo ikke længere dynamisk! Sætter
> > jeg ingen længde på den grå box, er det som om, at den ikke
> > eksisterer, og de røde boxe bliver venstre-justeret i den pink
> > box.
> >
> > Alle boxe er divs styret fra et eksternt stylesheet, så der er
> > ingen tabeller på siden. Den pink box har text-aline sat til
> > center, og den grå box har sine margin sat til auto og har
> > text-align sat til venstre. Både den tyrkis, pink og grønne box
> > er defineret med fast bredde i px.
> >
> > Jeg har brug for hjælp venner ;)
> >
> > Mvh Kenneth
>
> Når folk siger "dynamisk", er det noget med scripting.
> Altså at sætte padding på den grå box, eller margin på de røde, efter
> hvor meget de røde fylder, (måske ligefrem en class?) via script.
Noteret.
>
> Et alternativ kan være at definere forskellige css'er, efter hvor mange
> røde bokse der er.
>
> Begge metoder vil give mulighed for også at holde samme afstand mellem
> de røde - altså fordele dem jævnt.
>
> Jeg ville nok fortrække css modellen - men vi ved jo ikke hvordan du
> hitter ud af hvor mange røde bokse der skal være..
De røde boxe fremkommer ved en topic-inddeling. Er der 50 topics i
databasen, og vil brugeren have 10 på hver side, så får du 5 røde boxe -
med hver et link i, fx "[10-15]". Box'ene bruges ganske enkelt til at
skille linkene ad.
>
> ..rod1 { margin : 0px auto; } /* skift 0 med det du bruger */
> ..rod2 { margin : 0px 30px; }
> ..rod3 { margin : 0px 15px; }
>
> brug rod1 på den røde boks, hvis der kun er een.
> brug rod2 på begge de røde bokse, hvis der er to.
> brug rod3 på alle de røde bokse hvis der er tre.
> osv., etc.
Dette virker ikke. Box'en (div'en) som de røde boxe skal placeres inde i
er givet ved:
#bottomBannerBoxCenterContent {
margin-top:8px;
text-align:left;
background-color:#C0C0C0;
margin-left:auto;
margin-right:auto;
width: 300px;
}
og de røde boxe med hver indeholdende et link:
..topicQuantisizeSpacer{
height:40px;
width:50px;
max-width:50px;
max-width:50px;
background-color:#FF0000;
float:left;
margin : 0px auto;
}
Alle røde boxe tilhører den samme klasse. Hvad gør jeg galt? Dit forslag
får boxene centreret under hinanden er ventre-justeret afhænig af, omder
er er float på dem.
>
> Umiddelbart ligner den forsvindende grå boks, noget med noget ikke
> clearet float. Jeg har ikke kigget kode, så det kan sikkert være
> temmelig mange andre ting, også.
>
> I øvrigt sætter din doc-type browserne i quirks mode - der mangler det
> halve af den..
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> " http://www.w3.org/TR/html4/loo.dtd">
Dette er ordnet.
> er det rigtige (begge linier - og de må gerne stå på een i din kode,
> men kan ikke her).
> Der er 19 fejl og 1 advarsel. Har ikke set på dem, men de bør tages
> hånd om, før du kan regne med hvad du ser. (Og de kan også være årsag
> til forskellighederne fra een browser til en anden.)
> Så så jeg lige på koden alligevel. Du har mange XHTML afslutninger på
> single tages (<meta /><img />) Det er forkert i HTML.
> <FONT> eksisterer ikke længere - brug css. Du bruger adskillige ikke
> eksisterende attributer.
Dette er jeg udemræket klar over. Problemet er, at kunden har ønsket at
benytte en wysiwyg code generator (og jeg kender ingen alternativer), som
spytter forældet html ud i et textarea...
> Man er nødt til at snakke et sprog browseren forstår, hvis man vil have
> først sine visiner ud i livet, som man havde tænkt sig.
>
> Anbefaling : hent HTML validator til FF, og brug den når du udvikler.
> Så får du en kode, som stort set opfører sig ens, på tværs af alle
> browsre.
Godt råd.
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
--
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 Sørensen (14-11-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 14-11-08 22:08 |
|
Phecdaret har bragt dette til os:
>
> Dette virker ikke. Box'en (div'en) som de røde boxe skal placeres inde i
> er givet ved:
>
> #bottomBannerBoxCenterContent {
> margin-top:8px;
> text-align:left;
> background-color:#C0C0C0;
> margin-left:auto;
> margin-right:auto;
> width: 300px;
> }
>
> og de røde boxe med hver indeholdende et link:
>
> .topicQuantisizeSpacer{
> height:40px;
> width:50px;
> max-width:50px;
> max-width:50px;
> background-color:#FF0000;
> float:left;
> margin : 0px auto;
> }
>
> Alle røde boxe tilhører den samme klasse. Hvad gør jeg galt? Dit forslag
> får boxene centreret under hinanden er ventre-justeret afhænig af, omder
> er er float på dem.
>
Der må så være noget (PHP? ASP? eller er det clientside scripting?) der
beregner antallet af røde bokse, og her kan du give dem den classe der
passer til aktuelt antal.
Først er der et problem med ovenstående definition af den røde boks:
float:left;
margin : 0px auto;
Den første siger til venstre med dig, den anden at den skal være i
midten. (auto beregner margener, så elementet centreres)
De kan alstså ikke anvendes samtidig på samme element.
Der er ingen grund til at definere max-width to gange. Og du har
defineret width, så der er slet ingen grund til at have den..
Du skal selvfølgelig beregne tallene rigtigt.
Hvis der kun er een box, er der 250px at fordele - altså
margin-left : 125px;
margin-right : 125px;
med kun een box, kan du lige så godt bruge auto.
Har du to boxe er der 200 px at fordele, men nu på tre mellemrum,
altså 66px margin på hver side.
Er der 3 boxe, har du 150px at fordele på 4 mellemrum: 37px
4 boxe: 100px på 5 mellemrum : 20px
5 boxe: 50px til 6 mellemrum : 8px
med 6 boxe, er der ikke plads nok.
Marginer overlapper nogen gange, andre ikke. Er ikke lige klar over
hvordan og hvorfor, så du skal nok lege lidt med tallene.
Det kan måske være en ide, at pille margin ud, og bruge den som en
ekstra class -
<div class="topicQuantisizeSpacer rod1">..</div>
Desuden er der stadig 14 HTML fejl.
Og du kan ikke forvente, at browserne skal gætte rigtigt..
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Phecdaret (14-11-2008)
| Kommentar
Fra : Phecdaret |
Dato : 14-11-08 23:18 |
|
Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Phecdaret har bragt dette til os:
> >
> > Dette virker ikke. Box'en (div'en) som de røde boxe skal placeres inde i
> > er givet ved:
> >
> > #bottomBannerBoxCenterContent {
> > margin-top:8px;
> > text-align:left;
> > background-color:#C0C0C0;
> > margin-left:auto;
> > margin-right:auto;
> > width: 300px;
> > }
> >
> > og de røde boxe med hver indeholdende et link:
> >
> > .topicQuantisizeSpacer{
> > height:40px;
> > width:50px;
> > max-width:50px;
> > max-width:50px;
> > background-color:#FF0000;
> > float:left;
> > margin : 0px auto;
> > }
> >
> > Alle røde boxe tilhører den samme klasse. Hvad gør jeg galt? Dit forslag
> > får boxene centreret under hinanden er ventre-justeret afhænig af, omder
> > er er float på dem.
> >
>
> Der må så være noget (PHP? ASP? eller er det clientside scripting?) der
> beregner antallet af røde bokse, og her kan du give dem den classe der
> passer til aktuelt antal.
Jeg er ikke helt sikker på, hvad du mener. Scriptet er php. Du vil have, at
jeg laver beregningen, og så sætter margin efter det? Det må kunne gøres uden
php med ren CSS?
>
> Først er der et problem med ovenstående definition af den røde boks:
> float:left;
> margin : 0px auto;
> Den første siger til venstre med dig, den anden at den skal være i
> midten. (auto beregner margener, så elementet centreres)
> De kan alstså ikke anvendes samtidig på samme element.
Problemet er, at den første siger: I skal være på én linie, mens den anden
siger: I skal være under hinanden. Frustrerende!!
> Der er ingen grund til at definere max-width to gange. Og du har
> defineret width, så der er slet ingen grund til at have den..
Selvfølgelig - min fejl :)
>
> Du skal selvfølgelig beregne tallene rigtigt.
> Hvis der kun er een box, er der 250px at fordele - altså
> margin-left : 125px;
> margin-right : 125px;
> med kun een box, kan du lige så godt bruge auto.
> Har du to boxe er der 200 px at fordele, men nu på tre mellemrum,
> altså 66px margin på hver side.
> Er der 3 boxe, har du 150px at fordele på 4 mellemrum: 37px
> 4 boxe: 100px på 5 mellemrum : 20px
> 5 boxe: 50px til 6 mellemrum : 8px
> med 6 boxe, er der ikke plads nok.
Her er du igen ude i at lave breninger i php og sætte CSS efter dem. Det må
kunne gøres mere simpelt, eller hvad? Jeg forsåtr det bare ikke. Jeg han en
div med et vekslende antal div'er inden i, som jeg gerne vil have centreret
på én linie. Skal der virkelig php eller anden script til det?!
> Marginer overlapper nogen gange, andre ikke. Er ikke lige klar over
> hvordan og hvorfor, så du skal nok lege lidt med tallene.
>
> Det kan måske være en ide, at pille margin ud, og bruge den som en
> ekstra class -
> <div class="topicQuantisizeSpacer rod1">..</div>
Jeg overvejer det.
>
> Desuden er der stadig 14 HTML fejl.
Nu er jeg nede på 8, og længere ned kan jeg ikke komme pga af
wysiwyg-editoren :(
> Og du kan ikke forvente, at browserne skal gætte rigtigt..
>
> Birger
Tak for alle dine svar Birger, jeg prøver virkelig at få løst det her :)
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
--
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 Sørensen (15-11-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 15-11-08 12:56 |
|
Phecdaret udtrykte præcist:
Lidt på tværs af andre svar og andre spørgsmål du har stillet...
Min idé er at sætte værdierne for afstande ved centrering med et givet
antal boxe i forud definerede css klasser, og ud fra beregningen i PHP,
sætte den klasse der hører til det givne antal, på boxene.
Det skulle ikke være så helt umuligt at gøre, og det bør også kunne
bringes til at fungere.
Problemet er ikke, at man ikke kan centrere flere boxe - men at man
ikke ved hvor mange boxe der skal centreres.
Man kan også ændre på padding for den grå box, for at skubbe de røde
hen på midten (det giver centrering, men ikke ligelig fordelt afstand
mellem de røde boxe).
Hvor stor padding skal være, bliver igen afhængig af hvor mange røde
boxe der skal vises - igen enten flere css classer at vælge mellem,
eller en javascriptløsning, der sætter padding, når siden er hentet.
Unaset om din kunde er besværlig og alt mulig andet : Hvis din kode
indeholder fejl, kan du ikke regne med at den vises som forventet. Om
fejlene importeres fra Månen eller Frontpage, eller genereres af et
andet underlødigt wysiwyg program, er fuldstændig ligegyldigt.
Browseren kan ikke se hvor fejlene kommer fra. Den kan kun se fejlene.
Og den aner ikke hvad den skal stille op med fejlbehæftet kode...
Det må du godt sige til din kunde, at jeg har sagt 
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Phecdaret (15-11-2008)
| Kommentar
Fra : Phecdaret |
Dato : 15-11-08 17:48 |
|
Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Phecdaret udtrykte præcist:
>
>
> Lidt på tværs af andre svar og andre spørgsmål du har stillet...
>
> Min idé er at sætte værdierne for afstande ved centrering med et givet
> antal boxe i forud definerede css klasser, og ud fra beregningen i PHP,
> sætte den klasse der hører til det givne antal, på boxene.
>
> Det skulle ikke være så helt umuligt at gøre, og det bør også kunne
> bringes til at fungere.
>
> Problemet er ikke, at man ikke kan centrere flere boxe - men at man
> ikke ved hvor mange boxe der skal centreres.
>
>
> Man kan også ændre på padding for den grå box, for at skubbe de røde
> hen på midten (det giver centrering, men ikke ligelig fordelt afstand
> mellem de røde boxe).
> Hvor stor padding skal være, bliver igen afhængig af hvor mange røde
> boxe der skal vises - igen enten flere css classer at vælge mellem,
> eller en javascriptløsning, der sætter padding, når siden er hentet.
>
>
> Unaset om din kunde er besværlig og alt mulig andet : Hvis din kode
> indeholder fejl, kan du ikke regne med at den vises som forventet. Om
> fejlene importeres fra Månen eller Frontpage, eller genereres af et
> andet underlødigt wysiwyg program, er fuldstændig ligegyldigt.
> Browseren kan ikke se hvor fejlene kommer fra. Den kan kun se fejlene.
> Og den aner ikke hvad den skal stille op med fejlbehæftet kode...
> Det må du godt sige til din kunde, at jeg har sagt
Ha ha, det skal jeg gøre. Tak for alle dine svar, de har hjulpet mig godt
på vej.
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
--
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
| |
Jørgen Farum Jensen (14-11-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 14-11-08 18:17 |
|
Kenneth skrev:
>
> Alle boxe er divs styret fra et eksternt stylesheet, så der er
> ingen tabeller på siden. Den pink box har text-aline sat til
> center, og den grå box har sine margin sat til auto og har
> text-align sat til venstre. Både den tyrkis, pink og grønne box
> er defineret med fast bredde i px.
>
Det er lidt af en rodebutik med det banner,
med siden som helhed og især med dit fejlbehæftede
stylesheet.
Én iøjnefaldende fejl - height og width er
ikke alle steder forsynet med et mål, det
hedder for eksempel height:40px; og ikke
height:40.
Din dokumenttyperklæring er heller ikke i
trit med din HTML-kode og er i øvrigt en
DTD der sætter IE i quirks modus. Og så
kan du godt skyde en hvid pind efter at
få samme visning i IE som i standardover-
holdende browsere.
Det problem du har tror jeg imidlertid skyldes,
at du anvender text-align i den tro, at
et element derved centreres. Det gør det
ikke - det er kun elementets tekstindhold,
der centreres. Centrering af et element
med en bredde foregår ved at sætte
margin-left:auto;
margin-right:auto;
Pil hele den footer eller hvad du nu kalder
det ud af siden og lav en side, der kun omfatter
den - så er det mig lettere for dig - og os
andre - at få styr på det. Så sparer vi
osse en del båndbredde ved at blive
fritaget for diverse Flash Movies eller
hvad det nu er for noget skidt du har
på din side.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
| |
Phecdaret (14-11-2008)
| Kommentar
Fra : Phecdaret |
Dato : 14-11-08 21:30 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Kenneth skrev:
>
> >
> > Alle boxe er divs styret fra et eksternt stylesheet, så der er
> > ingen tabeller på siden. Den pink box har text-aline sat til
> > center, og den grå box har sine margin sat til auto og har
> > text-align sat til venstre. Både den tyrkis, pink og grønne box
> > er defineret med fast bredde i px.
> >
>
> Det er lidt af en rodebutik med det banner,
> med siden som helhed og især med dit fejlbehæftede
> stylesheet.
>
> Én iøjnefaldende fejl - height og width er
> ikke alle steder forsynet med et mål, det
> hedder for eksempel height:40px; og ikke
> height:40.
Er ordnet. I den forbindelse opstod der et nyt lille problem: Hvis
jeg vil styre et link inde i en div, kan det så ikke gøres ved:
a.linkbottomBox:link
hvis bare linket tilhører en klasse, ellers skal jeg bruge div'en på
en måde? Selve div'en og linket bliver genereret i php, og
problememet kom, da jeg flyttede det over i en included fil - som jo
ikke referer til et CSS. Har det noget at sige?
>
> Din dokumenttyperklæring er heller ikke i
> trit med din HTML-kode og er i øvrigt en
> DTD der sætter IE i quirks modus. Og så
> kan du godt skyde en hvid pind efter at
> få samme visning i IE som i standardover-
> holdende browsere.
Er ordnet.
>
> Det problem du har tror jeg imidlertid skyldes,
> at du anvender text-align i den tro, at
> et element derved centreres.
Dette er ikke helt rigtigt. IE anvender nemlig text-align på
block-elementer. Det er et hack for at centrere i IE. Det virker
tilsynelde bare kun på én box - så jeg har stadig mit problem!
Det gør det
> ikke - det er kun elementets tekstindhold,
> der centreres. Centrering af et element
> med en bredde foregår ved at sætte
> margin-left:auto;
> margin-right:auto;
Virker ikke på flere box, eller også gør jeg det forkert. Se mit
svar til Birger.
>
> Pil hele den footer eller hvad du nu kalder
> det ud af siden og lav en side, der kun omfatter
> den - så er det mig lettere for dig - og os
> andre - at få styr på det.
Det hjælper ikke jer overhovedet, da det hele bliver genereret i
php. Du menet brugen af include ikke?
Så sparer vi
> osse en del båndbredde ved at blive
> fritaget for diverse Flash Movies eller
> hvad det nu er for noget skidt
Ha ha ha ha, det er nu bare en skrifttype ;)
du har
> på din side.
>
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
--
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
| |
Jørgen Farum Jensen (14-11-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 14-11-08 22:44 |
|
Phecdaret skrev:
> Er ordnet. I den forbindelse opstod der et nyt lille problem: Hvis
> jeg vil styre et link inde i en div, kan det så ikke gøres ved:
>
> a.linkbottomBox:link
Hvis din div har klassenavnet linkbottomBox
vil den korrekte syntaks være
..linkbottomBox a:link.
Er du i øvrigt sikker på alle browsere er
ligeglade med store og små bogstaver? Jeg synes
jeg har læst noget om, at .linkbottomBox ikke
matcher class="linkbottombox" ?
>>
>> Det problem du har tror jeg imidlertid skyldes,
>> at du anvender text-align i den tro, at
>> et element derved centreres.
>
> Dette er ikke helt rigtigt. IE anvender nemlig text-align på
> block-elementer. Det er et hack for at centrere i IE. Det virker
> tilsynelde bare kun på én box - så jeg har stadig mit problem!
Det er en *fejl* ved IE at visse versioner anvender
text-align:center på blokelementer. Og ligesom så
mange andre fejl ved IE er den blevet anvendt til
at centrere i IE5. IE > 5 centrerer korrekt efter
CSS-standarden, hvis browseren er i standardmodus.
> Det gør det
>> ikke - det er kun elementets tekstindhold,
>> der centreres. Centrering af et element
>> med en bredde foregår ved at sætte
>> margin-left:auto;
>> margin-right:auto;
>
> Virker ikke på flere box, eller også gør jeg det forkert. Se mit
> svar til Birger.
>
>>
>> Pil hele den footer eller hvad du nu kalder
>> det ud af siden og lav en side, der kun omfatter
>> den - så er det mig lettere for dig - og os
>> andre - at få styr på det.
>
> Det hjælper ikke jer overhovedet, da det hele bliver genereret i
> php. Du menet brugen af include ikke?
Nej, jeg mente det jeg skrev - lav en HTML-side, der
*kun* omfatter den sidefod og formatér dén, så den
virker til din tilfredshed. *Så* kan du inkludere den.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
| |
Phecdaret (15-11-2008)
| Kommentar
Fra : Phecdaret |
Dato : 15-11-08 08:30 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Phecdaret skrev:
>
> > Er ordnet. I den forbindelse opstod der et nyt lille problem: Hvis
> > jeg vil styre et link inde i en div, kan det så ikke gøres ved:
> >
> > a.linkbottomBox:link
>
> Hvis din div har klassenavnet linkbottomBox
> vil den korrekte syntaks være
> ..linkbottomBox a:link.
>
> Er du i øvrigt sikker på alle browsere er
> ligeglade med store og små bogstaver? Jeg synes
> jeg har læst noget om, at .linkbottomBox ikke
> matcher class="linkbottombox" ?
Du har ret! :) En ændering fra lille til stort løste problemet.
>
>
> >>
> >> Det problem du har tror jeg imidlertid skyldes,
> >> at du anvender text-align i den tro, at
> >> et element derved centreres.
> >
> > Dette er ikke helt rigtigt. IE anvender nemlig text-align på
> > block-elementer. Det er et hack for at centrere i IE. Det virker
> > tilsynelde bare kun på én box - så jeg har stadig mit problem!
>
> Det er en *fejl* ved IE at visse versioner anvender
> text-align:center på blokelementer. Og ligesom så
> mange andre fejl ved IE er den blevet anvendt til
> at centrere i IE5. IE > 5 centrerer korrekt efter
> CSS-standarden, hvis browseren er i standardmodus.
>
> > Det gør det
> >> ikke - det er kun elementets tekstindhold,
> >> der centreres. Centrering af et element
> >> med en bredde foregår ved at sætte
> >> margin-left:auto;
> >> margin-right:auto;
> >
> > Virker ikke på flere box, eller også gør jeg det forkert. Se mit
> > svar til Birger.
> >
> >>
> >> Pil hele den footer eller hvad du nu kalder
> >> det ud af siden og lav en side, der kun omfatter
> >> den - så er det mig lettere for dig - og os
> >> andre - at få styr på det.
> >
> > Det hjælper ikke jer overhovedet, da det hele bliver genereret i
> > php. Du menet brugen af include ikke?
>
> Nej, jeg mente det jeg skrev - lav en HTML-side, der
> *kun* omfatter den sidefod og formatér dén, så den
> virker til din tilfredshed. *Så* kan du inkludere den.
En rigtig god idé - jeg havde misforstået dig.
Efter diskussion med Birger er vi vist kommet frem til, at mit problem
kun kan løses med et script, der sætter width på de røde boxe efter
antallet af boxe. Er du enig i, at proilemet ikke kan løses med ren
CSS? Det virker bare underligt, at man ikke kan centrere 3 div's på
række inde i en ydre div...
>
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
--
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
| |
Jørgen Farum Jensen (15-11-2008)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 15-11-08 11:28 |
|
Phecdaret skrev:
> Efter diskussion med Birger er vi vist kommet frem til, at mit problem
> kun kan løses med et script, der sætter width på de røde boxe efter
> antallet af boxe. Er du enig i, at proilemet ikke kan løses med ren
> CSS? Det virker bare underligt, at man ikke kan centrere 3 div's på
> række inde i en ydre div...
Hvordan skal du kunne centrere noget, du ikke kender
bredden af? En browser er jo ikke klogere end mennesker,
og på de givne præmisser er det heller ikke menneskelig
muligt.
Og du kan sagtens centrere 3 div's på en række
inden i en ydre div - hvis du altså kender bredden af
det du skal centrere.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
| |
Phecdaret (15-11-2008)
| Kommentar
Fra : Phecdaret |
Dato : 15-11-08 17:57 |
|
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Phecdaret skrev:
>
> > Efter diskussion med Birger er vi vist kommet frem til, at mit problem
> > kun kan løses med et script, der sætter width på de røde boxe efter
> > antallet af boxe. Er du enig i, at proilemet ikke kan løses med ren
> > CSS? Det virker bare underligt, at man ikke kan centrere 3 div's på
> > række inde i en ydre div...
>
> Hvordan skal du kunne centrere noget, du ikke kender
> bredden af? En browser er jo ikke klogere end mennesker,
> og på de givne præmisser er det heller ikke menneskelig
> muligt.
> Og du kan sagtens centrere 3 div's på en række
> inden i en ydre div - hvis du altså kender bredden af
> det du skal centrere.
Hmm...Jeg sammenligner måske bare for meget med almindelig tekst: centrerer
du teksten, så finder den selv ud af holde margin - uanset antal bogstaver.
Kan den finde ud af det, så kan den da for pokker også finde ud af det med
røde boxe! Hvis ikke, så er det lidt klodset af CSS, at man selv skal hen
og definere bredde, margin etc for at det passer. Måske jeg bare skal vænne
mig til at benytte php eller javascript til layout i disse tilfælde. Der er
eksterne stylesheet hvis bare et problem, men det spørgsmål er stillet i
rette forum. Mange tak for din hjælp her i hvert fald ;)
>
>
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
> Webdesign med stylesheets: http://webdesign101.dk/cssbog/
--
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
| |
|
|