17 replies [Last post]
Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

Hi, I'm new here, I have quite some experience with CSS, though I still don't know what some things are. I've been working with different sets of browsers to test sites and try to make it look all the same.

Anyway, my problem.

I have <a>-tags, with this style:

a.menu {
	width: 87px;
	height: 32px;
	margin-left: 0px;
	margin-right: 0px;
	background-image: url(../img/menubg.gif);
	background-repeat: repeat;
	border-width: 0px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: white;
	float: left;
	text-align: center;
	color: #003366;
	font-family: Verdana, Arial, Sans-serif, Helvetica;
	font-size: 11px;
	font-weight: bold;
	overflow: hidden;
}

(page is validated)

notice the width and height. Now, the value between the <a> and </a> tags, should be vertically aligned in the middle. And since this value can be 1 to 2 lines, I can't manage to do this with putting them in a div and giving that div some margin-top.

An option would be to create a table within the <a> tags, but that's a bit of a dirty fix I'd say.

Anyone has a good idea?[/code]

As a rule, I never touch anything more sophisticated and delicate than myself

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

some vertical-alignment-help

Hi there,

Add line-height:32px; that should make the text center vertically. Make this the same as height: and remove overflow:hidden;

See if this is ok, I have done a quick check with long button names, and if possible paste a link to the page so we can check it in place, because it helps to see the full code for the page. If not paste it all here. Smile

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

doesn't work I'm afraid Sad
it does center the first line, but places the next below it.

Here's a link:
http://213.189.16.22/~vvezwethov/

it's in the menu. the last menuitem's middle drop down menuitem should be 2 lines. (service meldpunt).

I'm still working on the 100% height thing which seems to bug right now.

[edit]
sorry I read add overflow: hidden. I removed it right now, but the button is twice as big right now Smile that's not supposed to happen Wink

As a rule, I never touch anything more sophisticated and delicate than myself

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

some vertical-alignment-help

Hi, add white-space:nowrap; to #menu a and change width:87px; to width:auto; and try again. If you will only have long text in the drop-down part of the menu, you will need to add the above to that code instead.
Smile

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

Hey,

thanks, but I have the feeling that will alter my menubuttons size.

I have some kind of fix right now, 3 DIVs are making it align vertically quite neatly now (except for IE and Avant, they're a little bit too big), so I guess I'll stick with this for now.

I just found another problem in IE and Avant, but that has nothing to do with this one. I'll get a new topic after I used the search.

thanks Smile

As a rule, I never touch anything more sophisticated and delicate than myself

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

some vertical-alignment-help

If you need more text than will fit in the normal width of the button that has a fixed size, you have to change something to fit it in. You could make the change suggested or alter the font size but that would cause you more problems with reading them. You cannot fit more into less generally.

Can you post the entire page code here so that I can look at it, rather than me having to grab it from the web site, as it would be easier. ?

ATM I think you are using tables for the menu? if so that is wrong, there are so much easier ways of building a menu than that. Also tables are meant for tabular data, this isn't what a menu is.

Have a look here http://www.csscreator.com/menu/multimenu.php as a start, or do a search for 'css menus' here or with 'Google'.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

no the menu itself is in DIVs.

I have used the table to position the backgroundimages, and some DIV's. I don't know why really, I think DIV's would perfectly be able to hold it. I'm just not that confident about my DIV-usage yet Wink
but I'm learning.

As a rule, I never touch anything more sophisticated and delicate than myself

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

some vertical-alignment-help

I've just had another look at that page and it doesn't validate, 5 errors, see here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2F213.189.16.22%2F~vvezwethov%2F Fix these issues before anything else. Always validate as you go along.

Read the 'Beginners CSS Questions' and 'FAQs' on this site.

I asked you to post the code here to make it easier to debug, not seen it yet. Crying

Basically, dump frames and tables, that site doesn't need it afaics. If you are using single color images for the background in the menu and right side, a simple color declaration would be better. Try turning off images in the browser and see what I mean. Smile Get rid of javascript for the menus, it can all be done in CSS. Re-write the site to XHTML Strict, use divs for layout, and a separate stylesheet for the css. There is plenty of help here for the asking, if you help us to help you also.

I know what it is like trying to get your head round all this, this is not meant as a criticism at all.

Give it a go, it is possible Cool

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

http://validator.w3.org/check?uri=http%3A%2F%2F213.189.16.22%2F%7Evvezwethov%2Fmain.php&charset=%28detect+automatically%29&doctype=Inline&verbose=1

it does validate Wink I changed pagename.

I can copy the code but its a bit big. I dont know if you guys appreciate that.

I'll post it in a jiffy. Smile

As a rule, I never touch anything more sophisticated and delicate than myself

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

some vertical-alignment-help

Quote:

I can copy the code but its a bit big. I dont know if you guys appreciate that.
We have no problem with that. Smile

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 3 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

some vertical-alignment-help

Quote:
it does validate Wink I changed pagename.
But the css doesn't http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F213.189.16.22%2F~vvezwethov%2Fmain.php Wink

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

*beep* you're right.. thats because of the iexplore hacks Oups
I finally understand why iexplore is a *beep*y browser Wink

anyway. here's the code as it is right now:


	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>&raquo; VvE-Zwethove</title>
	<script type="text/javascript" src="js/dropdown.js">
	<script type="text/javascript"><!--//--><![CDATA[//><!--
		startList = function() {
			if (document.all&&document.getElementById) {
				navRoot = document.getElementById("nav");
				for (i=0; i<navRoot.childNodes.length; i++) {
					node = navRoot.childNodes[i];
					if (node.nodeName=="LI") {
						node.onmouseover=function() {
							this.className+=" over";
						}
						node.onmouseout=function() {
							this.className=this.className.replace(" over", "");
						}
					}
				}
			}
		}
		window.onload=startList;
	
	//--><!]]></script>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
	</head>
	<body style="
		margin-top:0px; 
		margin-bottom: -3px;
		padding: 0px;
		background-image: url(img/background.PNG); 
		background-repeat: repeat; 
		vertical-align: top;
		height: 100%;
		min-height: 100%;">
		
		<center style="
			height: 100%;
			min-height: 100%;">
		
			<div style="
				width: 782px;
				height: 100%;
				min-height: 100%;
				text-align: left;">
				
				<div style="
					position: absolute; 
					z-index: 0; 
					margin: 0px; 
					width: 782px; 
					height: 100%;
					min-height: 100%;">
					
					<div style="
						position: absolute; 
						left: 441px;
						top: 30px;
						width: 331px; 
						height: 145px; 
						overflow: hidden; 
						background-image: url(img/test.PNG); 
						background-position: top right; 
						background-repeat: repeat;">
							
						<img alt="" src="img/window.gif">
					</div>
				
					<table style="
						width: 782px; 
						padding: 0px; 
						margin: 0px; 
						border-collapse: collapse;
						height: 100%; 
						min-height: 100%;">
						
						<tr>
							<td colspan="3" 
							style="
								background-image: url(img/top.PNG); 
								background-repeat: no-repeat; 
								padding: 0px; 
								height: 118px; 
								width: 782px; 
								background-position: top left;">
								
							</td>
						</tr>
						<tr>
							<td style="
								background-image: url(img/left.PNG); 
								background-repeat: repeat-y; 
								background-position: top right; 
								padding: 0px; 
								width: 7px;">
								
							</td>
							<td style="
								background-color: #ffffff; 
								width: 766px; 
								height: 100%;
								min-height: 100%; 
								text-align: center; 
								vertical-align: top; 
								padding: 0px;">
						
								<table style="
									width: 766px; 
									height: 100%;
									min-height: 100%; 
									padding: 0px; 
									border-collapse: collapse;
									margin: 0px;">
									
									<tr>
										<td style="
											background-color: #ffffff; 
											text-align: left; 
											vertical-align:top; 
											width: 564px; 
											padding: 0px; 
											min-height: 100%;">
									
											<ul id="nav">
											
												<li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Bestuur
							</a>
					
						</div>
					</div>
				</div>
			</div>
		<ul>
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=122&amp;subID=163" class="menu">
								Doelstelling
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=122&amp;subID=164" class="menu">
								Agenda
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		</ul></li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Veiligheid
							</a>
					
						</div>
					</div>
				</div>
			</div>
		</li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Nieuws
							</a>
					
						</div>
					</div>
				</div>
			</div>
		<ul>
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=124&amp;subID=165" class="menu">
								Archief
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		</ul></li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Info
							</a>
					
						</div>
					</div>
				</div>
			</div>
		</li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Contact
							</a>
					
						</div>
					</div>
				</div>
			</div>
		<ul>
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=126&amp;subID=166" class="menu">
								Service Meldpunt
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=126&amp;subID=167" class="menu">
								Route
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		</ul></li>
												
											</ul>
											
											<center>
											
												<div style="
													clear: both; 
													width: 550px;">
													
													<center>
													
														
	<br>
	<table style="
		width: 480px;
		border-collapse: collapse;
		background-color: white;">
		
		<tr>
			<td style="
				width: 480px;
				vertical-align: top;
				background-color: #ffffff; 
				text-align: center;">
				
					
		<img src="http://www.mediaparq.nl/img.php?ID=82"
			alt=""
			style="
			margin: 5px;
			width: 100px;">
	<br><span style="color: #000000; line-height: 150%; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold;">laalalala</span><br>
					<br><span style="color: #000000; line-height: 150%; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:none;">mamamamaa</span>
			</td>
		</tr>
	</table>
<br><br>
													
													</center>
												</div>
											
											</center>
											
										</td>
										<td style="
											background-image: url(img/dashedbackground.PNG); 
											vertical-align:top; 
											width: 202px; 
											padding: 0px; 
											height: 100%;
											min-height: 100%;">
											
												
											<div style="
												margin-top: 80px;
												margin-left: 20px;
												margin-right: 20px;
												font-family: Verdana, Arial, Sans-serif, Helvetica;
												font-size: 11px;">
													<span style="float:right; color: white;">
														<a href="main.php">Home</a> | 
														<a href="javascript:;" onclick="window.open('login.php','newwin','width=300, height=150, status=no, scrollbars=no');">Login</a>
													</span><br>
													<hr style="height: 1px; padding: 0px; margin: 3px; border-style: dashed; border-color: white; border-width: 1px;">
													<b>Aanmelden nieuwsbrief:</b><br>
													<input type="text" style="height: 13px; font-size: 10px; font-family: Verdana, Helvetica;" name="emailadres"> Go!
													<hr style="height: 1px; padding: 0px; margin: 3px; border-style: dashed; border-color: white; border-width: 1px;">
													<b>Random Profiel:</b><br><br><br><br>
													<hr style="height: 1px; padding: 0px; margin: 3px; border-style: dashed; border-color: white; border-width: 1px;">
													<b>Zoeken:</b><br>
													<input type="text" style="height: 13px; font-size: 10px; font-family: Verdana, Helvetica;" name="zoeken"> Go!<br><br><br>
													<hr style="height: 1px; padding: 0px; margin: 3px; border-style: dashed; border-color: white; border-width: 1px;">
													<b>Ondernemer v/d Maand:</b><br><br><br><br>
													<hr style="height: 1px; padding: 0px; margin: 3px; border-style: dashed; border-color: white; border-width: 1px;">
													
											</div>
										</td>

								</table>
					
							</td>
							<td style="
								background-image: url(img/right.PNG); 
								background-repeat: repeat-y; 
								background-position: top left; 
								width: 9px;">
							</td>
						</tr>
					</table>
					
					

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

and the css:

body {
	font-family: arial, helvetica, serif;
}
div {
	border-width: 0px;
	border-style: solid;
	border-color: red;
}
ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	vertical-align: middle;
}

li { 
	float: left;
	position: relative;
}

li ul { 
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
}

li>ul {
	top: auto;
	left: auto;
}

ul li ul li {
	clear: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: white;
}

ul li ul {
	top: 32px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: white;
}

li:hover ul, li.over ul { 
	display: block;
}

div.menu {
	width: 87px;
	height: 32px;
	margin-left: 0px;
	margin-right: 0px;
	background-image: url(../img/menubg.gif);
	background-repeat: repeat;
	border-width: 0px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: white;
	float: left;
	text-align: center;
}

	div.menu1 {
		display: table; 
		height: 32px; 
		width: 87px;
		_position: relative; 
		overflow: hidden;
		text-align: center;
		_text-align: left;
	}
	
	div.menu2 {
		_position: absolute; 
		_top: 50%;
		width: 87px;
		display: table-cell; 
		vertical-align: middle;
	}
	
	div.menu3 {
		width: 87px;
		_position: relative; 
	 	_top: -50%;
		text-align: center;
	}

a.menu {
	top: -50%;
	margin-left: 0px;
	margin-right: 0px;
	width: 87px;
	height: 32px;
	text-align: center;
	color: #003366;
	font-family: Verdana, Arial, Sans-serif, Helvetica;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	_margin-top: -2px;
}
a.menu:hover {
	text-decoration: underline;
}


