Tekst verschuift

Status
Niet open voor verdere reacties.
R

richardbakker

Gebruiker
Lid geworden
9 mrt 2010
Berichten
44
Hallo,

Ik moet voor mijn opleiding een website maken dit lukt aardig, alleen nu heb ik een probleem. Ik heb tekst ingevoerd en alles uitgelijnd zodat alles goed staat in mijn lay-out. Nu wou ik de tekst aanpassen, maar toen verschoven delen op mijn web site. De tekst koppen schoven naar onder en ook mijn coppy right tekst.

Ik heb voorbeeld

dit is hoe het goed uitgelijnd is:
websiteprintscreen.png


en hier heb ik alleen het woordje test toegevoegd en het andere schuift mee:(:
lajajajaja.png



dit zijn mijn code's ho het goed uitgelijnd staat:

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="image">
</div>


<div class="container">


<div class="button1">
<a href="index.html">Home</a>
</div>

<div class="button2">
<a href="portfolio.html">Portfolio</a>
</div>

<div class="button3">
<a href="about.html">About</a>
</div>

<div class="button4">
<a href="music.html">Music</a>
</div>

<div class="button5">
<a href="music.html">Contact</a>
</div>

<div class="midden">
Welkom op mijn portfolio website. deze<br>
website heb ik gemaakt in opdracht van <br>
school. Ik doe de opleiding media vormgeving<br>
op het friesland college in Heerenveen. 
<br>
<br>
Veel plezier op mijn website, en voor vragen<br>
en/of opmerkingen kunt u contact met mij opnemen.
</div>

<div class="midden2">
Welcome..
</div>

<div class="midden3">
27th januari: site in ontwikkeling 
</div>

<div class="midden4">
News..
</div>

<div class="midden5">
®Richard Bakker<br>
All rights reserved
</div>

</div>
</body>
</html>

CSS:

Code: 
body
{
position:relative;
background-color:#000;
margin-left:auto;
margin-right:auto;
}

.container{
width:1024px;
height:768px;
margin: 0 auto;
text-align:left;
}


.image
{
width:1000px; 
height:900px; 
background-image: url(website.png);
margin-left:auto;
margin-right:auto;
}

a{
color:#FFF;
text-decoration: none;
}

p {
color:#FFF; 
margin:0;
}

a:hover
{
color:#fff;
text-decoration:underline;
}




.button1
{
position: relative;
margin-top:-780px;
left:165px;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
color:#FFF;
margin-left:auto;
margin-right:auto;
text-decoration: none;
} 

.button2
{
position: relative;
margin-top:-21px;
left:263px;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
color:#FFF;
margin-left:auto;
margin-right:auto;
text-decoration: none;
} 

.button3
{
position: relative;
margin-top:-21px;
left:395px;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
color:#FFF;
margin-left:auto;
margin-right:auto;
text-decoration: none;
} 

.button4
{
position: relative;
margin-top:-21px;
left:505px;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
color:#FFF;
margin-left:auto;
margin-right:auto;
text-decoration: none;
}

.button5
{
position: relative;
margin-top:-21px;
left:612px;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
color:#FFF;
margin-left:auto;
margin-right:auto;
text-decoration: none;
}

.logo
{
position: relative;
margin-top:-21px;
left:612px;
width:40px;
height:40px;
image: url: (hyves_logo.png)
margin-left:auto;
margin-right:auto;

}

.midden {
position: relative;
margin-left: auto;
margin-right: auto;
left: 77px;
top: 190px;
border: 0px solid gray;
background-color: transparant;
color: Dark-Grey;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:300;
font-size: 11pt;
padding: 5px;
text-align: left;
width: 700px; 
}

.midden2 {
position: relative;
margin-left: auto;
margin-right: auto;
left: 73px;
top: 5px;
border: 0px solid gray;
background-color: transparant;
color: 343434;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size: 22pt;
padding: 5px;
text-align: left;
width: 700px; 
}

.midden3 {
position: relative;
margin-left: auto;
margin-right: auto;
left: 555px;
top: 30px;
border: 0px solid gray;
background-color: transparant;
color: 343434;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:300;
font-size: 8pt;
padding: 5px;
text-align: left;
width: 700px; 
}

.midden4 {
position: relative;
margin-left: auto;
margin-right: auto;
left: 550px;
top:-55px;
border: 0px solid gray;
background-color: transparant;
color:343434;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size: 22pt;
padding: 5px;
text-align: left;
width: 700px; 
}

.midden5 {
position: relative;
margin-left: auto;
margin-right: auto;
left: 315px;
top: 350px;
border: 0px solid gray;
background-color: transparant;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size: 11pt;
padding: 5px;
text-align: left;
width: 700px; 
}
 
Laatst bewerkt:
Je maakt eigenlijk veel fouten..

1. Je hebt alleen maar classes, terwijl je ze maar 1x gebruikt hebt. Dit zouden ID's moeten zijn.
2. tekst hoort in een paragraaf tag of in een heading tag
3. Uw menu, dat is toch duidelijk een LIST? Waarom maak je hier 5 verschillende divs voor aan?
4. Waarom geef je een height aan uw container en aan uw items?

Ik heb uw site eens wat herwerkt naar hoe het zou moeten. Ik had uw afbeeldingen enz niet dus kon het niet 100% herwerken. De laatste stapjes zal je zelf wel kunnen doen denk ik? Ik heb geprobeerd om het zo duidelijk mogelijk voor jou te maken mbv commentaar.

Ik hoop dat je er iets aan hebt. In ieder geval zoals dat jij bezig bent is fout. Ik kan maar met moeite geloven dat dit de manier is waarop je het geleerd hebt.

HTML: 
body
{
position:relative;
background-color:#000;
margin-left:auto;
margin-right:auto;
font-family: verdana, sans-serif, arial;
line-height: 140%;
}



a{
color:#FFF;
text-decoration: none;
}

p , h1, h2{
color:#FFF; 
padding-bottom: 10px;
}

a:hover
{
color:#fff;
text-decoration:underline;
}


/*navigatie*/
#navigation {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: 1024px;
	background-color: white;
	height: 40px;
}

