Problem i CSS, lösa dom med Javascript?

Var inne på sidan "Webdesignskolan" och upptäckte där att CSS kan göra väldigt MYCKET och att det till och med att förstå :o
http://www.webdesignskolan.com/
Läs igenom:
bygga webplatser
* CSS - grunder
* CSS - positionering
* CSS - menyer
* CSS - layout

Finns även information i "Senaste uppdateringarna"

Vad säger ni om detta? Jag tycker att det är väldigt bra och allting beskrivs mycket bra! Det räcker man tittar på det så förstår man det! Har ändrat mig och kommer att använda CSS mycket mer än planerat. En sak är dock att det verkar finnas en sak som man måste tänka på. Det är på flera ställen som dom beskriver att webbläsare inte tänker likadant och ibland måste lägga till ett javascript. Här är ett exempel:

--------------------------------------------------
Minimal och maximal bredd
Om du använder en bredd som är relativ till fönsterstorleken innebär det att textraderna i boxarna (kolumnerna) kan bli långa vilket kan påverka läsbarheten negativt. Om du vill ha en maximal bredd på layouten kan du kombinera width med max-width och om webläsarens fönsterstorlek är större än den angivna maxstorleken så används "max-width".

I exemplet nedan är containerboxen 99% av fönsterstorleken men maximalt 700 pixlar:

body {margin: 20px; padding: 0px;}
#kolumncontainer {width: 99%; max-width: 700px; float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

(Bild på objekt)

klicka här för att se exemplet »

OBS! Tyvärr har Internet Explorer problem att förstå max-width och ignorerar detta. Vill du ändå att det ska fungera i IE måste du lägga till ett javascript (som gör att koden inte längre validerar enligt W3C):
body {margin: 20px; padding: 0px;}
#kolumncontainer {width: 99%; max-width: 700px;
width: expression(document.body.clientWidth > 700? "700px": "auto");
float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

klicka här för att se exemplet »
-----------------------------------------------------------------
Hittar sådana här lite här och där om man kör "sök" efter javascript på Webdesignskolans olika beskrivninga om CSS. När man gör hemsidan så måste man alltså hela tiden kolla så att den fungerar på olika webbläsare. Framför allt dom fem största, Internet Explorer, Mozilla Firefox, Safari, Opera och Netscape. Sen skall man också veta hur man skall lösa problemen :q Är det större risk med att använda CSS eller är det samma problem med vanlig html?

Krycke skrev:

-----------------------------------------------------------------
Hittar sådana här lite här och där om man kör "sök" efter javascript på Webdesignskolans olika beskrivninga om CSS. När man gör hemsidan så måste man alltså hela tiden kolla så att den fungerar på olika webbläsare. Framför allt dom fem största, Internet Explorer, Mozilla Firefox, Safari, Opera och Netscape. Sen skall man också veta hur man skall lösa problemen :q Är det större risk med att använda CSS eller är det samma problem med vanlig html?

Man måste ALLTID kolla i olika webbläsare regelbundet, både Mac o PC. Fnular man med knepig kod måste man ibland kolla så fort man sparat nåt, dvs var och varannan minut. Gäller det vanlig kod, så kanske det räcker nån gång om dagen. men man måste kunna backa tillbaka till senaste "kontrollpunkten" om det skulle visa sig att sajten skiter sig i nån läsare.

Tyvärr är det så. Jag jobbar på Mac och har PC:n en trappa upp. Det är på det sättet jag håller mig i trim. :)

Var slarvet på "Minimal och maximal bredd". För att man skall förstå så skall det vara:

Minimal och maximal bredd
Om du använder en bredd som är relativ till fönsterstorleken innebär det att textraderna i boxarna (kolumnerna) kan bli långa vilket kan påverka läsbarheten negativt. Om du vill ha en maximal bredd på layouten kan du kombinera width med max-width och om webläsarens fönsterstorlek är större än den angivna maxstorleken så används "max-width".

I exemplet nedan är containerboxen 99% av fönsterstorleken men maximalt 700 pixlar:

body {margin: 20px; padding: 0px;}
#kolumncontainer {width: 99%; max-width: 700px; float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

(Bild på objekt)

klicka här för att se exemplet »

OBS! Tyvärr har Internet Explorer problem att förstå max-width och ignorerar detta. Vill du ändå att det ska fungera i IE måste du lägga till ett javascript (som gör att koden inte längre validerar enligt W3C):

body {margin: 20px; padding: 0px;}
#kolumncontainer {width: 99%; max-width: 700px;
width: expression(document.body.clientWidth > 700? "700px": "auto");
float: left; border: 1px solid #000000;}
#sidhuvud {background: #cc99cc; padding: 10px; border-bottom: 1px solid #000000;}
#kolumn1 {float: left; width: 20%; padding: 10px;}
#kolumn2 {float: left; width: 70%; padding: 10px; border-left: 1px solid #000000;}

klicka här för att se exemplet »

Krycke: Ifall du omsluter din css-kod med [kod]-taggar så blir det lättare för oss att urskilja koden från din text.

Liten fundering bara runt detta med ...

max-width: 700px;
width: expression(document.body.clientWidth > 700? "700px": "auto");

Det är visserligen viktigt att textrader inte blir för långa och att man ska försöka begränsa textboxars bredd. Men om man då gör det med maxbredds-script för IE, så får man andra nackdelar som jag kan tycka är besvärligare än långa rader,
nämligen sidoscroll när man surfar vid liten bildskärm. (bara IE som jag vet)
Ett fenomen som jag verkligen ogillar...
Då är det mycket enklare att som användare, minimera fönstret och därigenom få kortare rader.
Så nej, jag tycker inte att detta var ett bra tips fråm webdesignskolan... :)

Det som jag undrar är om det är vanligt med problem med CSS som inte är så där enkla att lösa. Hur är skillnaden mellan CSS och html. Har html inte lika många svåra problem som CSS?

Dom flesta programmen kan i stort sett bara html, vissa kan lite CSS. Varför är det så?

Här finns det exempen som jag har skrivit om:

http://www.webdesignskolan.com/css-layout/css_layout.htm#minmax
Tryck på, "Minimal och maximal bredd"

Tryck på denna så kommer ni direkt till "Minimal och maximal bredd"
http://www.webdesignskolan.com/css-layout/css_layout.htm#minmax