I got a quick question and hope the answer is quick too. How do I make my background to repeat itself throughout the page? I have tried css repeat, it does not work for some reason.
#main_container{
background:url(../images/cb.jpg) top left repeat;
margin:0 auto;
padding:100px 0 150px 0;
z-index:9999;
body{
background-color:#000;
color:#fff;
padding:0 0 0 0;
margin:0 0 0 0;
width:100%;
display:table;
overflow-x:hidden;
position:relative;
}
The problem you see is because your #main-container doesnt fill the full page, you need to extend it for the full height of the page. Why are you using
body { display: table }
in your css? I'd remove that since it could confuse some browsers and shouldn't make any sense...
An easy workaround would be to put the background image in the body tag instead if that is an option for you?
Otherwise you could always add css to your #main-container:
#main_container {
position: absolute;
top: 100px;
bottom: 0;
margin: 0 auto;
}
and keep your body { position: relative; }
You could use background-repeat:
#main_container{
...
'background-repeat:repeat;'
}
It should work on your browser if your not using netscape or smthn like that ^^
Related
I currently have the following layout for my webpage:
<div class="content-body">
<div class="left-content-bar siteborder"></div>
<div class="inner-content">
... some content
</div>
<div class="right-content-bar siteborder"></div>
</div>
I have made a repeating background-image for left and right content bar. I want the bar to always go from the top of the page to the end of the page. My current problem is, that the bars only take as much space as the inner-content (the bars end at the bottom end of the content)
I found a solution, so that the bars will always go to the bottom, but this includes a min-height which I don't like, because it will have a lot of whitespace with a small screen resolution.
See this css for my current solution (The height will always be minimum 1000px with this, and this shouldn't be):
.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
float:left;
position:relative;
width: 10px;
background-image: url(/default/images/content-left.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.right-content-bar{
float:left;
position:relative;
width: 14px;
background-image: url(/default/images/content-right.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}
I hope that anyone can give me a better solution than my current
Have you tried to use inline-block instead of float ?
Using float was originally made to display text around a picture, not to display divs the way you like (move away from floats if you can).
Anyway, using display:inline-block; you can put the 3 divs beside each other, and have the left and right column reach the bottom.
.content-body{
height:1000px;
}
.siteborder{
height:100%;
width:100px;
display:inline-block;
vertical-align:top;
}
.inner-content{
width:150px;
display:inline-block;
vertical-align:top;
}
Live example : http://jsfiddle.net/8vQrU/
I would approach this a bit differently. With the same html as your sample, my css would look something like this:
.left-content-bar{
position:fixed;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:url(/default/images/content-left.png) repeat-y;
}
.right-content-bar{
position:fixed;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:url(/default/images/content-right.png) repeat-y;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
I positioned the sidebars fixed. By setting both the bottom and the top property to 0 they stretch up to the height of the viewport. By then adding some padding to the actual content wrapper I make sure the sidebars and the content don't overlap.
I set up a small example to demonstrate: http://jsfiddle.net/4Swvu/1/
Feel free to ask if you want some more explanation.
Edit:
If you want the sidebars on your content, rather then on you viewport, you could slightly adapt the code. The technique also works with position absolute so you could make your css look something like this:
.content-body {
position: relative;
width: 400px;
margin: 0 auto;
}
.left-content-bar{
position:absolute;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:#cff;
}
.right-content-bar{
position:absolute;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:#cff;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
and the fiddle: http://jsfiddle.net/4Swvu/5/
Here's my page: http://bad-sf.com/stemtest/about.html
Notice that scrolling is still an option even though the content is small enough to not require scrolling. Could it have to do with my css? (below):
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
* {
margin:0;
padding:0;
outline: none;
}
html, body {
height:100%;
font-family: '_.regular';
font-size: 13px;
outline: none;
}
#wrap {
min-height:100%;
width:800px;
margin: 2% auto;
}
#main {
overflow:auto;
padding-bottom: 30px;
}
#smm {
width: 400px;
height: 200px;
float:left;
}
#footer {
position: relative;
margin-top: 0px;
height: 35px;
clear:both;
font-family: '_.regular';
}
THANKS! I'm still learning html and css so any input you have would be really appreciated - Danny
This is caused by #wrap, being 104% height. Note these rules:
body {
height: 100%;
}
#wrap {
min-height: 100%;
margin: 2% auto;
}
So your #wrap is actually 100% height plus 2% margin on top plus 2% margin on bottom.
There are several ways of countering this.
You can remove the height from body and optionally min-height from #wrap, as it's no use anymore in this case.
You can change margin on #wrap to margin: 0 auto; (this will inevitably raise the content though).
There are probably a few other possibilities, but seeing as the unsatisfactory answers are voted down, I don't really feel compelled towards thinking about more sublime solutions.
Take away height:100%; from html, body { }. Why did you need it there even anyway?
The reason why the scrollbar is always appearing is because the #wrap DIV is also set to 100% height and on top of that, a margin of 2%. This forces your body to be 2% more than 100%.
You can remove the 2% margin from #wrap but if you don't want do, removing the height: 100%; from html, body { } should do the trick.
I have a jquery slider on my page which is centered when the page is wide enough to fit it yet aligns with the left edge of the window and shifts when the window is smaller. Below is my CSS - Am I missing something?
#billboardWrapper {height:600px;width:100%;margin:-170px 0 0 0px; position:relative; overflow:hidden; /*border-width: 0 20px 20px 20px; border-style:solid; border-color: {{settings.billboard_color}}; /* can't use border shorthand. IE9 has a rendering bug, see more notes in the ie8.css file */ }
#billboard {height:600px;width:1000px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}
#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }
.slide {height:600px;width:1000px;display:none; }
.slide img {height:600px; width:100%; background-position: 50% 0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:50px;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:right;}
Perhaps it is centered by chance on the larger screen.
Centering usually works when you have:
width: (any-FIXED-WIDTH-value); - Good spot Bram Vanroy ;)
margin: auto;
which I cannot see...
You should really add your HTML too, and if possible start a jsfiddle and include the link. This way other users can play with it and solve it for you, and we can understand your code better too.
Hope that helps
I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.
I have some divs which i positioned with
position:absolute;
width:100px;
margin:-20px 420px;
same like this another one also...
the problem is it is looking fine in chrome and firefox ,but in ie7 those divs are being moved away.
how to set it to look perfect in all browsers??thanks
edited:
.button {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/portfolio.gif) no-repeat 0 -49px;
margin:-50px 420px;
}
.button a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/portfolio.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button a:hover {
background-position: 0 50px;
}
.button1 {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/design-brief.gif) no-repeat 0 -49px;
margin:-20px 420px;
}
.button1 a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/design-brief.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button1 a:hover {
background-position: 0 50px;
}
these two buttons,button and button1 are inside this div along with some text
.cont
{
position:relative;
width:1400px;
height:500px;
}
I guess you have to set a top:0px and a left:0px. You can not use position:absolute without setting a real position.
Or: You can try position:static or position:relative, I'm not sure what you want to do.
Don't use margin to position your buttons. If you have made it position:absolute; use top: 0px; left: 0px; (obviously setting them to the desired position). As you have set the parent div .cont as position:relative; the buttons will be set within this div as long as they are there in the DOM. So if you were to set them top: 0px; left: 0px; the buttons would sit in the top left hand corner of the div.
Much more reliable than playing with negative margins.
Agree with Matt Asbury... If u r using positions then there is no use of margins. and one more thing, u r using position absolute for buttons. in that case don't use position for its child unless and until u want to position its child as well. If u can provide html then it will be easy to understand the code and help.