This is a common request. However, I'm going out of my mind.
<style type="text/css">
html, body { height: 100%; margin:0px; padding:0px; }
#content { margin-left: 50%; margin-right: 50%; width:900px; }
</style>
...
<body style="min-height:100%; height:100%; position:relative;">
<header style="min-height:200px;">
<div style="height:50px; background:url(http://www.mydomain.com/images/bg.gif) repeat-x;"> </div>
<div style="height:300px; background:url(http://www.mydomain.com/images/bg2.jpg) repeat;">
<div class="content" style="height:300px; background:url(http://www.mydomain.com/images/masthead-back.jpg) no-repeat;">
<img alt="Hello" src="http://www.mydomain.com/images/logo.png" />
Welcome.
</div>
</div>
<div id="nav">
<ul class="navs">
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
</header>
<article class="content" style="padding-bottom:60px;">
This is the main content
</article>
<footer style="position:absolute; bottom:0px; width:100%; height:60px; background-color:black;">
<div class="content">
<a href='#'>Privacy</a> | <a href='#'>Terms of use</a>
</div>
</footer>
</body>
I want my header, artcle, and footer items to be centered within the body. But, I want the content within the header, article, and footer to be left-aligned. What am I doing wrong, everything is currently just left-aligned. However, its not centered within the screen.
You need a wrapper DIV with this CSS:
#wrapper { width:800px; margin: 0 auto; }
Working DEMO
Try:
div.content //or nav or just plain div
{
margin-left: auto; //centers the DIVs
margin-right:auto;
text-align: left;
}
You need to add in body
width:960px; margin: 0 auto;
you need to set article, header, and footer display style to block in your css to accomodate older browsers
also why not use <nav/> instead of <div id="nav">?
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
<nav>
<ul class="navs">
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</nav>
Related
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
I would like to position the icons where the red square is. But I have tried the position: relative and position absolute but I dont understand why its not working.
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="<?php bloginfo('template_url'); ?>/img/icons/catering150.png">
<h4>Catering</h4>
The Menu
<br>
Today's Menu
<br>
Gallery
<br>
Festivities
<br>
</div>
</div>
.wrap {
position:relative;
width: 100%;
height: 100%;
background-color: #e9e9e9;}
.blockico {
position:absolute;
top:-50%;}
Not sure why this isn't working for you; I plugged it into a Fiddle and (while it doesn't behave the way I think you'd want) it seems to move the image up just fine. Here's a fiddle of a slightly different approach (not using position attributes; just applying a negative top margin) that might get you closer.
https://jsfiddle.net/35aohm3y/
.wrap {
margin-top:50px; /* push the wrap down a bit. You might not need this */
width: 100%;
height: 100%;
background-color: #e9e9e9;}
.blockico {
background:#666; /* added just for demonstration purposes */
margin-top:-50px; /* and push the image up a bit */
}
You can use a negative margin to pull the image up and out.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.options ul,
.options li {
margin: 0;
padding: 0;
list-style: none;
}
.options>div {
margin: 50px 0;
/* for demo */
}
.options .wrap {
padding: 1rem;
text-align: center;
background-color: #e9e9e9;
}
.blockico {
margin-top: -50px;
}
<div class="container-fluid">
<div class="row options">
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>Restaurant</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>City Club & Garden</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="wrap">
<img class="blockico" src="http://placehold.it/100x100/fc0">
<h4>Catering</h4>
<ul>
<li>The Menu</li>
<li>Today's Menu</li>
<li>Gallery</li>
<li>Festivities</li>
</ul>
</div>
</div>
</div>
</div>
update css blockico
.blockico {
position:absolute;
transform: translate(-50%,-50%);
left: 50%;
}
I have a footer that has 3 columns of content. Currently the css is using float:left. I have tried the following but I just cant get it to align vertical and horizontal.
display block
display block-inline
margin: 0 auto
HTML:
<div id="footer">
<div class="column">
<h3>Information</h3>
<ul>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
CSS:
#footer .column {
float:left;
width: 25%;
min-height: 100px;
}
You should use container div with position absolute and #footer should have position relative.
Here is the solution code
http://jsfiddle.net/7Pcag/1/
or more simpler solution http://jsfiddle.net/7Pcag/5/
.column ul li{
float:left;
width: 25%;
min-height: 100px;
}
the above will align then horizontally if that's what your question is asking
edit
<div class="footer" id="footer">
<div class="column">
<h3>Information</h3>
<ul>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
.footer.column{
float:left;
width: 25%;
min-height: 100px;
}
<div class="footer">
<div class="columns">
<div class="column">
Information
<ul>
<li>One</li>
<li>One</li>
<li>One</li>
</ul>
</div>
<div class="column">
Information
<ul>
<li>Two</li>
<li>Two</li>
<li>Two</li>
</ul>
</div>
<div class="column">
Information
<ul>
<li>Three</li>
<li>Three</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
<style>
.footer
{
width:100%;
background-color:Yellow;
}
.footer .columns
{
text-align:center;
}
.column
{
text-align:center;
display:inline;
width: 150px;
}
</style>
I believe you already have the correct solution, so you might be doing something else wrong. I adjusted your min-height to 150px and things work fine here: http://jsfiddle.net/xkdk9/1/
I'm trying to implement a design I created in photoshop. I want to use the 16 column 960 GS, but the problem is that I only want the content bound by the 960 width.
I have backgrounds for 4 seperate areas. Header, the content area, a top footer that is links, and the bottom footer with the copyright in it.
The top half of the page works fine. The backgrounds show, the text is in the right place. The problem comes with the footer. If the data in the content area expands beyond the minimum height for the content area, the links in the top footer are pushed down, but the backgrounds remain stationary. I suspect this is because the content is all floating and doesn't push the background divs when the content expands.
How do I have a background that is full width while using 960 gs and make it so the footer slides down when the content expands?
Here's the basic wrapper for my site. I realize this may not work for what I want to do.
<body>
<div id="header">
<div class="container_16">
</div>
</div>
<div id="content">
<div class="container_16">
</div>
</div>
<div id="footer-top">
<div class="container_16">
</div>
</div>
<div id="copyright-footer">
<div class="container_16">
</div>
</div>
</body>
the 960 GS css is here: http://www.spry-soft.com/grids/grid.css?column_width=40&column_amount=16&gutter_width=20
My CSS - I've ommited the elements that have to do with specific content, as this is just about getting the layout right:
html, body
{
height: 100%;
}
body
{
color: #f7f3e7;
margin:0;
padding:0;
background-color: #f7f3e7;
line-height: 1.2em;
font-size: 0.8em;
font-family: Verdana, Arial, Sans-Serif;
}
#header
{
height: 100px;
margin:0;
padding:0;
background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x;
}
#content
{
min-height: 550px;
/*min-height: 546px;*/
margin:0;
padding:0;
background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}
#top-footer
{
font-size: .8em;
min-height: 188px;
margin:0;
padding: 6px 0 6px 0;
background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}
#copyright-footer
{
height: 32px;
vertical-align: middle;
font-size: 0.8em;
line-height: 32px;
margin:0;
padding:0;
background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}
header, content, footer-top, and copyright-footer all have the background set and height or minimumheight.
Really what I want is the header set at 100px tall. The copyright footer is a set 42px tall. The top footer is set at 200 px tall. I want the bottom of the copyright footer to always rest on the bottom of the page if the content area is short enough that the footer wouldn't touch the bottom of the page. If the content area expands, I want the footer to slide down. I want the backgrounds for all sections to be 100% - that is, however wide the browser is, but I want my content bound by the 960 grid system.
Any suggestions?
EDIT: added the CSS as requested
I would create a div called 'content' that would contain the other divs and make the other divs' position relative. The 'content' div would have the appropriate width for what you want to do. Also, for each column you can use the 'float' css property.
Just wrap the container classes with <div> tags and style those. Remember to add .clear divs after every "row" in the containers (even if you have only one "row"), or it will not work properly.
<div id="container">
<div class="container_16">
<div class="grid_16"><h1>Hello, World!</h1></div>
<div class="clear"></div> <!-- Important! -->
</div>
</div>
I figured it out. I needed to make my footer float.
The Markup:
<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0">
<div id="page-wrapper">
<div id="header" class="container_full">
<div class="container_16">
<div id="logo" class="grid_4 alpha"><img src="content/images/logo-beta.png" /></div>
<div class="grid_10 push_0">
<ul id="navigation" class="clearfix-header">
<li><a class="header-link" href="#">About</a>
<span class="sub-navigation">
<a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li>
</span>
</li>
<li><a class="header-link" href="#">Account</a>
<span class="sub-navigation">
<a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div id="content" class="container_full">
<div class="container_16">
<div id="page-content" class="grid_16">Page Content</div>
</div>
</div>
<div id="footer">
<div id="top-footer">
<div class="container_16">
<div class="grid_3">
<h4>Navigation</h4>
<ul>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
</ul>
</div>
<div class="grid_3">
<h4>Navigation</h4>
<ul>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
</ul>
</div>
<div class="grid_7">
Big content area
</div>
<div class="grid_3">
<h4>Boring Stuff</h4>
<ul>
<li>Terms of Use</li>
<li>Privacy Policy</li>
<li>Legal Mumbo-jumbo</li>
</ul>
</div>
</div>
</div>
<div id="copyright-footer">
<div class="container_16">
<div class="grid_16">
Copyright statement
</div>
</div>
</div>
</div>
</div>
</body>
The CSS:
#footer
{
width:100%;
float: left;
height: 232px;
position: relative;
clear:both;
}
#top-footer
{
width:100%;
font-size: .8em;
height: 200px;
margin:0;
padding: 6px 0 6px 0;
background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}
#copyright-footer
{
width:100%;
height: 32px;
vertical-align: middle;
font-size: 0.8em;
line-height: 32px;
margin:0;
padding:0;
background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}