page width is wrong

Question

thijscream -2 Junior Poster in Training

13 Years Ago

i made a dropdown menu on top of my page,
i thaught everything went well.
you can see the example @ http://www.thijscream.nl/wijnkado
the only problem is that the page is kinda wide, so the menu isn't centered.
is there a solution for this?
this is my menu:

<div id="menu">
		<ul id="nav" class="dropdown dropdown-horizontal">
			<li class="dir">
				<a href="index.php">Home</a>
			</li>
			<li class="dir">
				<a href="rood.php?id=0&sid=0">Rode wijn</a>
			<ul>
				<li>
					<a href="rood.php?id=Argentinië&sid=0">Argentinië</a>
				</li>
				<li>
					<a href="rood.php?id=Australië&sid=0">Australië</a>
				</li>
				<li>
					<a href="rood.php?id=Californië&sid=0">Californië</a>
				</li>
				<li>
					<a href="rood.php?id=Chili&sid=0">Chili</a>
				</li>
				<li>
					<a href="rood.php?id=Frankrijk&sid=0">Frankrijk</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM frankrijk WHERE rood = 1 AND land = 'Frankrijk'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rood.php?id=Frankrijk&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rood.php?id=Italië&sid=0">Italië</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM italie WHERE rood = 1 AND land = 'Italie'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rood.php?id=Italië&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rood.php?id=Nieuw-Zeeland&sid=0">Nieuw-Zeeland</a>
				</li>
				<li>
					<a href="rood.php?id=Portugal&sid=0">Portugal</a>
				</li>
				<li>
					<a href="rood.php?id=Spanje&sid=0">Spanje </a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM spanje WHERE rood = 1 AND land = 'Spanje'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rood.php?id=Spanje&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rood.php?id=Zuid-Afrika&sid=0">Zuid-Afrika</a>
				</li>
				<li>
					<a href="rood.php?id=Overige&sid=0">Overige</a>
				</li>
			</ul>
			
			</li>
			<li class="dir">
				<a href="wit.php?id=0&sid=0">Witte wijn</a>
			<ul>
								<li>
					<a href="wit.php?id=1&sid=0">Argentinië</a>
				</li>
				<li>
					<a href="wit.php?id=2&sid=0">Australië</a>
				</li>
				<li>
					<a href="wit.php?id=3&sid=0">Californië</a>
				</li>
				<li>
					<a href="wit.php?id=4&sid=0">Chili</a>
				</li>
				<li>
					<a href="wit.php?id=5&sid=0">Frankrijk</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM frankrijk WHERE wit = 1 AND land = 'Frankrijk'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="wit.php?id=5&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="wit.php?id=6&sid=0">Italië</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM italie WHERE wit = 1 AND land = 'Italie'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="wit.php?id=6&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="wit.php?id=7&sid=0">Nieuw-Zeeland</a>
				</li>
				<li>
					<a href="wit.php?id=8&sid=0">Portugal</a>
				</li>
				<li>
					<a href="wit.php?id=9&sid=0">Spanje </a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM spanje WHERE wit = 1 AND land = 'Spanje'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="wit.php?id=9&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="wit.php?id=10&sid=0">Zuid-Afrika</a>
				</li>
				<li>
					<a href="wit.php?id=11&sid=0">Overige</a>
				</li>
			</ul>
			</li>
			
			<li class="dir">
				<a href="rose.php?id=0&sid=0">Rose wijn</a>
			<ul>
				<li>
					<a href="rose.php?id=3&sid=0">Californië</a>
				</li>
				<li>
					<a href="rose.php?id=5&sid=0">Frankrijk</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM frankrijk WHERE rose = 1 AND land = 'Frankrijk'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rose.php?id=5&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rose.php?id=6&sid=0">Italië</a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM italie WHERE rose = 1 AND land = 'Italie'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rose.php?id=6&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rose.php?id=8&sid=0">Portugal</a>
				</li>
				<li>
					<a href="rose.php?id=9&sid=0">Spanje </a>
					<ul>
						<?php
						$query = "SELECT id, streek FROM spanje WHERE rose = 1 AND land = 'Spanje'";
						$result = mysql_query($query) or die('Error : ' . mysql_error());
						while(list($sid, $streek) = mysql_fetch_array($result, MYSQL_NUM))
						{
						?>
							<li>
								<a href="rose.php?id=9&sid=<?php echo $sid;?>"><?php echo $streek;?></a>
							</li>
						<?php 
						}
						?>
					</ul>
				</li>
				<li>
					<a href="rose.php?id=10&sid=0">Zuid-Afrika</a>
				</li>
				<li>
					<a href="rose.php?id=11&sid=0">Overige</a>
				</li>
			</ul>
			</li>
			
			<li class="dir">
				<a href="mouserend.php?id=0&sid=0">Mouserend</a>
			<ul>
				<li>
					<a href="mouserend.php?id=1&sid=0">Frankrijk</a>
				</li>
				<li>
					<a href="mouserend.php?id=2&sid=0">Italië</a>
				</li>
				<li>
					<a href="mouserend.php?id=3&sid=0">Spanje</a>
				</li>
				<li>
					<a href="mouserend.php?id=4&sid=0">Zuid-Afrika</a>
				</li>
			</ul>
			
			</li>
		</ul>

and the thing in css is this:

@charset "UTF-8";

/*
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
*/

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

if i remove the part where the sub menu is displayed the problem is gone, but that just looks messy.
this part:

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

so do you know what to do?

php

Edited 13 Years Ago by happygeek because: swearing removed from title

2 Contributors
2 Replies
145 Views
6 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by thijscream

happygeek commented: do not try and circumvent the bad language filter -2

All 2 Replies

qazplm114477 14 Junior Poster

13 Years Ago

The menu looks fine to me

http://i53.tinypic.com/ngy429.png

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

thijscream -2 Junior Poster in Training · Answer 1 · 2011-02-28T15:54:26+00:00

The menu looks fine to me
http://i53.tinypic.com/ngy429.png

i know it looks good, but the problem is the page isn't centered because of the menu,
if i remove 1 piece it centered nice,
in your print screen it shows more to the left then to the right.

you should compare these 2:
http://www.thijscream.nl/wijnkado2/
http://www.thijscream.nl/wijnkado/

then you see the menu of the first one isn't working correctly but the width is correct.
on the 2nd the menu works great but there is to much white space on the right.
it should be all centered

page width is wrong

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers