10 svar · 426 visningar · startad av SannyW
Hej!
Läste en väldigt intressant artikel om detta med att man använder div i alldeles för stor omfattning:
http://juicystudio.com/article/div-mania.php
Undrar lite om vad man kan/borde göra för att minska antalet div. Sedan om är det något annat i css som borde gjorts annorlunda så tas kommentarer gärna emot. (postar url istället för kod)
Tack på förhand.
Kolla hur sidan ser ut ifall du inte har med css-filen. Ifall sidan fortfarande förmedlar samma information så tyder det på en bra struktur.
Loggan som du har skulle du kunna lägga i en <h1>-tagg istället för att använda 2 div för den och en meny som du har stoppat i en <p> - tagg. Menyn, när du lägger upp den, kan du lägga i en <ul> t.ex.
Bilderna på hundar har väl mer med innehåll, än design att göra, och bör kanske ligga i vanliga <img>-taggar, istället för i varsin <div> som bakgrund.
Som sidan ser ut nu kan man säkert uppnå samma utseende med bara en <div>. Men när du fyller left, och rightcolumn med mer innehåll kanske 4 <div>-taggar är mer realistiskt.
- En container,
- två kolumner och
- en sidfot
Börja med dom fyra och se om det inte räcker. Kom ihåg att alla blockelement kan ha samma egenskaper som en <div>-tagg.
Du borde klara dig utan float på #preview va?
Kom ihåg att alla blockelement kan ha samma egenskaper som en <div>-tagg.
...för att inte tala om inline-element, och body- och html-elementen. ;)
Det som är viktigast är att man inte ersätter befintliga element i HTML med divar. Tex, använd <p> istället för <div class="stycke">, <h1> istället för <div class="rubrik">, osv.
Nu är inte det här en exakt kopia, men det ser ganska likt ut i Firefox och Opera. Jag har använt selektorer som inte stöds i IE, men det är ju vad som diskuterades i artikeln också... Dessutom är inte en sån här lösning direkt flexibel, eftersom stilmallen antar att du har exakt ett stycke efter rubriken, osv. Jag ville bara visa att det är möjligt att få till en layout helt utan DIV, CLASS och ID. ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>bärtålåmeus.se</title>
<style type="text/css">
html { background:#f2f1eb; color:black; font:70% "Verdana", sans-serif; letter-spacing:.15em; margin:0; padding:9px; }
body { width:800px; margin:0 auto; padding:8px; border:solid gray; background:white; color:gray; position:relative; }
h1 { background:url([url]http://www.xn--brtlmeus-0zamb.se/img/topback.jpg[/url]) repeat-y; padding:3px; margin:0; }
h1 img { display:block; }
a img { border:none; }
ol { margin:0; padding:0; text-align:center; margin-bottom:20px; }
ol li { display:inline; padding:0 1px; }
ol li img { border:thin solid gray; }
body > p:first-child { float:right; margin:0; line-height:0; }
h1 + p { padding-left:1em; }
h1 + p + p { clear:right; border-top:thin solid gray; margin-bottom:.5em; }
ol + p { position:absolute; margin-top:40px; width:100%; text-align:center; background:transparent; color:black; }
ol + p img { vertical-align:middle; }
</style>
</head>
<body>
<p><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/main.jpg" /></p>
<h1><img alt="bärtålåmeus.se"
src="http://www.xn--brtlmeus-0zamb.se/img/top.jpg" /></h1>
<p>Hej mitt namn är Bärtålåmeus, jag kommer inom kort presentera mitt liv som hund
för Er. Min sida är under konstruktion och kommer att uppdateras så snart som det är
möjligt.</p>
<p>Några kex ur min portfolio:</p>
<ol>
<li><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/preview1.jpg" /></li>
<li><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/preview2.jpg" /></li>
<li><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/preview3.jpg" /></li>
<li><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/preview4.jpg" /></li>
<li><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/preview5.jpg" /></li>
<li><img alt="" src="http://www.xn--brtlmeus-0zamb.se/img/preview6.jpg" /></li>
</ol>
<p>Copyright © 2005 <a
href="http://validator.w3.org/check?uri=http://www.xn--brtlmeus-0zamb.se/"><img
src="http://www.xn--brtlmeus-0zamb.se/img/w3c_xhtml.jpg" alt="W3C XHTML 1.0"
title="Valid XHTML 1.0!" /></a> <a
href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.xn--brtlmeus-0zamb.se/">
<img src="http://www.xn--brtlmeus-0zamb.se/img/w3c_css.jpg" alt="W3C CSS"
title="Valid CSS!" /></a></p>
</body>
</html>
Tack för svaren, det har varit en intressant afton. Har testat en massa fram och tillbaka för att nå målet......snubblade på det tomma intet.
guffa
- Det är sant som du säger om att koppla bort css, det blir en intressant vinkel på det hela.
Insider
1. har försökt att få till det med h1, men det måste finnas standardvärde som ställer till det. För problemet som uppstår är då jag vill placera min meny ovan på loggan.
/r
När jag kapslade in ul i h1 så blev texten fet. Var tvungen att sätta text-weight till normal.
2. Angående img, du har så rätt!
3. Klarar mig INTE utan float, för då försvinner min linje.
zcorpan
- väldigt intressant lösning, ger ju faktiskt en ok struktur även om man kopplar bort css. Men då jag försökte göra om och efterlikna din lösning så fick jag problem med den "stora hunden". T ex i Opera så flippar bilden högermarginal innan den faller på plats vid F5 (refresh).
Det största problemet var supporten av IE, skapade problem med storleken på containern och marginalerna då IE utnyttjar hela body.
Efter många om och men så kom jag tillslut nästan fram till en lösning. Men allt föll på linjen under den stora hunden, positionen/mellanrummet var olika i Opera, IE och FF. I FF så funkade det galant medan i de andra två så blev det fel.
Har nu ändrat lite, har gjort en specialare i ul. Undrar, om det går att dölja saker om css är avstängd? Alltså går det att kontrollera om css fungerar?
<ul id="menu">
<li><a href="default.asp" title="Vem är jag?">Vem är jag?</a></li>
<li>|</li> [b]<-- dölja[/b]
<li><a href="default.asp" title="Portfolio">Portfolio</a></li>
<li>|</li> [b]<-- dölja[/b]
<li><a href="default.asp" title="Hundkex">Hundkex</a></li>
</ul>
Sedan en liten slut sak om div, om jag förstått det hela rätt så är detta ett element som är "tomt". Alltså att den inte har några standard-värde, eller?
Du skulle ju kunna använda en border på <li> istället för att göra <li>|</li>. Det går kanske inte att få det exakt likadant, men om css är avstängt så kommer det i alla fall att försvinna
Teoretiskt sett skulle du kunna använda:
#menu li::before { content:" | "; }
...men igen, det funkar inte med IE. ;) Man kan förstås använda js för att få dit tecknet i IE, men det känns lite hackigt. Det är nog smidigare att använda border som oHLLe föreslog.
IE är mycket snällare mot dig om den får vara i Standards mode. Din XML-deklaration gör att IE använder Quirks mode - testa ta bort den. :)
Gjorde en blandlösning:
placerade detta i huvudet för att ändra IE
<!--[if IE]><style type="text/css">ul li { border-left: 1px solid gray; padding: 0 5px 0 5px; }</style><![endif]-->
fick även göra förändringar på första li
<li style="border: 0px; padding-left: 0px;">
Sedan gillade jag skarpt lösningen med, sökte efter den igår men hittade inte rätt.
#menu li+li::before { content:"|"; }
Allt funkar bra trodde jag, men får problem vid validering:
The pseudo-element ::before can't appear here in the context css2
/r
Hittade felet, det var en liten extra ":" som var med.
Du kan testa validera mot CSS3. ;) (Pseudo-klasser är ett kolon, pseudo-element är två kolon. I CSS2 är det ett kolon för båda, vilket jag tycker är mindre logiskt.)
<li style="border: 0px; padding-left: 0px;">
Jag skulle nog skriva
<li class="first-child">
(Eftersom inte IE stöder pseudo-klassen :first-child.)
Tack för svaret,
Logiken har jag lämnat bakom mig för länge sedan, tycker snart alla har en egen standard ;)
Nu blev det rörigt, validatorn accepterar att jag tar bort en av ":", vilket är fel enligt css3. Men rätt enligt css2?
satte en klass på li, men den ligger i korrigerings filen för ie, då det är där jag ändrar.
* tur det finns hjälp att få i ett forum som detta, annars hade jag nog käkat upp min css-bok. :OO
Jag föredrar CSS3-stilen, eftersom det är lättare att urskilja vad som är en pseudo-klass och vad som är ett pesudo-element. Det är av just den anledningen de ändrade det till CSS3. ;)