Forums

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

Home › Forums › CSS › Alittle Navigation Help

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 28, 2011 at 5:54 am #33685
    CreativeFly
    Member

    have a bit of an issue with a navigation I’m trying to build. the end result should look like this End Result.But of course its not coming out the way i need it when coding. below is the html code for the menu

    and below is the css that i have so far.

    #menuItems .menuNumber{
    
border-right:2px solid red;
    
margin-right:2px;
    
font-size:43px;
    
height:72px;
    
overflow:hidden;
    
}
    

    
#menuItems li {
    
display: block-inline;
    
list-style-type: none;
    
padding-right:0px;
    
float:left;
    
text-align:left;
    
}
    

    
.meta{
    
font-weight:normal;
    
font-family: Verdana, Arial, Helvetica, sans-serif;
    
font-size:10px;
    
color:#054a90 !important;
    
line-height:0px;
    
text-transform: uppercase;
    
text-shadow:none;
    
text-align:right;
    
}

    I’m not sure what i need to do to have the meta that goes under each menu title to line up below it and to the right of the red border that shows in this screenshot.

    Any help would be greatly appreciated.

    July 28, 2011 at 6:36 am #84115
    Paulie_D
    Member

    Perhaps not the ideal solution but I made the anchor tags block elements too and then it was just a matter of relative positioning.

    See jsFiddle

    July 28, 2011 at 7:53 am #84123
    CreativeFly
    Member

    Paulie_D

    Thanks for the quick response, i’ll look over the code,but from glancing at it it looks like that’s exactly what i need. I’ll let you know if i have any other questions

    July 28, 2011 at 3:06 pm #84162
    CreativeFly
    Member

    Paulie_D

    The css that you mentioned did the job, but just running into another issue of mysterious padding under the menu items. as you can see in this screenshotthere is padding that is being added, i have went through everything and im not sure what could be causing that padding. Below is the entire html for that section

    and this is the entire css for that section

    #header{
    
overflow:hidden;
    
height:146px;
    
margin-bottom:15px;
    
}
    

    
#header #socialIcons{
    
float:right;
    
}
    

    
#logo{
    
margin-top:11px;
    
border-right:1px red solid;
    
}
    

    
#mainMenu{
    
margin-left:-22px;
    
border-bottom:5px solid red;
    
padding:0;
    
}
    

    
#menuItems .menuNumber{
    
border-right:5px solid #5b6165;
    
margin-right:2px;
    
font-size:43px;
    
font-weight:bold;
    
font-family:arial;
    
}
    

    
#menuItems li {
    
display: block-inline;
    
list-style-type: none;
    
padding-right:10px;
    
float:left;
    
text-align:left;
    
}
    

    
#menuItems li a {
    
display: block-inline;
    
text-decoration: none;
    
height:25px;
    
position: relative;
    
top:-10px;
    
font-size:25px;
    
font-weight: bold;
    
position: relative;
    
top: -15px;
    
color:#5b6165;
    

    
}
    

    

    
#menuItems li a:hover {
    
display: block-inline;
    
text-decoration: none;
    
height:25px;
    
position: relative;
    
top:-10px;
    
font-size:25px;
    
font-weight: bold;
    
position: relative;
    
top: -15px;
    
color:#cbcdce;
    
}
    

    
.meta {
    
font-weight:normal;
    
font-family: Verdana, Arial, Helvetica, sans-serif;
    
font-size:9px;
    
color:#ffffff !important;
    
text-transform: uppercase;
    
text-shadow:none;
    
text-align:right;
    
padding-left:55px;
    
position: relative;
    
top: -30px;
    
}

    Do you have any suggestions as to what would be causing that mysterious padding? any help would be great.
    Thanks

    July 28, 2011 at 6:35 pm #84177
    CreativeFly
    Member

    Paulie

    yes im using the 960 grid with 24 columns. this is a screenshot of the full header.

    and this is a screenshot of the header in the psd. as you can see the view shopping cart should be at the very end and above that the social icons should be.

    again i really appreciate the help.

    July 29, 2011 at 2:15 am #84204
    CreativeFly
    Member

    Paulie

    Thanks so much for the suggestion i will def look at getting it broken down into 3 different divs. really been helpful.

    July 30, 2011 at 3:15 am #84257
    CreativeFly
    Member

    Paulie

    So that still didn’t get rid of the mysterious space below the menu. here is the screenshot and below is the html and css. i’ve looked through the reset file and can’t find anything that would be causing it either. I even took all the spans out of the menu thinking maybe that was causing it and nothing.

    html

    css

    body{
    
background:#FFFFFF url(img/scBKG.jpg) repeat-x;
    
}
    

    
#wrapper{
    
padding:0;
    
margin:0 auto;
    
}
    

    
#header{
    
overflow:hidden;
    
height:146px;
    
margin-bottom:15px;
    
}
    

    

    
#logo{
    
margin-top:11px;
    
}
    

    
#menu_social_bag{
    
border-bottom:5px solid #5b6165;
    
overflow:hidden;
    
}
    

    
#mainMenu{
    
margin-top:55px;
    
}
    

    
#menuItems .menuNumber{
    
border-right:5px solid #5b6165;
    
margin-right:2px;
    
font-size:43px;
    
font-weight:bold;
    
font-family:arial;
    
}
    

    
#menuItems li {
    
display:block-inline;
    
list-style-type:none;
    
padding-right:5px;
    
float:left;
    
}
    

    
#menuItems li a {
    
display:block-inline;
    
text-decoration: none;
    
height:25px;
    
position:relative;
    
top:-10px;
    
font-size:25px;
    
font-weight: bold;
    
position: relative;
    
top: -15px;
    
color:#5b6165;
    

    
}
    

    

    
#menuItems li a:hover {
    
text-decoration: none;
    
color:#cbcdce;
    
}
    

    
.meta {
    
font-weight:normal;
    
font-family: Verdana, Arial, Helvetica, sans-serif;
    
font-size:9px;
    
color:#ffffff !important;
    
text-transform: uppercase;
    
text-shadow:none;
    
text-align:right;
    
padding-left:55px;
    
position: relative;
    
top: -30px;
    
}
    

    
#bag_social{
    
overflow:hidden;
    
}
    

    
#bag_social #social{
    
float:right;
    
}
    

    
#bag_social #social img{
    
margin-right:5px;
    
}
    

    
#bag_social #bag{
    
margin-top:35px;
    
padding-left:5px;
    
border-left:1px solid #5b6165;
    
float:left;
    
}
    

    
#bag_social #bag img{
    
margin-right:5px;
    
}

    Any ideas? or anybody else have any ideas of what may be causing it… this thing has me stopped in my tracks. GRRRRRRRRRRRRRR

    Mike

    July 30, 2011 at 3:38 am #84258
    chrisburton
    Participant

    Can you paste this to http://jsbin.com ? Please include full image paths in your css and html!

    July 30, 2011 at 6:57 am #84263
    CreativeFly
    Member

    Paulie & christopher

    I’ve uploaded the images to my test server, i tried to paste into jsbin,but didn’t know how to add the css. so i had to use jsfiddle, JsFiddle link

    FYI, this is going to be converted to a wordpress theme if you think that may change things.

    July 30, 2011 at 11:04 am #84272
    wolfcry911
    Participant

    Apparently I’m the only one on the planet to abhor jsFiddle. If you have a test server, why wouldn’t you just supply a link? With web developer tools one could find the problem in seconds (instead of the constant ‘fiddling’ with Fiddle).

    I took some time with it anyway and the reason the list items are so tall is because moving an element with relative positioning, as you have with the text and .meta, retains its original position in the layout.

    I would do something along these lines (I’d give the actual css if not dealing with jsFid): Float the numbers left, remove all relative positioning (in the menu), set meta to have a line-height of 9px and padding:0 (remove the left padding). You may need to give the li a fixed width. Oh and there’s no such display value as block-inline, its inline-block which is being over-ridden by the float anyway…

    August 2, 2011 at 1:04 am #84339
    CreativeFly
    Member

    wolfcry911

    sorry that jsfiddle is not liked by people, didn’t know it was that much of a pain.But i did get my issue fixed in another forum. have a great day.

    August 2, 2011 at 7:02 am #84346
    wolfcry911
    Participant

    You misunderstood me – everyone seems to love jsFiddle, except me.

    Its bad etiquette to post your problem in multiple forums at the same time for exactly the reason here – I completely wasted the time I spent trying to help you :(

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