Hey guys, just need help aligning this

**sweetshoes18** · 06-26-2011 01:24 PM

here is the code:

<div> <a href="/home/"><img src="/storage/generic/YAY3 copy.jpg" width="230" height="39" class="mark "alt="PENROSE REALTY" /></a>

<ul id="masthead">

<li><a href="/home/"><font size="1">Home</font></a></li>

<li><a href="/properties/"><font size="1">Rentals</font></a></li>

<li><a href="/mls/"><font size="1">MLS</font></a></li>

<li><a href="/areas/"><font size="1">Areas</font></a></li>

<li><a href="/boston/"><font size="1">Boston Blog</font></a></li>

<li><a href="/about/"><font size="1">About Us</font></a></li>

<li><a href="/contact/"><font size="1">Contact</font></a></li>

</ul></div>

I'm trying to get the logo on the same line as the menu. here is the link to the website - www.penroserealtyboston.com

how do i get it on the same line?

**Major Payne** · 06-26-2011 11:21 PM

Try 3 divs. One div is the main wrapper div with a set width as required for holding image and links. Wrap image/link and menu in their own divs. Float one left, one right. Center main wrapper with:

margin: 0 auto;

**sweetshoes18** · 06-27-2011 11:05 AM

When I try that it looks like this:

http://img847.imageshack.us/img847/3277/88174404.jpg

Uploaded with ImageShack.us

here is the html;

<div>
<ul id="masthead">

<div class="floatleft"><a href="/home/"><img src="/storage/generic/YAY3 copy.jpg" width="230" height="39" class="mark "alt="PENROSE REALTY" /></a></div>

<div class="floatright">

<li><a href="/home/"><font size="1">Home</font></a></li>

<li><a href="/properties/"><font size="1">Rentals</font></a></li>

<li><a href="/mls/"><font size="1">MLS</font></a></li>

<li><a href="/areas/"><font size="1">Areas</font></a></li>

<li><a href="/boston/"><font size="1">Boston Blog</font></a></li>

<li><a href="/about/"><font size="1">About Us</font></a></li>

<li><a href="/contact/"><font size="1">Contact</font></a></li>

</div></ul></div>

**sweetshoes18** · 06-27-2011 11:08 AM

I'm so embarrassed that I cant get this to work...

I don't know how the hell I did it the first time...

**Major Payne** · 06-27-2011 12:09 PM

Maybe play around with this. You can put all the inline CSS back on your CSS file with whatever id/class you used there.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>

<meta name="created" content="Mon, 27 Jun 2011 16:51:47 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="PayneLess Designs">
<meta name="copyright" content="Jan 2004 to present.">
<meta name="robots" content="all">
<meta name="revisit-after" content="60 days">
<!--
<link rel="stylesheet" type="text/css" href="site_css/css_2010.css">
<link rel="copyright" href="copyright_pld.html">
<link rel="shortcut icon" href="imgs/favicon.ico">
-->



<!--[if IE]>
<link rel="stylesheet" type="text/css" href="site_css/css_2010_iestyle.css">
<script type="text/javascript" src="site_js/js_blink4IE.js"></script>
<![endif]-->
<base href="http://www.penroserealtyboston.com/">
<link id="primaryStylesheet" rel="stylesheet" type="text/css" href="/display/common.css?styleId=660715&amp;RK=1309189642537&amp;CE=24" />
</head>
<body>
<div style="width: 950px; height: 42px; margin: 0 auto;">

<div style="width: 230px; float: left;"><a href="/index.html"><img src="/storage/generic/YAY3 copy.jpg" width="230" height="39" class="mark "alt="PENROSE REALTY"></a></div>

<div style="width: 720px; float: right; font-size: 1em;">
<ul id="masthead">

<li><a href="/index.html">Home</a></li>

<li><a href="/properties.html">Rentals</a></li>

<li><a href="/mls.html">MLS</a></li>

<li><a href="/areas.html">Areas</a></li>

<li><a href="/boston.html">Boston Blog</a></li>

<li><a href="/about.html">About Us</a></li>

<li><a href="/contact.html">Contact</a></li>
</ul>
</div>

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

I had to add some things which you will not use for your own URL.

**sweetshoes18** · 06-27-2011 12:55 PM

Thank you major payne!

It looks good but its still getting cut off - the font is too big and wont change when a alter the font size in the code you provided. Plus the contact link is cut off

http://img847.imageshack.us/img847/11/323q.png

Uploaded with ImageShack.us

Any suggestions?

**sweetshoes18** · 06-27-2011 01:18 PM

Originally Posted by sweetshoes18

Thank you major payne!

It looks good but its still getting cut off - the font is too big and wont change when a alter the font size in the code you provided. Plus the contact link is cut off

http://img847.imageshack.us/img847/11/323q.png

Uploaded with ImageShack.us

Any suggestions?

Also - It seems that when I use your code, the font size has been over-riden some how... I don't know how this is...

**sweetshoes18** · 06-27-2011 01:56 PM

Never mind!

Thank you for all the help guys I REALLY appreciate it. Turns out, I added an extra menu button that wasn't there before which is why the margins seemed all screwed up. I couldn't remember changing the margins, so it dawned on me that I never had a home button! Haha, stupid mistake.

I do have one more question however,

When I change something in the CSS script, say - the hover over color for the menu, it only changes for ever other page.

For instance, it will do the hover over on the home page, but if I click rentals, the hover over is gone. If I click a different page, the hover over is back. Its the same if I change the font in the css for the menu. It will change on one page but not for the other.

