- This topic is empty.
-
AuthorPosts
-
July 14, 2013 at 9:26 pm #46395knowledgenotebookParticipant
Please take a look at the following page,
http://www.knowledgenotebook.com/index4.htmlI’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.cssMany thanks.
July 14, 2013 at 9:33 pm #142852jurotekParticipantIncrease left margin on your #header ul
July 14, 2013 at 9:34 pm #142853srikargParticipantI’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! :PJuly 14, 2013 at 9:41 pm #142855jurotekParticipant:) Unintended tho, I guess I had lot less to write
July 14, 2013 at 9:44 pm #142856July 14, 2013 at 9:46 pm #142858jurotekParticipantThere’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; }July 14, 2013 at 9:56 pm #142862jurotekParticipantWithout 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.
July 14, 2013 at 10:10 pm #142867jurotekParticipantI would do it with position absolute rigth:Xpx; top:Xpx; Just make sure your header is positioned relative
July 14, 2013 at 10:24 pm #142870jurotekParticipant:) 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
July 14, 2013 at 10:44 pm #142874jurotekParticipantI don’t see wrapper2 in you html, it’s actually #wrapper which holds social media buttons
July 14, 2013 at 10:53 pm #142879jurotekParticipantNope. This is what you got currently in there
July 14, 2013 at 11:13 pm #142884jurotekParticipantOk, I emptied cache and now I see it. Let me look and I get back to you
July 14, 2013 at 11:37 pm #142886jurotekParticipantOh 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?
July 14, 2013 at 11:42 pm #142887jurotekParticipantI 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.
AuthorPostsViewing 14 posts - 1 through 14 (of 14 total)- The forum ‘CSS’ is closed to new topics and replies.