Layers "bewegen" niet mee

Status
Niet open voor verdere reacties.
J

Joenekop

Gebruiker
Lid geworden
4 nov 2001
Berichten
131
Beste mensen

Ik ben bezig met een klein site'tje en heb een vraagje. Ik probeer de site te centreren zodat hij er ook mooi uitziet bij verschillende resoluties. Dit lukt prima alleen ik heb een vreemd probleempje. De layers die ik gebruik staan prima op hun plaats op mijn scherm, alleen niet bij andere resoluties, ze blijven dus op hun "oorspronkelijke" plaats staan en bewegen niet mee met de site.

Hoe kan ik dit veranderen?

Alvast bedankt!

Jeroen
 
Dat ligt er totaal aan wat je gebruikt.

Wat ik zou doen is alles (als dat nog niet zo was) in een container-div droppen en deze met css zo in het midden zetten:
PHP: 
//css
body{
text-align: center;
}


//en de container div:

#container {
margin: 0 auto;  //nu werkt-ie in (bijna) elke browser
}

[edit] Je kan ook met procenten werken.
Maar zoals ik al zei moet je ons even vertellen hoe je website in elkaar zit (dus, css?/divs?/tables?) en hoe je hem maakt (frontpage, kladblok, dreamweaver)
[/edit]
 
Laatst bewerkt:
alvast super bedankt voor jullie reacties :thumb:

Ik heb mn complete html hieronder maar even gezet, zodat jullie gelijk alles kunnen zien, :D

En ik werk op dit moment met Expression web

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD id="Header">
	<meta http-equiv="Content-Language" content="nl">
	<title>Nieuwe site</title>
	<link rel="stylesheet" type="text/css" href="style2.css">
	<style type="text/css">
.style1 {
	padding-left: 0px;
	padding-top: 0px;
}
	
a:link { 
	text-decoration:none; 
	color: #1A8FE1;
}

* {
	margin:0px;
	padding:0px;
}

.style2 {
	border-width: 0;
}
body {
text-align: center;
}

#main {
width: 720px;
margin: 0 auto;
text-align: left;
}
</style>

	</HEAD>
	<div id="main">
	<body id="MainBody" bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" style="background-color: #606060;" objectSource="http://www.hemurenge.nl/online/~newsBox.swf" onload="ObjectLoad();" scroll="yes">
		<form name="Form1" method="post" action="basis.aspx" id="Form1" style="MARGIN: 0px">
<input type="hidden" name="__VIEWSTATE" value="dDw4NzQwMzU0NzI7Oz4B4FQgoXqD1xY6qgXCaVhhKjDZyg==" />

		<TABLE class="tblmain" cellspacing="0" cellpadding="0" name="tblmain" id="tblmain" height="100%" Valign="" Align="center" style="width: 850px"><TR class="" width="" name="" id="" height = "" Valign="">
			<TD class="style1" name="tdheader" id="tdheader" Valign="top" Align="left" style="height: 1417px; width: 850px">
<iframe frameborder="0" src="programma.htm" name="I5" allowTransparency class="c2" scrolling="no" style="left: 939; top: 663; width: 277px; height: 173px; position:absolute" id="I5"></iframe>
				<iframe frameborder="0" src="uitslagen.htm" name="I4" allowTransparency class="c2" scrolling="no" style="left: 942; top: 932; width: 277px; height: 173px; position:absolute" id="I4"></iframe>
				<iframe frameborder="0" src="stand.htm" name="I3" allowTransparency class="c2" scrolling="no" style="left: 933; top: 1202; width: 277px; height: 173px; position:absolute" id="I3"></iframe>
				<iframe frameborder="0" src="~newsBox.swf" name="I6" allowTransparency class="c2" scrolling="no" style="left: 456; top: 143; width: 746px; height: 343px; position:absolute" id="I6"></iframe>


				<iframe frameborder="0" src="test.htm" name="I2" allowTransparency class="c2" scrolling="no" style="left: 576; top: 517; width: 331px; height: 867px; position:absolute" id="I2"></iframe>


			<map name="FPMap0">
			<area href="index4.htm" shape="rect" coords="49, 508, 155, 557">
			<area href="bestuur.htm" shape="rect" coords="50, 622, 156, 671">
			<area href="competitie.htm" shape="rect" coords="51, 678, 157, 727">
			<area href="teams.htm" shape="rect" coords="50, 736, 156, 785">
			<area href="trainers.htm" shape="rect" coords="50, 790, 156, 839">
			<area href="interactief.htm" shape="rect" coords="50, 850, 156, 899">
			<area href="links.htm" shape="rect" coords="50, 905, 156, 954">
			<area href="vereniging.htm" shape="rect" coords="52, 566, 158, 615">
</map>


			<img border="0" src="ontwerp.jpg" width="850" height="1417" usemap="#FPMap0"></TD></TR>
</TABLE></form>
</div>
	</body>
</HTML>
 
Laatst bewerkt:
Hier is een opzetje die ik al had liggen om mensen zoals jou uit de brand te helpen :) Het is vrij simpel. Zet 2 divs (of meer) in een andere div. De 'hoofd div' centreer je. Probeer wel wat met de instellingen te spelen zodat je snapt wat de css doet.

Probeer maar:

HTML:
Code: 
	<div class="main">

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

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

	</div>

CSS:
Code: 
body { 
margin: -0;
padding: 0;
background-color: #4f4f4f;
}

.main {
background-color: #ffc600;
height: 100px;
width: 750px;
position: relative;
left: 50%;
margin-left: -375px;
}

.header {
background-color: #ffc600;
height: 100px;
width: 550px;
}

.content {
background-color: #b1b1b1;
height: 400px;
width: 750px;
}
 
Laatst bewerkt:
Eventjes,

PHP: 
//HTML 
    </HEAD> 
    <div id="main"> 
    <body id="MainBody
Dat klopt dus niet, die <div id='main'> moet ONDER de <body .....>.

Maar, erhm, het zou gecentreerd moeten zijn als je die regels dus even omdraaid :thumb:
 
voor het centreren van een div werkt volgende css prima
Code: 
#divid {
    width: XXXpx;
    margin-left: auto;
    margin-right: auto;
}
 
ontzettend bedankt!

Het is helemaal gelukt!
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan