hoe pagina aanpassen in css zodat andere pagina's ook werken.

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.
ik heb een vraagje over: deze website

bijgevoegde bijlage wil ik bereiken voor mij website, maar ondervind steeds problemen op andere pagina's als ik de css weer hebt aangepast voor andere pagina's.

je ziet me menu aan de linkerkant, deze werkt goed voor iedere pagina. de foto van onze hond werkt ook prima. staat netjes boven aan. en in het midden. de boven kant van de foto staat net zo hoog als het menu begint. en hij moet precies in het midden komen te staan bij alle scherm resoluties en voor de meeste browser types.

titel "diesel" staat ook in het midden, moet in het midden onder de foto staan. bij langere titel namen verschuift deze waardoor deze niet precies meer onder de foto staat. ik wil dus de teskt centreren onder de foto.

dan de opmaak text. hier komt gewoon een voorwoord van de website te staan e.d.
Deze teskt moet zowel links als rechts uitgelijnd zijn en precies netjes in het midden komen.

de plaatjes met honden eronder, mogen onderaan komen op iedere pagina, wel in het midden steeds. dus moeten ze bij meer plaatjes meer naar links en rechts worden uitgelijnd.

de tekst daaronder bedraagt mijn geplaatste update. deze wil ik gecentreerd onder de honden hebben iedere keer. ik merkte op bij verandering van een dag bv 25 naar 4 dat hij weer een paar pixel opschuift, en niet goed gecentreerd is.

links onder op zelfde hoogt ongeveer als de update text komt dan de teller informatie te staan. je ziet hier dan het logo van de teller. deze moet altijd links onder in de hoek.


hoe zorg ik ervoor dat alles juist word weer gegeven zoals in me bijlage wat ik bedoel ???

l.s. ik wil best per code hierover praten hoor, maar heb gelijk een hele vraag geplaatst voor heel de inhoud.
 

Bijlagen

  • websitediesel.jpg
    websitediesel.jpg
    75,7 KB · Weergaven: 34
Laatst bewerkt:
Hallo djeric,

Ik heb even snel gekeken en je gebruikt altijd een absolute positie...
Dit kun je centreren door het volgende te doen met je css:

Code: 
#element
{
	position: absolute;
	width: 500px;
	left: 50%;
	
	/** 
		Dit stukje code centreerd een absolute veld
		Left: 50%; zorgt ervoor dat de linker bovenhoek in het midden word geplaatst
		Margin-left: -250px; zorgt ervoor dat het object 250px naar links verplaatst word...
		Dit is in dit geval de helft van de totale breedte... 500px / 2 = 250;
	*/
	margin-left: -250px;
}
 
michaelbeersnl zei:
Hallo djeric,

Ik heb even snel gekeken en je gebruikt altijd een absolute positie...
Klik om te vergroten...

Maar ik moet gewoon in iedere <div></div> welke ik wil centreren beginnen met de:

position:absolute;

in de css te plaatsen???

position:absolute; staat eigenlijk min of meer voor <center> </center> in de css?
 
De absolute positie is een statisch object dat gepositioneerd staat in of na het eerste niet-statische object tenzij je gebruik maakt van de z-index waarde...
Dus dit object zal je ten alle tijden moeten positioneren aan de waarde van je scherm
Met dit rekenen moet je altijd rekening houden dat je linker bovenhoek je X en Y punt is...

Neem jij bijvoorbeeld je menu
Code: 
#menu {
position: absolute;
top: 30px;
left: 10px;
padding: 0;
margin: 0px 0px 0px 0px;
text-align: center;
width: 180px;
}

Creëer je eigenlijk de volgende wiskundige variabele...
SW = ? (scherm)
SH = ? (scherm)
X = 30
Y = 10
W = 180
H = ?

Waneer je dus deze wilt gaan centreren moet de volgende formule maken:
X = (SW / 2) - (W / 2)
Y= 10
W = 180
H = ?

left: 50%; zorgt in dit geval voor de helft van de waarde van je scherm (SW/2)
en margin-left: -90px; zorgt er voor dat de helft van het vak naar links geschoven word... - (W/2)
 
Laatst bewerkt:
michaelbeersnl zei:
left: 50%; zorgt in dit geval voor de helft van de waarde van je scherm (SW/2)
en margin-left: -90px; zorgt er voor dat de helft van het vak naar links geschoven word... - (W/2)
Klik om te vergroten...

Maar hoe gebruik ik dan de juiste code voor als ik een website maak die voor de meeste internet gebruikers, duidelijk blijft?
d.w.z. bij andere scherm resolutie's en type browsers de site het zelfde eruit blijft zien.

moet ik dan toch de waarde "margin" gebruiken?
 
