plaats menu

ottermannetje · 23 nov 2012

halllo ik ben nu een site aan het maken over statiegeld maar nu krijg ik een probleem met het menu.
het menu moet staan zoals hier:

krijg op de laptop dit:

dit zijn de codes:
html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>statiegeld</title>
<meta name="keywords" content="statiegeld, geld, statie, statiegeld krat, statiegeld krat bier, krat, bier, statiegeld fles, statiegeld pet fles, pet fles " />
<meta name="description" content="Op deze site vind je alles dat te maken heeft met statiegeld binnen nederland. (bij welke winkels, hoeveel, laatste nieuwtjes." />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
	
	<div id="logo">
		<h1>statiegeld</h1>
		<p>alles over statiegeld</p>
	</div>
	
	<div id="menu">
		<ul>
			<li class="current_page_item"><a href="index.html">home</a></li>
			<li><a href="Prijs.html">Prijs</a></li>
			<li><a href="winkels.html">winkels</a></li>
			<li><a href="nieuws.html">nieuws</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div>
	
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post greenbox">
			<div class="title">
				<center><h1>Statiegeld</h1></center>
			</div>
			<li><p>Welkom op statiegeld.nl</li><br>
			Dit is de site waar je heel veel te weten kan komen over statiegeld.
			Waar kan je welke flessen inleveren?
			Je vindt het allemaal hier.<br>
			wat word er gedaan met mijn flessen?
			Ook dat vindt je hier.<br>
			mis je iets of werkt er iets niet?
			Neem dan zo snel mogelijk <a href="contact.html">contact</a> met ons op a.u.b.,<br>dan passen we het zo snel mogelijk aan.<br>
			Welke winkels worden er behandelt?
			Ga snel naar <a href="winkels.html">winkels</a>.<br>
			wat zijn de prijzen van statiegeld?
			Ga dan naar <a href="prijs.html">prijs</a>.<br>
			<br>
			Veel Plezier.
			
			
			
		
			</div>
		<div class="post redbox ">
		
				<div class="title">
					<center><h2>Geschiedenis.</h2></center>
				</div>
				<div class="content">
					Statiegeld is ooit begonnen als methode van de leveranciers van producten om de kosten voor hun verpakkingsmateriaal zo laag mogelijk te houden.<br>
					Door hergebruik van flessen en in sommige gevallen ook glazen potten werden de kosten gedrukt.<br>
					Rond 1980 werden de kosten van verpakkingen, zoals glas, echter zo laag, dat hergebruik om die reden niet meer kosteneffectief is.<br>
					Gebruikt glas wordt inmiddels vooral ingezameld via de glasbak, waarna het tot nieuw glas wordt omgesmolten, in plaats van de oude flessen te reinigen en opnieuw te vullen.<br>
					Want ook het transport en reinigen van flessen is milieubelastend.<br>
					In de jaren 50 tot 80 van de 20e eeuw werd in Nederland en België vooral statiegeld geheven op de flessen waarin melk werd verkocht.<br>
					Nadat melkflessen meer en meer verdwenen en vervangen werden door het melkpak, verdween deze vorm van statiegeld.<br>
					Daarvoor in de plaats kwam statiegeld op petflessen voor frisdrank. Met de komst van de euro, bedraagt dit statiegeld in Nederland sinds eind 2001 € 0,25 per fles, terwijl het daarvoor ƒ 1 (€ 0,45) was.<br>
					Statiegeld wordt ook op bierflessen en kratten geheven.<br>
					In Duitsland, Denemarken, Noorwegen, Zweden en Finland ook op blikjes.<br>
				
			</div>
			
			<div class="btm">&nbsp;</div>
		</div>
		<div id="zoek">
		<!-- Put the following javascript before the closing </head> tag. -->
<script>
  (function() {
    var cx = '011184633342209419199:mll5oj0qihq';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>

<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>
      

	</div>
	</div>
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
		<ul>
			
			<img src="images/banner.jpg" />
				</ul>
		<ul>
			<img src="images/banner.jpg" />
				
			
		</ul>
	</div>
	<!-- end sidebar -->
</div>
<!-- end page -->
<div style="clear: both;">&nbsp;</div>
<div id="footer">
	<p>&copy;2012-statiegeld. </p>
</div>
</body>
</html>

css:

HTML:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #b30000 url(images/img01.gif) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #666666;
}

h1, h2 {
	font-weight: normal;
}

p, ol, ul {
	margin-top: 0;
	line-height: 180%;
}

a {
	color: #666666;
}

a:hover {
	text-decoration: none;
	color: #000000;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin: 0 15px 0 0;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
}

/* Header */

#header {
	height: 110px;
	margin: 0 auto;
	text-transform: uppercase;
}
#zoek {
	float: left;
	padding: 25px 0 0 px;
}

#zoek h1, #zoek p {
	margin: 0;
	font-weight: bold;
}

#zoek h1 {
	font-size: 50px;
	color: #fff;
	}

#zoek p {
	padding-left: 1px;
	line-height: normal;
	font-size: 25px;
	color: #fff;
	}
#logo {
	float: right;
	padding: 24px 0 0 200px;
}

#logo h1, #logo p {
	margin: 0;
	font-weight: bold;
}

#logo h1 {
	font-size: 50px;
	color: #fff;
	}

#logo p {
	padding-left: 1px;
	line-height: normal;
	font-size: 25px;
	color: #fff;
	}

#menu {
	float: left;
	padding: 24px 0 0 470px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	padding: 70px 25px;
	text-decoration: none;
	font-size: 25px;
	font-weight: bold;
	color: #fff}

#menu a:hover {
	text-decoration: underline;
	color: #0e6600}

#menu .current_page_item a {
	background: #b30000 url(images/bierflesje.jpg) no-repeat center;
	color: #ffffff}

/* Page */

#page {
	width: 960px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 650px;
}

.post {
}

.meta {
	margin: 0;
	padding: 10px 0 15px 20px;
	border-top: 1px solid #F3F3F3;
}

.meta a {
	text-decoration: none;
}

.meta a:hover {
	text-decoration: underline;
}

.meta .more {
	padding-left: 12px;
	background: url(images/img09.gif) no-repeat left center;
}

.meta .comments {
	padding-left: 15px;
	background: url(images/img10.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 300px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
}

#sidebar li ul {
	margin-bottom: 10px;
	padding-bottom: 10px;
	background: #FFFFFF url(images/img16.gif) no-repeat left bottom;
}

#sidebar li li {
	padding: 5px 20px;
	border-bottom: 1px solid #F3F3F3;
}

#sidebar h2 {
	height: 53px;
	margin: 0;
	padding: 15px 0 0 20px;
	background: url(images/img15.gif) no-repeat;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-size: 1.6em;
	font-weight: bold;
	color: #FFFFFF;
}

/* Green Box */

.greenbox {
	background: #FFFFFF url(images/img03.gif) repeat-x;
}

.greenbox .title {
	height: 60px;
	background: url(images/img04.gif) no-repeat;
}

.greenbox .title h1, .greenbox .title h2 {
	height: 35px;
	margin: 0;
	padding: 15px 0 0 20px;
	background: url(images/img05.gif) no-repeat right top;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-size: 1.6em;
	font-weight: bold;
	color: #FFFFFF;
}

