14 svar · 380 visningar · startad av SannyW
Kanske en mindre viktigt fråga, men lika bra att göra "rätt" från början.
När man tänker css, så skall <table> endast innehålla tabell data.
Hur ser man då på portfolio som presenteras i rutnät med rubriker och ev. bild info.
Vad anses mest rätt, allt lösa detta med div:ar eller lägga i tabell?
Tar Herr Guffa´s portfolio som exempel, visuellt så är detta ett rutnät med rubrik och info.
En lista av nåt slag. Varför inte en <dl>.
Gjorde en liten snabb koll, om jag har text i dt och kör float left på första dt så kommer samtliga dt att följa efter.
När där sedan om in en bild i dt så vid float left så hamnar även saker utanför dl bredvid bilden.
<dl style='border: 1px solid;'>
<dt><img alt="bild1" src="img/preview1.jpg" /></dt><dt>Bild1</dt>
<dt></dt>
</dl>
Ändrade till 100% på dl och fick ett bättre reslutat,men nu kvar står ett problem med detta exempel att kunna skapa lista till höger om bilden, känns om <br /> inte är den bästa lösningen :)
<dl style='border: 1px solid;float:left; width:100%;'>
<dt style='float:left;'><img alt="bild1" src="img/preview1.jpg" /></dt><dt style='float:left;'>Bild1</dt>
<dt><br />Hej</dt>
</dl>
Tack för länken icaaq, har kollat lite på hans lösningar. Det ger lite idéer, dock ser det ut som han missat några classer i sin style. Vet inte om det är därför som de olika alternativen ibland inte funkar som de skall.
Men summeringen är dock att det ger idéer, det är viktigast. Sedan kan man i och för sig lösa bakgrunden utan att lägga bild där.
typ:
Fortsätter i denna tråd, är på samma linje som den tidigare.
När jag skriver ut min dl så blir den olika i IE och FF. IE gör ingen padding 3px medan FF gör det, trots att det funkar i FF så blir resultet inte bra om bilden ersätts med alt. Då hamnar padding ovan för den tidigare dt.
dl
{
margin: 0;
padding: 0;
text-align:center;
font-family: verdana, arial, helvetica, sans serif;
font-weight: normal;
letter-spacing: 2px;
color: gray;
font-size: 10px;
}
dl dt
{
padding: 3px;
}
dt img
{
border:1px solid gray;
background-color: white;
padding: 3px;
}
Fick lösa det med:
Dock funkar fortfarande inte padding 3px i IE så det blir ingen vit ram innan för den grå. Men funkar i FF.
dt img
{
margin: auto;
border:1px solid gray;
background-color: white;
padding: 3px;
display:block;
}
Sedan för att bygga på med ytterligare en fråga, någon som vet varför ALT knycker hela bredden och inte lyssnar på margin: auto ? Opera funkar och IE funkar, medan FF ger en konstig "fullbredd".
Jag satt och lekte lite. Det är ganska trixigt att få marginalerna rätt i båda läsarna.
Om du inte vill att texten ska hamna bredvid bilden tar du bara bort float:left på dd img {} och dd.besk {}.
Bredden på textstycket kan du ändra fritt, så totala bredden blir bildens bredd+bredden på texten+alla marginaler.
Om du lägger texten under bilden blir hela boxen minst lika stor som bilden+marginalerna om nu inte texten är bredare än bilden.
Såhär hade jag gjort iaf.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin:0;padding:0;}
dl {
font: 78%/150% verdana;
border:1px solid #999;
margin:1em;
display:block;
float:left;
}
* html dl {
margin:1em 1.5em 1em .5em;
}
dt {
font-weight:bold;
font-size:120%;
text-align:right;
background:#eee;
}
dd {
margin:1em;
}
dd img {
padding:1em;
margin-bottom:1em;
border:1px solid #999;
display:block;
float:left;
}
dd.besk {
width:14em;
float:left;
margin:0em 1em 1em 1em;
}
* html dd.besk {
margin:1em .5em 1em 1em;
}
</style>
</head>
<body>
<dl>
<dt>Callisto</dt>
<dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
<dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
</dl>
<dl>
<dt>Callisto</dt>
<dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
<dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
</dl>
<dl>
<dt>Callisto</dt>
<dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
<dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
</dl>
<dl>
<dt>Callisto</dt>
<dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
<dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
</dl>
</body>
</html>
Har bara hunnit titta lite snabbt, men padding problemet kvarstår i IE hos mig, alltså att det inte blir ram kring bilden. Eller ram blir det men den är inte paddad
Brukar kolla mot Opera också, nja där blev resultatet lite som det själv ville ;)
Skickar en liten länk så att det går att se vad jag vill få ut, snyggt eller inte kan diskuteras men detta har jag fastnat för hittills :)
Vaddå? Får du ingen ram runt bilden?
Jag har inte testat i Opera.
Jo, men jämnför IE och FF. SÅ ser du att där inte är någon padding mellan ramen och bilden.
/r
Sedan är Opera mindre viktigt, men ändå :) Tyckte mest det var underligt då FF och Opera brukar gå hand i hand.
Ok, hos mig ser det lika ut med padding och allt. Men du sitter säkert med IE5.5?