www.webdeveloper.com
Results 1 to 6 of 6

Thread: Unable to position a nav bar and images by side

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Unable to position a nav bar and images by side

    I am trying to position a nav bar to the left of an image.

    The image is in the right place but I can't position the nav bar correctly. If I use;
    position: absolute;
    top: 0px,
    left: 120 px

    the nav bar appears to the left but just above the foot of the image border. You can see this on this link

    The css code that I am using is;
    Code:
    #menu {
           float: left;
           margin-left: 20px; 
           margin-top: 0px;
           display: block;
           width: 100px;
           padding-right: 180px;
           
          }
    #menu ul {
        padding: 4px;
        font-family: Arial,Verdana;
        font-size: 1.00em;
        list-style: list;
        background: #fffff0;
        
    }
    #menu ul li {
        display: block;
        float: left;
        position: relative;
    }
    #menu li ul {
        display: block;
        border-color: #D5D6FF;
        border-style: outset;
        z-index: 210;
    }
    #menu ul li a {
        display: block;
        margin-left: 5px;
        padding: 5px 10px 5px 10px;
        border-top: 1px solid #fff;
        text-decoration: none;
        white-space: nowrap;
        color: #1107C7;
        background: #fffff0;
        }
    #menu ul li a:hover {
        background: #fffff0;
    }
    #menu li:hover ul {
        display: block;
        position: absolute;
    }
    #menu li:hover li {
        z-index: 200;
        float: none;
        font-size: 0.50em;
    }
    #menu li:hover a {
        background: #ff7f50;
    }
    
    #menu li:hover li a:hover {
        background: #fffff0;
    }
    How can I position the nav bar and image side by side?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    The easiest solution is to enclose both #slideshow and #menu in a <div> set to:
    Code:
    position:relative; top:0; left:0; height:250px;
    to give them both the same vertical boundary within a box that will reserve sufficient vertical area on the page for both of them. Then set both #slideshow and #menu to margin:0; and adjust their 'top' and 'left' positions as needed.

    In the future, you'll save yourself a lot of time and effort if you'd just learn how absolute positioning really works. There are tons of tutorials out there to choose from.

    And learn how to use tools like the F12 Developer tools built into Internet Explorer or the Web Developer extension for Firefox and Chrome. They'll show you the bounding boxes of the various elements so you can see how the browser is interpreting your code and give you visible clues to solving problems like this in no time. Trial-and-error just takes too long, and unless you understand the basics you're apt to create lots of maintenance problems that won't be apparent until you try to change the page.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thanks for your reply.
    I do have a website design book, which unfortunately the section on aligning images etc in it doesn't seem to work.
    Your advice doesn't either. This may be because of a problem that occurs when I put the </div> for boxd after the menu div. I'll try to expain;

    I think that the issue is with the slider. I've pasted the html below;
    <div id="boxd">
    <div id="slideshow">
    <div>
    <img src="http://what-do-christians-believe.co.uk/test/bible_spk_small.png">
    </div>
    <div>
    <img src="http://what-do-christians-believe.co.uk/test/candles.png">
    </div>
    </div>
    The second </div> is the closing div for the <boxd>. The result is this

    However, if I move the div to the foot of the menu div the nav bar appears below the slider and it fades in and out with the slider sequence. this is the url

    It seems that I need to stop the slider from fading before I can do anything else. I don't know how to do that. Do you have any ideas that I could try?

  4. #4
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I have managed to sort some of this issue out. For some reason the menu is being read from an @media div for mobiles.
    It's the only one that is being read from their though.

    The issue is that the menu is very basic (also shows sub menus). I'll work on this.

  5. #5
    Join Date
    Mar 2011
    Posts
    1,137
    Looking at: http://www.what-do-christians-believ...t/slide_2.html

    1) You have two DIVs with an ID attribute set to 'menu' and 'slideshow', apparently some stray copy/paste remnant. But ID attributes must be unique or your browser won't know which element to apply your CSS settings to and the result will be unpredictable.
    2) You didn't set the CSS for the <div id="container"> to position:relative as I suggested. The <div> in your HTML alone is insufficient to contain the inner <div>s when they're set to position:absolute.
    3) Your problem isn't aligning images. You need to control the position of the <div>s that contain the <img>s in relation to each other, which is entirely different. Go find a tutorial on 'CSS positioning' as I suggested.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thank you for your reply.

    I have sorted the issue. I did do as you first suggested but it didn't work, probably because of the cut and paste error that you noticed.

    With regards for tutorials. I did search the internet for one but there seems to be many ways to "skin a cat" which makes matters more confusing.

    I also live in Finland and am learning the language. For some reason I can only get google.fi and priority is given to Finnish language. I do intend to buy a book when I go home to the UK in the summer. That way I can get to see if the content is relevant for what I want/need.

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