.greenbox .entry {
	padding: 10px 20px 0 20px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
.redbox {
	background: #FFFFFF url(images/img03red.gif) repeat-x;
}

.redbox .title {
	height: 60px;
	background: url(images/img04red.gif) no-repeat;
}

.redbox .title h1, .redbox .title h2 {
	height: 35px;
	margin: 0;
	padding: 15px 0 0 20px;
	background: url(images/img05red.gif) no-repeat right top;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-size: 1.6em;
	font-weight: bold;
	color: #FFFFFF;
}

.redbox .entry {
	padding: 10px 20px 0 20px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
.btm { background: url(images/img06.gif) repeat-x left bottom; }
.btm .l { background: url(images/img07.gif) no-repeat left bottom; }
.btm .r { background: url(images/img08.gif) no-repeat right bottom; }

/* Two Columns */

.two-columns {
	clear: both;
	background: url(images/img11.gif) repeat-y;
	border-top: 10px solid #C3C3C3;
}

.two-columns .title {
}

.two-columns .title h2 {
	height: 53px;
	margin: 0;
	padding: 15px 0 0 20px;
	text-transform: uppercase;
	letter-spacing: -1px;
	font-size: 1.6em;
	font-weight: bold;
	color: #FFFFFF;
}

.two-columns .blue {
	background: url(images/img13.gif) no-repeat;
}

.two-columns .red {
	background: url(images/img14.gif) no-repeat;
}

.two-columns .columnA, .two-columns .columnB {
	width: 640px;
}

.two-columns .columnA {
	float: center;
}

.two-columns .columnB {
	float: center;
}

.two-columns .btm {
	clear: both;
	background: url(images/img12.gif) no-repeat left bottom;
}

/* Footer */

#footer {
	clear: both;
	padding: 30px 0;
	background: #FFFFFF url(images/img02.gif) repeat-x;
	text-align: center;
	font-size: smaller;
}

weet iemand hoe ik dit op moet lossen zodag ze altijd zoals de eerste komen te staan??

maxxxie · 24 nov 2012

Hallo,

In dit geval gebruik jij waarschijnlijk 2 verschillende browsers. Het mooie van html is dat je ook verschillende style.css bestanden kan toevoegen die reageerd op de gebruiker zijn browser.

Code:

<!--[if IE]>

<style type="text/css">

#search .type {height: 21px !important;padding: 2px 0 0 8px !important;width: 110px !important;}

</style>

<![endif]-->

<!--[if lt IE 7]>

    	<link href="css/default_ie6.css" rel="stylesheet" type="text/css" />

<![endif]-->

<!--[if IE]>

<style type="text/css"> 

/* place css fixes for all versions of IE in this conditional comment */

.twoColFixLtHdr #mainContent { zoom: 1; }

.item h3, .staticContent h3 { margin-top:0; }

.itemColText { overflow:auto; height:85px; }

/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

</style>

Dit heb ik een paar keer gebruikt voor een leuk shop script en werkte perfect op alle verschillende browsers. Ik denk dat je met een simpele padding code ver genoeg komt.

Mvg,
Max

ottermannetje · 24 nov 2012

Nee, het ligt niet aan de browsers maar aan de grootte van het scherm, hoe moet ik dit oplossen?
Bedankt voor je reactie

maxxxie · 24 nov 2012

Zelf ben ik ook maar een beginnend ontwerper, maar misschien zet ik je zo in de goeie richting..

Code:

<!--[if (screen.width <= 1023)]>

    	.header { margin-left:0; }

<![endif]-->

tiran818 · 1 dec 2012

Kun je een voorbeeld van je site online plaatsen, ik kan zo de code niet testen omdat k de afbeeldingen niet heb bijvoorbeeld.
CSS is iets waar ik altijd even mee moet spelen voordat ik de oplossing heb gevonden dus anders kan ik je iig niet helpen. (of je moet me de plaatjes willen sturen)

CaptainBri · 2 dec 2012

tiran818 zei:
Kun je een voorbeeld van je site online plaatsen, ik kan zo de code niet testen omdat k de afbeeldingen niet heb bijvoorbeeld.
CSS is iets waar ik altijd even mee moet spelen voordat ik de oplossing heb gevonden dus anders kan ik je iig niet helpen. (of je moet me de plaatjes willen sturen)

http://statiegeld.nl.vu/

csshunter · 2 dec 2012

... en na ontdoen van het <iframe> van nl.vu: statiegeld.woelmuis.nl, waar ook de broncode te bewonderen is.

> Ik zou eerst even de html-validator om advies vragen: resultaat.

Met vriendelijke groet,
CSShunter

plaats menu

ottermannetje

Gebruiker

maxxxie

Gebruiker

ottermannetje

Gebruiker

maxxxie

Gebruiker

tiran818

Gebruiker

CaptainBri

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy