Hulp bij website

Status
Niet open voor verdere reacties.

bramwie

Gebruiker
Lid geworden
10 mrt 2012
Berichten
11
Hallo iedereen,

Ik moet voor onze stichting een website bouwen maar krijg het niet voor elkaar.
Is er misschien iemand die tijd heeft en me wilt helpen om de layout van psd naar een werkende website om te zetten?

Met vriendelijke groet,

BramWie
 
Grotendeels is het aardig gelukt op een paar dingen na.
Ik kriig mijn layout niet over de gehele pagina en mijn menu niet in het midden.
Weet iemand hoe ik dit voor elkaar krijg?

Dit heb ik in mijn css en html staan:

Html:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <title>Netwerk Chronisch Zieken Zevenaar</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
<div id="header">
</div>
<div id="header2">
<div class="menu">
				<ul>
                   <li><a href="index.html">Home</a></li>
                    <li><a href="manege.html">Manege</a></li>
                    <li><a href="lessen.html">Lessen</a></li>
                    <li><a href="activiteiten.html">Activiteiten</a></li>
                    <li><a href="stalling.html">Stalling</a></li>
                    <li><a href="tarieven.html">Tarieven</a></li>
                    <li><a href="saloon.html">Saloon</a></li>
                    <li><a href="fotoboek.html">Fotoboek</a></li>
                    <li><a href="links.html">Links</a></li>
                    <li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
</div>
<div id="bg">
<div id="content">
</div>
</div>
</body>

Css:

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

html, body {
    width: 100%;
    height: 100%;
}

#header{
	background-image:url(Images/header.png);
	height:170px;
	width:1152px;
}

#header2{
	background-color:#000;
	height:40px;
	width:1152px;
}

#bg{
	background-color:#8b144b;
	height:942px;
	width:1152px;
}

#content{
	background-color:#FFF;
	height:942px;
	width:800px;
	margin-left:166px;
}

/* navigatie */

.menu ul {
	list-style:none;
	padding:0;
	margin:0 0 0 56px;
}

.menu li {
	float:left;
	margin-right:2px;
}

.menu li:last-child {
	margin-right:0px;
}

.menu li a {
	width:73px;
	height:26px;
	line-height:26px;
	color:#FFF;
	text-align:center;
	display:block;
	text-shadow:1px 1px 1px #000000;
	text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
	
.menu li a:hover {
	text-shadow:none;
}
 
Aan je CSS te zien is het vrij logisch dat je layout niet beeldscherm vullend is.
Je geeft alles namenlijk een vaste breedte mee, je zou dus met procenten kunnen werken.

Om je menu in het midden te krijgen zou je in je .menu ul
Code:
margin:0 0 0 56px;

veranderen naar

margin: 0;

En vervolgens voeg je dit toe in je CSS:
Code:
.menu {
  width: 750px;
  margin: 0 auto;
}
 
Bedankt, staat nu goed. Alleen mijn ontwerp krijg ik niet over gehele pagina?

Zo moet de website worden:

WebsiteontwerpNetwerkCZ.jpg
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan