I've created a simple horizontal list for links at the footer of my web pages. The problem is that the list exceeds the right margin of div id="footer-links" before it wraps around to the next line. This happens when viewed in my iPad held in Portrait mode resolution 768.
This problem is driving me absolutely crazy!! I greatly appreciate any help on this.
I tried to post a picture from my iPad but it won't let me since I'm new. Here is the code:
The HTML is simple:
<div id="links-wrapper">
<div id="footer-links">
<p>Info</p>
<ul>
<li class="first">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
CSS:
#links-wrapper {
width:auto;
}
#footer-links {
margin:0 4.545455%;
font-size:.85em;
line-height:175%;
}
#footer-links ul {
margin: 0px 0 30px;
padding: 0;
list-style: none;
}
#footer-links li {
display:inline;
margin: 0;
padding: 0 .4em 0 .6em;
border-left: 1px solid;
}
#footer-links .first {
padding-left: 0;
border: 0;
}
#footer-links p {
font-weight:700;
margin-bottom:1px;
text-decoration:underline;
}
Clay, You can do this by applying a display:block to the LIs inside a media query for the width you want them to respond to. For example:
#media (max-width:768px){
#footer-links li {
display:block;
margin: 0;
padding: 0 .4em 0 .6em;
border-left: 1px solid;
}
}
See HERE
But with that in mind, if you are building a responsive design, you should look into a responsive design framework. They have all of this coded out for you to use. The best and most efficient is Bootstrap3. Look into it and specially into nav-pills.
Good luck
EDIT
In response to your comment below. I understad. I often go through the same deal. In that case you can modify your code and use DIVs instead of LIs. Then use the proper bootstrap classes and cascading to adjust according to screen size to all inline, then two columns of links and then on sigle column on smartphones .
See this other DEMO HERE for a different alternative
*hint, With a little creativity, you may be able to keep your LI's and stack them up like my first example but add a logo or something else next to it as a filler ;)
Related
I am trying to create a <ul> with no bullets (i.e. list-style-type: none) where the items have a hanging indent (all lines except first are indented). I do not mean that all <li> after the first should be indented-- rather that, if an <li> spans more than one line, all lines after the first should be indented within that <li>. How can I achieve this?
So far I've tried:
text-indent: 5px hanging: no effect, hanging is not yet supported
text-indent: -5px; padding-left: 5px: found this trick here, but it did not work in this context
the solution at this SO question, which didn't work for unbulleted lists
NOTE: I know that I can achieve this by other means (e.g. using <p>s instead of a list), but I am wondering whether it is possible with <ul>.
You can add some padding and a negative text-indent.
ul {
list-style: none;
padding-left: 40px; /* Most browsers already have this by default */
}
li {
text-indent: -20px;
}
<ul>
<li>Hello<br />world<br />foo bar</li>
</ul>
Is this what you are trying to achieve?
ul {
list-style: none;
margin: 0;
padding-left: 20px
}
li {
text-indent:-15px;
}
<ul>
<li>test
<br/>me</li>
</ul>
I have this list in HTML and I would like order it by columns. I tried using floats it gives me this:
EDIT :
Height of these <li> is undefined, but I would like C below B, E below E and G below F without change the structure and change the order. I don't want to use position absolute. I'm wondering if there are other solutions.
HTML :
<ul>
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<ul>
OUTPUT (using float: left; width: 240px; border-left: 1px solid #EEE) :
What I want is more like this below, without changing the HTML because I already use this structure to make responsive.
Is it possible ?
You could use column CSS and a margin-bottom on the first LI tag, like this.
ul {
column-count:4;
padding:0;
column-rule: solid lightgray 1px;
}
li {
display:inline-block;
width:100%;
}
li:before {/* demo purpose to set an height to lis */
content:'';
float:left;
padding-top:50%;
}
li:first-of-type {
margin-bottom:50%;
}
You may need a JavaScript prefixer or add vendor-prefix manually.
I am having this issue and I am hoping that it is so simple and that is why I can not figure it out.
I want to use an image divider inbetween navigation <li> elements.
Here is my CSS:
#nav {
width:70.5%;
padding-left:29.5%;
list-style: none;
margin: 0px auto;
float:left;
background-image:url(images/bk_nav.gif);
background-repeat:repeat-x;
display:block;
text-align:center;
#margin-top:-4px;
}
#nav li {
float: left;
margin: 0px;
text-align:center;
font: 13px/100% Helvetica, Arial, sans-serif;
background-color:#cccccc;
}
.divide
{
position:relative;
float:left;
width:4px;
height:42px;
background-image:url(images/divider.gif);
}
#nav a {
color: #ffffff;
text-decoration: none;
text-align:center;
padding: 14px 25px 14px 25px;
font: 14px/100% Helvetica, Arial, sans-serif;
display: block;
text-align:center;
}
Here is the HTML:
<ul id="nav">
<li class="page-item-2 current_page_item">Home</li><span class="divide"></span>
<li class="page-item-20">Our Program</li>
<li class="page-item-10">Social</li>
<li class="page-item-13">Economic</li>
<li class="page-item-15">Environmental </li>
<li class="page-item-17">Resources </li>
</ul>
Currently I only have one divider in there because I am testing it. This code works fine in FF but IE is destroyed by it. Anyone shed some light on this frustrating situation?
UPDATE:
The one is right and the other is not. I was able to create the same error in FF so you can see both. (Just moved the <span>)
<ul>
<li>list item</li>`
<li class="divider"></li>
<li>list item 2</li>
</ul>
Then, in order to make the divider appear closer to the list items, just adjust the margin/padding of the .divider class
First thing's first:
A span cannot be a direct child of a ul element. It is not standard HTML, and so there's no telling what might happen. Only lis can be children of uls.
Suggestion:
I would, were I you, put the divide class on an li instead. That way, you have standard HTML at the very least, and maybe it'll even fix the page. Other than that, I would need a link to a demo as Bears will eat you suggested to be of any assistance.
I'm not entirely sure what "entire background" means, but I'm going to suggest that you use background-position and background-repeat to help. Read through these and it should help you figure out what you'd like to do.
The Preview, What others are saying tabs are stacked and right-aligned (wrong).
They should be horizontal and left-aligned.
It's displayed correctly in firefox,IE8.
What's the reason for this?
URL: http://www.learncentral.org/resource/view/59896
UPDATE
Related html here:
<div class="ed_tabs">
<ul class="ui-tabs-nav">
<li class="selected ui-tabs-selected">Preview</li>
<li>What others are saying...(0)</li>
</ul>
</div>
css:
.ed_tabs {
border-bottom:3px solid #3F79C2;
float:left;
width:100%;
}
.ed_tabs ul {
float:left;
list-style:none outside none;
margin:0.5em 0 0;
padding:0 0 0 1em;
}
li {
float:left;
padding:0 1px 0 0;
}
Not sure why IE7 is working differently, but I see that your CSS rule for
.ed_tabs ul li a
does a float:right to the anchor (A). Try changing this to float: left instead.
I have a menu built with <ul> and <li> tags. I want to have small separators between sections. For the separators, I just set a background color and a short height on an <li>. Looks very nice... except in IE7 where the <li> seems to refuse to change its height to be shorter than all the other <li>s in the same <ul>. I have tried different ways of affecting the height of the separator <li> (height, line-height, font-size) with no success.
I have a fix that will leave the separator height as is and color the whole background in IE 7, but that is not really the appearance I want (the separator is too big). Can anyone think of another way to control the height of an <li> tag?
Here is a sample - in IE8 toggling compatibility view will show the problem:
<style type="text/css">
.menu {
width:100px;
}
.menu ul {
list-style-type:none;
border-top: solid 1px red;
padding: 0px;
margin:0px;
}
.menu ul li {
border-bottom: solid 1px red;
padding: 0px;
margin:0px;
white-space:nowrap;
}
.menu ul li a {
font-size: 13px;
text-decoration: none;
color: black;
display: block;
padding: 3px;
}
.menu ul li a:hover {
color: blue;
text-decoration: underline;
}
.menu ul li.separator {
height:4px;
background-color:red;
}
</style>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="separator"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
The problem is that ie6/ie7 will expand an empty element to the height of your font. You can get around this by adding font-size:0 and line-height:0 to .menu ul li.separator.
A better solution would be to add a thicker bottom border to the <li> that is before the separator.
.menu ul li.sep {border-bottom-width:6px}
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="sep">Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
Set your css for the LI to display: block;.
Maybe you should try setting your li as follows:
li{
display:block;
float:left;
height:myHeight;
clear:right;//may be necessary, can't check with IE7
}
This is what I've done with similar problems.
In addition to Daniel A. White answer you can experiment with line-height to center your text vertically and create the necessary height.
Do what was suggested in the previous posts. If these changes are causing issues in browsers other than IE, you can do the following to have only IE use them:
.selector {
prop1 : val1; /* default value for all browsers */
*prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}
This works much better than trying to do special commenting to include separate style sheets, etc.
Have you tried adding a line-height attribute to .menu ul li?
Else have you tried using horizontal rule <hr> as a separator instead? If you're using horizontal rule, you can set the margin-top and margin-bottom to 0px and see what happens. Can't guarantee it looks the same on IE and other browsers, but at least you tried. =)