Forums

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

Home Forums CSS How to add some space between LI ?

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #46395
    knowledgenotebook
    Participant

    Please take a look at the following page,
    http://www.knowledgenotebook.com/index4.html

    I’m now having trouble with adding extra space between the header image and menu items. The header image is defined by the last attribute of the following code,
    #header{ min-height:150px; border-radius: 25px 25px 0 0 ; background-color:linear-gradient(#BCD3FF, #EEF8FA);background: url(‘../images/header.logo.png’) no-repeat;} (see the CSS file link below).

    And the CSS elements header and for UL and LI etc. can be found from the following URL,
    http://www.knowledgenotebook.com/css/main_new2.css

    Many thanks.

    #142852
    jurotek
    Participant

    Increase left margin on your #header ul

    #142853
    srikarg
    Participant

    I’m not sure if there’s a better/more efficient solution out there (maybe someone else will comment it here), but here’s how I fixed it. I simply added more `margin-left` to the `ul`. I changed it from

    #header ul {
    margin: 2px 0 0 90px;
    padding: 0;
    height: 40px;
    }

    to

    #header ul {
    margin: 2px 0 0 144px;
    padding: 0;
    height: 40px;
    }


    @jurotek
    beat me by a minute! :P

    #142855
    jurotek
    Participant

    :) Unintended tho, I guess I had lot less to write

    #142856
    srikarg
    Participant

    @jurotek No worries. :)

    #142858
    jurotek
    Participant

    There’s more ways then one to remedy this problem besides increasing left margin. Here’s one of top of my head

    .nav { text-align: center; }
    .nav ul, .nav li, .nav a { display: inline-block; *display: inline; zoom: 1; }

    #142862
    jurotek
    Participant

    Without looking at the code, looks like you could give width to social media wraper just enough to contain it. Add position relative to header and place social media wraper absolutely in header and give it left and top dims. to clear logo.

    #142867
    jurotek
    Participant

    I would do it with position absolute rigth:Xpx; top:Xpx; Just make sure your header is positioned relative

    #142870
    jurotek
    Participant

    :) Add position absolute rigth:Xpx; top:Xpx; to your class AddThis and add position relative to header like

    #header{
    position:relative;
    min-height:150px;
    border-radius: 25px 25px 0 0 ;
    background-color:linear-gradient(#BCD3FF, #EEF8FA);background: url(‘../images/header.logo.png’) no-repeat;
    }

    Then place div class AddThis inside your header

    #142874
    jurotek
    Participant

    I don’t see wrapper2 in you html, it’s actually #wrapper which holds social media buttons

    #142879
    jurotek
    Participant

    Nope. This is what you got currently in there






    #142884
    jurotek
    Participant

    Ok, I emptied cache and now I see it. Let me look and I get back to you

    #142886
    jurotek
    Participant

    Oh man what did you do? The social buttons are gone. Plus you made copy of css file and link to it also. So now you got links to 2 css files which conflict with each other. Which css file out of those 2 is suppose to be current?

    #142887
    jurotek
    Participant

    I tell you what. Why don’t you put the relevant html and css on Codepen and we take it from there. I am going to bed right now anyways so maybe someone steps in.

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