I'm creating a website using my own design, and I had a complication recently. It's about the way the menu style is positioned. I find this problem hard to explain, so firstly, I'll show the images.
It should look like:
http://i.imgur.com/XINIlXC.jpg
It looks like:
http://i.imgur.com/RKrFZVz.jpg
As you can see, It's a simple horizontal menu with seperators between menu items, but the tricky part is the corner. In the image where everything works perfectly, I use a messy code, that's not compatable with lists, which I will need for drop-down menus later.
So, this is the messy code:
<div class="menu" id="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>
</div>
The span.ms is just the menu seperator. As for all the other parts, I'm gonna show a css code.
#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it's position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;
}
And this is the code that's fixed up, but for some reason, the image is not working:
<div class="menu" id="menu-item">
<div class="menu-item">
<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>
<ul id="nav">
<li> Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>
And the extra css lines for ul and li:
#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}
That's pretty much it, and I don't really get it why the tag ruins it all, yet I need it to do it. Does anyone have any subjections, how to fix it, or could show me the way? I'd be really thankful.
Cheers :)
If you give elements float, they will not have width if you place a non-float element nexto it. Remove all the floats and switch to display: inline-block or give everything float
Related
I'm working on a fancy menu of some sort, but cant seem to get my head around a problem currently facing. Here's a image to illustrate the problem:
The whole thing is built using a nav tag that has a ul with li children.
Basically the right box thingy has to always stay on the top row, right edge, and when the windows is shrunken or smaller, this position/behavior has to maintain, and the other regular menu items should collapse on the second row.
The 2 boxes have to maintain a order: the one on the left is the first li element, and the one on the right is the last li element
Here's what I've tried so far:
-position absolute wont cut it, because it will indeed stay on the right, but it may or may not overlay the other elements(current situation);
-floating it, will probably collapse with the other elements on the next row
-adding a padding right to the nav or ul tag, will work, however, the other menu items will always have a right margin that wont allow them to ever fall under the right boxy thing;
Heres a js fiddle to the problem(shrink the results window): menu issue
I'm open to any ideas, even changing the whole markup if that's the solution, or some fancy js if its working. Thank you!
The markup used:
<nav class="secondary-navigation main-section">
<ul class="align-left secondary-navigation-list">
<li class="menu-item-block">
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li class="menu-item-block menu-last-item-block">
</li>
</ul>
The css used:
a{
text-decoration: none;
color: #656565;
padding: 10px;
font-size: 1.4em;
line-height: 50px;
}
.menu-item-block{
width: 50px;
height: 50px;
background: #656565;
}
.menu-last-item-block{
position: absolute;
top: 0;
right: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
}
nav.secondary-navigation{
position: relative;
display: inline-block;
width: 100%;
}
nav.secondary-navigation:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: #656565;
}
ul.secondary-navigation-list:after,
ul.secondary-navigation-list:before{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #656565;
}
ul.secondary-navigation-list:before{
left: 0;
}
ul.secondary-navigation-list:after{
right: 0;
}
You can do it by a little manipulation on the html and css:
change the order of the li so that the 2 special ones are on top
<ul class="align-left secondary-navigation-list">
<li class="menu-item-block">
</li>
<li class="menu-item-block menu-last-item-block">
</li>
<li>
Menu Item
</li>....
Change the css rule for secondary-navigation-list
.menu-last-item-block{
float:right;
}
see fiddle: http://jsfiddle.net/CLtCL/12/
Image Sprites, by themselves, are not evil; however, trying to get these to work in an unordered list is difficult. Going a step further and trying to get this unordered list to display horizontally (working example >> HERE <<) is certainly an enigma.
Here is my jsFiddle Project: jsFiddle: hNJmD
It seems like every time I get something working, I make the smallest edit to customize it for my app and it breaks.
Does it matter what order items in a CSS file are declared?
Does a <ul> tag have to be defined before a <li> tag?
Does height: need to be specified before width:? (I generally try to list things alphabetically so I don't accidentally have duplicates)
Here is the image I am using as my Sprite:
My Goal:
Center the menu horizontally the page
Have the full image display (all 50 px)
Disable the a.hover effect for the active item (Link 1)
The CSS is:
#nav {
text-shadow: 4px 4px 8px #696969;
white-space:nowrap;
vertical-align: middle;
}
#nav ul {
list-style-type:none; /* removes the bullet from the list */
}
#nav li {
display: inline-block;
text-align: center;
height: 50px;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
color:Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color:Black;
}
#nav span {
top: 15px;
padding-left: 5px;
}
The HTML used in the jsFiddle is repeated here as well:
<body>
<div>
<ul id="nav">
<li>
<a class="active" href="#">
<span>Link 1</span>
</a>
</li>
<li>
<a href="#">
<span>Link 2</span>
</a>
</li>
<li>
<a href="#">
<span>Link 3</span>
</a>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="text-align:center;">
<p>REFERENCE: Sprite (Width: 192, Height: 150):</p>
<img src="http://i.imgur.com/Sp7jc.gif">
</div>
</body>
Can somebody show me how to get this crazy thing to work?
If you want it to look like this: jsFiddle example, then this is what I did:
Combined your #nav and #nav ul rules since they refer to the same thing.
To that rule I added margin:0 auto; and width:600px; which centers the items
Then on #nav a I added display: block; and height:50px; which allows the links to take up the proper amount of height.
Finally I added a rule, #nav .active:hover that only affects the active element so it doesn't appear to change.
And to answer one of your questions about whether the order of CSS rules matters, the answer is yes and no. With respect to width and height in a rule, the order is irrelevant, but the order the rules appear in can matter, as does the specificity of the rule.
A site I'm creating is showing the front page exactly as its supposed to do in both Chrome and Safari, but when I test in Firefox the menu isn't showed correctly.
- All browsers are the latest versions and on a mac.
Here's a screenshot comparing Firefox and Safari, respectively!
And here's the css-code I use for the menu, pardon the mess.
nav {
width: 650px;
height: 220px;
margin: 10px auto;
}
nav ul {
list-style: none;
margin: 0 auto;
display: block;
}
nav ul li {
margin: 10px;
display: inline-block;
height: 100px;
line-height: 200px;
}
I've tried with different methods, but this messes up the menu in the working browsers.
Here's the HTML code for the nav-bar, as per request:
<nav>
<ul>
<li><h2>Cykler</h2></li>
<li><h2>Service</h2></li>
<li><img src="images/logo.png" name="logo" alt="Søgaard Cykler" width="220" height="200"></li>
<li><h2>Info</h2></li>
<li><h2>Kontakt</h2></li>
</ul>
</nav>
And here is a link to the functioning code on jsfiddle: http://jsfiddle.net/DaCqS/
It's best to avoid line-height for positioning elements. Margins are much more effective. Get rid of the line-height and try using a
margin-top:100px;
on either the nav or the ul.
EDIT: Now that I see your HTML... Since the big center logo is stylistically different from the four buttons, you should keep their CSS selectors separate. None of your current CSS is able to differentiate between these four buttons and the big center logo. A quick and easy way to fix this is to add this style:
nav ui li h2 {margin-top:100px;}
Ok so I've floated the the <li> and used the margin-top:100px for the h2.
try this and let me know if that fixes it http://jsfiddle.net/hfxKW/
Does this work for you? http://jsfiddle.net/WWkWw/
.top-menu{
background-image:url('foo/logo.png');
height:22px;
}
.left{
float:left;
}
.right{
float:right;
}
.top-menu li{
margin:60px 10px 10px 10px;
height:100px;
}
HTML:
<nav>
<ul class="top-menu">
<li class="left"><h2>Cykler</h2></li>
<li class="left"><h2>Service</h2></li>
<li class="right"><h2>Info</h2></li>
<li class="left"><h2>Kontakt</h2></li>
</ul>
</nav>
I have a simple drop down menu.
When i add other elements under the menu (like text for exemple) they are still visible even if the drop down menu is oppened. The drop down menu is somehow merged with the content under it, resulting in ugly superimposed content.
Here is my css :
ul#menu, ul#menu ul{
margin: 0px;
padding: 0px;
}
ul#menu li{
width: 160px;
margin: 4px 0px 0px 4px;
padding: 5px;
list-style: none;
position: relative;
float: left;
background: #eef;
border: #bbf solid 1px;
}
ul#menu li ul li{
width: auto;
margin: 4px 0px 0px 0px;
float:none;
display: none;
background: #ddf;
border: #bbf solid 1px;
}
ul#menu li:hover ul li{
display: block;
}
ul#menu li:hover{
background: #ddf;
}
ul#menu li ul li:hover{
background: #ccf;
}
ul#menu li img{
margin-right: 10px;
}
Here is my html :
<ul id="menu">
<li>
<span><img src="images/logos/file_small.png">Bilan</span>
<ul>
<li id="creer"><img src="images/logos/add_small.png">Créer</li>
<li id="consulter"><img src="images/logos/other_small.png">Consulter / Modifier</li>
</ul>
</li>
<li>
<span><img src="images/logos/chartbar_small.png">Extract</span>
<ul>
<li><img src="images/logos/pdf_small.png">Pdf</li>
<li><img src="images/logos/xls_small.png">Excel</li>
</ul>
</li>
<li>
<span><img src="images/logos/first_small.png">Module Conso/Gene</span>
</li>
</ul>
I hope you can help. :)
http://jsfiddle.net/chrisvenus/GRfDT/2/ is a fiddle with your modifications and a solution.
What I did was firstly altered the margin to make sure the text appeared in the right place (ie increasing the top margin).
Then I modified the z-index on that text to put it behind the menu stuff. You could also have modified the z-index of the menus and it might even be best practice to put a z-index on both.
<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>
z-index is basically designed for exactly this purpose - determining what order the content is in from background to foreground. For more information on it see http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index
Also I shoudl note that kinakuta, although replying before your problem was fully explained, is right about the fact that you should probably be making your menu absolute rather than the content that follows it. Mainly because I suspect it will mean neater HTML overall since it will stop you having to either have a container with all your other content or making far more things absolute than you want or worst case nto making everythign take it into account so some things get moved about or overlayed by your absoluted text in other ways...
something like this: http://jsfiddle.net/chrisvenus/GRfDT/3/ (the same as before but with some swaps about where the position: absolute is)
The main issue I see is that when your menu "displays" it's pushing things below it down. You want to set the position of the nested list to absolute to remove it from the flow of the page:
#menu li ul { position: absolute; }
This will make the menu appear over the text/content instead of pushing it down.
One more thing - you'll want to add some positioning to that same ul - left 0; and top 25px; (or something around there to fit how you want it to look.)
I need to change something without touching HTML codes.
So I have this code in my HTML
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
and this in CSS
.twitter {
background: url('../images/tt.png') no-repeat;
width: 10px;
height: 14px;
}
This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.
Is it possible to do without touching HTML Codes?
Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:
.twitter a, .twitter a:link, .twitter a:visited
{
color: transparent;
}
Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:
.twitter a {
display: inline-block;
overflow: hidden;
width: 0;
height: 14px;
padding-left: 10px;
}
You could use text-indent:
text-indent: -9999px; /* get rid of any text */
Try making your font-size : 0px; in your css.
use text-indent with a little magic in it :)
HTML:
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
CSS:
a.twitter {
background-image:url('../images/tt.png');
display:block;
height:58px;
text-indent:-9999px;
width:200px;
}
So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)