Hi i am trying to write a footer which should have balanced width items because of their width.
In my example , if the sentence is long, it s seems that there is a more large padding. "Blog" has a little padding, "First column very long" has a large one.
Thx for the help.
<div class=footer>
<UL>
<LI>First column very long</LI>
<LI>Contact us</LI>
<LI>Blog</LI>
<LI>Privacy policy very large title</LI>
<LI>why?</LI>
<LI>The last sentence</LI>
</UL>
</div>
.footer{
width:100%;
border: 1px solid yellow;
}
.footer ul
{
list-style-type:none;
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding:0;
}
.footer ul li
{
display:table-cell;
text-align:center;
border:1px solid red;
}
https://jsfiddle.net/rtjposu9/
This is a very normal phenomenon. If you wish to balance the widths of the elements, use width in percentage to help you, for example width:16.66%;
However, since that will instead cause another problem of words overflowing, you should also use overflow:hidden and word-wrap:break-word
Related
I am currently using this css sheet to stylize my page but no matter what I do I cannot get the footer to line up with the main content of my webpage. It seems to be an centering issue.
Here is my css:
.footnav
{
padding: 20px 40px 20px 40px;
clear:both;
text-align:center;
color:white;
position:relative;
z-index:100;
}
.footnav li a{
text-decoration:none;
display: inline;
font-weight:bold;
}
.footnav li {
list-style-type: none;
}
Here is the code that previous css it is stylizing, I apologize if it is a lot to read.
<div class="footnav" >
<ul class="nav1">
<li class="header">Main</li>
<li><Home</li>
</ul>
<ul class="nav2">
<li class="header">Aventure</li>
<li>News</li>
<li>Map</li>
</ul >
<ul class="nav3">
<li class="header">Survival</li>
<li>Guide</li>
<li>Gear</li>
</ul>
</div>
This is the css for the content area, that I am trying to line my footer with.
.content
{
color:white;
font-size:12px;
font-weight:none;
font-family:sans-serif;
padding:30px;
margin:auto;
margin-top:10px;
width:70%;
position:relative;
z-index:14;
opacity:1;
border-style:solid;
border-width:10px;
border-style:solid;
border-width:5px;
background-color:#000000;
border-color:#FFFFFF;
border-right-color:#999999;
border-left-color:#666666;
border-bottom-color:#333333;
}
I know that it involves trying to take half the width of the body of the webpage, but for my page I used percentages instead of pixels. I am not sure how to handle that. Thanks in advance and once again, I apologize for the lengthy question but the only way to properly assist me, would be to have the full picture. If there is any more material needed just ask.
Wrap the footer content in <center> tags </center>. They automatically align any child content with the center of the page.
try to add display: inline-block; to .footnav ul. The ul blocks would otherwise have 100% width - this way they can be next to each other, and be centerded together. inline-block limits the width, therefore you also should add a width setting to this rule. So it is:
.footnav ul {
display: inline-block;
width: 200px;
}
(The actual width depends on the content of your li elements in those nav lists)
I want to have a left-aligned navigation bar across the top of the page, but before (i.e. to the left of) the menu items, I would like a bit of text ("John Doe") that (i) has a substantially larger font size than the menu items but (ii) has the same baseline as the menu items.
From what I understand, the preferred/recommended way to do navigation bars is with floated <li>'s. However, I haven't found a way to use a left floated list and also have the menus align to the same baseline as the text to the left. My current CSS and HTML are:
<html>
<head>
<style>
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li~li {
float:left;
border:solid 1px blue;
width:100px;
}
#name {
float:left;
border:solid 1px blue;
font-size:40px;
width:250px;
}
</style>
</head>
<body>
<div id='navdiv'>
<ul id='nav'>
<li id='name'>John Doe</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
Is there any way to vertically align all left floated <li>'s to the bottom of the container <div>?
I should say: I can easily achieve the intended effect by using a table instead of a floated list (using vertical-align:bottom on the menu <td>'s), but since floated lists seem to be the recommended standard, I'd like to know if it's possible with them. (Though I really don't understand the animus folks seem to have against using tables for layout.)
Don't need to use float, in fact it's better if you don't, you can just set the display type to a table-cell
#navdiv {
overflow:hidden;
border-bottom:solid 1px red;
}
#nav {
list-style:none;
margin:0;
padding:0;
}
#nav li {
display: table-cell;
vertical-align: bottom;
border:solid 1px blue;
width:100px;
}
#nav li#name {
font-size:40px;
width:250px;
}
also, the extra border style was unnecessary, just change the selectors to #nav li and #nav li#name and you can supersede anything in #nav li with what's in #nav li#name because it has higher priority.
tables are bad mostly because of the way they load, as far as I understand they require the whole table to build before content can load, while using individual elements can load as they please, or something to that affect, i'm sure someone else could explain that part better.
I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
As in the title - I want to stretch the last li tag in horizontal menu till end of menu. Here is my code:
#menu{width:600px; height:50px; background-color:#666; }
ul{padding:0; margin:0;}
ul li{list-style:none; height:20px;}
li{
float:left;
background-color:#999;
display:block;
padding:10px;
border-right-style:solid;
border-right-width: 1px;
border-right-color: #000;}
<div id="menu">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="last"></li>
</ul></div>
Just simply add
.last {
float: none;
}
and the complete thing will be as wide as it can because it's display is set to block.
Alternately you could just set the background-color of the ul.
UPDATE
The solution doesn't work perfectly, as it does span the li over the complete ul.
The fix is actually pretty simple:
.last {
float: none;
overflow: hidden;/* Add this */
}
See updated jsfiddle: http://jsfiddle.net/BsrLD/8/
You can take off the float on the last li and it gives the result i think you want.
.last{float:none}
You can see in this FIDDLE