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.
Related
I have an image which has to take full width. And I need to put a text and a button on top of it in a specific place. I looked over many topics but can not figure out how to make it fully responsive.
<div class"wrapper">
<div class="image-box">
<img src="x">
</div>
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
so this is the layout but it can be changed if it gets me to the point I need.
If I understand correctly the parent div called wrapper should be set to position: relative and all the child divs to position: absolute, after that you just position all these child elements with top, left, right, bottom. So after testing this this is what I get. Since the image is always 100% of the viewport it gets smaller and smaller by height and width because of its aspect ratio. The text and button on the image just stays at a fixed place and after some point it goes out of the image.
Whats my mistake?
P.S found a lot of topics but still, I am messing something up. Thank you for your insights and help.
The image tag is used to create a separate element on the page. This is not really what you want... you want the content-box to have a background, right? Rather than using the image tag, use CSS to apply a background image.
here is a jsfiddle
.content-box {
/* set width and height to match your image */
/* if these are omitted, it will only be as big as your content, */
/* and only show that much of your image */
width: 200px;
height: 300px;
/* obviously, replace this with your image */
background:url('http://placecage.com/200/300');
}
<div class"wrapper">
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
I think this is what you want. Also, this is a good occasion to use those HTML5 tags figure
and figcaption, but basically all you need is this kind of structure:
<div class="wrapper">
<img />
<div class="content-box">
<!-- Your content here -->
</div>
</div>
So what is happening here is that your wrapper's dimensions are fixed by the image, and then you position absolutely your content-box or the elements within. If you do not want to position them at the very top or bottom of your image, just use percentage values when positionning:
top: 10%;
figure {
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figure figcaption {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
background: rgba(255,255,255,.7);
padding: 10px;
}
<figure>
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<figcaption>
<h1>The image title</h1>
<p>This is the image caption</p>
</figcaption>
</figure>
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 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>
I've been fiddling with asp.net mvc 3 with the new razor view engine.
My goal is to have a fixed-fluid 2 column layout with a jqGrid in each column. I'm having no luck though! As soon as I add a grid to the right column its header goes huge. I don't think its jqGrids fault because if i remove the styles both grids display as expected.
I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.
Anyone have any suggestions to get this to work or other fixed-fluid css i could experiment with (I've tried a bunch of templates from online with no luck)?
Code from the template file:
... <style type="text/css">
#left { float: left; width: 400px;}
#content { margin-left: 400px;}
</style>
</head>
<body>
<div>
<div id="left">
#RenderSection("SPTreeGrid")
</div>
<div id="content">
#RenderSection("ClientPickerGrid")
</div>
</div>
</body>
Update:
My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.
It was an issue with my css (I still dont know why) but I ended up using the following layout which works (rail is the left column):
#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px;
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}
cshtml:
<div id="container">
<div id="content">
#RenderSection("ReportGrid")
</div>
<div id="rail">
#RenderSection("SPTreeGrid")
#RenderSection("ClientPickerGrid")
</div>
</div>
Although Oleg's suggestion does fix the height of the title, it does not constitute a solution -- at least not if you want the right div to be liquid and expand to the width of the browser window. The problem is that in order to use float:left on the right grid container, you must specify a width. Floated elements must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated to something small (1px) and set an explicit height for the content of that div.
I have created a jsFiddle example that illustrates the problem and the work-around.
You should use
<div style="float:left">
<table id="list1"><tr><td/></tr></table>
<div id="pager1"></div>
</div>
<div style="float:left">
<table id="list2"><tr><td/></tr></table>
<div id="pager2"></div>
</div>
as the template for the grids. If you case it should be
<style type="text/css">
#left { float: left; }
#content { float: left; }
</style>
You should not forget to include "clear:left" in the style of the next div which should be after the grid if you want to brake the floating.
See demo with two grids here
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.