Why is this?

**Major Payne** · 06-27-2011 02:02 PM

Originally Posted by sweetshoes18

Thank you major payne!

It looks good but its still getting cut off - the font is too big and wont change when a alter the font size in the code you provided. Plus the contact link is cut off

http://img847.imageshack.us/img847/11/323q.png

Uploaded with ImageShack.us

Any suggestions?

This is setting the font size which needs to be changed to suit and CSS put on your CSS file:

Code:

<div style="width: 720px; float: right; font-size: 1em;">
<ul id="masthead">

**Major Payne** · 06-27-2011 02:04 PM

Originally Posted by sweetshoes18

Never mind!

Thank you for all the help guys I REALLY appreciate it. Turns out, I added an extra menu button that wasn't there before which is why the margins seemed all screwed up. I couldn't remember changing the margins, so it dawned on me that I never had a home button! Haha, stupid mistake.

I do have one more question however,

When I change something in the CSS script, say - the hover over color for the menu, it only changes for ever other page.

For instance, it will do the hover over on the home page, but if I click rentals, the hover over is gone. If I click a different page, the hover over is back. Its the same if I change the font in the css for the menu. It will change on one page but not for the other.

Why is this?

Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

link - this is a link that has not been used, nor is a mouse pointer hovering over it
visited - this is a link that has been used before, but has no mouse on it
hover - this is a link currently has a mouse pointer hovering over it/on it
active - this is a link that is in the process of being clicked

**sweetshoes18** · 06-27-2011 02:31 PM

Interesting - The order I have seems correct though. Its the same thing for the text size. If I change it, it only applies to certain pages, not all of them

Code:

#masthead {
height: 40px;
width: 940px;
margin: 0px 0px 10px 0px;
padding-bottom: 10px; }

#masthead .mark {
margin: 3px 0px 0px 2px;
float: left; }

#masthead img {
width: 210px;}


#masthead ul { 
margin: 0px 0px 0px 0px;
padding: 0;
list-style-type: none;
float: right; }

#masthead li { 
display: block; 
height: 38px; 
width: 110px; 
background: #dddebd url(/storage/generic/rule_nav.gif) no-repeat left top;
font-family: georgia; serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px; 
line-height: 38px; 
color: #000; 
text-align: center; 
float: left; }

#masthead li a:link, li a:active, li a:visited  {
display: block;
background: #dddebd url("/storage/generic/rule_nav.gif") no-repeat left top;
color: #000; 
text-decoration: none; }

#masthead li a:hover  {
display: block;
background: #dddebd url("/storage/generic/rule_nav.gif") no-repeat left top;
color: #000; 
text-decoration: none; }

**sweetshoes18** · 06-27-2011 02:38 PM

Oh and while I have your attention Major Payne... you have been a huge help. Thank you very much.

So my slideshow on the main page isnt switching pictures the main page html is this:

Code:

<div id="slideshow">
<img src="/storage/slideshow/00001.jpg" class="active" />
<img src="/storage/slideshow/00002.jpg" />
<img src="/storage/slideshow/00003.jpg" />
<img src="/storage/slideshow/00004.jpg" />

</div>

and css for slide show is this

Code:

/*
-----------------------------------------------
SLIDESHOW
-----------------------------------------------
*/


#slideshow {
    position:relative;
    height:247px;
padding:0px;
margin-top: -10px;
margin-bottom:15px;
background-color: #dddebd;
border: none;}

#slideshow IMG {
    position:absolute;
    top:0px;
    left:0px;
    z-index:8;
border: none;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

.colLeft { width: 25px; margin-right: 30px; margin-left: 10px; float: left; }
.colCenter { width: 25px; margin-right: 30px; float: left; }
.colRight { width: 25px; margin-right: 0px; float: left; }

body {
height: 95%; }


.colHomeLeft { width: 390px; margin-right: 30px; float: left; }
.colHomeRight { width: 340px; margin-right: 0px; float: right; }

#postbannerbox { width: 940px; height: 35px; z-index:15; margin-bottom: 22px; background-color: #000; color: #999;}
#postbannerbox a { color: #999; font-weight: normal!important;}

.news-heading {
   padding:0px;
   margin-top: 5px;
   line-height: 35px;
   float:left;
}
.news-heading2 {
   padding:0px;
   line-height: 35px;
   float:left;
}
.ticker {line-height: 35px;}
.ticker span{display:none;}
.ticker .active_ticker{display:block;}

**Major Payne** · 06-29-2011 08:57 AM

Originally Posted by sweetshoes18

Interesting - The order I have seems correct though. Its the same thing for the text size. If I change it, it only applies to certain pages, not all of them

If the CSS is not affecting every page as you want, then either the pages that use the CSS file do not have the same id/class as the CSS file or the path to CSS file is incorrect. Also, you may not have a link to the CSS file at all on some pages. Not sure what exactly is causing the problem, but you may have to carefully check the HTML files that are not being styled against the actual CSS file. Most problems occur when the link path is incorrect in relation to the file needing the CSS and where the CSS file actually is.

**Major Payne** · 06-29-2011 09:04 AM

Originally Posted by sweetshoes18

Oh and while I have your attention Major Payne... you have been a huge help. Thank you very much.

This is a CSS 3 Slideshow that will work in browsers that support CSS 3:

Create A Slideshow With Pure CSS (Easily)

Not sure how yours is suppose to work, but most use a smooth JQuery slideshow script.

Thread: Hey guys, just need help aligning this

Thread Tools

Display

Hey guys, just need help aligning this

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions