Maincontainer probleem - Softwareontwikkeling

dinsdag 21 oktober 2008 12:27

Acties:

Topicstarter

Hallo,

Ik heb het volgende probleem. Ik heb een pagina gemaakt die hier te zien is.

Ik maak gebruik van een main container waar alles in komt te staan en een footer die ervoor moet zorgen dat de maincontainer meerekt naar beneden. Dit werkt niet helemaal ok.

Open de pagina maar eens in firefox of een wat oudere versie van IE en maak er een klein scherm van zodat je een verticale scroll krijgt. Scroll dan naar beneden en je ziet dat de maincontainer ineens op is gehouden. Op hogere resoluties is er dus geen probleem maar bij kleinere waarbij je moet scrollen wel (bijv 1024x768).

Weet iemand hoe dit kan? Ik maak gebruik van html en css en gebruik divjes. Ik denk dat het in de volgende css moet zitten:

Code kan tussen [code=css][/code] blokken

Cascading Stylesheet:

body{
margin: 0;
text-align: center;
background-color:#cccccc;
}

div#main_container{
margin: 0 auto 0 auto;
width: 900px;
text-align: left;
height:98%;
background-color:#FFFFFF;
}

div#footer{
text-align:center;
width:900px;
height:2%;
margin-bottom:0px;
background-color:#FFFFFF;
}

Alvast bedankt.

[ Voor 2% gewijzigd door BtM909 op 21-10-2008 12:36 ]

dinsdag 21 oktober 2008 12:34

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Gebruik even code tags aub

Afbeeldingslocatie: http://tweakimg.net/g/forum/images/icons/edit.gif

daarvoor even je post. Alvast bedankt

(ah, BtM was me voor...)

Verder zou het fijn zijn als je even je code indent zodat we de nesting beter kunnen zien (en er zijn meer elementen dan div's he?

). Ook je ID's clashen; een id hoort uniek te zijn. Wat jij wil hebben zijn classes. En waarom gebruik je transitional HTML en niet gewoon strict?

En tot slot: dit is al meer dan eens besproken. Wist je dat?

[ Voor 100% gewijzigd door RobIII op 21-10-2008 12:40 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 21 oktober 2008 12:41

Acties:

Cambach

Topicstarter

Voor de volledigheid post ik dan alles maar even.
Het is nu misschien een zooitje geworden maar dat komt omdat bepaalde teksten en visuals eruit gesloopt zijn.

<snip> Euh, 300 regels code is wat veel van het goede... post enkel relevante! code

[ Voor 93% gewijzigd door RobIII op 21-10-2008 12:44 ]

dinsdag 21 oktober 2008 12:45

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Als je code post, beperk je dan tot relevante code. 300+ regels code is royaal aan de overdreven kant; een testcase moet met een paar regels prima in elkaar te zetten zijn en kan je ook helpen bij het speuren naar de oorzaak van je probleem. We zijn hier niet om voor jou enorme lappen code te gaan zitten uitpluizen, dat mag je zelf doen

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 21 oktober 2008 13:19

Acties:

Cambach

Topicstarter

Hallo, sorry zal even posten wat ik denk dat relevant is dan.
En ik keek al naar die andere topics maar daar kon ik niet een duidelijke oplossing vinden.

Cascading Stylesheet:

body{
margin: 0;
text-align: center;
background-color:#cccccc;
}

div#main_container{
margin: 0 auto 0 auto;
width: 900px;
text-align: left;
height:98%;
background-color:#FFFFFF;
}

div#footer{
text-align:center;
width:900px;
height:2%;
margin-bottom:0px;
background-color:#FFFFFF;
}

div#onderalign{
margin:0px;
padding:0px;
}

En html

HTML:

<body>
<div id="main_container">
content
</div>

<div id="onderalign" align="center">
<div id="footer"><span class="copy">Dit is footer tekst</span></div>
</div>
</body>

