aligning with CSS

B

bulb763

Suspended / Banned
Messages
711
Name
Jon
Edit My Images
Yes
never created a website before and this really has me stumped. I want to get the bottom edge of "mainlinks" (this is the div that contains the 4 links in blue) to line up with the bottom edge of "mainlogo" (another div that contains the logo top left, and has the right-border set to 1px so you can see). Both of these divs are set to float:left, and they are both within the "header" div (which has the bottom-border set to 1px so you can see), which is set to float:left and 99% wide.

3106393485_85e5cd246b_o.jpg


So how on earth do I get them to line up as described?!

Cheers
 
Use valign="top, middle or bottom" on the div ?
 
Ajophotog said:
Use valign="top, middle or bottom" on the div ?
Click to expand...

Well no, because then it wouldn't be valid XHTML.

I'm not quite sure what you're trying to achieve, but I think some experimentation with padding and margin on your div will do the trick.

In your stylesheet you can do:

padding: xx;

Which pads every side out.

or do single sides, like: padding-top: 20px;

Same for margin.

You can go really shorthand and do:

padding: 5px 10px 15px 20px;

Which will do the top 5px, right 10px bottom 15px and left 20px, but that's pretty confusing because you have to remember which order they are in; TRBL.

If I were you, I'd some research on padding and margins.
 
You could try it with margins as Martyn suggest or you could also try using vertical-align:bottom property on both the parent (the "header" div) and the child (mainlinks), although I'm not sure whether it is going to work on floating divs (probably not, but it's worth giving it a shot).
Using margins is safer with IE (it doesn't always handle padding as expected).
 
you need to have your main links in the same div as your logo.
under your logo image add <br>then add your main links.

if this then adds the main links to the right of the logo, change the height of the 'logo' div in your css untill it aligns the way you want.
 
Will adding

vertical-align: bottom;

to the CSS not work?
 
Holy out of date batman, that link is 5 years old! :lol:
 
sorry pxl8, read you question wrong..

Try this...

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
BODY **
	background-color : #000000;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #CCCCCC;
	margin: 2px;
**
A:link **
	color:#CCCCCC;
	text-decoration: none;
**
A:visited **
	color:#CCCCCC;
	text-decoration: none;
**
A:active **
	color:#CCCCCC;
	text-decoration: none;
**
A:hover **
	color:#AAAAAA;
	text-decoration:underline;
**
.main_table **
	margin-left:auto;
	margin-right:auto;
	width: 900px;
	border: 0;
	padding: 0;
**
.top_nav_table **
	background-color:#000088;
**
.logo **
	background-image: url(path/to/image.jpg);
	background-repeat: no-repeat;
	width:130px;
	height:90px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
	border-right-width: 1px;
	padding: 5px;
**
.header **
	text-align: left;
	vertical-align: bottom;
	word-spacing: 10px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	border-bottom-width: 1px;
	padding: 5px;
**
.left_nav_table **
	margin-left:auto;
	margin-right:auto;
	width: 100px;
	border: 0;
	padding: 0;
**
.content **
	background-color: #333333;
	text-align: center;
	vertical-align: middle;
**
</style>
</head>
<body>
<p>&nbsp;</p>
<table width="90%" class="main_table">
  <tr>
    <td class="logo">&nbsp;</td>
    <td colspan="2" class="header"><table width="0" border="0" cellpadding="0" cellspacing="0" class="top_nav_table">
        <tr>
          <td width="20">&nbsp;</td>
          <td><a href="shots.html">SHOTS</a></td>
          <td width="20">&nbsp;</td>
          <td><a href="portfolio.html">PORTFOLIO</a></td>
          <td width="20">&nbsp;</td>
          <td><a href="about.html">ABOUT</a></td>
          <td width="20">&nbsp;</td>
          <td><a href="blog.html">BLOG</a></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="96"><table class="left_nav_table">
        <tr>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&#8226;&nbsp;&nbsp;<a href="shots.html">SHOTS</a></td>
        </tr>
        <tr>
          <td>&#8226;&nbsp;&nbsp;<a href="about.html">ABOUT</a></td>
        </tr>
        <tr>
          <td>&#8226;&nbsp;&nbsp;<a href="blog.html">BLOG</a></td>
        </tr>
      </table></td>
    <td colspan="2" class="content">CONTENT HERE</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
</table>
</body>
</html>

its a bit long-winded but is something like what you are looking for.

i've done it this way to make it easier for you to understand, i've only tested in with dreamweaver and not on my server but it should work ok???

you will need to add the path to your logo image and play around with the width & height of the .logo style

hope it helps
 
Ok, been a while since I played with CSS but here's how I'd do it.

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.container .logo_left **
	float: left;
**
.container .menu_right **
	position: absolute;
	bottom: 0px;
**
.container **
	height: 60px;
	position: relative;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
**
-->
</style>
</head>

<body>
<div class="container">
  <div class="logo_left">
    <p>Content for  class &quot;logo_left&quot; Goes Here</p> 
  </div>
  <div class="menu_right">Content for  class &quot;menu_right&quot; Goes Here</div>
</div>
</body>
</html>

It creates a container div and inside it are the logo div followed by the menu div which is set to absolute positioning with 0px position at the bottom which get you the bottom alignment. The container div height should be set to the height of the logo. I've set the container to be 90% of the page width and centered (auto margins) but you can play around with all of that. The main thing is the 0px position trick for alignment.
 
Wow thanks for all the help guys! I've been out all day so apologies for not getting back sooner. I'll have a play tomorrow and see what I can manage...
 
woop woop, got there in the end. I'm not entirely satisfied that I've not been able to work it out with floating divs, but this will do...

3111193074_f85863fd72_o.jpg


HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JDSshots - Home</title>
<link href="black.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
 <a href="index.html" title="JDSshots.com"><img src="images/logos/logo1.gif" alt="JDSshots.com" width="166" height="75" /></a>
 <div id="mainlinks">
  <p><a href="/shots" title="shots">shots</a></p>
  <p><a href="/portfolio" title="portfolio">portfolio</a></p>
  <p><a href="/about" title="about">about</a></p>
  <p><a href="/blog" title="blog">blog</a></p>
 </div>
</div>

 asdf
<ul class="mainlinks">
   <li><a href="/shots" title="shots">shots</a></li>
   <li><a href="/about" title="about">about</a></li>
  <li><a href="/blog" title="blog">blog</a></li>
 </ul>
</body>
</html>

HTML: 
@charset "utf-8";
/* CSS Document */

body{
background:#111111;
color:#bfbfbf;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:10px 0% 0px 0%;
padding-top:10px;
text-align:center; /* for IE */
margin:0 auto; /* for the rest */
text-align:left; /* reset text alignment */
width:90%;
**

div#header **
color:#FFFFFF;
background:#111111;
float:left;
padding:0px 0px 5px 0px;
width:99%;
border-bottom:1px solid;
**

div#header a img **
padding-right:25px;
border-right:1px solid;
margin-right:20px;
padding-left:10px;
**

div#mainlinks **
display:inline;
width:auto;
text-transform:uppercase;
**

div#mainlinks p **
padding-right:20px;
display:inline;
**

a{
color:#FFFFFF;
text-decoration:none
**

a:link {color: #FFFFFF**
a:visited {color: #FFFFFF**
a:hover {color: #AAAAAA**
a:active {color: #FFFFFF**

img{
border:0;
**

a:hover img {color: #FFFFFF**

Cheers for help again :thumbs: As I say, first attempt at this sort of thing, but hopefully I won't have too many silly Qs!
 
You must log in or register to reply here.
Back
Top