problemen met Div positionering

[Verwijderd]

Ik heb een site voor mijn werk gemaakt ( link: www.tvm-e-learning.com )
Maar de Banner valt bij een kleine resolutie weg.
Bij grote resolutie blijft goed/ voor de helf zichtbaar.

Alle layers heb ik #inhalt DIV gestopt, want ik heb een javascript menu en die geef ik een vaste positie. En als ik alles gecentreert wil hebben moet ik die javascript ook binnen #inhalt DIV gooien, om in goede positie te zetten.

ik wacht op jullie goede adviezen/reacties af.

CSS:
html{
scrollbar-face-color: #FFB081;
scrollbar-shadow-color: #FF6000;
scrollbar-highlight-color: #FF94CA;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Arial,tahoma,verdana;
font-size: 12px;
height:100%;
color: #5B5C5E;
}
#inhalt {
position:absolute;
width:790px;
margin:-420px 0px 0px -395px;
height:100%;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #ffffff;
border: 0px solid #4F7DA1;
}
#top {
background-image: url(../images/top.jpg);
background-repeat: no-repeat;
background-position:center;
margin: 0px;
padding: 0px;
height: 148px;
}
#visie_missie {
background-image: url(../images/visieenmissie.gif);
background-color:#FFB081;
background-repeat: no-repeat;
margin-left: 154px;
margin-top: 9px;
height: 31px;
width: 477px;
}

#recentproject_logo{
background-image: url(../images/recent_project.jpg);
background-color:#FFB081;
background-repeat: no-repeat;
margin-left: 633px;
margin-top: -31px;
height: 31px;
width: 155px;
}
#recentproject{
font-family: Arial;
font-size: 10px;
margin-left: 635px;
width: 155px;
padding: 10px 0px 0px 0px;
border: 0px solid #cccccc;
text-align:center;
}
#content{
position:absolute;
height:100%;
width:470px;
margin:0px 0px 0px -230px;
/* top: 50%;*/
left: 50%;
text-align: left;
padding: 0px;
background-color: #ffffff;
}

[TeeDee]

Je geeft #inhalt een margin-top van -420px. Wat denk je zelf dat er mee aan de hand is?

Edit;
En het gebruikte Javascript menu zou ik ook wegdoen. Wat een drama poept dat script uit.

[ Voor 36% gewijzigd door TeeDee op 10-07-2008 10:38 ]

[Verwijderd]

Als ik hem op "0px" zet begint mijn pagina in het midden van de scherm, dus dan heb ik een 50% afstand van boven tot aan mijn banner.

[Verwijderd]

Die position:absolute met 50% top en left doet ook ongetwijfeld geen goed. Die zal je toch ook moeten weghalen

puur uit nieuwsgierigheid: heb je dit zelf geschreven?

[ Voor 43% gewijzigd door Verwijderd op 10-07-2008 10:43 ]

[Verwijderd]

Ja, natuurlijk.

[Verwijderd]

Als ik ze weg haal krijg ik mijn menu helemaal links gecentreed, banner is weg.
Ik zie dan alleen mijn content.

[TeeDee]

Dergelijk ontwerp is wel goed te krijgen met een

- text-align center op de body (voor de oudere IE browsers)
- een margin:0 auto op een #wrapper
- voor het gemak even overal position:absolute, top en left weghalen, en dan het resultaat bekijken.
- even opzoeken (als je het wil behouden) bij Tigra of het mogelijk is om in plaats van absolute positioning, iets van relative positioning te gebruiken.

edit:
@Boeboe, ah, het is weer voorkauw dag

[ Voor 6% gewijzigd door TeeDee op 10-07-2008 11:20 ]

[Verwijderd]

Met volgende gebruikt hij geen absolute positionering meer, maar zal je javascript menu nog moeten geherpositioneerd worden in de html zelf. Dat zou jouw probleem moeten oplossen.

Cascading Stylesheet:

html{
scrollbar-face-color: #FFB081;
scrollbar-shadow-color: #FF6000; 
scrollbar-highlight-color: #FF94CA; 
scrollbar-3dlight-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-track-color: #ffffff; 
scrollbar-arrow-color: #ffffff;
} 
body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: Arial,tahoma,verdana;
font-size: 12px;
height:100%;
color: #5B5C5E;
}
#inhalt {
width:790px;
height:100%; 
text-align: left;
margin-left:auto;
margin-right:auto;
padding: 0px;
background-color: #ffffff;
border: 0px solid #4F7DA1;
}
#top {
background-image: url(../images/top.jpg);
background-repeat: no-repeat;
background-position:center;
margin: 0px;
padding: 0px;
height: 148px;
}
#visie_missie {
background-image: url(../images/visieenmissie.gif);
background-color:#FFB081;
background-repeat: no-repeat;
margin-left: 154px;
margin-top: 9px;
height: 31px;
width: 477px;
}

#recentproject_logo{
background-image: url(../images/recent_project.jpg);
background-color:#FFB081;
background-repeat: no-repeat;
margin-left: 633px;
margin-top: -31px;
height: 31px;
width: 155px;
}
#recentproject{
font-family: Arial; 
font-size: 10px; 
margin-left: 635px;
width: 155px;
padding: 10px 0px 0px 0px;
border: 0px solid #cccccc;
text-align:center;
}
#content{
height:100%;
width:470px;
text-align: left;
padding: 0px;
background-color: #ffffff;
float:left;
}

[Verwijderd]

Bedankt voor je tip, alleen bij #content gaat mijn content naar links. maar als ik me aan mijn vorige content style hou is die goed.
Alleen heb ik nu een probleem met mijn menu, want die had ik geposetioneerd met behulp van #inhalt, want de javascript begint te tellen vanaf de div positie waar die in staat. Nu telt die vanaf de linkere kant van je browser.

[Verwijderd]

Ik zou in principe #inhalt position:absolute; moeten behouden, want anders kan ik mijn menu niet goed positioneren.

[disjfa]

Verwijderd schreef op donderdag 10 juli 2008 @ 11:49:
Ik zou in principe #inhalt position:absolute; moeten behouden, want anders kan ik mijn menu niet goed positioneren.

Je hebt in princiepe nooit position absolute nodig. Alleen containers die over andere vlakken heen moeten vallen (bijvoorbeeld drop down menus) kunnen een absolute positionering gebruiken. Maar je container div, die heeft natuurlijk geen absolute positionering nodig.

Als jij dat echt nodig hebt zit je menu gewoon raar in elkaar. Maar dat was al aangegeven.

[Verwijderd]

wel, je content staat nog steeds absoluut gepositioneerd, anders kon je gewoon via css alles netjes laten aansluiten. Die absolute is de reden dat je met javascript moet prutsen om je posities goed te krijgen. (ik test voor de zekerheid overigens nog eens mijn eigen css op jouw site en dat lijkt toch prima te werken. Enkel het menu moet nog in een aparte div en dan kan je de rest ertegen laten floaten.)

[ Voor 60% gewijzigd door Verwijderd op 10-07-2008 11:59 ]

[Verwijderd]

Sorry, maar als ik content absoluut weg haal gaat hij verspringen.
En de menu kan je geen div waarde mee geven. De waarde komt via een javascript.
En hij telt van boven 150 px naar benden en van links 0 px.
Als die inhalt absoluut weg valt gaat hij natuurlijk helemaal links zitten, want daar is 0 px.
Maar als die inhalt absoluut blijft telt de javascript vanaf DIV inhalt, en dan zit hij op een goede positie.

[Verwijderd]

Nou, content is ook goed.
Ik heb hem nog alleen een left positie gegeven en hij vershuif niet meer.
zo:
#content{
margin-left: 154px;
width:470px;
text-align: left;
padding: 0px;
background-color: #ffffff;
float: left;
}
Alleen nu nog mijn menu, iemand nog een tipje??

[H004]

Verwijderd schreef op donderdag 10 juli 2008 @ 12:37:
Alleen nu nog mijn menu, iemand nog een tipje??

Ja, zoek eens op Vertical Suckerfish.

[Verwijderd]

Ik heb niet om een andere menu gevraagd.
Ik wil de menu behouden.

[Verwijderd]

Ik heb nog eens wat uitgeprobeerd. Het zit er perfect uit in IE maar in mozilla niet:(
De helft valt weg aan de linkere kant, Het heeft natuurlijk te maken met IE en Mozilla resolutie. dat ene van top telt en andere van bottom, maar heeft iemand een procent% idee voor mijn margin??
#inhalt {
position:absolute;
width:790px;
height:100%;
text-align: left;
margin:0px 0px 0px -395px;
padding: 0px;
background-color: #ffffff;
border: 0px solid #4F7DA1;
}`
#content{
margin-left: 154px;
width:470px;
text-align: left;
padding: 0px;
background-color: #ffffff;
float: left;
}

[ Voor 19% gewijzigd door Verwijderd op 10-07-2008 13:09 ]

[disjfa]

Dat komt gewoon omdat het een soepzooitje is. Als je hervoor een oplossing wilt moet je gewoon lekker verder doorklooien. Hier op GoT denken we liever na over normale implementatie van html en css. Jij wilt gewoon een oplossing voor een slecht plan. We zijn geen helpdesk, we hebben al uitgelegd dat je opzet gewoon niet de beste is. Maar dat intereseert je weinig, dan moet je het zelf onderzoeken en hopen dat je per ongeluk een oplossing vind.

Denk daarna ook even over firefox, opera, safari, IE7 en de overige browsers.

[Verwijderd]

Nu zit je terug bij stap nul ja: w3c compatibele browsers renderen hem correct: Je div heeft een margin van -395px

[Verwijderd]

Als je niet of niet weet hoe je iemand moet helpen, zorg er dan aub dat je je buiten hou.
Ik vraag gewoon normaal aan normale mensen die graag andere helpen, of ze mij hierbij willen helpen.
Er wordt mijn gezegd dat ik een andere menu kan gebruiken, daar heb ik niet om gevraagd.
Een CSS menu maken kan ik zelf ook wel, maar het is mij gevraagd om deze menu erin te inplementeren.

Graag geen rare reacties meer..
Vriendelijk dank,

[TeeDee]

Geen rare reacties meer? Je vraagt ons om hulp. Je krijgt hulp. Dat het niet in jouw straatje past is niet ons probleem. Jij hebt een opdracht gekregen om iets te implementeren wat vreemd gedrag geeft. Is het dan ook niet jouw taak om te adviseren hierin?

Ik blijf bij het volgende:

Cascading Stylesheet:

#inhalt {
    width:790px; 
    height:100%;  
    text-align: left; 
    margin:0 auto;
    padding: 0px; 
    background-color: #ffffff; 
    border: 0px solid #4F7DA1; 
}

In combinatie met een fatsoenlijk, semantisch en standaard correct <ul> menu moet je er prima uit kunnen komen.

offtopic:
wel een samenraapsel van code conventies hoor... engels, duits, spaans(?), uppercase en lowercase.

[ Voor 8% gewijzigd door TeeDee op 10-07-2008 13:35 ]

[Verwijderd]

Het probleem met een <ul> menu is dat ik hem in iedere pagina moet plaatsen.
Mocht er een verandering in het menu komen, moet ik in zoveel pagina's veranderen.
Voordeel van een Javascript menu is dat je maar een keer hoef te wijzigen. En elke pagina naar deze *.js te verwijzen.

Je kan dan een <ul> menu includen, maar ze willen hier van HTML geen PHP pagina's van maken.

[ Voor 14% gewijzigd door Verwijderd op 10-07-2008 13:45 ]

[TeeDee]

Dan maak je een eigen script, wat niet afhankelijk is van positioning. Maar heb je nu al gekeken naar:
- een wrapper div om het "new menu (MENU_ITEMS, MENU_POS);" gedeelte?
- gekeken of tigra menu ook zonder absoluut kan?

[Verwijderd]

Tigra menu werkt helaas "absoluut"
Wat bedoel je met : een wrapper div om het "new menu (MENU_ITEMS, MENU_POS);" gedeelte?
Dat is me niet duidelijk.

[Bosmonster]

// Date: 04-05-2003

Dat script is ruim 5 jaar oud... in internet-jaren zijn dat er minstens 4000.

Toen bestonden alle momenteel gebruikte browsers nog niet eens.

Daarnaast is een van de ergste tekortkomingen van zo'n javascript menu, dat je menu (en daarmee je hele site eigenlijk) niet geindexeerd wordt door zoekmachines.

Denk dat dat laatste wel heel wat zwaarder weegt dan een search-replace actietje af en toe (al lijkt het me makkelijker dat menu gewoon te includen). Want 'ze willen van html geen php pagina's maken' is natuurlijk ook grote bull. Geen hond die daar iets van merkt en bovendien heeft die klant daar natuurlijk ook helemaal niks over te zeggen.

edit: Hoop niet dat dit in de categorie 'rare reacties' valt, anders excuses

[ Voor 87% gewijzigd door Bosmonster op 10-07-2008 14:11 ]

[disjfa]

Je kan toch de html includen Ja natuurlijk gebruik je dan php (of andere script taal ). Maar dat is alleen de include. De html blijft dan gewoon de html.

Kan je dan ook meteen doen met de header, footer en alle andere statische stukken van je site. Dat scheelt ook weer ontiegelijk veel werk. Als het even kan kan je er dan net zo goed een cmsje omheen zetten. Dan kan je ook ineenkeer alles gemakkelijk aanpassen,

Dus ja.

[Verwijderd]

Nu heb ik alle absoluut waarde weg gehaald, maar in Firefox centreeerd hij nog niet. (Wel in IE)

[Verwijderd]

in je #inhalt:
margin-left:auto;
margin-right:auto;

[Verwijderd]

dank u, was ik vergeten

[ Voor 64% gewijzigd door Verwijderd op 10-07-2008 14:48 ]

[NMe]

Verwijderd schreef op donderdag 10 juli 2008 @ 13:52:
Wat bedoel je met : een wrapper div om het "new menu (MENU_ITEMS, MENU_POS);" gedeelte?
Dat is me niet duidelijk.

Verwijderd schreef op donderdag 10 juli 2008 @ 14:36:
Nu heb ik alle absoluut waarde weg gehaald, maar in Firefox centreeerd hij nog niet. (Wel in IE)

Je stelt hier een paar nogal basale vragen die je met wat eigen inzet ook zelf kan oplossen. Wat een "wrapper div" is kun je makkelijk genoeg zelf achterhalen met zoiets simpels als een woordenboek. Hoe je een element centreert is hier bovendien al zó vaak voorbij gekomen, dat het forum er zowat van overloopt.

GoT is geen helpdesk. We verwachten wat eigen inzet van je, en dat zie ik hier te weinig terug. Daarom doe ik je topic op slot.