Avatar billede mckeene Nybegynder
09. februar 2012 - 13:48 Der er 2 kommentarer

Problemer med inline-block i webshop

Hejsa

Jeg er ved at lave en eshop, men har problemer med at få mine varer til at ligge ved siden af hinanden.
Jeg ønsker at der skal ligge to cykler ved siden af hinanden.
Hjemmesiden kan ses her: http://md2f12m4bg16.keaweb.dk/Cykelshop/

boksstruktur:
<body xml:lang="da" lang="da">
       
            <div id="banner">
                    <img src="bannerfin.jpg" alt="cykelbanner" />
            </div>
            <div id="dethele">                       
                <div id="cykler">
                    <div class="tekst">
                    <?php
                      if(!isset($_GET['kassen']))list_katalog1();
                        else list_kundeinfo();
                      ?>
                    </div>
                   
                </div>
                <div class="kurv">
                    <?php list_kurv() ?>
                </div>
            </div>

Stylesheet:
body{
    background-color: rgb(38,  38,  38);
}

div{
    text-decoration: none;
    margin: 0px;
    border-width: 0px;
    padding: 0px;
    border-style: solid;
}

#dethele{
    background-color: rgb(205, 205,  205);
    width: 1000px;
    margin-left: 71px;
    margin-right: auto;
}
   
#banner{
    margin-left: 71px;
    margin-right: auto;
    display: inline-block;
}

#menu{
    background-color: rgb(55, 55,  55);
    margin-left: auto;
    margin-right: auto;
}

#bred{
    background-color: rgb(150, 43,  234);
    display: inline-block;
    width: 270px;
}

#cykler{
    background-color: rgb(255, 255,  255);
    margin-left: auto;
    margin-right: auto;}

#usynlig{
    display: inline-block;
    width: 600px;
}

.menupkt{
    background-color: rgb(249, 125,  55);
    height: 100%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 95px;
}

.kurv{
    background-color: rgb(200, 200, 200);
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    width: 450px;
    text-align: left;
    vertical-align: top;
}

.tekst{
    background-color: rgb(255, 255, 255);
    margin-left: 45px;
    margin-right: auto;
    display: inline-block;
    vertical-align: top;
}


.mos{
    width: 432.5px;
}

.fortryd{
    width: 17px;   
}
Avatar billede jokkejensen Novice
09. februar 2012 - 14:26 #1
du skal have pakket alle "cyklerne" ind i et div, ex

<div class="text">
<div class="cykel"><h1/><h3/><img/></form></div>
<div class="cykel"><h1/><h3/><img/></form></div>
<hr/>
<div class="cykel"><h1/><h3/><img/></form></div>
<div class="cykel"><h1/><h3/><img/></form></div>
</div>


og give div.cykel{display:inline-block}

/J
Avatar billede mckeene Nybegynder
18. november 2012 - 20:23 #2
Tak for det. Send et svar for point :)
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