Avatar billede dingkee Nybegynder
23. november 2006 - 20:13 Der er 3 kommentarer og
1 løsning

Thumbs ved siden af hinanden

Hej,

Jeg har en side hvor jeg skal have nogle thumbs til at stå ved siden af hinanden. Har lavet noget kode, men mit problem er at de kommer til at stå skrå, altså ikke ved siden af hinanden...

Min kode er her:

<div class="thumb-tekst" style="margin-left: 0px;">
                            <a href="collection.php?kat=2&id=2"><img class="farver" src="images/0601-1-t1.jpg" border="1" alt="" /></a><br />
                            Tekst
                        </div>
                       
                        <div class="thumb-tekst" style="margin-left: 55px;">
                            <a href="collection.php?kat=2&id=3"><img class="farver" src="images/0601-1-t1.jpg" border="1" alt="" /></a><br />
                            Tekst
                        </div>
                       
                        <div class="thumb-tekst" style="margin-left: 110px;">
                            <a href="collection.php?kat=2&id=4"><img class="farver" src="images/0601-1-t1.jpg" border="1" alt="" /></a><br />
                            Tekst
                        </div>

og css:
.thumb-tekst{
    color            : #ffffff;
    font-size        : 10px Verdana;
    text-align        : center;
    margin-top        : 14px;
    height            : 60px;
    width            : 50px;
}
Avatar billede notes2c Nybegynder
23. november 2006 - 20:58 #1
Du kunne gøre:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.thumb-tekst{
    color: #ffffff;
    font-size: 10px Verdana;
    text-align: center;
    margin-top: 14px;
    height: 60px;
    width: 50px;
    float: left;
}
.row {
clear: both;
}
-->
</style>
<script type="text/javascript">
</script>
</head>

<body>

<div class="row">
    <div class="thumb-tekst"><a href="collection.php?kat=2&id=2"><img class="farver" src="images/0601-1-t1.jpg" border="1" alt="" /></a><br />Tekst</div>
    <div class="thumb-tekst"><a href="collection.php?kat=2&id=3"><img class="farver" src="images/0601-1-t1.jpg" border="1" alt="" /></a><br />Tekst</div>
    <div class="thumb-tekst"><a href="collection.php?kat=2&id=4"><img class="farver" src="images/0601-1-t1.jpg" border="1" alt="" /></a><br />Tekst</div>
</div>
</body>
</html>
Avatar billede dingkee Nybegynder
23. november 2006 - 21:32 #2
Det virkede sørme... tak :)
Avatar billede saudoo Nybegynder
24. november 2006 - 15:38 #3
Du skal vide at hvis du floater noget, hopper det ud af de elementer de er nested under. Det har lidt same effekt som at give skidtet et z-index. ;)
Avatar billede notes2c Nybegynder
25. november 2006 - 00:31 #4
nej det gør de ikke så længe float'en brydes for hver row. Hvilket clear: both sikre for row.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester