Hey guys, just need help aligning this

@sweetshoes18Jun 26.2011

here is the code:

<li><a href=”/properties/”><font size=”1″>Rentals</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 – ~~[url]~~www.penroserealtyboston.com[/url]

how do i get it on the same line?

to post a comment

CSS

13 Comments(s) _↴

@Major_PayneJun 27.2011 — #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;

@sweetshoes18authorJun 27.2011 — #When I try that it looks like this:

[URL=http://imageshack.us/photo/my-images/847/88174404.jpg/]

[IMG]http://img847.imageshack.us/img847/3277/88174404.jpg[/IMG][/URL]

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

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>

@sweetshoes18authorJun 27.2011 — #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_PayneJun 27.2011 — #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>[/CODE]

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

@sweetshoes18authorJun 27.2011 — #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

[URL=http://imageshack.us/photo/my-images/847/323q.png/]

[IMG]http://img847.imageshack.us/img847/11/323q.png[/IMG][/URL]

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

Any suggestions?

[IMG]http://img847.imageshack.us/img847/11/323q.png[/IMG][/URL]

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

Any suggestions?[/QUOTE]

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...

@sweetshoes18authorJun 27.2011 — #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_PayneJun 27.2011 — #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

[URL=http://imageshack.us/photo/my-images/847/323q.png/]

[IMG]http://img847.imageshack.us/img847/11/323q.png[/IMG][/URL]

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

Any suggestions?[/QUOTE]

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">
 [/CODE]

@Major_PayneJun 27.2011 — #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?[/QUOTE]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

@sweetshoes18authorJun 27.2011 — #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; }[/CODE]

@sweetshoes18authorJun 27.2011 — #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>[/CODE]

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;}[/CODE]

@Major_PayneJun 29.2011 — #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[/QUOTE]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_PayneJun 29.2011 — #Oh and while I have your attention Major Payne... you have been a huge help. Thank you very much. [/QUOTE]

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.

Also in #CSS _↴

Dynamic font size Multiple image border styles CSS Tables: Content Alignment

Success!

Help @sweetshoes18 spread the word by sharing this article on Twitter...

Tweet This

Hey guys, just need help aligning this

13 Comments(s) _↴

[CODE]/*
-----------------------------------------------

SLIDESHOW
-----------------------------------------------

Also in #CSS _↴

Success!

Social

Version

Hey guys, just need help aligning this

13 Comments(s) ↴

[CODE]/* -----------------------------------------------

SLIDESHOW -----------------------------------------------

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

[CODE]/*
-----------------------------------------------

SLIDESHOW
-----------------------------------------------

Also in #CSS _↴