#navigation li {
	float: left;
}

#navigation li a {
	margin-left: 40px;
	display: block;
	height: 40px;
	line-height: 40px; /*als je de hoogte veranderd moet dit mee veranderen als je wil dat de tekst in het midden staat */
	padding: 0 10px;
	color: black;
	text-decoration: none;
}

#navigation li a:hover {
	background-color: black;
	color: white;
}

#container{ /*container id omdat er maar 1 container is*/
	width:1024px;
	margin: 0 auto;
	margin-top: 50px; /*ruimte boven de website */
	text-align:left;
	background-color: grey;
}

#content {
	clear:both; /*clear fix voor de navigatie*/
}

#content #left {
	width: 500px; /*dit kan je aanpassen*/
	margin-left: 40px; /*dit kan je aanpassen*/
	float: left; /*tege de linker kant floaten, niet veranderen */
}

#content #right {
	width: 200px;/*dit kan je aanpassen*/
	float: right;/*tege de rechter kant floaten, niet veranderen */
	margin-right: 40px;/*dit kan je aanpassen*/
}

#content #footer {
	clear: both; /*clear fix voor de left en right div*/
	text-align: center;
	background-color: white;
	color: black;
	height: 40px;
}

#content #footer p {
	line-height: 40px;
	color: black;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="container">
		<ul id="navigation">
			<li><a href="index.html">home</a></li>
			<li><a href="index.html">portfolio</a></li>
			<li><a href="index.html">music</a></li>
			<li><a href="index.html">contact</a></li>
		</ul>
		<div id="content">
			<div id="left">
				<h2>Welcome</h2>
				<p>
					Welkom op mijn portfolio website. deze
					website heb ik gemaakt in opdracht van 
					school. Ik doe de opleiding media vormgeving
					op het friesland college in Heerenveen. 
				</p>
				<p>
					Veel plezier op mijn website, en voor vragen
					en/of opmerkingen kunt u contact met mij opnemen.
				</p>
			</div>
			<div id="right">
				<h2>News</h2>
				<p>
					27th januari: site in ontwikkeling 
				</p>
			</div>
			<div id="footer">
				<p>
					&copy;Richard Bakker - All rights reserved
				</p>
			</div>
		</div>
	</div>
</body>
</html>

Ohja btw, nu ik het zo zie. Is het niet duidelijker om te werken met tabs? Wat voor editor gebruik je? Indien je met windows werkt kan ik notepad++ sterk aanbevelen!

edit: waar het probleem juist zit weet ik niet. Ik gok dat het ergens iets te maken heeft met uw heights. Indien u een live versie kan geven wil ik nog wel eens zoeken.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan