www.webdeveloper.com
Results 1 to 14 of 14

Thread: Hey guys, just need help aligning this

  1. #1
    Join Date
    Apr 2011
    Posts
    25

    Hey guys, just need help aligning this

    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?

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    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;

  3. #3
    Join Date
    Apr 2011
    Posts
    25
    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>

  4. #4
    Join Date
    Apr 2011
    Posts
    25
    I'm so embarrassed that I cant get this to work...

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

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    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.

  6. #6
    Join Date
    Apr 2011
    Posts
    25
    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?

  7. #7
    Join Date
    Apr 2011
    Posts
    25
    Quote Originally Posted by sweetshoes18 View Post
    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...

  8. #8
    Join Date
    Apr 2011
    Posts
    25
    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?

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Quote Originally Posted by sweetshoes18 View Post
    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">

  10. #10
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Quote Originally Posted by sweetshoes18 View Post
    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

  11. #11
    Join Date
    Apr 2011
    Posts
    25
    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; }

  12. #12
    Join Date
    Apr 2011
    Posts
    25
    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;}

  13. #13
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Quote Originally Posted by sweetshoes18 View Post
    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.

  14. #14
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Quote Originally Posted by sweetshoes18 View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles