I'm trying to make the header and footer background to be 100% but all the content in the page to be 1200px and centre the page.
So far I put width:1200px in the html, body sure that centre the page but it fixed width the background which I don't want to happen.
Also I've been trying to fix the navigation as well to be positioned on the right and align to the logo.
html,body{
background: #fff;
width: 1200px;
}
.container{
min-height: 100%;
margin: 0 auto;
}
header{
background: #363636;
color: #fff;
padding: 30px;
margin: 0 auto;
}
.logo{
float: left;
clear: both;
display: block;
}
nav{
float: right;
}
<div class="container">
<header clas="main_header">
<div class="logo">
<h2>LOGO.COM</h2>
</div>
<div class="clearfix"></div>
<nav class="main_nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
<li>Get a Quote</li>
</ul>
</nav>
</header>
.....
</div>
Don't restrict the width of the HTML or body...restrict the width of the container.
html,body{
background: #fff;
}
.container{
width: 1200px;
margin: 0 auto;
}
If an element needs to be wider than the container just close one .container add your wider element and open a new .container.
Codepen Demo
Related
I have a navigation bar as shown here: http://i.imgur.com/4rxkS2K.jpg
I am using foundation to build a website, the way I have built the nav bar is as follows:
HTML:
<nav class="top-bar">
<ul>
<li>About</li>
<li id="menu-divider">|</li>
<li>Testimonials</li>
<li><img src="images/logo.png" alt=""></li>
<li>Services</li>
<li id="menu-divider">|</li>
<li>Contact</li>
</ul>
</nav>
CSS:
.top-bar { font-family: 'bebas_neueregular';
height: 150px;
line-height: 100px;
padding: 18px;
width: 100%;
position: relative;
text-align:center;
margin-bottom:10px; }
.top-bar ul { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
.top-bar ul > li { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
#menu-divider { color:#ffffff;
font-size: 24px;}
As you can see in the picture, the way I have built it means that my center li element (my logo picture) is not in exact center as the other li elements are of different widths meaning they are all centered collectively. What I'm after is the logo in the dead center then the other li elements as they are centered around the logo.
Thanks in advance for any help!
You can play around but I'm pretty sure this does the trick:
http://codepen.io/anon/pen/dYXQpz
Use 3 containers (that means you lose your nav as a ul). Flex them and inside of the left and right one, flex the elements (end for the first, start for the other)
<div class="nav-bar">
<div class="sideNav leftNav">
<div class="menu">
MENU 1
</div>
<div class="split"></div>
<div class="menu">
MENU 2
</div>
</div>
<div class="logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
</div>
<div class="sideNav rightNav">
<div class="menu">
MENU 3
</div>
<div class="split"></div>
<div class="menu">
MENU 4
</div>
</div>
</div>
Then apply the css. It can be improved but it can help you get started.
.nav-bar {
background: pink;
display: flex;
}
.sideNav {
flex: 1 0 auto;
background: red;
display: flex;
}
.leftNav {
justify-content: flex-end;
}
.rightNav {
justify-content: flex-start;
}
.sideNav > div {
margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}
Hope that helps. I loves flexbox.
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-143">About</li>
<li id="menu-item-151">Select Your City</li>
<li id="menu-item-162">How Walks Work</li>
<li id="menu-item-160">FAQs</li>
<li id="menu-item-166">Blog</li>
<li id="menu-item-153">Partners</li>
<li id="menu-item-154">Press</li>
<li id="menu-item-144">Privacy Policy</li>
<li id="menu-item-145">Site Map</li>
<li id="menu-item-146">Terms & Conditions</li>
</ul>
</div>
I want to center this menu.
I tried the following CSS but it didn't work:
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: inline-block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
Use following css instead of what you have.
I just changed display for ul#menu-footer-menu.menu to block nothing else.
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
You need to add one wrapper element with a width of 100% to center your div in.
Like:
<div class="wrapper">
<div class="menu-footer-menu-container">
...
</div>
.wrapper{ width:100% }
Use display:block instead of inline-block
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
Try to add CSS Style :
.menu-footer-menu-container
{
text-align: center;
}
You have two ways to do it
width degradation center tag
<center>
<ul>
...
</ul>
</center>
Create another div to force the center
.center { margin: auto; text-align: center; }
<div class="center">
<ul>
...
</ul>
</div>
Note: The tag must be inline-block.
width text-align:center;
ul{ text-align: center; }
<center>
<ul>
...
</ul>
</center>
Add one more style text-align:center to #footer-menu in css.
I managed to make my footer to stick to the bottom of the window, then avoid my content div... but now, it's overlapping for about 15px before dropping below.
I want the footer to drop, but to never overlap the content. I think it may have something to do with my margins, but my tweaking has not yet solved this.
Any suggestions?
Adding margin-bottom:15px doesn't seem to help, because it's only shown once the footer overlaps enough to push the footer down. Then the margin is shown, but not before that small amount of overlap.
The #push div is supposed to make this all possible, from what I understood on Twitter's bootstrap example.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
min-width: 900px;
}
.main_nav {
list-style-type: none;
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#bio_content {
width: 700px;
min-height: 445px;
margin-bottom: 15px;
float: left;
}
#bio_text {
padding: 10px;
}
#push {
height: 50px;
}
#footer {
height: 50px;
width: 100%;
float: left;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
I thin it's a float issue. A fiddle would help diagnose this better. I would suggest doing this
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
</div>
<ul class="main_nav">
<li>Home</li>
<li>About</li>
<li>Music</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<div id="bio_content">
<div id="bio_text"></div>
</div>
<div style="clear:both"></div> //add this to clear the bio_content div
<div id="push"></div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
</html>
You need to clear the styles in your footer. Add a clear:both to your footer css.
#footer {
clear: both;
height: 50px;
width: 100%;
}
I'm not sure where my code is messed up, but I'm trying to get my code to center. Here is what I have so far:
The problem that I am running into is that the page won't actually center. When it loads, the left margin is only a 10px. I'm sure there is a conflict somewhere, or I just borked something, and I've been searching for hours now, and have found nothing. Here is the following code:
body {
background-color: #12121D;
}
#contain {
display: block;
width: 1000px;
margin: 0 auto;
}
.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}
#header {
width: 1000px;
height: 230px;
}
#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
}
#banner {
text-align: right;
float: right;
z-index: -1;
}
#menu {
height: 80px;
margin: 0 auto;
}
#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
}
#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
}
And the html follows as:
<body>
<div id="contain">
<div id="header">
<div id="logo"> <img src="images/logo.png" alt="logo" />
<br />
<a class="version" href="JavaScript:changeSheets(1)">View Mobile<a/>
</div>
<div id="banner"><img src="images/banner.png" alt="banner"/></div>
</div>
<div id="menu">
<div class="pages">
<ul>
<li>Front Page</li>
<li>Reviews</li>
<li>Releases</li>
<li>About Me</li>
<li>Contact Info</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
<h1>Why am I doing this?</h1>
<br />
Insert text here
<h1>What is my goal?</h1>
Insert text here
</div>
</div>
</div>
</div>
</body>
Hi there is Your code:
http://jsfiddle.net/w9Zgc/2/
On my screen larger 1920px page is centered. I think that you have screen resolution close to 1024px width so than left margin left equal 10px is quite reasonable. Another advice is to reset padding and margin of body
body, html {
padding:0;
margin: 0;
}
One thing that will help you center a div is to specify the width, and then set the right & left margins to auto:
#main{
width: 850px;
margin-left: auto;
margin-right: auto;
}
Judging from your link at http://jsbin.com/itiwez/2/edit
I removed #charset "utf-8" in your CSS and it instantly worked (at least in your jsbin demo). Is your CSS file actually in UTF-8 format?
FYI: Why specify #charset "UTF-8"; in your CSS file?