Divs naast elkaar (nee, niet zo :))

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • BLACKfm
  • Registratie: Maart 2004
  • Laatst online: 17-09 15:56
Hallo, (ah, zie net dat de topictitel "nee, niet zo" had moeten zijn...)

Ik wil een layout maken met een header en een content gedeelte.
Naast de content wil ik een login vak hebben. Echter wil in dat de header en de content in het midden uitgelijnd blijven.

Hoe krijg ik dat voor elkaar?

Heb het idee dat ik er met een simpele float niet ben, want dan moet er weer een container omheen en dan staat het dus niet meer goed in het midden.

Mits ik dit kan oplossen met een soort correctie, maar dat zou ik dan ook even zo gauw niet weten.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.header_container {
    width:800px;
    height:75px;
    background-color:#0C9;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:15px; 
}

.header_content {
    
}

.main_container {
    width:800px;
    height:200px;
    background-color:#0C9;
    margin-left:auto;
    margin-right:auto;
}

.main_content {
    
}

.login_container {
    width:100px;
    height:100px;
    background-color:#0C9;
}

.login_content {
    
}


</style>
</head>

<body>

<div class="header_container">
    <div class="header_content">header</div>
</div>

<div class="main_container">
    <div class="main_content">
        content
    </div>
</div>

<div class="login_container">
    <div class="login_content">
        Login
    </div>
</div>


</body>
</html>

Litebit.eu voorraad check :).


Acties:
  • 0 Henk 'm!

  • Taartvarken
  • Registratie: Januari 2007
  • Laatst online: 17-09 14:10
Ik zou alles in een wrapper doen. En dan de wrapper met een margin met dezelfde waarde als de inlogbox opzij schuiven om het weer te centreren...

Acties:
  • 0 Henk 'm!

  • Josaus
  • Registratie: September 2010
  • Laatst online: 01-09 19:05
Met een float en een margin?

Acties:
  • 0 Henk 'm!

  • BLACKfm
  • Registratie: Maart 2004
  • Laatst online: 17-09 15:56
Met een extra 'wrapper' er omheen en een float: left en float: right op de content en login staat het inderdaad naast elkaar.

Maar met een
code:
1
2
margin-left:auto;
margin-right:auto;


Staat het content gedeelte niet meer onder de header. Algeheel staat het wel in het midden, maar dat is niet de bedoeling

Ik kan naar mijn idee ook geen extra margin meer meegeven om de boel 115/2 pixels naar rechts te verplaatsen.

[ Voor 14% gewijzigd door BLACKfm op 04-03-2012 21:47 ]

Litebit.eu voorraad check :).


Acties:
  • 0 Henk 'm!

  • kaesve
  • Registratie: Maart 2009
  • Laatst online: 16-05 03:04
als je weet hoe breed het login-vlak is, is het best te doen. Je zou het bijvoorbeeld ongeveer zo kunnen aanpakken:

HTML:
1
2
3
4
5
<body>
<section id=main>
</section>
<aside id=login>
</aside>


en dan zo stylen:

Cascading Stylesheet:
1
2
3
4
5
body { margin: 0 auto } /* center everything */
#main,
#login { float: left; }
#login { width: 100px }
#main { width: 800px; margin-left: 50px; } /* left margin should be 50% of width of the login container */


edit:: nvm, deze aanpak gaat niet werken.. maar het idee erachter is nog wel goed. Je zet alles in het midden en offset het dan met de helft van de login :)

[ Voor 14% gewijzigd door kaesve op 04-03-2012 22:01 ]


Acties:
  • 0 Henk 'm!

  • BLACKfm
  • Registratie: Maart 2004
  • Laatst online: 17-09 15:56
En hoe doe ik dat zonder html5 ivm compatibiliteit?

Met divjes werkt die body margin niet. (en hierbij zo te zien ook niet. iig niet in DW en in Chrome)


Ja het idee is leuk, maar ik krijg het alleen niet uitvoerbaar.
Het staat nu zo:

Afbeeldingslocatie: http://gaim.nl/files/inhetmidden.png

Maar de content moet dus recht onder de header komen. En de Header en Content moet in het midden blijven.

Ik kan er wel wat hulp divjes omheen zetten, maar dat wordt weer zo'n rotzooi.

[ Voor 106% gewijzigd door BLACKfm op 04-03-2012 22:15 ]

Litebit.eu voorraad check :).


Acties:
  • 0 Henk 'm!

  • Klaasvaak
  • Registratie: Maart 2010
  • Laatst online: 12-09 21:10
Dit lijkt te werken. Ik heb het enkel in moderne browsers getest.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.header_container {
    width: 800px;
    height: 75px;
    background-color: #0C9;
    margin-bottom: 15px;
}
.main_container {
    width: 800px;
    height: 200px;
    background-color: #0C9;
    float: left;
}
.login_container {
    width: 100px;
    height: 100px;
    background-color: #0C9;
    float: right;
}
.wrapper{
    width: 915px;       /* main_container width + login_container width + 15px margin */
    padding-left: 115px;    /* login_container width + 15px margin */
    margin: auto;
}
</style>
</head>

<body>
<div class="wrapper">
 <div class="header_container">header</div>
 <div class="main_container">content</div>
 <div class="login_container">Login</div>
</div>
</body>
</html>

Acties:
  • 0 Henk 'm!

  • kaesve
  • Registratie: Maart 2009
  • Laatst online: 16-05 03:04
en nog een voorbeeld die volgens mij doet wat jij wil, gebaseerd op mijn idee:

http://jsfiddle.net/HmwuX/

Acties:
  • 0 Henk 'm!

  • BLACKfm
  • Registratie: Maart 2004
  • Laatst online: 17-09 15:56
Afbeeldingslocatie: http://people.zeelandnet.nl/picard/kirk_bones.gif


Helemaal top.

Zal er morgen in wat meer detail naar kijken. Bedankt O+ .

Litebit.eu voorraad check :).


Acties:
  • 0 Henk 'm!

  • BramVroy
  • Registratie: November 2009
  • Laatst online: 29-08 12:47
BLACKfm schreef op zondag 04 maart 2012 @ 23:56:
[...]


[afbeelding]


Helemaal top.

Zal er morgen in wat meer detail naar kijken. Bedankt O+ .
Het lijkt mij logischer om die inlog-div er toch buiten te zetten. Like so: http://jsfiddle.net/5vGZk/3/

Acties:
  • 0 Henk 'm!

  • Acid_Burn
  • Registratie: Augustus 2001
  • Laatst online: 19-09 11:23

Acid_Burn

uhuh

Alleen werkt dat niet in IE7/8... althands niet bij mij. Mijn methode wel.

edit: HTML5 tag zo te zien, dus dan is dat ook wel te verklaren.

[ Voor 31% gewijzigd door Acid_Burn op 06-03-2012 18:29 ]

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site


Acties:
  • 0 Henk 'm!

  • BramVroy
  • Registratie: November 2009
  • Laatst online: 29-08 12:47
Acid_Burn schreef op dinsdag 06 maart 2012 @ 18:27:
Alleen werkt dat niet in IE7/8... althands niet bij mij. Mijn methode wel.

edit: HTML5 tag zo te zien, dus dan is dat ook wel te verklaren.
http://jsfiddle.net/5vGZk/8/ Zo dan, safe for >HTML5. :)

Acties:
  • 0 Henk 'm!

  • Acid_Burn
  • Registratie: Augustus 2001
  • Laatst online: 19-09 11:23

Acid_Burn

uhuh

d:)b Beter.

Glass Eye Photography | Zelfbouw wireless fightstick | Mijn puzzel site

Pagina: 1