Good Day
I am having a bad CSS day. I have 3-column div (horizontal, thats why I am using the float), but I want to align my text in the center, but to the left of the containing column div.
HTML:
<div id="footer">
<div class="footerColumn">
<ul>
<li><a>Contact Us</a></li>
<li><a>Home</a></li>
<li><a>Emergency Numbers</a></li>
</ul>
</div>
<div class="footerColumn">
<ul>
<li><a>Support</a></li>
<li><a>Privacy Policy</a></li>
<li><a>Terms of Use</a></li>
<li><a>Careers</a></li>
</ul>
</div>
<div class="footerColumn">
<ul>
<li><p><a>login</a></p></li>
<li><a>Sign Up</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
CSS:
#footer {
width: 960px;
margin: 0 auto;
padding: 10px;
background: url('/images/bg2.png') repeat-x center;
border-top: 6px solid #f3911f;
background: #1b1d21;
}
#footer div.footerColumn {
position: relative;
float: left;
width: 33%;
margin: 0 auto;
text-align: justify;
}
#footer div.footerColumn ul li {
}
#footer ul li a{
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
cursor: pointer;
}
#footer div.disclaimer {
color: #ccc;
font-family: verdana, Arial, sans-serif;
font-size: 12px;
}
SEE MY FIDDLE
Thank you
The reason why you are unable to center the <ul> element in your design is because the <li> elements are stretching the parent <ul> width to 100%, therefore using margin: 0 auto will not work.
Instead, I suggest that you use display: inline-block for your <ul> - allowing it to ONLY stretch as far as the width of inner contents (the child <li> elements), and not to the 100% width of the containing element.
As for the children <li>, you can set them to display as a block element, float them to the left and then clear the left float, therefore forcing each floated element to start on a new line (because you clear the left float for every element).
Simply implement the style suggested as follow:
#footer ul {
display: inline-block;
overflow: hidden;
}
#footer ul li {
display: block;
float: left;
clear: left;
}
#footer ul li a{
color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
cursor: pointer;
}
Check the fiddle here ;) http://jsfiddle.net/teddyrised/DvXzB/48/
Use text-align:center in your footerColumn divs.
#footer div.footerColumn {
position: relative;
float: left;
width: 33%;
margin: 0 auto;
text-align: center;
}
#footer div.footerColumn {
position: relative;
float: left;
width: 33%;
margin: 0 auto;
text-align: center; /*new here*/
}
#footer div.footerColumn ul {
float: left; /*new here*/
}
Related
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
I have a NavBar with my name left aligned(green background color), and then links to other pages which are right aligned(no background color). When re-sizing to less than 640px I need to move the right aligned links to a new line, and center all NavBar content. I cannot get the links to move to a second line.
HTML:
/* menu bar */
header{
background-color: #ffffff;
height: 60px;
margin: 0;
padding:0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
display:block;
}
/* align right */
li{
float:right;
}
/*link formatting*/
li a{
display:block;
padding: 8px;
color:black;
text-align: center;
padding:10px 16px;
text-decoration: none;
font-weight: bold;
}
/* name with background color*/
li:last-child{
font-size: 34px;
background-color: #4aaaa5;
position:absolute;
float:left;
}
#media screen and (max-width: 640px) {
li:last-child{
font-size: 34px;
background-color: #4aaaa5;
position:absolute;
width: 100%;
text-align: center;
top: 0px;
}
}
<ul>
<li><a id="bottomlinks"href="index.html">About</a></li>
<li><a id="bottomlinks"href="portfolio.html">Portfolio</a></li>
<li><a id="bottomlinks"href="contact.html">Contact</a></li>
<li> Mark Ring</li>
</ul>
Here is a basic demo of what it looks like you're attempting to achieve. As you can see I've simplified the HTML and CSS a bit.
Hope it helps!
body {
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header {
text-align: center;
overflow: hidden; /* clearfix */
}
.brand {
display: block;
background-color: #4AAAA5;
line-height: 60px;
}
#media ( min-width: 640px ) {
header {
text-align: left;
height: 60px;
}
.nav {
float: right;
}
.nav li {
float: left;
line-height: 60px;
}
.brand {
display: inline-block;
padding: 0 1rem;
}
}
<header>
<a class="brand" href="#">Brand</a>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
In your code you were absolute positioning the brand element on top of the other links (couldn't see them) and didn't undo the float (which kept them from stacking vertically).
I am trying to create a horizontal top header with a main nav stacked on top of a sub nav. Both navs are created using <ul> with floated <li> items. The sub nav has extra horizontal space to the left whose cause I cannot discern (see the circled red area in the picture below):
Here's a fiddle: http://jsfiddle.net/W3qqh/
Questions
What's causing the space?
How can I eliminate the space?
Also feel free to suggest other alternatives for achieving the desired menu, if you believe my approach could be improved.
HTML
<div class="header">
<div class="home-logo">HOME</div>
<div class="main-nav">
<ul>
<li><a>Explore</a></li>
<li><a>Earn</a></li>
<li><a class="selected">Merchants</a></li>
</ul>
</div>
<div class="sub-nav">
<ul>
<li><a>Be Secure</a></li>
<li><a>Get Help</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
CSS
* { box-sizing: border-box; }
.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }
.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }
.sub-nav { font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}
In .sub-nav, add:
float:left;
position:relative;
left:239px;
In .main-nav, add:
float:left;
Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.
Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.
JSFiddle Demo
UPDATE
In .main-nav, you have:
padding: 2px;
If you remove that and add position and left in .sub-nav, you wouldn't need float property.
JSFiddle Demo
Is this more what you were looking for: http://jsfiddle.net/W3qqh/2/?
First, set the outermost container to 100% width. Then float the three inner container divs and assign a width. Then apply a float to all <li> items (or use display: inline-block).
.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px; }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }
I am trying to give the tags a width of 20% inside this ul, but I am unable. Any help would be grateful. I am able to set the width of the li items, but I am looking to set the width to the <a>.
<nav>
<ul class="navigation">
<li class="main_nav_li">Home</li>
<li class="main_nav_li">About</li>
<li class="main_nav_li">Services</li>
<li class="main_nav_li">Stylist</li>
<li class="main_nav_li">Contact</li>
</ul>
</nav>
<style>
nav{
width:98%;
border: 1px solid black;
overflow:hidden;
height:3em;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
}
li{
list-style-type: none;
float: left;
padding-top: 1em;
}
a{
width: 20%;
text-align: center;
line-height: 10%;
font-size: 1em ;
text-decoration:none;
padding-top: 0.5em;
font-family: 'Happy Monkey', cursive;
}
</style>
you can't set a width to an inline element.
Add display: inline-block; and it will work
a{
width: 20%;
text-align: center;
line-height: 10%;
font-size: 1em ;
text-decoration:none;
padding-top: 0.5em;
font-family: 'Happy Monkey', cursive;
display: inline-block;
}
They are inline elements by default. You must use:
display: inline-block;
Block-level elements allow you to set width, inline ones do not.
Here's a working example:
http://jsfiddle.net/rKwkH/1/
I had to apply the width and display:inline-block to the li:
li{
list-style-type: none;
float: left;
width: 20%;
display: inline-block;
}
I need to make responsive header with H1, UL menu and H2.
The H1 - about 5% from the left corner. The H2 - about 5% from right corner. And between them is UL menu, which I need to place in the center. Everything in one line... And HR line under this line.
How to position UL menu in the CENTER ?
jsFiddle EXAMPLE
HTML :
<div class="container">
<header class="clearfix">
<!-- TITLE 1 -->
<h1>Title 1 </h1>
<!-- UL -->
<ul>
<li> menu 1</li>
<li> menu 2</li>
<li> menu 3</li>
</ul>
<!-- TITLE 2 -->
<h2>Title 2 <br/><span>span</span></h2>
<hr />
</header>
</div>
CSS :
.container > header {
width: 90%;
margin: 0 auto;
position: relative;
padding: 40px 30px 20px 30px;
}
.container > header h1 {
padding-left: 5px;
font-size: 30px;
line-height: 37px;
margin: 0 auto;
font-weight: 700;
color: #000;
display:inline !important;
float: left;
}
.container > header h2 {
padding-right: 5px;
font-size: 14px;
line-height: 14px;
margin: 0px 0px 0px auto;
font-weight: 700;
color: #000;
display:inline !important;
float: right;
text-align: right;
}
.container > header h2 span {
font-size: 10px;
line-height: 11px;
font-weight: 700;
color: #000;
}
.container > header ul {
font-size: 10px;
line-height: 11px;
font-weight: 700;
color: red;
}
.container > header ul li {
float: left;
list-style-type: none;
padding: 0px 5px 0px 5px;
}
.container > header hr {
border:0;
color:#000;
background:#000;
height:1px;
clear: both;
}
You can use floated divs and text-align to achieve this. Here's the HTML:
<header>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
And the CSS to align them properly:
.left { float: left; width: 25% }
.center { float: left; width: 50%; text-align: center; }
.right { float: left; width: 25%; text-align: right; }
Here's a jsFiddle demo.