I am trying to work out how I would go about creating a website that has 3 separate 'layers' (top navigation, then content, then footer) each with a different background image, that tiles to 100% width... but I want my content to be centred (as if the containing divs had margin: 0 auto applied).
So far I have been attempting to create divs just for the background images, and then absolutely positioning my content divs, but allowing them to automatically centre.
But of corse, I am taking elements out of the 'flow' of the document there, and so my background image divs end up stacking up against each other.
This is really tough to explain so hopefully this example will help:
http://jsfiddle.net/RB46S/
As you can see, I have my blue div, where the background stretches to 100% BUT I WANT MY NAVIGATION AND A LARGE IMAGE TO CENTRE HERE.
I have my body which is green, then a hp_content div, this would be where all my content would sit, centred, the problem here is you cannot apply a margin or a padding value (i've applied them to show them not working), only a position from the top of the parent/browser, which will lead to problems when making my site responsive I believe.
Then I have my red div which is the same as the top navigation (blue) div, It has a 100% border but I want the footer stuff (twitter feed, latest blog post, and contact details) to be centred here.
Hopefully some one understands what I am trying to achieve and knows how to correctly set a page like this up, any help is much appreciated!
Jon
Ok! Try structuring your HTML something like this:
<html>
<head></head>
<body class="index">
<section class="top">
<header class="content">
<nav>
<ul id="">
<li>link 1</li>
<li>link 2</li>
</ul>
</nav>
</header>
</section>
<section class="main">
<div class="content">
<h2>Whatever</h2>
<div class="something">This is something else</div>
</div>
</section>
<section class="footer">
<footer class="content">
Footer content
</footer>
</section>
</body>
</html>
Then some CSS like:
body, html{
width:100%;
}
body {
background: green;
}
body > section{
width:100%;
}
/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
display:block;
margin:0 auto;
width:400px;
}
section.top {
height: 510px;
background: blue;
}
/* if you want to individually change widths for each section, do something like this:*/
section.top .content{
width:100%;
}
/* or not! */
section.main {
height:200px;
}
section.footer {
height: 400px;
background: red;
}
Play around: http://jsfiddle.net/FC2Ea/
So for each site section, you'd have a container for all of that section's content with an easy-to-remember class name like ".content". You can set all the content to the same width, or each section's content to different widths depending what you're going for. Either way, the sections will occupy 100% of the browser's width. Good luck! :)
If you add another Div within your each main Div and use style as
<div style="Width: 80%; float:right; margin-right: 150px;">
I guess that might help to an extent ?
<div class="top_shade">
<div style="Width: 80%; float:right; margin-right: 150px;">
<header>
<nav>
<ul id="">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
</div>
</div>
Related
I'm building a non-responsive website with a header a footer that spans the full width of the browser window. Inside of the DIV's with a width of 100%, I nested divs with a width of 1000px that holds the header, navigation and footer contents.
My problem is that when viewing the site on a mobile device, the navigation and footer are being scaled downed to a size that is slightly smaller than the header and main area of the site.
What's strange is that the navigation and footer are affected while their is no issue with the header (that is built with the same approach).
How can I get everything to scale proportionally? The width of the entire site and all of the main divs is 1000px so why are they coming out in different sizes on mobile devices?
Here is the site's URL: http://www.test-site.co.nf
Here is a code sample:
HTML:
</head>
<body>
<div id="container">
<div id="header">
<div id="header-content">
<div id="logo">
<img src="img/ama-party-rentals-logo.png" height="98" width="500"/>
</div>
<div id="social-icons">
<img class="social" src="img/icons/facebook.png" height="40" width="40"/>
<img class="social" src="img/icons/googleplus.png" height="40" width="40"/>
</div>
</div>
</div>
<div id="nav-bar">
<div id="nav">
<ul id="ul-nav">
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Past Events</li>
<li>Contact Us</li>
<li>Francais</li>
</ul>
</div>
</div>
CSS:
#header {
background-color:#84B13F;
width:100%;
height:150px;
border-bottom-style:solid;
border-bottom-color:#648830;
border-bottom-width:5px;
}
#header-content
{
width:1000px;
height:150px;
text-align:center;
margin:auto;
background-image:url('img/top-banner.png');
}
#nav-bar
{
width:100%;
height:50px;
background-color:#84B13F;
border-bottom-style:solid;
border-bottom-color:#648830;
border-bottom-width:5px;
}
#nav
{
clear:both;
margin:auto;
height:50px;
width:1000px;
text-align:center;
}
Ok so I figured it out:
My problem was that I had a container DIV that is wrapping the whole site. In that container I had height set to 100% but no width defined. I set the min-width to 1020px and voila; no more broken, cutoff divs. my header and footer divs that are set to 100% width scale down but the scaling stops at 1020px in width for the entire site so all of my content displays the way I intended it to on mobiles and desktop. Thanks to all who responded!
I can see two issue in your site.
1) in css cass boxes-div have width 1000 and margin-left: 20px. So the actual 1000px + 20px total 1020px which is out of your layout.
2) your nav size is 1020px but your header is 1000px so when you are at mobile or a small device (max screen 999px) showing only 1000px which is little bit small then the full site.
Change the width of the header to 1020px that should solve the issue.
To be more specific
#header-content{
padding: 0px 10px;
/**your present css**/
}
Just update your #header-content add the padding and your site is fixed.
I am working with 960gs (in my local environment) and I insert this CSS code into my footer div:
## style.css
#footer{
background:url("images/footer.png") repeat-x scroll top transparent;
height: 130px;
width:100%;
overflow:hidden;
}
## footer.php
<div id="footer">
<div id="nav" class="container_12"> </div>
<div id="endfooter" class="container_12">
<div id="copyright" class="grid_3 alpha"> </div>
<div id="design" class="grid_3 omega"> </div>
</div> <!-- endfooter -->
</div> <!-- end footer -->
The problem is that the page does not show the footer div at full width with the background covering the entire div. It just shows the image at 960px. What I am doing wrong?
It took me awhile before I realized what you are trying to do. You are trying to get a background image to scale, correct? You can't do that, at least in CSS2. Background images do not scale. You can tile them (repeat) but you can't scale them. If you want the image to scale you have to use an <img> tag.
If you are willing to depend on CSS3 standards you can use background-size
#footer{
background:url("images/footer.png") repeat-x scroll top transparent;
background-size:100% 130px;
height: 130px;
width:100%;
overflow:hidden;
}
I can't vouch for background-size but w3schools does claim good browser support.
I have a sidebar
#sidebar {
float: left;
position: relative;
width: 200px;
padding: 20px;
}
and a main body:
#main {
margin: 0 20px 0 260px;
}
I have a page which has the sidebar, and the main consists of a set of filters that should stay static, and a table that is both too tall and too wide to fit in the page. I would like to have the table in its own scrolling div, such that the div always extends to the right and bottom of the page and re-sizes if the page re-sizes. So far I have this:
<div id="sidebar">
<div class="boxed" id="menu">
<h2 class="title">Main Links</h2>
<div class="content">
<ul>
<li>Main page</li>
</ul>
</div>
</div>
</div>
<div>
<div id="main">
<h2>Header</h2>
<div class="filters">
Filters go here
</div>
<div style="overflow: auto;">
<table><!-- very large table --></table>
</div>
</div>
</div>
This works perfectly, except for the case when the table is too tall to fit in the current page. What happens then is that the scrolling-div's bottom scroll bar is not on the page. There is a main vertical scrollbar on the page, which, if I scroll all the way down, reaches the div's horizontal scroll bar. I figure if the div never grows past the bottom of the page, I won't have this problem.
What's the best way to solve this issue? I tried doing this:
<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:0;">
However, this just made the div stretch to fit the entire page, including the left sidebar.
Your code sets the div to cover the entire page. Change it to reflect the width of your sidebar: (200px from the left and it looks like you want a 20px padding, so 220.)
<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:220px;">
As for the bottom scrollbar, I suggest setting a "width:" for your table element.
table {
width: 700px;
}
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.
Lalalal, I am going insane with the CSS...
I can't achieve the simplest layout here, something is breaking.
I want 2 columns next to each other:
[**** 300px ****][******** 500 px ********]
2nd column heading
Some text.. - 1st bullet point text
- 2nd bullet...
- 3rd...
-------------------------
I have these divs:
<div class="faq_item">
<div class="faq_link">
Video/screenshot coming soon..
</div>
<div>
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
<hr/>
</div>
And the CSS:
.faq_item strong {
display:block;
margin-bottom: 10px;
}
.faq_item span {
display: block;
}
.faq_item {
margin:0 0 30px 50px;
}
.faq_item div {
display:inline-block;
}
.faq_link {
width:300px;
}
div.faq_item hr {
width:500px;
float:right;
clear:left;
}
My problem is that 1st div inside sits on top of the 2nd div when the code is at it is now. Once I eliminate the longest "li" tags, the whole div aligns properly (2 divs inside are next to each other). I don't understand why don't "li" wraps as it should normally and with 2 divs as inline-block they should be next to each other and not stacked vertically.
Please advise. Thank you!
Try putting your content inside a table.
It Worked for me.
Here's resource with perfect 2column CSS layout (and bunch others) Generally, you have to get floating right
Here you go:
<style type="text/css">
.wrapper {
width:800px;
margin:0;
padding:0;
}
.faq-link {
width:300px;
background:#DDD;
}
.faq-list {
width:500px;
}
.left {
float:left;
}
.right {
float:right;
}
</style>
<div class="wrapper">
<div class="left faq-link">
Video/screenshot coming soon..
</div>
<div class="right faq-list">
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
</div>
There are a couple of traps here. Padding will screw everything up, so you have to account for it in the padded class (i.e. padding:0 10px; adds a total of 20 pixels to the width, so if .faq-link had padding:0 10px; declared, the width would be 280px). Also, anything placed below these floated columns will need the clear:both css property.
Another method would be to drop your 2 divs in a container, then use margin to position the text where needed.
Example:
<div class="faq_container">
<div class="faq_link">
...
</div>
<div class="faq_item">
...
</div>
</div>
with css:
.faq_container{
width:800px;
}
.faq_item{
width:800px;
margin: 0 0 30px 350px;
}
.faq_link {
width:300px;
float: left;
}
This simply means the content div ignores the link div to the left, with the added bonus, that if you need something else on the right hand side you can simply float it there and edit the margins of the conent div to allow it to fit.
I created a fiddle for this - http://jsfiddle.net/vJYxt/
Let me know if this works for you.