I am trying to make horizontal navigation bar and right now my div navigation bar doesn't use max-width: 1200px which is set on <body> so my unordered list isn't floated to the right of the screen. Adding width: 100% or inherit to navigation does not help, width 100% is way more than my max-width.
body {
margin: 0 auto;
max-width: 1200px;
font-family: Helvetica, Arial;
background-color: #F7F7F7;
}
#wrapper {
position: relative;
z-index: 0;
margin: 1% 4% 2%;
padding: 1rem;
}
#navigation {
position: fixed;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation li {
float: right;
}
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>Projects
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I moved your max-width to your #navigation element, and set it to 100% width.
Also I moved your padding down to your ul element.
Here's the updated fiddle.
#navigation {
position: fixed;
max-width:1200px;
width:100%;
border: 1px solid red;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
padding: 1rem;
}
I think maybe the position fixed makes the div ignore the parent elements max-width
Related
/* Generic Styles */
body {
background: #ffffff;
color: #222222;
font: 1em;
}
.container {
margin: auto;
width: 90%;
}
img {
max-width: 100%;
}
/* Layout Styles */
header {
background-image: url(../images/rocket.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left;
background-color: #003151;
}
header img {
float: left;
margin-top: 30px;
}
header h3 {
clear: both;
}
nav {
float: right;
width: 100%;
font-size: 1.250em;
font-weight: bold;
text-transform: uppercase;
margin-top: 62px;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
display: block;
margin-right: 04%;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
}
<header>
<div class="container">
<img src="images/logo.png" alt="Logo" />
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>FAQS</li>
<li>Contact</li>
</ul>
</nav>
<h3>BlahBlahBlahH3</h3>
<p>BlahBlahBlah</p>
Get in touch
</div>
<!-- End Container -->
</header>
<!-- End Header -->
Despite my best efforts it's as if the nav element has some kind of padding or margin (which it doesn't). If I set the width to 100% to stop the nav spilling onto two lines it then jumps beneath the logo instead of floating to the right on the same line as the logo. The code may be a little messy now from a lot of trial and error but can anyone explain why if I don't set the nav element to width 100% that the nav spills onto two lines or why if it is set to 100% it won't stay floated to the right?
Heyo,
It looks like your % margin is flubbing things up. If you're willing to part ways with that (suggested if you're going to be in such tight spaces where 4% will be very tiny), try this:
nav {
float: right;
font-size: 1.250em;
font-weight: bold;
text-transform: uppercase;
}
nav ul {
list-style: none;
float: right;
}
nav ul li {
float: left;
display: block;
margin-right: 20px;
}
Your nav is rather large, so at around the 900px breakpoint, you'll want to either reduce the font-size, or shift it all to float:left, so that when it goes below the logo it looks more natural.
Remove width: 100% from your nav.
Remove padding and margin from ul (added by browser as default)
Reduce font-size of nav items - if its too big of course the nav will wrap!
Note that your container has width of 90% - as the nav is within this, it won't reach the far right edge.
/* Generic Styles */
body {
background: #ffffff;
color: #222222;
font: 1em;
}
.container {
margin: auto;
width: 90%;
}
img {
max-width: 100%;
}
/* Layout Styles */
header {
background-image: url(../images/rocket.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left;
background-color: #003151;
}
header img {
float: left;
margin-top: 30px;
}
header h3 {
clear: both;
}
nav {
float: right;
font-size: 1.250em;
font-weight: bold;
text-transform: uppercase;
margin-top: 62px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
display: block;
margin-right: 14px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
}
<header>
<div class="container">
<img src="images/logo.png" alt="Logo" />
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>FAQS</li>
<li>Contact</li>
</ul>
</nav>
<h3>BlahBlahBlahH3</h3>
<p>BlahBlahBlah</p>
Get in touch
</div>
<!-- End Container -->
</header>
<!-- End Header -->
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).
Having problems centering a ul horizontally within a div. The list doesn't contain any text, just images.
I'm using the list to display social media icons in the footer of my website.
Thought it would be easy enough to do but I've I've exhausted all methods I can think of, can anyone help? I'm probably missing the obvious :/
HTML
<div class="container">
<div id="footer">
<div id="social_media">
<ul>
<li class="youtube">
</li>
<li class="flickr">
</li>
<li class="googleplus">
</li>
<li class="linkedin">
</li>
</ul>
</div>
</div>
CSS
.container {
margin: auto;
max-width: 700px;
width: 700px;
}
#footer {
border:1px solid #000;
height:100px;
}
#social_media {
width: 100%;
display: block;
float:left;
}
#social_media ul {
display: block;
float:left;
padding: 0;
margin: 10px auto;
}
#social_media li {
list-style: none;
background: #000;
margin: 0 10px;
}
#social_media li a, #social_media li {
width: 44px;
height: 44px;
display: block;
float: left;
}
#social_media ul li.youtube {
background-position: -88px 0;
}
#social_media ul li.flickr {
background-position: -132px 0;
}
#social_media ul li.googleplus {
background-position: 0 0;
}
#social_media ul li.linkedin {
background-position: -44px 0;
}
http://jsfiddle.net/SZ27u
You could set text-align:center on the parent, .container, and then remove width:100% and float:left on #social_media, and change display: block to display:inline-block.
jsFiddle example
.container {
margin: auto;
max-width: 700px;
width: 700px;
text-align: center;
}
#social_media {
display:inline-block;
}
You can do this with a technique called shrink wrapping. This will also work with multiple floated children. The relevant styles are:
#footer > div {
float: right;
position: relative;
left: -50%;
}
#social_media {
position: relative;
left: 50%;
}
http://jsfiddle.net/SZ27u/2/
FIDDLE
So you have to define a width for the margin: auto; to work. This is a good way to do what you want.
#social_media ul {
display: block;
padding: 0;
margin: auto;
width: 256px;
}
Another option assumes you know what the width iof the UL should be based on the width of your LI's. It also assumes that setting a specific width for the element is ok based on your template.
Simply change these bits of CSS to the following:
(deleted the float and added width and overflow)
#social_media ul {
display: block;
overflow: hidden;
width: 256px;
padding: 0;
margin: 10px auto;
}
http://jsfiddle.net/SZ27u/3/
I feel as if I have tried everything from text-align center to margin:0 auto with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...
Here is my code
<style type="text/css">
.header {
height: 40px;
background: #000;
width: 100%;
}
.header ul {
list-style-type: none;
}
.header li {
float: left;
line-height: 40px;
}
.header li a {
color: #FFF;
padding: 0 18px;
height: 40px;
}
</style>
<div class="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Services</li>
<li>Rates</li>
<li>Reviews</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
This works without having to define a set width.
ul {
display: table;
margin: 0 auto;
}
If you want to get rid of the left-side padding, thus genuinely centering the list, add:
padding-left: 0;
This should fix it for you.
ul {
display: inline-block;
margin: 0 auto;
}
If that doesn't work for you then give the UL a set width i.e.
ul {
width: 300px;
margin: 0 auto;
}
I am designing a top bar for a website and cannot figure out how to force the <a> elements below have the same height as the parent <li> elements. The code below shows the <li> elements with a green background and the <a> elements with a yellow background. I would like to have the yellow boxes span the whole height of the green boxes. Setting the height of the <a> elements to 100% doesn't do trick. What am I missing?
<!DOCTYPE html>
<head>
<style>
div#topbar {
width: 100%;
height: 30px;
top: 0;
border: 1px solid black;
}
#topbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
#topbar ul li {
margin: 0;
padding: 0 10px;
background-color: green;
display: inline;
float: left;
}
#topbar a {
background-color: yellow;
}
</style>
</head>
<body>
<div id="topbar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
Its because tag is an inline element and it doesn't take height into account so you need make it block which can be made by various methods but most suitable in your case is 'float'.
div#topbar {
width: 100%;
height: 30px;
top: 0;
border: 1px solid black;
}
#topbar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
#topbar ul li {
margin: 0;
padding: 0 10px;
background-color: green;
display: inline;
float: left;
}
#topbar a {
background-color: yellow;
float:left; /*add this*/
}
http://jsfiddle.net/YMPe2/
Have you tried :
#topbar a {
background-color: yellow;
display: inline-block;
}
the a tag should be display:block, then it will fill the parent. And lose the padding on the li tag.