Avatar billede Klaus2620 Nybegynder
12. august 2011 - 16:42 Der er 5 kommentarer

Boks siden af hinanden

Hvordan kan man få box til at stå lige ved siden af hinanden? eks. <div id="gray-top"></div>
<div="gray-middle"></div>

Også lave en til hvor de er siden af hinanden, istedet for nedenunder?
Avatar billede olsensweb.dk Ekspert
12. august 2011 - 17:14 #1
prøv at se hvad float left gør for dig
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">   
    #gray-top{
        float: left;
    }
   
    </style>
    <script type="text/javascript">
    </script>
</head>
<body>
<div id="gray-top">sefw</div>
<div id="gray-middle">rewrw</div>
</body>
</html>
Avatar billede Klaus2620 Nybegynder
12. august 2011 - 18:14 #2
Den får jo kun gray-top til at rykke sig, kan man ikke rykker dem begge?
Avatar billede olsensweb.dk Ekspert
12. august 2011 - 20:21 #3
>Den får jo kun gray-top til at rykke sig, kan man ikke rykker dem begge?
du kan lave det sammen på den anden id eller lave en class som du tildeler dem
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
    .FloatLeft{
        float: left;
    }
   
    </style>
    <script type="text/javascript">
    </script>
</head>
<body>
<div class ="FloatLeft" id="gray-top">sefw</div>
<div class ="FloatLeft" id="gray-middle">rewrw</div>
</body>
</html>


gray-middle vil selvføgelig kun ligge sig op ved siden af gray-top hvis der er plads
Avatar billede Slettet bruger
12. august 2011 - 22:51 #4
Husk også en <div style="clear: both;"></div> til sidst (som du selvfølgelig også kan lave som en class). Specielt hvis du har mere indhold på siden, ellers får du sikkert nogle sjove hovedbrud med at finde ud af hvad der går galt på siden.
Avatar billede olsensweb.dk Ekspert
13. august 2011 - 12:47 #5
når man anvender float på div's er det ofte en god ide at sette en bredde på div'en også, da div'en ellers vil være så bred som den længste linje
du bør også kigge på din  margin og padding, da de også påvirker dit design

lidt hurtigt læsning:
http://webdesign101.dk/layout/
http://webdesign101.dk/www/layout/floatlayout.php
http://hjemmesideskolen.dk/html/css2.php?id=css1
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
Kurser inden for grundlæggende programmering

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