layout centreren - Softwareontwikkeling

vrijdag 16 november 2007 12:35

Acties:

Verwijderd

Topicstarter

Hallo allemaal

Ik ben bezig met een webpagina aan het maken maar nu wil ik dat hij netjes in het midden komt te staan. Dus als je een resolutie hebt van 1024x786 dat hij in het midden staat maar ook bij 1280x1024. Bij alle verschilende resolutie's moet hij in het midden komen te staan(Hier is een link naar mijn site http://home.wanadoo.nl/cbloos/Index.html dan kan je zien wat ik bedoel).

Ik heb het al geprobeerd met margin maar dat werkt niet helemaal goed omdat je daar je breede van je divs niet meer aan kan geven als je hem wil laten werken zo dat hij in kleiner of groter resoluties ook mee strekt.
Ik hoop dat iemand weet hoe je dit kan oplosen.

vrijdag 16 november 2007 12:40

Acties:

Nozzie

Ik zelf doe het altijd zo:

HTML:

<body>
<div align="center">
...
</div>
</body>

vrijdag 16 november 2007 12:45

Acties:

CH4OS

It's a kind of magic

Heb je margin-left: auto; en margin-right: auto; al geprobeerd?

RemonLP schreef op vrijdag 16 november 2007 @ 12:40:
Ik zelf doe het altijd zo:
HTML:
1
2
3
4
5
<body>
<div align="center">
...
</div>
</body>

Alleen is dat m.i. geen mooie oplossing. Met CSS is het ook mogelijk, waarom dan geen CSS gebruiken? Krijg je uiteindelijk alleen maar meer overzicht in je markup en styling... :)Overigens word dan alles binnen de div gecentreerd, wat je dus ook op de body kan zetten als attribuut, scheelt je weer een div...

[ Voor 86% gewijzigd door CH4OS op 16-11-2007 13:02 ]

vrijdag 16 november 2007 12:46

Acties:

Verwijderd

Topicstarter

RemonLP schreef op vrijdag 16 november 2007 @ 12:40:
Ik zelf doe het altijd zo:
HTML:
1
2
3
4
5
<body>
<div align="center">
...
</div>
</body>

dat werkt niet echt omdat ik met css werk en ik wil het ook met css doen en zorgen er voor dat hij mijn ander divs overschrijft maar kan je niet een of ander hoofd div maken en dan zeggen dat hij moet centreren of zo?

vrijdag 16 november 2007 12:47

Acties:

Gonadan

Admin Beeld & Geluid, Harde Waren

Je kunt aan je body of zoals hierboven een wrapper-div _text-align: center;_ meegeven.
_margin: auto_ werkt ook goed maar volgens mij doet IE7 daar nog wel eens moeilijk over.

Dus center is inderdaad de makkelijkste optie.

Look for the signal in your life, not the noise.

Canon R6 | 50 f/1.8 STM | 430EX II
Sigma 85 f/1.4 Art | 100-400 Contemporary
Zeiss Distagon 21 f/2.8

vrijdag 16 november 2007 12:47

Acties:

LinuX-TUX

Welkom @ GoT firefox905;

Er zijn zoveel manieren om een website te centreren. Had laatst ook een vriend met zo'n probleem, alleen hij had nog een DHTML menu erbij die helemaal over de kop ging als je middels divjes het netjes centreerde. (iets met overerving van position absolute & relative)

Heb toen een hele smerige oplossing verzonnen door 2 blokjes te maken die het hoofdmenu netjes naar het midden duwde

http://gidelux.homelinux.org/~gideon/jef/mijnmenu.php

Kortom de mogelijkheden zijn eindeloos, vraag is, hoe wilde je het nou eigenlijk oplossen en wat heb je eraan gedaan? Wat had je al gevonden en waar gaat het fout? Kan je die desbetreffende code in de [ code ] tags plaatsen (relevante CSS & container divs) zodat wij mee kunnen denken naar een gerichte oplossing?

vrijdag 16 november 2007 12:49

Acties:

BtM909

Watch out Guys...

Ik mis idd een hele hoop zelf-inzet.

Lees Webdesign, Markup & Clientside Scripting Policy eens door en probeer je posts met extra info aan te vullen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 16 november 2007 12:52

Acties:

Jorick

HTML:

<html>
<head>
<style>
#container{
margin-left:auto;
margin-right:auto;
width:500px;
height:250px;
background-color:#000;
color:#fff;
}
</style>
</head>
<body>
<!--[if IE 5]>
<center>
<![endif]-->
<div id="container">
test
</div>
<!--[if IE 5]>
</center>
<![endif]-->
</body>
</html>

Werkt voor zover ik weet zowat in alle browsers prima

[ Voor 7% gewijzigd door Jorick op 16-11-2007 12:58 ]

vrijdag 16 november 2007 12:58

Acties:

TeeDee

CQB 241

Cascading Stylesheet:

1 2	body {text-align:center;} /* IE5 */ #container {margin:0 auto;text-align:left;}

Zou prima moeten werken voor 100% van de huidige browsers.

[ Voor 5% gewijzigd door TeeDee op 16-11-2007 12:59 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 16 november 2007 13:03

Acties:

Jorick

TeeDee schreef op vrijdag 16 november 2007 @ 12:58:
Cascading Stylesheet:
1
2
body {text-align:center;} /* IE5 */
#container {margin:0 auto;text-align:left;}
Zou prima moeten werken voor 100% van de huidige browsers.

Dat werkt idd ook prima en is ook nog eens een stuk korter. Denk dat de TS niet verder hoeft te zoeken.

vrijdag 16 november 2007 15:07

Acties:

Verwijderd

Topicstarter

Hier is mijn code hopelijk kan je er wat mee ik wil niet dat de width en heigth verander. Kan je ook om deze divs een ander div doen en dan die laten zeggen dat hij in het midden moet staan en dat de ander divs dan mee gaan?

HTML:

<style>
#top {
    position:absolute;
    left:100px;
    top:0px;
    width:820px;
    height:85px;
    z-index:1;
    background-image: url(Images/top.gif);
    background-repeat:no-repeat;
}
#menu {
    position:absolute;
    left:100px;
    top:85px;
    width:135px;
    height:683px;
    z-index:2;
}
#left {
    position:absolute;
    left:235px;
    top:85px;
    width:250px;
    height:683px;
    z-index:3;
    background-image: url(Images/rightbg.gif);
    background-repeat:no-repeat;
    background-position:right;
}
#right {
    position:absolute;
    left:485px;
    top:85px;
    width:435px;
    height:683px;
    z-index:4;
    background-image: url(Images/contentbg.gif);
    background-repeat:no-repeat;
    background-position:left;
</style>
<div id="top">
</div>
<div id="left">
</div>
<div id="right">
</div>

[ Voor 20% gewijzigd door Verwijderd op 16-11-2007 15:15 ]

vrijdag 16 november 2007 15:08

Acties:

Gonadan

Admin Beeld & Geluid, Harde Waren

Gebruik even de [code] tags.

Verder is dat inderdaad mogelijk, maar de oplossing is al meerdere keren gegeven.
Probeer die maar eens te implementeren.
Ik zie dat je absoluut positioneert, dan gaat dat niet werken natuurlijk.

Look for the signal in your life, not the noise.

Canon R6 | 50 f/1.8 STM | 430EX II
Sigma 85 f/1.4 Art | 100-400 Contemporary
Zeiss Distagon 21 f/2.8

vrijdag 16 november 2007 15:09

Acties:

crisp

Devver

Pixelated

Waarom positioneer je alles absoluut?

(en gebruik aub de [code]-tags)

[ Voor 3% gewijzigd door crisp op 16-11-2007 15:09 ]

Intentionally left blank

vrijdag 16 november 2007 15:25

Acties:

Verwijderd

Topicstarter

Dus als ik dit doe dan blijft de ander divs binnen de container div? of zie ik het nu verkeerd of denk ik verkeerd?

HTML:

<style>
#container {
margin-left:auto;
margin-right:auto;
width:.....px;(juiste omvang
height:.....px; juiste omvang
}
#top {
    
    left:100px;
    top:0px;
    width:820px;
    height:85px;
    z-index:1;
    background-image: url(Images/top.gif);
    background-repeat:no-repeat;
}
#menu {
    
    left:100px;
    top:85px;
    width:135px;
    height:683px;
    z-index:2;
}
#left {
    
    left:235px;
    top:85px;
    width:250px;
    height:683px;
    z-index:3;
    background-image: url(Images/rightbg.gif);
    background-repeat:no-repeat;
    background-position:right;
}
#right {
    
    left:485px;
    top:85px;
    width:435px;
    height:683px;
    z-index:4;
    background-image: url(Images/contentbg.gif);
    background-repeat:no-repeat;
    background-position:left;
</style>
<div id="container">
<div id="top">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>

vrijdag 16 november 2007 15:26

Acties:

TeeDee

CQB 241

Ja. Anders gezegd: probeer het eens.

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 16 november 2007 15:37

Acties:

Verwijderd

Topicstarter

Het lukt bijna

het is bijna goed alleen als ik een #container om doe gaan de ander divs die naast elkaar staan onder elkaar staan(de linker moet links staan de recht rechts en top natuurlijk boven). Hoe kan je dat dan verhelpen? dat is het laaste wat ik moet weten dan ben ik helemaal blij $_/-\o_$

Bedankt voor all reacties die tot nu toe zijn gegeven

[ Voor 10% gewijzigd door Verwijderd op 16-11-2007 16:40 ]

vrijdag 16 november 2007 18:43

Acties:

Verwijderd

Topicstarter

Het is me gelukt!

HTML:

<style>

#container {
    margin-left:auto;
    margin-right:auto;
    width:825px;
    height:770px; 
}
#top {
    width:820px;
    height:85px;
    z-index:1;
    background-image: url(Images/top.gif);
    background-repeat:no-repeat;
}
#menu {
    position:absolute;
    margin-left:0px;
    width:135px;
    height:683px;
    z-index:2;
}
#left {
    position:absolute;
    margin-left:135px;
    width:250px;
    height:683px;
    z-index:3;
    background-image: url(Images/rightbg.gif);
    background-repeat:no-repeat;
    background-position:right;
}
#right {
    position:absolute;
    margin-left:385px;
    width:435px;
    height:683px;
    z-index:4;
    background-image: url(Images/contentbg.gif);
    background-repeat:no-repeat;
    background-position:left;
} 
</style>
</head>


<body>
<div id="container">

<div id="top"></div>

<div id="menu"></div>
<div id="left"></div>
<div id="right"></div>

</div>

Ik heb margin toegevoegd en absolute gedaan daardoor blijven de biv naast elkaar staan inplaats van onder elkaar en met margin-left of right komen ze op de geweste plek te staan

[ Voor 8% gewijzigd door Verwijderd op 16-11-2007 18:44 ]

vrijdag 16 november 2007 23:06

Acties:

Verwijderd

Waarom gebruik je overal een z-index?

zondag 18 november 2007 11:29

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op vrijdag 16 november 2007 @ 23:06:
Waarom gebruik je overal een z-index?

Dan zie je welke div je geselecteerd heb met dreamweaver.

[ Voor 8% gewijzigd door Verwijderd op 18-11-2007 22:29 ]

zondag 18 november 2007 23:50

Acties:

Boelie-Boelie

Tip: probeer eens te positioneren zonder z-index en 'position'.. Gebruik bijv. floats en los evt. problemen op door floats te clearen (zoeken op 'clearing floats') en rekening te houden met IE-bugs (zoek op 'IE float bugs'). Zoals je het nu doet, lijkt makkelijk, maar in de praktijk werkt bijna niemand op die manier want het levert teveel problemen op. Zoek bijv. eens op 'CSS layouts' voor voorbeelden (niet die van Glish, die zijn inmiddels prehistorisch).

Cogito ergo dubito

maandag 19 november 2007 09:03

Acties:

MoietyMe

zij/haar

Je kunt het natuurlijk ook korter opschrijven:

code:

#container {
    margin:0 auto;
    width:825px;
    height:770px; 
}

Of als je de margin aan de boven en onderkant nog wilt instellen (al doe ik dat liever met een padding op de body, aangezien dat werkt in alle browsers icm margin:0;).

code:

#container {
    margin:0px auto 0px auto;
    width:825px;
    height:770px; 
}

maandag 19 november 2007 09:13

Acties:

Sebazzz

3dp

Boelie-Boelie schreef op zondag 18 november 2007 @ 23:50:*knip*

Bovendien zal zijn huidige layout ook niet liquid zijn, wat natuurlijk wel zo mooi is. Tegenwoordig zijn er zoveel mensen met zoveel schermresoluties...

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

maandag 19 november 2007 11:29

Acties:

Kiphaas7

Sebazzz schreef op maandag 19 november 2007 @ 09:13:
[...]
Bovendien zal zijn huidige layout ook niet liquid zijn, wat natuurlijk wel zo mooi is. Tegenwoordig zijn er zoveel mensen met zoveel schermresoluties...

Ik denk dat dit een andere discussie is, waar meningen nogal een grote rol spelen. ik vind fixed width sites veel persoonlijker (door fixed width meer mogelijkheden grafisch) en mooier.

Overigens zijn liquid sites lelijk op enorm hoge of lage resoluties (hele lange regels lezen niet lekker). Natuurlijk kan je dit met een max-width of min-width opvangen, maar dan ben je ook nog maar 1 stap verwijderd van fixed width.

Maar dat terzijde.

maandag 19 november 2007 11:30

Acties:

disjfa

be

Kiphaas7 schreef op maandag 19 november 2007 @ 11:29:
[...]
Ik denk dat dit een andere discussie is, waar meningen nogal een grote rol spelen. ik vind fixed width sites veel persoonlijker (door fixed width meer mogelijkheden grafisch) en mooier.

Hij doelt niet op de breedte van de site

disjfa - disj·fa (meneer)
disjfa.nl

maandag 19 november 2007 13:45

Acties:

Kiphaas7

disjfa schreef op maandag 19 november 2007 @ 11:30:
[...]

Hij doelt niet op de breedte van de site

Damm, laten we het maar op maandagmorgen gooien.