I have a Hortizontal Menu at this URL - http://www.balibar.co/main.php
I'm happy with the look but I'm finding 2 things
it doesn't take up the entire space... there is a little white space at the end.
If I change the screen size (eg: hold Ctrl & use the Mouse Wheel to change the screen size) the last menu item 'search' drops to the next level.
How can i fix these 2 things.
Here is the HTML code:
<div id="containerNavigation">
<ul>
<li><a id="headerLoginLink">Home</a></li>
<li><a id="headerLanguageLink">Profile</a></li>
<li><a id="headerSearchLink">Mail</a></li>
<li><a id="headerSearchLink">Requests</a></li>
<li><a id="headerSearchLink">Matches</a></li>
<li><a id="headerSearchLink">Search</a></li>
</ul>
</div>
And here is the CSS
div#containerNavigation {
width: 700px;
height: 25px;
float: left;
}
div#containerNavigation ul {
list-style: none;
color: #FFF;
}
div#containerNavigation li {
background: white url(../images/online-dating-main/navigation5.png) repeat-x 0 0;
display: inline;
line-height: 25px;
font-size: 1.1em;
float: left;
}
div#containerNavigation li a {
cursor: pointer;
font-weight: normal;
float: left;
width: 116px;
text-decoration: none;
color: white;
border-right: 1px solid #FFF;
text-align: center;
}
div#containerNavigation li a:hover {
background-color: #849C00;
}
thankyou!
div#containerBody width should be 702px. It is less by 2px and is the reason it is falling down ( 116 * 6 + 6 = 702 ). 6 addition is for the border right 1px for each you passed. That should be same for containerNavigation too.
There are few things to change.
div#joinHeader li a {
cursor: pointer;
margin: 0 15px;
}
You have fixed width for the ul tag ( class=shadow ). Take out that margin 15 px for the li a tags. That should make them properly aligned fitting to the division. Also, joinCatchPhrase has extra width of 100px. Reduce it by the same.
Two little changes:
for the div#containerNavigation li a
width: 100%;
for the div#containerNavigation li
width: 116px;
Is there any reason to not use a table? That way you're guaranteed to never have the problem of an item going to the next line.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I'm trying to do something like file tree. The structure is like that:
<ul class="tree">
<li class="directory">
dir1
<ul>
<li class="file">file1</li>
<li class="file">file2</li>
</ul>
</li>
<li class="file">file3</li>
<li class="file">file4</li>
</ul>
I also used some CSS:
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
It gives me fine effect - I need tree more digged in with every inner directory, and <a> with width from given position to the end of line (tree area has specified width, but it can be scrolled if path or filename is longer then tree area's width). Well, it was ok until now.
But now I have to change it a little and put a "delete" option at the end of line. With it, <a> should end before "delete", so
display:block;
is probably no longer correct. I tried
display: inline-block;
but then, the <a> area ends with the end of file name - and I still need it until the "delete", which should be at the end of line.
The new structure should be like this:
<ul class="tree">
<li class="directory">
dir1Delete
<ul>
<li class="file">file1Delete</li>
<li class="file">file2Delete</li>
</ul>
</li>
<li class="file">file3Delete</li>
<li class="file">file4Delete</li>
</ul>
I don't know what styles or what else should I use to do it the way, I want to. So, could you help me, please?
I had to read your post multiple times to try to get what you were looking for. If I'm reading you correctly, what you want is the first <a> tag to act as a display:block so that when you hover over it the entire width is clickable, but you want the second <a> tag to float to the right on the same line.
I believe that this demo will accomplish what you wish. I changed the order of the anchor links to make it as easy as possible. Also added background colors so you could see what's going on.
<li class="file">DeleteLong Link Name
The CSS required would be:
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
background-color: gold; //so you can see what's happening
}
ul.tree .delete {
background-color: lightgreen; //so you can see what's happening
margin: 0 0 0 5px;
display: inline;
float: right;
}
ul.tree a:hover {
background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
If changing the order of the anchors is out of the question, I could muck around with some more elaborate CSS, but as the complexity of the CSS increases, so do your chances of it breaking in one browser or the other.
EDIT: Based on your reply, I've created some CSS to add an ellipsis (…) when the link text is too long. It requires setting a width on the main <ul>, but from your initial question it sounds like you're doing that anyway. You can see the updated JSFiddle here, and here's the updated CSS:
ul {
width: 333px;
}
ul ul {
width: inherit;
}
a {
overflow: hidden;
text-overflow: ellipsis;
}
ul.tree li {
list-style: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
ul.tree a {
color: #111;
text-decoration: none;
display: block;
padding: 0px 2px;
background-color: gold; //so you can see what's happening
}
ul.tree .delete {
background-color: lightgreen; //so you can see what's happening
margin: 0 0 0 5px;
display: inline;
float: right;
}
ul.tree a:hover {
background-color: lightblue; //so you can see what's happening
}
.tree li.directory {
background: url(/images/directory.png) left top no-repeat;
}
.tree li.file {
background: url(/images/file.png) left top no-repeat;
}
Original Fiddle | Fiddle with long links
Change the anchor tags to inline block and then float the second one to the right
ul.tree a {
display: inline-block;
}
ul.tree li a:last:child {
float: right;
}
JSfiddle Demo
Have you considered using jQuery Javascript ?
You could use the append() function to add the <a> tags specifically where you need them to appear.
http://www.w3schools.com/jquery/html_append.asp
Adding some float and overflow to css:
ul.tree li {
...
clear: both;
overflow: auto;
}
.delete {
float: right;
}
.tree li a:first-child {
float: left;
}
http://jsfiddle.net/9rxeu/
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.
I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows:
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
And here's a demo of what it actually looks like:
The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu's background, and makes it look really dodgy/crap/cheap/yuck!
Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I'm screwed either way. How can I make little imperfections like this look the same in all browsers?
Update:
HTML (The menu):
<ul class="menu">
<li class="currentPage" href="index.php"><a>Home</a></li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
The CSS:
.menu {
margin-top: 5px;
margin-right: 5px;
width: 345px;
float: right;
}
li {
font-size: 9pt;
color: whitesmoke;
padding-left: 6px;
padding-right: 8px;
display: inline;
list-style: none;
}
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
You might prevent problems by not changing the padding based on the hover. Furthermore you should hover on the a
Does this work as expected?
JSFiddle example
Your problems are probably due to your use of display: inline. Try setting explicit height on the ul. Doing this with your example worked for me:
ul {
border-bottom: 2px solid black;
height: 28px;
}
I added the border to be able to see where I was aligning to.
BTW, the proper solution is to not use li:hover, but a:hover, as has been stated.