Je moet leren stricter te programmeren dan...
Code zal er hetzelfde uitzien op elke browser kleuren aanpassen en je komt een heel end denk ik...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>TEST</title>
		<style type="text/css">
			body,html
			{
				margin: 0px;
				padding: 0px;
			}
			
			.grid
			{
				position: relative;
				width: 960px;
				margin: 0px auto;
				
				/**/background:red;/**/
			}
			
			.clear
			{
				clear: both;
			}
			
			#menu-container,
			#content-container
			{
				float: left;
				margin: 0px 10px;
				
				/**/background:blue;/**/
			}
			
			#menu-container
			{
				width: 300px;
			}
			
			#menu-container ul,
			#menu-container li
			{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			#menu-container li
			{
				background: green;
				padding: 0px 10px;
				margin: 10px 0px;
				line-height: 30px;
			}
			
			#menu-container li:hover
			{
				background: darkgreen;
			}
			
			#menu-container li a
			{
				color: white;
			}
			
			#menu-container li a:hover
			{
				color: blue;
			}
			
			#content-container
			{
				width: 620px;
			}
			
			#content-container h1.logo
			{
				text-align: center;
			}
			
			
			#footer
			{
				float: right;
				margin: 0px 10px;
			}
		</style>
	</head>
	<body> 
		<div class="grid">
			<div id="menu-container">
				
				<ul>
					<li><a href="#">Menuitem</a></li>
					<li><a href="#">Menuitem</a></li>
					<li><a href="#">Menuitem</a></li>
					<li><a href="#">Menuitem</a></li>
					<li><a href="#">Menuitem</a></li>
					<li><a href="#">Menuitem</a></li>
				</ul>
				
			</div>
			
			<div id="content-container">
				
				<h1 class="logo">
					<img src="#" alt="Diesel" />
				</h1>
				
				<h2>Dit is een titel</h2>
				<p>
					Dit is een tekst....
				</p>
				
			</div>
			<div class="clear"></div>
			
			<div id="footer">
				Laatste update: 2-12-2011
			</div>
		</div>		
	</body>
</html>
 
michaelbeersnl zei:
Je moet leren stricter te programmeren dan...
Klik om te vergroten...

Ik weet nu iets meer van de html af en echt maar de bassis van css. ben echter al 5 jaar bezig met website's bouwen maar het blijft moelijk.
Je voorbeeld is dan niet wat ik wil bereiken. ik bedoel, alles staat in zo container. terwijl ik dan in een div alles hebt geplaatst.

Ik krijg het wel zover dat alles in kleur en groote goed word weer gegeven alleen de plaats niet zo. horizontaal lukt me nog redelijk, verticaal totaal niet.

Ik merkte op dat je ook de code: float: left; gebruikte. staat me idd iets van bij om dingen met float op de juiste positie te brengen. maar hoe en wat je nu steeds gebruikt, blijft me onduidelijk.

Ik heb nu bv een mouse over menu aan de linkerkant:

html code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>diesel</TITLE>
<link rel="stylesheet" href="diesel.css">
</HEAD>

<BODY> 

<div id="logo">

<IMG SRC="index/logo.jpg" ALT="logo diesel" TITLE="logo diesel" WIDTH="119" HEIGHT="187" STYLE="border-style: none;">

</div>

<div id="menu">
 
<a href="index.html">home</a>
<a href="biografie.html">biografie</a>	
<a href="kenmerken.html">kenmerken</a>
<a href="dogblog.html">dogblog</a>
<a href="vader.html">vader</a>	
<a href="moeder.html">moeder</a>
<a href="foto's.html">foto's</a>
<a href="filmpjes.html">filmpjes</a> 
<a href="links.html">links</a>
<a href="http://mydiesel.mygb.nl">gastenboek</a>
<A href="mailto:eric-mail@home.nl">contact</a>
 
</div>
 
</div>
</BODY>
</HTML>

de css code:

Code: 
  body {
    background-color: #009933}

#menu {
 position:absolute;
 top:30px;
 left:10px; 
 padding: 0;
 margin:0px 0px 0px 0px;
 text-align:center;
 width:180px;
} 
#menu ul {
	list-style-type:none;
	display:block; 
	padding: 0; 
	margin:0px	;
} 
#menu a {
 background-color:#663333;
 display: block;
 padding: 5px;
 margin: 10px;
 line-height:normal;
 text-decoration: none;
 border: 0px #0000FF solid;
 width: 120px; 
 color:#FF6633;
 font-weight: bold;  
} 
#menu a:hover{
 color:#0000FF;
 background: #FFFF00;
}

#logo {
 position:absolute;
 top: 10px;
 left: 350px;
 padding: 0;
 margin: 0px 0px 0px 0px;
 text-align:center;
 width: 500px;
}

hoe krijg ik de foto van me hond dan netjes in het midden boven aan? dus het midden van het menu en de rechter kantlijn van de beeldscherm. (denk aan andere scherm resoluties e.d.)

hoe krijg ik dit dan goed?
 
Code: 
#logo {
 position:absolute;
 top: 10px;
 left: 50%;
 padding: 0;
 margin-left: -250px;
 text-align:center;
 width: 500px;
}
 
michaelbeersnl zei:
Code: 
 left: 50%;
 margin-left: -250px;
Klik om te vergroten...

left op 50% ipv zoveel px ??? waarom dan procenten pakken ipv pixels?

en margin-left -250px? begrijp ik niet. hoezo in de "-" ??? waarom moet die in de min staan?
 
Laatst bewerkt:
Dit staat hierboven uitgelegd...

Die left: 50% is gewoon 50% van je scherm en je schermbreedte is ALTIJD variabel
en die "-" is om het vak wat 500px breed is voor de helft naar links te verplaatsen

Ofterwijl...

X = (ScreenWidth / 2) - (DivWidth / 2)
X = (1440/2) - (500/2)
X = 720 - 250

Dan zal je zien dat je vak ten alle tijdne gecentreerd is

Als je het nog niet snapt zo mag je terug naar de basis school :-) want het is gewoon hoofdrekenen
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan