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.
Related
I previously had the anchor element inside of the list item and could target it using "nth-child(4)" but as soon as I placed the anchor element outside of the list item to make the clickable area bigger it became untargetable. Any suggestion on how to target that particular element?
section.social-section ul a li {
width: 22%;
display: inline-block;
float: left;
border: 1px solid #e2e0e0;
margin-right: 30px;
padding: 10px;
}
section.social-section ul.group a:nth-child(4) {
margin-right: 0;
}
<!-- Social section -->
<section class="social-section">
<ul class="group">
<a href="#">
<li>facebook</li>
</a>
<a href="#">
<li>twitter</li>
</a>
<a href="#">
<li>pinterest</li>
</a>
<a href="#">
<li>google+</li>
</a>
</ul>
</section>
Two problems here:
You can't swap the positions of your a and li elements like that. The only children a ul can contain are li elements. The only valid structure for such a list is ul > li > a.
Validity aside, the reason your rules no longer match is because your first rule is still targeting li elements, but your second rule targets a elements. They're targeting different elements, so no overriding is taking place.
You can make the clickable area bigger without altering your HTML by moving some of the CSS properties such as padding to the a elements, as well as making them blocks:
section.social-section ul li {
width: 22%;
display: block;
float: left;
border: 1px solid #e2e0e0;
margin-right: 30px;
}
section.social-section ul.group li:nth-child(4) {
margin-right: 0;
}
section.social-section ul li a {
display: block;
padding: 10px;
}
<!-- Social section -->
<section class="social-section">
<ul class="group">
<li>facebook
<li>twitter
<li>pinterest
<li>google+
</ul>
</section>
(Note that moving the padding declaration causes the width of your li elements to be reduced, but for the purposes of this answer I'm ignoring this side-effect.)
As the comments rightly point out, the immediate children of ul tag must always be zero or more li tags.
However, you say that you are doing this to increase the clickable area. You can do that by putting the a tags back inside the li tags, and then make the a tags display : inline-block. You could then apply width : 100% and height : 100% on a to increase the clickable area (which would then be equal to the entire area of the li). In this manner, you can use nth-child() to target the 4th child.
Your code becomes :
HTML
<!-- Social section -->
<section class="social-section">
<ul class="group">
<li>facebook</li>
<li>twitter</li>
<li>pinterest</li>
<li>google+</li>
</ul>
</section>
CSS
section.social-section ul li {
display: inline-block;
position: relative;
}
section.social-section ul.group li:nth-child(4) a {
display: inline-block;
height : 100%; //not absolutely required
height : 100%; //not absolutely required
}
You can add CSS properties to position the list as you require.
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.
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.)
The HTML code:
<ul>
<a href='index.php'>
<li>
<img src='images/icons/home.png' alt='' />
<p>Home</p>
</li>
</a>
</ul>
The CSS:
ul {
height:100%;
position: absolute;
right: 0;
text-align: left;
}
ul li {
height: 100%;
width:90px;
float: left;
}
ul li p {
margin-top: 4px;
width: 100%;
}
ul a li {
display:block;
}
ul li img {
margin-top: 8px;
width: 43px;
height: 43px;
}
(I've left all the properties here except the font stuff)
The problem:
In Internet Explorer only: the whole link (which is a square block with text and an image inside) functions normally as a link except for the part where the image is. In that part when clicked on the link does not work. It does, however, strangely, still, show the link in the status bar when you hover over any part, including the image.
You should provide a larger sample of your HTML, but I can already see that it's invalid:
<a href='index.php'>
<li>
..
</li>
</a>
You either have an a element as a direct child of a ul element which is invalid.
Or, you don't have a containing ul element, which is also invalid.
It's only valid to use an li element inside a ul or ol element (and a couple of other less common scenarios).
Valid HTML would look like this (assuming HTML5!):
<ul>
<li>
<a href="#">
<img src='images/icons/home.png' alt='' />
<p>Home</p>
</a>
</li>
</ul>
Once you use valid HTML, it should work in IE.
(But, you didn't specify what version of IE, so I'm just guessing that it will.)