I really really like to know how I'm supposed to do it, I hate buggy stuff..

and now because of the iexplore hacks it doesn't validate. so *beep*ty.

anyway thanks for helping me out so far Smile really appreciate it.

As a rule, I never touch anything more sophisticated and delicate than myself

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

some vertical-alignment-help

Not answering your question, but maybe making it easier for whoever does, do not put the styles inline within the html. That makes it impossible to easily modify the styles for testing ideas, at least not without putting it on our own machine.

Place all styles within style tags in the head of the document[1]. We can easily modify a style rule (especially with Firefox's style editor) and test results. Too, we can store the doc locally as a single file and play with it.

More in the way of 'best practise' was added by Hugo to a sticky post from Tony which (are you having as much difficulty in following this as I'm having in writing it?) can be seen here, http://www.csscreator.com/css-forum/ftopic6045.html

cheers,

gary

[1] You should always do this while in development. It makes the whole process easier to control. Once the bugs are ironed out, you can move the styles to their own file and use a link.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

Thanks I'll try to remember that Smile
I'm gonna kill the table and put it all in DIV's now. I'll do the styles with classes in the head, and will export it when everything has been validated and such. Hope it works out. My deadline's tomorrow Shock

As a rule, I never touch anything more sophisticated and delicate than myself

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

allright Smile

all set up, so I can get to troubleshooting.

the code is this:

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>&raquo; VvE-Zwethove</title>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
	<style type="text/css">
	
	body {
		margin-top:0px; 
		margin-bottom: -3px;
		padding: 0px;
		background-image: url(img/background.PNG); 
		background-repeat: repeat; 
		vertical-align: top;
		height: 100%;
		min-height: 100%;
	}
	
	hr.right {
		height: 1px; 
		padding: 0px; 
		margin: 3px; 
		border-style: dashed; 
		border-color: white; 
		border-width: 1px;		
	}
	
	center.container {
		height: 100%;
		min-height: 100%;		
	}
	
	span.rightmenu {
		float:right; 
		color: white;
	}
	
	input {
		height: 13px; 
		font-size: 10px; 
		font-family: Verdana, Helvetica;
	}
	
	div {
		border-width: 0px;
		border-style: solid;
		border-color: red;
	}
	
	div.container {
		width: 782px;
		height: 100%;
		min-height: 100%;
		text-align: left;		
	}
	
	div.container2 {
		position: absolute;
		z-index: 0; 
		margin: 0px; 
		width: 782px; 
		height: 100%;
		min-height: 100%;
	}	
	
	div.floater {
		position: absolute; 
		left: 441px;
		top: 30px;
		width: 331px; 
		height: 145px; 
		overflow: hidden; 
		background-image: url(img/test.PNG); 
		background-position: top right; 
		background-repeat: repeat;		
	}
	
	div.right {
		margin-top: 80px;
		margin-left: 20px;
		margin-right: 20px;
		font-family: Verdana, Arial, Sans-serif, Helvetica;
		font-size: 11px;		
	}
	
	div.banner {
		background-image: url(img/top.PNG); 
		background-repeat: no-repeat; 
		padding: 0px; 
		height: 118px; 
		width: 782px; 
		background-position: top left;
	}
	
	div.leftshadow {
		background-image: url(img/left.PNG); 
		background-repeat: repeat-y; 
		background-position: top right; 
		padding: 0px; 
		width: 6px;
		height: 100%;
		min-height: 100%;
		float: left;
	}
	
	div.rightshadow {
		background-image: url(img/right.PNG); 
		background-repeat: repeat-y; 
		background-position: top left; 
		width: 9px;
		height: 100%;
		min-height: 100%;
		float: left;
	}
	
	div.contentbooth {
		background-color: #ffffff; 
		text-align: left; 
		vertical-align:top; 
		width: 564px; 
		padding: 0px; 
		height: 100%;
		min-height: 100%;
		float: left;
	}
	
	div.content {
		clear: both; 
		width: 550px;
		height: 100%;
		min-height: 100%;
	}
	
	div.dashed {
		background-image: url(img/dashedbackground.PNG); 
		vertical-align:top; 
		width: 202px; 
		padding: 0px; 
		height: 100%;
		min-height: 100%;
		float: left;
	}
	
	</style>
	</head>
		<body>
			<center class="container">
				<div class="container">
					<div class="container2">
						<div class="floater">
							<img alt="" src="img/window.gif">
						</div>
	
						<div class="banner"></div>
						<div class="leftshadow"></div>
									
						<div class="contentbooth">
							<ul id="nav">
								<li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Bestuur
							</a>
					
						</div>
					</div>
				</div>
			</div>
		<ul>
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=122&amp;subID=163" class="menu">
								Doelstelling
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=122&amp;subID=164" class="menu">
								Agenda
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		</ul></li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Veiligheid
							</a>
					
						</div>
					</div>
				</div>
			</div>
		</li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Nieuws
							</a>
					
						</div>
					</div>
				</div>
			</div>
		<ul>
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=124&amp;subID=165" class="menu">
								Archief
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		</ul></li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Info
							</a>
					
						</div>
					</div>
				</div>
			</div>
		</li><li>
			<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="javascript:;" class="menu">
								Contact
							</a>
					
						</div>
					</div>
				</div>
			</div>
		<ul>
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=126&amp;subID=166" class="menu">
								Service Meldpunt
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		
			<li>
				<div class="menu">
				<div class="menu1">
					<div class="menu2">
						<div class="menu3">
						 	
							<a href="main.php?site=1&amp;mID=126&amp;subID=167" class="menu">
								Route
							</a>
						
						</div>
					</div>
				</div>
				</div>
			</li>
		</ul></li>
							</ul>
							
							<center>
								<div class="content">
									<center>
										
	<br>
	<table style="
		width: 480px;
		border-collapse: collapse;
		background-color: white;">
		
		<tr>
			<td style="
				width: 480px;
				vertical-align: top;
				background-color: #ffffff; 
				text-align: center;">
				
					
		<img src="http://www.mediaparq.nl/img.php?ID=82"
			alt=""
			style="
			margin: 5px;
			width: 100px;">
	<br><span style="color: #000000; line-height: 150%; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold;">laalalala</span><br>
					<br><span style="color: #000000; line-height: 150%; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:none;">mamamamaa</span>
			</td>
		</tr>
	</table>
<br><br>
									</center>
								</div>
							</center>
						</div>
						
						<div class="dashed">
							<div class="right">
								<span class="rightmenu">
									<a href="main.php">Home</a> | 
									<a href="login.php"">Login</a>
								</span>
								<br>
								<hr class="right">
								<b>Aanmelden nieuwsbrief:</b>
								<br>
								<input type="text" name="emailadres"> Go!
								<hr class="right">
								<b>Random Profiel:</b>
								<br>
								<br>
								<br>
								<br>
								<hr class="right">
								<b>Zoeken:</b>
								<br>
								<input type="text" name="zoeken"> Go!
								<br>
								<br>
								<br>
								<hr class="right">
								<b>Ondernemer v/d Maand:</b>
								<br>
								<br>
								<br>
								<br>
								<hr class="right">
							</div>
						</div>
						
						<div class="rightshadow"></div>
						
					</div>
				</div>
			</center>
		</body>
	</html>

Don't pay attention to the table in the middle, I'll have that fixed later on.

Ok well the current problems are these;

at no content, there's a scrollbar (probably because of the DIV height 100%-thingies). I just want the page to fit, but because of the banner above it, the div's 100% height gets moved about 150px down.

at too much content, the middle content DIV stretches out, and the rest of the divs (shadows left and right, containerDIV, the dashed-div) just stay their original sizes. I need all the divs to just align neatly at the bottom. Since content of the DIV.right, and DIV.content is quite dynamic, both of these might become larger than the screen, so it would be best to have the scrollbar in the browser, and not in the div itself (overflow).

Who can tell me what I should look at Smile

[edit]
and of course the page won't validate because of the iexplore hacks to center the menuitems in the vertical middle. so if there's a decent solution for that problem..

pagelink is
http://213.189.16.22/~vvezwethov/

As a rule, I never touch anything more sophisticated and delicate than myself

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 8 weeks 9 hours ago
Joined: 2004-06-30
Posts: 9674
Points: 810

some vertical-alignment-help

 <ul>
         <li>
            <div class="menu">
            <div class="menu1">
               <div class="menu2">
                  <div class="menu3">
                      
                     <a href="main.php?site=1&amp;mID=126&amp;subID=166" class="menu">
                        Service Meldpunt
                     </a>
                  
                  </div>
               </div>
            </div>
            </div>
         </li> 

Shock Shock Shock Shock

Doth mine eyes deceive me? Did you really wrap an anchor in FOUR divs?

Verschwindende wrote:
  • CSS doesn't make pies

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 8 years 23 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

some vertical-alignment-help

yesh I did kind sir Wink

that's so I get my vertical align in the middle, which is what this topic was really about Crying

but this too is the reason it won't validate.

As a rule, I never touch anything more sophisticated and delicate than myself

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

some vertical-alignment-help

You've way over thought this. Looking at the top level only,

 
<ul> 
  <li><a href="">link</a></li> 
</ul> 
============ 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    overflow: hidden; 
    width: 100%; /*for IE's hasLayout bug*/ 
    } 
 
li { 
    width: 80px; /*arbitrary value on my part*/ 
    height: 25px; /*also arbitrary*/ 
    float: left; 
    } 
 
a { 
    line-height: 25px; /*matches available height--letters  
                         will self center*/ 
    display: block; /*so whole area is clickable*/ 
    _height: 1px; /*for IE hasLayout bug*/ 
    }

There are details that must be fleshed out, but that's the core.

Lose the frames. They're ugly and have no socially redeeming value. (that is one legal definition of porn Smile) blankety censor!Sad

You have a simple two column + banner layout, don't overdo. See http://garyblue.port5.com/webdev/2col.html for a simple example of the same layout.

cheers,

gary.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.