dinsdag 21 oktober 2008 13:33

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ik heb het niet helemaal doorgelezen, alleen even vlug gescanned, maar [url=hhttp://www.alistapart.com/articles/footers]dit[/] ziet er wel leuk uit (maar gebruikt JS zo te zien), en anders misschien deze.

[ Voor 36% gewijzigd door RobIII op 21-10-2008 13:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 21 oktober 2008 13:37

Acties:

Cambach

Topicstarter

Bedankt ziet er idd interessant uit. Zal het even doorlezen.

dinsdag 21 oktober 2008 20:27

Acties:

Bosmonster

*zucht*

http://www.bosmonster.nl/html/centered_with_footer.html

woensdag 22 oktober 2008 00:05

Acties:

XWB

Devver

Bosmonster schreef op dinsdag 21 oktober 2008 @ 20:27:
http://www.bosmonster.nl/html/centered_with_footer.html

Dat is een mooi voorbeeld, netjes. Kan je datzelfde maken, maar dan dat de content voor het menu in de html code staat?

March of the Eagles

woensdag 22 oktober 2008 09:38

Acties:

Bosmonster

*zucht*

Hacku schreef op woensdag 22 oktober 2008 @ 00:05:
[...]

Dat is een mooi voorbeeld, netjes. Kan je datzelfde maken, maar dan dat de content voor het menu in de html code staat?

Wat bedoel je? Het menu is gewoon een ul in de html.

[ Voor 6% gewijzigd door Bosmonster op 22-10-2008 09:39 ]

woensdag 22 oktober 2008 09:46

Acties:

XWB

Devver

Ja, maar het komt voor de content in de html code. Ik zou het omgekeerde willen zien, dus dat je menu als laatste in de html staat.

March of the Eagles

woensdag 22 oktober 2008 09:47

Acties:

Raem

@ Cambach

Verander in #footer

Cascading Stylesheet:

1	height:2%;

in

Cascading Stylesheet:

1	height:auto;

@Hacku,
Je wilt je menu onderaan de pagina hebben...?

[ Voor 28% gewijzigd door Raem op 22-10-2008 09:49 ]

https://psnprofiles.com/RaemNL

woensdag 22 oktober 2008 11:06

Acties:

Da Weef

Hacku schreef op woensdag 22 oktober 2008 @ 09:46:
Ja, maar het komt voor de content in de html code. Ik zou het omgekeerde willen zien, dus dat je menu als laatste in de html staat.

Als je de content-div rechts laat floaten ipv links kan je toch de menu-div in html plaatsen onder de content?

Dat is toch wat je bedoelt?

[ Voor 5% gewijzigd door Da Weef op 22-10-2008 11:07 ]

.

woensdag 22 oktober 2008 11:23

Acties:

Bosmonster

*zucht*

Hacku schreef op woensdag 22 oktober 2008 @ 09:46:
Ja, maar het komt voor de content in de html code. Ik zou het omgekeerde willen zien, dus dat je menu als laatste in de html staat.

Dan draai je de floating om inderdaad, ipv links floaten, rechts floaten.

Raem schreef op woensdag 22 oktober 2008 @ 09:47:
@Hacku,
Je wilt je menu onderaan de pagina hebben...?

Ik neem aan uit SEO overwegingen, belangrijke content zo hoog mogelijk in de html. En ene menu valt niet onder belangrijke content.

[ Voor 8% gewijzigd door Bosmonster op 22-10-2008 11:23 ]

woensdag 22 oktober 2008 11:34

Acties:

Raem

Bosmonster schreef op woensdag 22 oktober 2008 @ 11:23:
Ik neem aan uit SEO overwegingen, belangrijke content zo hoog mogelijk in de html. En ene menu valt niet onder belangrijke content.

Ik bedoelde niet in de code, maar op de pagina zelf. Uit usability overwegingen is het namelijk niet verstandig om je menu onderaan te zetten.

Rechts van de pagina vind ik persoonlijk ook al twijfelachtig.

[ Voor 12% gewijzigd door Raem op 22-10-2008 11:35 ]

https://psnprofiles.com/RaemNL

woensdag 22 oktober 2008 11:51

Acties:

Da Weef

Raem schreef op woensdag 22 oktober 2008 @ 11:34:
[...]

Ik bedoelde niet in de code, maar op de pagina zelf. Uit usability overwegingen is het namelijk niet verstandig om je menu onderaan te zetten. Rechts van de pagina vind ik persoonlijk ook al twijfelachtig.

Euhhhh, dat bedoelde Bosmonster duidelijk te maken. Hacku wil wel het menu in de lay-out op dezelfde plaats houden, maar wil in de html-code de content bovenaan hebben voor zoekmachines. Als je de code bekijkt van het voorbeeld van Bosmonster zie je dat zowel de menu-div als content-div links floaten. Hierdoor moet het menu altijd eerst in de code komen om in de lay-out links te verschijnen. Als je de content-div rechts laat floaten (en menu-div nog steeds links floaten) maakt de volgorder in de code niet uit, dan blijft het menu altijd links in de layout.

.

woensdag 22 oktober 2008 11:52

Acties:

Bosmonster

*zucht*

Raem schreef op woensdag 22 oktober 2008 @ 11:34:
[...]

Ik bedoelde niet in de code, maar op de pagina zelf. Uit usability overwegingen is het namelijk niet verstandig om je menu onderaan te zetten. Rechts van de pagina vind ik persoonlijk ook al twijfelachtig.

Er verandert niks aan de layout, alleen de volgorde in de code is anders.

Tenminste, daar ga ik even vanuit dat Hacku dat bedoelde.

woensdag 22 oktober 2008 11:56

Acties:

Raem

Bosmonster schreef op woensdag 22 oktober 2008 @ 11:52:
[...]

Er verandert niks aan de layout, alleen de volgorde in de code is anders.

Tenminste, daar ga ik even vanuit dat Hacku dat bedoelde.

Dan snap ik nu wat hij bedoelt. Ik vatte het anders op.

https://psnprofiles.com/RaemNL

maandag 27 oktober 2008 11:32

Acties:

Cambach

Topicstarter

Raem schreef op woensdag 22 oktober 2008 @ 09:47:
@ Cambach

Verander in #footer
Cascading Stylesheet:
1
height:2%;
in
Cascading Stylesheet:
1
height:auto;
@Hacku,
Je wilt je menu onderaan de pagina hebben...?

Hoi Raem,

Dat is idd de oplossing. Hardstikke bedankt het werkt nu uitstekend!