This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
Related
I have a three-column css layout with a header on top. On the left there will be the navigation, on the right a small column, with some advertisement maybe or so and in the middle there will be the content.
I would like DIVs left, right and middle go to the bottom of the page (so i guess i need height:100%) and i want the header have a fixed height of 60px.
I tried several solutions, which i found on the internet but if give everyone a height of 100% (so that the background of "right" and "left" to the bottom of the page) I always have to scroll a bit. I m pretty sure, that is because of the header having a absolute height value. Even though i put everything in a container which has the height of 100%.
My html looks like that:
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="left">
<ul id = "nav">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
<div id="right"><p>Advertisement 1 </p><p>Advertisment 2</p></div>
<div id="middle">
some content
</div>
</div>
and the corresponding CSS to it is:
html,body{
height:100%;
margin:0;
padding:0;
line-height: 1.5em;
}
#container{
position:relative;
width: 850px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
height:100%;
}
#header{
width: 850px;
background: #EAEAEA;
height: 90px; /*Height of top section*/
text-align: center;
}
#left {
width: 200px;
float:left;
background: #CCFFFF;
height:100%
}
#middle{
width: 490px;
margin-left:200px;
padding-left:10px;
height:100%;
}
#right {
width: 150px;
float: right;
background: #e0eeee;
height:100%;
}
#left ul {
padding: 0;
list-style: none;
width: 200px;
}
Thank u in advance.
Change position: relative; to position: absolute; within your #container id. At this point you may have your left, middle, and right behind the header. If so you will add top: 90px; making sure that the value after top matches the height of your header div.
I am trying to put a ribbon that is as wide as my content but 'spill' the sides over to the body. Example here. This is the HTML I have so far. There are three images: the middle part of the ribbon and then two sides. I put the middle part in the h1 and now I am trying to line up the sides.
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
My shot at the CSS. I've been experimenting and this does what I need it to but I am sure there are a million better solutions. I want to know what the best practice would be for this since I am sure I'm kind of breaking a lot of rules here.
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
There definitely are a million ways to accomplish this. The best approach will depend greatly on how your site progresses.
What it comes down to is relative and absolute positioning.
One way to accomplish this is to structure your site something like so:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
That's very loose frameworking for a typical site. The CSS would be something like so:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
Here's the example http://jsfiddle.net/NZ8EN/
This is all very loose but hopefully gives you an idea of the direction to take.
There are definitely other ways to solve this as well.
Try putting the #right and #left divs inside the #content div, give #content a position of relative (so that it becomes the parent reference for the children #left and #right) and position absolutely the #left and #right:
HTML:
<body>
<div id="container">
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
CSS:
#left {
position: absolute;
top: 0;
left: -59px;
}
#right {
position: absolute;
top: 0;
right: 59px;
}
Unless you're supporting IE7, I'd probably go with something like this:
http://jsfiddle.net/G5jkt/
This is the CSS you'd need to add:
h1 {
position: relative;
}
h1:before {
content: '';
height: 100%;
left: -59px;
top: 0;
position: absolute;
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
}
h1:after {
content: '';
width: 59px;
height: 100%;
background-image: url(side.jpg);
background-repeat: no-repeat;
right: -59px;
top: 0;
position: absolute;
}
And you've have to change your HTML like so:
<div id="container">
<div id="content">
<header>
<h1>Hello Here</h1>
</header>
<div>
</div>
Using :before and :after helps remove design specific HTML from the document and gets the job done.
The key is using absolute positioning. In your example, you have your ribbon ends at the top of the page -- they have no relationship with the H1 you're trying to base their position off of.
The easiest way to do this would be dropping the HTML responsible for this ribbon ends within the H1. This, however, is not semantically the best. You could add a wrapper around the ribbon ends AND the H1, but that's extra markup.
By using :after and :before, you're using the H1 as the parent since it has a position of relative, and absolutely positioning the pseudo :before and :after elements relative to that H1. This is ideal since the pseudo elements can now inherit things like the height, background color, etc.
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I need to design a page with border images on each side. I need the page to fit on 1280x1024 and 1024x768 resolutions. Is it possible to have a fixed size for the center div and crop the border images in the lower resolution ?
1280x1024 : border-200px center-840px border-200px
1024x768 : border-72px center-840px border-72px
I've made two images with 200px X 5px. I've tried to use the float property without success.
So I've made it this way so far, it works in 1280x1024 but not in 1024x768 (it's too wide).
HTML :
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS :
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
Thank you!
since the center element if fixed-width, this should be easy. the side border should be placed as 'background' in the body instead of having its own div.
correct me if im wrong, based on what i understand here, you want the side border to be cut/crop by 1024 resolution instead of shrink. how about you make a single image with 1280 width, place both side border images in it accordingly, left and right, leave the center area empty. save this as a single image (up to you if you want a transparent background), then do the followings.
<style type="text/css">
body { /* can also use your own div */
background:url(path_to_the_single_image) repeat-y top center;
}
#center {
width:840px;
margin:0 auto; /* centered the div */
background:green;
}
</style>
<body>
<div id="center">center content</div>
</body>
thats it! now you should have your fixed width element in the center, and your side-borders in the background. if you load it in 1280, you should see the full border, while if you resize down to 1024, your centered element should remain there, and your side border just now should cropped out by the browser.
let me know if this is what you looking for.. :)
if I understand correctly - what you're looking for is a bit difficult to achieve without javascript.
You can consider a bit different approach that is: can the sidebars (graphic borders) slide under the center content?
example:
<style type="text/css">
#wrapper { position: relative; }
#right, #left { width: 200px; position: absolute; background: gray; }
#right { right: 0; }
#left { left: 0; }
#center { width: 840px; margin: 0 auto; background: green; position: relative; }
</style>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</div>
</body>