www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] My banner won't work

  1. #1
    Join Date
    Jun 2012
    Posts
    6

    resolved [RESOLVED] My banner won't work

    I am new to web development so I don't even know how to search for this. My apologies if this has been discussed previously.

    I am trying to make a banner (I call it a header in my code) but it is broken.

    CSS:

    #header
    {
    border:7px solid #0318e1;
    margin:10px;
    }

    #logo
    {
    float:left;
    width:30%
    margin-left:0;
    margin-right:0;
    }

    #sociallinks
    {
    float:left;
    width:30%
    margin-left:0;
    margin-right:0;
    text-align:center;
    }

    #headerlinks
    {
    float:left;
    width:30%
    margin-left:0;
    margin-right:0;
    text-align:right;
    }


    HTML:

    <div id="header">
    <div id="logo">
    <a href="http://www.as-ishomes.com"><img src="images/weblogoname.png" alt='"As-Is" Home Buying'/></a>
    </div>
    <div id="sociallinks">
    <h1>Place Holder</h1>
    </div>
    <div id="headerlinks">
    <a href="mailto:info@as-ishomes.com"><h4>Email: info@As-IsHomes.com</h4></a>

    <h1>Call: 619-303-3691</h1>

    <h3><a href="/index.html">Home</a>&nbsp&nbsp|&nbsp&nbsp
    <a href="/aboutus.html">About Us</a>&nbsp&nbsp|&nbsp&nbsp
    <a href="/faq.html">FAQ</a>&nbsp&nbsp|&nbsp&nbsp
    <a href="/contact.html">Contact Us</a></h3>
    </div>
    </div>

    The divs displayed somewhat properly (the widths were not what I want) when I had mistakenly used 'links' rather than 'headerlinks' in the HTML. When I fixed that, all of the divs were displayed outside of the border (the widths are still not what I want). It displays the same way in Firefox and Safari.

    How do I fix this?

    Also, I would like to be able to horizontally and vertically center the 'sociallinks' in a way that will display properly if the user resizes the browser. How do I accomplish this?

  2. #2
    Join Date
    Mar 2012
    Posts
    48
    please provide us a link to your page

    thank you

  3. #3
    Join Date
    Jun 2012
    Posts
    6
    Quote Originally Posted by chryaner View Post
    please provide us a link to your page

    thank you
    It is not hosted yet, but here is a link to my flickr photostream with screenshots of the two conditions: http://www.flickr.com/photos/2429308...oto_7402782788

    Note: I realized that I had some errors in my code and fixed them (including not putting a semi-colon after my width declarations, but the main problem still exists.

  4. #4
    Join Date
    Jun 2012
    Posts
    6
    Well, I fixed it, but I don't understand why it worked. I made the following change:
    Code:
    #header
    {
    border:7px solid #0318e1;
    margin:10px;
    }
    
    /*Became:*/
    #header
    {
    border:7px solid #0318e1;
    margin:10px;
    height:170px;
    }
    170 pixels is the height of my logo. Why would the links break the header without me specifying that it is 170 pixels high? Shouldn't it be the height of the tallest element contained within it?

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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