PDA

View Full Version : Top aligning link in div under a div (?)

Dolphin123
09-13-2005, 12:18 AM
Hej Hej,

Here we go, I am adding my portfolio to my website, I am redefining some parameters. Long live css. And as usual running into some bugs.

I have a link menu which I want to place from the top to the bottom of the screen. However having done that: It aligns with a bunch of space between the "maincontent" div en the "menu" div. Follow me so far? If you have questions just ask.

Here is the code: (which is total build up fase)

<html>

<head>
<title>Company name</title>
<meta name="distribution" content="Global" >

<meta name="description" CONTENT="....">
<meta http-equiv="Content-Type" content="text/html;">
<link href="/main_portfolio.css" rel="stylesheet" type="text/css">
<link href="/portfolio_show.css" rel="stylesheet" type="text/css">
</head>
<table><tr><td>

<div id="leftheader">
<div id="maincontent"><div id="background"><h3><img src="images/portfolio/Company_name_Final.jpg" width="720" height="520" border="0">
</h5></div></div></div><div id="menu"><a href="index.php">Welkom</a><a href="producten.php">Producten</a><a href="opleiding.php">Opleiding</a><a href="portfolio.php">Portfolio</a><a href="contact.php">Contact</a></div><div id="menu"></div></td></tr></table>
</BODY>
</HTML>


body {
font-family: verdana, arial, helvetica, sans-serif;
}

table {height: 100%; width: 100%; }

td {vertical-align: middle; text-align: center;}

#leftheader {
margin-left:0;margin-right: 0;
margin-top:top;
margin-bottom:bottom;
width:100%; height:97%;
}


#maincontent {

margin-left: 236px;width:100%; height:97%;
text-align: left;
}
#background {
width: 76%;
height:100%;
margin: 0;
background-color: #ED8404;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity: 0.85;
}


#menu {
margin-top: 0px;
border:solid 4px white;
}

h3 {
font-size: 100%;
color: #330000;
font-weight: bold;
padding-top: 30px;
padding-left: 30px;
padding-bottom: 0px;
}
h5 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #330000;
font-weight: bold;
text-decoration: none;
font-weight: normal;
text-align: left;
padding-top: 0px;
padding-left: 30px;
padding-right: 30px;}


a:link {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #330000;
font-weight: bold;
text-decoration: none;
padding-left: 36px;
padding-right: 36px;
padding-top: 0px;
}

a:visited {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
font-weight: bold;
color: #330000;
text-decoration: none;
padding-left: 36px;
padding-right: 36px;
padding-top: 0px;}

a:hover {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
font-weight: bold;
color: #330000;
text-decoration: underline;
padding-left: 36px;
padding-right: 36px;
padding-top: 0px; }

a:active {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
font-weight: bold;
color: #330000;
text-decoration: none;
padding-left: 36px;;
padding-right: 36px;
padding-top: 0px;}


Have tried different solutions. Any help would be appreciated.
_Aerospace_Eng_
09-13-2005, 04:44 AM
Umm you open an h3 but close with an h5 :confused: . Have you tried setting the margins to 0 for the headers? Headers are meant to have text not images.
Dolphin123
09-14-2005, 12:07 AM
o.k. will check on that. <h3></h5> Thing.

Yeah tried the margin thing, couldn't get that to work.
Will give that a go again. Possible the padding on the links?

It is just odd this....

Thanx Aero for the reply! :-)
E-Liam
09-14-2005, 07:23 AM
Hi,

you've also missed out the opening <body> tag.. if that helps.. :)

Cheers

Liam
ronaldb66
09-14-2005, 01:19 PM
While your at it, loose the outer, single cell table; it has no business there (unless you plan to use it for a columnar layout lateron and don't want to use CSS-P).
Dolphin123
09-16-2005, 08:27 PM
o.k. thanx for the replies and first off my apologies for replying so late, been quite busy.

Yeah thanx on the body tag, like I wrote it is really a rough draft that I am adapting from my main site, so there are bound to be a few misplaced tags until I clean up the code.

Figured out the problem, it is the table that I use to center the content on the page. A table was the only way to do this, couldn't find any other way. Anyway... This caused somehow for the div to push out, at least I think that is what the problem was. It solved it self somehow when I adapted some of the div sizes. (apparently...) ;)

Opted for a different layout, than the proposed one, because the links ended up being to many to look nice. Just going for a jump menu now.

Thanks for all the advice!!! :)