I have a list of links with the ususal markup
<ul>
<li>
a link
</li>
<li>
<a href="">a really long link that wraps
over two or more lines
</a>
</li>
<li>
a link
</li>
<li>
a link
</li>
</ul>
I want to use a sprite to show icons to the left of the links and have the link text stay to the right:
ICON some text that wraps and
some more text that wraps
I'd like to do this without adding in more markup. and I have to support IE8 - so i think that means i can't use background-size
I have tried using a pseudo element - adding the background to the pseudo element. this doesn't work because the actual content isn't in its own element - so there doesn't seem to be a way to make it not wrap under the icon.
Am I missing something? Is there a way to make this work in a good semantic way? Or do i have to add a span?
Have a look at this one:
li {
margin-left: 25px; // |n| px must be equal to li a:before margin-left |n| px
float: left;
clear: left;
}
li a:before {
content: ' ';
margin-left: -25px; // here ...
width: 25px;
height: 50px;
float:left;
background: url('http://www.google.com/images/srpr/logo3w.png');
}
Fiddle: http://jsfiddle.net/vhSG6/6/
li a:before {
content: '-';
color: transparent;
width: 20px;
margin-right: 8px;
display: inline-block;
background-image: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5')
}
http://jsfiddle.net/vhSG6/
Related
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
I’m sure somebody has had this problem before, but I can’t seem to find the right way of describing it.
I’ve got a row of icons like so:
Which is produced like so...
HTML:
<nav class="nav-global">
<ul>
<li>
Home
</li>
<li>
Our Story
</li>
...
<li>
Login
</li>
</ul>
</nav>
CSS:
.nav-global ul {
padding: 0;
text-align: center;
}
.nav-global li {
display: inline;
}
.nav-global li a {
background-image: url(/try/img/nav-global-icon.png);
background-repeat: no-repeat;
background-position: center 0;
}
My problem happens when I want to add padding to the top of the <a> to get the icons to sit on top.
By adding padding-top: 35px; to .nav-global li a:
Here’s what the inspector is telling me:
I’ve tried using inline-block, tried making the <a> display: block, using clearfix and a few other things but can’t seem to figure it out.
Any suggestions?
you should also try adding padding to li element (.nav-global li), and display it as inline-block
.nav-global li {
display: inline-block;
padding-top: 35px;
}
I have a simple horizontal nav menu that uses highly-styled anchors for buttons. Now, the last button, called "store" has a list of content that becomes visible via this jquery hover effect.
I can't get the "store" button to align with the rest of them. Two days now I'm trying float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, plus various cheesy hacks, and I'm at that point of CSS positioning where you start thinking seriously about re-constructing your layout using tables.
Instead of selling my soul to tables, I guess I better just ask someone who is more experienced to please take a look:
http://www.ideagasms.net/ideagasms-with-dropdown-menu.html
When viewing source, you'll notice I added lots of comments next to the main elements so it should be easy to make sense of everything quickly. Thank you. :)
This code should work:
I've added a wrapping div to your menu with a fixed width and centred it on the page. Then added each a tag into an li.
Your jQuery Menu is now broken but it should just be a case of finding the correct elements again now the orders have changed in the dom.
You might also have to create some new styles and add them to the elements again. As I've probably messed a few bits up. I'd suggest adding proper classes and id's so you don't run into styling problems in the future.
<div id="nav">
<ul>
<li>
<a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
<ul class="file_menu">
<li>File</li>
<li>Edit</li>
<li>View</li>
<li>Insert</li>
<li>Modify</li>
<li>Control</li>
<li>Debug</li>
<li>Window</li>
<li>Help</li>
</ul>
</li>
<li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a> </li>
<li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
<li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
<li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
<li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
<li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
<li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
<li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>
<style type="text/css">
#buttonnav {
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9;
}
#nav {
margin: auto;
width: 740px;
background: orange;
}
ul {
margin: auto;
}
ul li {
display: inline;
float: left;
}
.menu_class {
border:1px solid #1c1c1c;
}
ul.file_menu {
cursor:pointer;
display:none;
width:260px;
border: 1px solid #1c1c1c;
margin:0;
padding:0;
list-style:none;
}
.file_menu li {
background-color: #302f2f;
}
.file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
</style>
That menu looks atrocious and to be honest, doesn't allow for much flexibility as you noticed.
If I were you I would rebuild it in t way where a proper html structure is used with a (nested) li structure so you could just whip in that extra item and the submenu...
This is the ugly fix
#buttonnav {
display: inline-block;
/* remove the float & widht */
}
.hoverli ul.file-menu {
position:absolute;
}
This is a case where you should probably go back to the basics and re-learn how to make a proper menu. If this is in some content management system then override the classes & templates to make it so you can easily add things...
Stuff I am missing for the sub menu also is position: absolute; (and you probably want the sub-menus parent to be relative).
You need to fix two things to properly present the button and have the sub-menu functioning:
See this working Fiddle Example!
1)
Set the css for the button like:
#buttonnav {
display: inline-block;
height: 25px;
position: relative;
z-index: 9;
}
Note: display:inline-block; gets in and float, margin and width gets out.
2)
Adjust the css for the sub-menu to allow it to appear without breaking the layout:
CSS
.hoverli {
position: relative;
z-index: 1;
}
.hoverli ul {
position:absolute;
}
My goal is to make a DIV that presents the latest four news links with the title and a small picture on hover.
The box will be small (150px height by 50px width) and will expand to about 500px. Once an article is clicked, it will bring up a box that you may exit out of. This box will put a dark layer on the rest of the content so that it is focused on by the user.
Anyways... here is my CSS I have currently.
#news {
position: fixed;
top: 250px;
left:0px;
background-color: blue;
min-width: 20px;
max-width: 600px;
height: 200px;
}
#news a {
display: none;
padding-bottom: 5px;
color: white;
}
#news:hover {
display: block;
padding: 0px 10px 0px 0px;
}
#news:hover a {
display: block;
}
My HTML uses the a tag to edit the position, but was wondering if anyone had any suggestions on how to go about making the boxes inside the div look neat and conform to my command?
I think you're looking for something like this:
<div id="news">
<ul id="articles">
<li class="article-item">
<h2>Article 1!</h2>
<p>Here is some text for the article.</p>
</li>
<li class="article-item">
<h2>Article 2!</h2>
<p>Here is some text for the article.</p>
</li>
<li class="article-item">
<h2>Article 3!</h2>
<p>Here is some text for the article.</p>
</li>
</ul>
</div>
Then your styles would be something like this:
.article-item {
ADD STYLES HERE
}
.article-item h1{
ADD STYLES HERE
}
.article-item p{
ADD STYLES HERE
}
Etc...
I have some html that looks like this
<div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5'>5</a></div>
Basically, this is a navigation menu where the current page is 2. Now, the problem is, I want the current page (2 in this case) to always be centered. I'm just using text-align:center but this just means that 3 is always in the center. How do I make it so that the current page number is always in the center, regardless of whether it is the middle element in the list of links?
EDIT:
Ok, to be a little more clear, in the above case I want to look like this
1 2 3 4 5
^
|
This should be centered in the page and the spacing between the others
should remain the same. So the links will actually be slightly offcenter to
the right, but the current page will be in the center of the page.
I think I see what you're trying to do. Seems it should be pretty straightforward, but isn't. I think you might need to resort to absolute positioning and calculating the precise values on the server (or in javascript on the client). I also think that you'll need a container for the non-linked element. Something like this:
<style type="text/css>
#nav {position: relative}
#nav ol {list-style: none; margin: 0; padding: 0}
#nav ol li {display: block; margin: 0; padding: 0; position: absolute; width: 10%; text-align: center}
#nav ol li a {}
</style>
<div id="nav">
<ol>
<li style="left: 35%" >1</li>
<li style="left: 45%" >2</li>
<li style="left: 55%" >3</li>
<li style="left: 65%" >4</li>
<li style="left: 75%" >5</li>
</ol>
</div>
EDIT: To answer your revised question:
I would use markup like this
<div id="#nav">
<div>
<span class="spacer"></span>
<a href ='./?page=1'>1</a>
2
<a href ='./?page=3'>3</a>
<a href ='./?page=4'>4</a>
<a href ='./?page=5'>5</a>
</div>
</div>
And then css (with widths calculated appropriately):
#nav div
{
margin:0 auto;
/* width: 9 * link width */
}
#nav div .spacer
{
display:inline-block;
/* width: 3 * link width */
}
Perhaps something like this. If the width is not fixed then I think you'll need to use Javascript to do the ol margin-left calculation.
ol
{
display: block;
height: 20px;
margin-left: 0;
}
ol li
{
float: left;
width: 20px;
height: 20px;
}
body#page2 ol
{
margin-left: 300px; /*calculate this by hand or use jQuery to do the math*/
}