Forum Mjukvara Programmering och digitalt skapande Tråd

snygg text layout i html?

1
Skriv svar
Permalänk
Medlem
●

snygg text layout i html?

         <!--<tr height="5"><td></td></tr>
            <tr width="150">
            	<td><a href="bilder/#.jpg" target="_blank"><img src="bilder/#.jpg" width="150" height="59" border="0"></a></td>
                <td width="5"></td>
                <td>
                <rubrik>#</rubrik>
                <br>
                <text>#</text>
                <br>
                <rubrik>#</rubrik><pris>#</pris>
                </td>
            </tr>-->

Det som händer när jag skriver i denna koden är att all text hamnar i mitten, jag skulle vilja dela upp det i tre delar en rubrik med info, i mitten en text om saken och längst ner priset. Går detta?

Redigera
Citera flera Citera
Permalänk
Medlem
●

använd DIV istället och dumpa tabellen

http://www.w3schools.com/tags/tag_div.asp

<div>
header
</div>

<div>
main
</div>

<div>
footer
</div>
Visa signatur

Har varit på detta forum på tok för länge...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ah... missuppfattade totalt din fråga där ett tag...

Gör en ny row för varje sak.

<tr>
<td><h2>Rubrik</h2><p>Text</p></td>
</tr>
<tr>
<td><p>Text om saken</p></td>
</tr>
<tr>
<td><p>Priset</p></td>
</tr>

Klart... men jag skulle inte rekommendera en tabell till det

Visa signatur

http://facebook.com/descendingchaos
http://johannesohlsson.se
http://qorner.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

Problemet är väll att om jag använder div kommer bilden att hamna under eller över texten och inte till vänster om den. Blir det inte också svårare att använda div om man vill ha flera fönster som koden gör och om man sedan vill färg lägga varannan.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nej. Det är inte svårare, bara annorlunda. Och om du vill ha bilden till vänster, texten till höger så är det inga problem. Ett enkelt sätt är:

<div class="enhet">
<img class="bild" src="#" />
<div class="text">
<h2>Rubrik</h2>
<p>Text</p>
<p>Pris</p>
</div>
</div>

.enhet {float: left; clear: left; width: 400px;}
.bild {float: left;}
.text {float: left; width: 200px;}

Du bör ange en bredd för att explorer ska fatta. Men svårt skulle jag inte kalla det

EDIT: Och om du vill ha olika färger så skriver du bara <div class="enhet color1"> eller <div class="enhet color2"> och loopar ut varannan som color1 och color2.

Bit av en kaka.

Visa signatur

http://facebook.com/descendingchaos
http://johannesohlsson.se
http://qorner.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

gör om hemsidan med <div> och css blir mycket snyggare Kanske senare kan göra ett script för att enkelt lägga till nya saker.

Men ett litet problem har kommit upp genom att jag kör div och inte table brukar texten hamna under bilder om det blir ett överflöd av text. Går det att skuta in enbart texten en bit i boxen så ingen text hamna direkt under bilden, hittade så man kunde göra det på första raden men det var allt.

Finns det andra sätt att lösa problemet på?

Redigera
Citera flera Citera
1
Skriv svar