HTML & CSSur HTML, XHTML & CSS
5 svar · 439 visningar · startad av Maacus
Hej
Jag behöver hjälp med att få följande kod att se bra ut både i Explorer, Firefox och Safari. Nu ser det bra ut i Firefox med inte explorer.
Finns det kanske bättre lösningar för att göra samma sak?
<table width="270" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">Top bild i samma färg som ramen.</td>
</tr>
<tr>
<td width="1" bgcolor="#c1cba3"></td>
<td width="268" height="150" valign="top"><div class="textblock"> Text innehåll</div></td>
<td width="1" bgcolor="#c1cba3"></td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="#c1cba3"></td>
</tr>
</table>
Eftersom du skrev att bilden var samma färg som bordern skulle jag kanske ha gjort så här:
<div id="textruta">
<p class="textblock"> Text innehåll</p>
</div>
och css
#textruta{
width: 270px;
height: 160px;/*150 + den höjd? din bakgrundsbild har*/
border-top: 10px solid #c1cba3;
border-left: 1px solid #c1cba3;
border-right: 1px solid #c1cba3;
border-bottom: 1px solid #c1cba3;
}
.textblock{
width: 90%;
margin: 15px 5px;
/*vet inte vad du har där, så det blev bara detta*/
}
Bilden som jag menar innehåller även en rubrik. Top bilden är 270x27.
Blir det någon skillnad i koden då?
Är det korrekt om man skriver det så här med bild?
<div id="textruta">
<img src="rubrik_info.jpg" alt="Information" width="272" height="27" />
<p class="textblock"> Text innehåll</p>
</div>
Vill gärna att textblocket kan växa beroende på textmängden av sig själv.
Vad som är korrekt eller inte beror ganska mycket på vem sidan vänder sig till.
Så som jag tolkar korrekt så ska rubriker inte finnas på bilder utan märkas upp med header.
Men validatorn kommer säga OK, som du gjort.
Men... för att vara mer korrekt när det gäller tillgänglighet...
Jag skulle ta bort texten på din bild och lägga in bilden i css.
<div id="textruta">
<h3>rubrik</h3>
<p> Text innehåll...</p>
</div>
och i css
#textruta{
background: url(bilder/background_color.jpg) repeat-x;
width: 270px;
height: auto;
border-left: 1px solid #c1cba3;
border-right: 1px solid #c1cba3;
border-bottom: 1px solid #c1cba3;
}
h3{
margin: 0px;
text-align: center;
}
Om du då klipper av bilden så den bara är ett par pixlar bred och som jag gjorde här repeatar den x så kan du återanvända den på fler ställen om du vill.
Om inte så tar du bort repeat-x.
Med height auto så växer rutan med texten.
tack för hjälpen!