Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Header/Drop Down Navigation problems CSS

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #161408
    hakraiem
    Participant

    ok so here goes..

    i wanted my header image to stay at the top of the page at all times so i put in this code..

    MOD EDIT: Code Dump removed

    #161415
    Paulie_D
    Moderator

    Please put that code into Codepen so we can tinker with it.

    #161418
    hakraiem
    Participant

    how do i add my header image to codepen so u could see what im talking about?

    #161423
    Paulie_D
    Moderator

    Put your image on the web (I use Photobucket) or use an placeholder image substitute from sites such as lorempixel.com or placehold.it.

    #161426
    hakraiem
    Participant

    what im looking to do is to get it to sit directly under the header image as well as for the text to all be either distributed evenly within the 1000px width or for it to all be centered and for both left and right ends to have equal padding without hindering the flush design of the sub categories to their “parent” category.

    http://cdpn.io/tHDAj

    #161428
    Paulie_D
    Moderator

    Looks fine to me.

    To test, try making the .contentbox div very tall (say 2000px) and the image will stay where it is when you scroll.

    If you want the nav to stay at the top of the page with the image, put it in inside the header and adjust accordingly.

    Frankly, without seeing the actual image, I suspect that it should probably be a background image and not in the HTML at all.

    #161429
    hakraiem
    Participant

    looks can be deceiving, i just put in the placeholder and youll see what i mean. also take a look at the far left of it, you see how the home button is flush against the side, and the far right, the contact button has space between itself and its side (hover over it).

    #161430
    Paulie_D
    Moderator

    OK…now we are into menu list item spacing…is that the actual issue and NOT the position of the image?

    Frankly, it would be much more helpful if we could see the actual proposed image and see how/if it’s actually related to the menu ‘issue’

    #161431
    hakraiem
    Participant

    they were both the issue. i put the nav into the header and i still have spacing between the two. i want them to be flush with each other. and the menu button spacing is still an issue.

    #161434
    hakraiem
    Participant

    any luck?

    #161435
    Paulie_D
    Moderator

    How’s this: http://codepen.io/anon/pen/tpoeF

    Remove the width from the nav>ul and the ‘table’ automatically becomes 100% wide and spaces out the ‘cells’.

    Note that I have had to add some specificity to the nav > ul and moved some properties to a more generic nav ul.

    As I mentioned before, if I knew how the header image looked and interacted with the menu (if indeed they do), I could help further.

    #161436
    hakraiem
    Participant

    they dont interact at all, its just an esthetic preference. with your edit (which i am very grateful you are helping me with), it puts my navigation menu on top of the header image as opposed to directly under it..
    does the link i provided you with show you the image placeholder i put into the code? its the same dimensions and all just without the picture.

    #161440
    Paulie_D
    Moderator

    I think so…I’ve updated my codepen to use a proper lorempixel image:http://codepen.io/anon/pen/tpoeF

    #161442
    hakraiem
    Participant

    nope…wasnt a solution…
    when i view it on the browser it shows me completely differently than on codepen..its weird..

    #161452
    Paulie_D
    Moderator

    Unless you have a live link (not Codepen) it’s going to hard to help further.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.