Positionering

  • Onderwerp starter Onderwerp starter Babo
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
B

Babo

Gebruiker
Lid geworden
23 jun 2006
Berichten
48
Hallo,

ik heb een probleem.

Ik ben bezig met een 3 kollomen website. Ik heb de linker en de rechter kolom vaste waardes meegegeven en de middelste een percentage.

Het probleem is dat als ik het browser scherm verklein dan verschuift de rechter kolom mee.

Mijn tweede probleem is dat het er in IE niet uitziet zoals het moet. Enig idee hoe het er wel mooi uit komt te zien?

Mijn derde probleem is hoe zorg ik dat de content frame meegroeit met zijn content. Zoals je kan zien als je de grootte van het browserscherm verandert dan gaat de tekst mee, maar de div zelf niet. Hoe is dit op te lossen?

Hierbij de code:

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

div#main_container{
margin: 0 auto 0 auto;
width: 100%;
text-align: left;
background-color: #000000

}

#header{
height: 150px;
width: 100%;
background-color: #222222;
background-repeat: repeat-x
}

#navigation{
width: 100%;
height: 30px;
background-color: #111111;
}

#navigationachtergrond{
width: 100%;
height: 30px;
margin-top: 20px;
text-align: center;
}

#logo{
width: 1024px;
height: 100px;
background-image: url(Images/logo.gif);
background-repeat: no-repeat;
margin-top: -150px;
}

#contentbox{
display: inline;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
height: 520px;
width: 71.25%;
background-color: #111111;
position: fixed;
float: right;
clear: both;
color: white;
}

#content{
display: inline;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
height: 500px;
width: 69.75%;
padding-left: 10px;
padding-right: 10px;
background-color: #222222;
position: fixed;
float: right;
clear: both;
color: white;
}

#overigeleft{
margin-top: 20px;
height: 200px;
width: 250px;
float: left;
background-color: #111111;
color: white;
padding-left: 10px;
padding-right: 10px;
font-family: "Courier New", Courier, monospace;
}

#overige{
display: inline;
margin-top: 20px;
height: 200px;
width: 250px;
float: right;
background-color: #111111;
padding-left: 10px;
padding-right: 10px;
}

De website is hier te zien:
http://test.caelestisguild.org/Index.html

Alvast hartelijk bedankt.
 
in een eerder topic is dit ook al gevraagd en toen gaf ik het volgende stukje code:

HTML: 
<html>
	<head>
		<style>
			* {padding: 5px;}
			body {padding: 10px;}
			#wrapper {border: 1px solid red;}
			#header {height: 100px; background: #ccc;}
			#footer {clear: both; background: blue; color: white}
			#left {float: left; background: #fff; width: 150px; border: 1px solid green;}
			#right {float: right; background: #fff; width: 150px; border: 1px solid green}
			#center {background: #333; margin: 0 180px;}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">header</div>
			<div id="right">right</div>
			<div id="left">left</div>
			<div id="center">center</div>
			<div id="footer">footer</div>
		</div>
	
	</body>
</html>
Ik geloof dat dit precies doet wat jij wilt. \

Center element heeft geen percentuele breedte omdat dit niet werkt.. het heeft alleen een margin aan de rechter en linker kant en die is even breed als het rechter en linker element
 
Bedankt, dat heeft het eerste probleem opgelost. En het tweede probleem gedeeltelijk.

Hij ziet er nog steeds niet optimaal uit in IE.


En op welk manier zorg ik er voor dat de div meegroeit met de content?
 
volgens mij werkt ie gewoon prima in alle browsers. Ik weet niet wat er bij jou fout gaat?

Kun je screens laten zien. Alles schaalt gewoon mee trouwens als er content inzet
 
Als je de pagina verkleint is de layout uiteindelijk helemaal verkeerd. Logisch, maar ik zou alleen nog in een div wrapper zetten met een min-width zodat je layout nooit helemaal verstoord kan worden.
 
jawel, alleen niet in IE6 en lager. Daarvoor heb je ook nog eens een javascript in CSS oplossing (kan hem opsnorren als je wilt). Maar in het ergste geval kan je layout verstoord worden in IE6 en niet in de meeste overige browsers. Het kan zoiezo geen kwaad.

En gelukkig wordt IE6 steeds minder gebruikt (ook al nog wel te veel).
 
Ja Ik weet het.. maar IE 6 wordt nog te veel gebruikt. Maar euh.. een min-height er opgooien is nergens voor nodig.. Ja je verneukt je layout als je hem verkleint.... maar doe jij dat vaak?

en als je je layout wilt aanpassen op basis van grootte van je resolutie of grootte van je viewport van je browser zou ik toch een andere methode kiezen.

Dan kom je bij JS uit waarbij je detecteert wat de grootte is van de browser en op basis daarvan bepaal je je layout
 
ik had het over min-width, maar waarom zou je het er niet bij goeien? Mensen verkleinen misschien niet vaak hun browser maar het is wel onprofessioneel en als het niet baat (zoals in IE6) dan schaadt het ook niet. Ik zie zoiezo geen rede om het niet te doen en wel een rede om het wel te doen. Verder geen javascript nodig, behalve als je het ook in IE6 wilt laten werken.
 
Heb er een min-width ingezet.

Nog een klein probleempje:

in IE is ie niet optimaal. De achtergrondbalk van de navigatie staat helemaal bovenin inplaats van dat hij achter de knoppen staat.

Ten tweede, in firefox groeit de middelste kolom niet in de lengte mee met zijn inhoud, wat hij bij IE dan weer wel doet.
Enig idee hoe het ook in Firefox werkend wordt?

Hier is nogmaals de url

http://test.caelestisguild.org/index.html
 
Het gaat de goede kant op zo te zien.

haal van je #content de height ervanaf of zet er min-height op

over de navigatie..
Ik zou logo en menu in de header zetten en eventueel wat je op de logo aan css doet verplaatsen naar de header. Scheelt weer code ;)
 
Hoe bedoel je menu in de header plaatsen? is het dan wel mogelijk om hem onderin van de header weer te geven?

En nog een vraag: Is het mogelijk om een bepaalde pagina in de content div te openen?

De persoon voor wie ik het maak wil namelijk dat zijn forum in de middelste kolom wordt weergegeven. Ik weet dat je met frames dan gewoon de url kan opgeven. Maar is het ook mogelijk zonder frames, of moet ik het op een andere manier gaan oplossen.
 
HTML: 
<div id="header'>

<ul id="menu">
<li></li>
<li></li>
<li></li>
</ul>

</div>

css:
HTML: 
#header {
 height: 150px;
 position: relative;
}

#menu {
 height: 20px;
 position: absolute;
 bottom: 0;
 width: 100%;
}

#menu li {
 float: left;
}


misschien helpt dit om te postitioneren
 
Bedankt, dat heeft zeker geholpen. Hij ziet er nu goed uit in IE.

Maar er is natuurlijk weer een nieuw probleem opgedoken.

Ik wil een bestaand forum in de middelste kolom krijgen.

In firefox is dit gelukt met behulpd van een iframe in de div. Maar in IE komt de Iframe buiten de div.
Kan IE dit niet aan? of doe ik weer iets verkeerd.

Het gaat om deze pagina:
http://test.caelestisguild.org/forum.html

In firefox komt hij wel in de middelste kolom, bij IE niet.
 
Laatst bewerkt:
probeer je iframe eens fatsoenlijk af te sluiten

<iframe ..properties... </iframe> gaat namelijk niet werken

<iframe ...properties...></iframe> dacht dat het zo moest ;)
 
we zijn weer een stapje dichterbij ;)

goed het merkwaardige is dat als je het venster verkleint of vergroot dat hij qua formaat zich aanpast. Hier heb ik wel eens over gelezen. Het resizen van je pagina kan je met behulp van je js doen als je op die pagina komt.
je resized die pagina met 1px.

hier heb je wat aan voor resizen:
http://www.javascripter.net/faq/resizing.htm

maar dan moet je nog hebben dat ie een stuk naar boven komt.. Daar ben ik nog niet achter hoe dat nou komt.

Misschien moet je even knoeien met clear: none; ofzo.... ik zou niet eens weten of dat werkt..
 
Ik heb 0.5% van de width afgehaald, dan staat ie wel goed omhoog. Maar hij staat niet gelijk goed. Eerste keer dat je laad komt ie er buiten, maar als je het resized dan komt hij inderdaad wel goed te staan.
Clear both werkt niet.
 
Laatst bewerkt:
je kunt dan nog toevoegen dat wanneer depagina geladen is hij resized:

Code: 
window.onload = function () {
  //detecteer eerst of het eht forum pagina is
  resize();
}

check even de link voor het resize scriptje
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan