The content boxes on each of my pages uses the same CSS, however on one page there is a scroll bar in the content box, and the footer does not sit properly.
This is because I use overflow:auto, but when I remove overflow:auto, the content box disappears completely. (The content itself still remains)
I'm not sure what the problem is, since they all use the same CSS and the other pages work fine.
This is the CSS for my content box
#contentProducts {
background:rgba(255,255,255,0.6);
width:80%;
min-height:100%;
overflow:auto;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
border-radius:20px;
box-shadow: 4px 4px 10px black;
}
the content on the page is just 4 boxes with pictures, the css for those is
#clothingProduct {
padding-top:40px;
position:relative;
background-position:center;
background-size:cover;
text-align:center;
float:right;
width:300px;
height:140px;
margin-right:12%;
margin-top:60px;
margin-bottom:30px;
}
and this is the CSS for my footer
#footer {
float:left;
bottom:0;
position:static;
background:rgba(255,255,255,0.6);
width:100%;
height:20px;
color:black;
margin:auto;
overflow: hidden;
}
Basically, it should look like this (and does on other pages)
but on the product page, it looks like this
I have a workaround fix that involves just setting the height of the box in pixels, but that still doesn't fix the footer sitting in the wrong place.
If you need any more info just let me know, any help would be greatly appreciated.
Normally when I have a problem along these lines it has to do with a typo/mistake in the HTML. Not closing a tag properly or something along those lines, but it is hard to tell without the relevant HTML.
Related
This is my general wrap:
.wrapper{
width:80%;
height:100%;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Inside from this wrap, I have two wrappers more, navigation and entries.
.wrapped-nav{
width:30%;
height:100%;
background-color:#333;
float:left;
padding-top:80px;
text-align:center;
}
.wrapped-ent{
width:70%;
height:100%;
background-color:#666;
float:left;
}
But when my content in the nav section it's outside and the scroll show up in the navigator, my wrap not wraps up my content.
I add this picture from the problem:
Edit: https://jsfiddle.net/qjLthkg2/
Because you're using position:absolute; for the container.
absolute items are taken out of the normal page flow. They are like a ghost and won't expand based on the contents of it, so the inner content just flows down.
You need to rethink your styling.
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
I'm trying to implement a div, that looks like a tall and narrow page, like a notebook paper.
I have my content in <div id='centerframe'/> and I thought that a good solution was to use an absolute positioned div for the "paper".
So I wrote the css rules as follows:
div#center_background
{
z-index:-1;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
background:rgba(255,255,255,0.9);
}
However, when I add a background image to body, it disappears under the background. I tried setting a positive z-index, than it renders on top of everything in the page, like centerframe, topbar etc. See the picture:
A solution could be setting z-index for all the elements, which I really don't want to do, since I want to use position:absolute;'s as little as possible.
So how can I define this kind of background div without changing other elements' positions and z-indices?
I made a fiddle, but it runs as expected. The strange thing in my real code is, when I load the page, the center_background div appears on top of background of body for a glance, then it disappears.
I don't change anything with JavaScript.
I came across this in my own code a few days back, and setting containing elements to position: relative solved the issue.
When i see your picture, i think that absolute positioning is unnecessary.
You could use fixed for the header, and let main content slides under it :
http://jsfiddle.net/jgYXr/
body {
background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
position:fixed;
top:0;
left:0;
right:0;
line-height:3em;
background:tomato;
box-shadow:0 0 1em 0.5em;
text-align:right;
}
a {
display:inline-block;
margin:0 0.5em;
padding:0 0.25em;
}
main {
width:80%;
background:rgba(255, 255, 255, 0.75);
box-shadow:0 0 1em 0.3em;
margin:2em auto;
min-height:800px;
}
<nav>
Nav link
Nav link
Nav link
</nav>
<main>
</main>
Search for position: fixed and how to size an element in absolute or fixed via coordinates. See as well to set height of 1 element that has only 1 line of text.
put the z-index value in high range
div#center_background
{
z-index:100;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
}
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.
I have a div within a div, and when viewing the web page in IE6, it does not display spacing between the bottom of div class="video-tour" and the bottom of div class="content-body"
Here is what it looks like in IE6: http://i42.tinypic.com/20zs7s7.png
Here is what it looks like displaying correctly in Safari: http://i44.tinypic.com/2h69de1.png
The css for .video-tour <-- there are multiple videos that are split up into different boxes as you'll see, they have a width of 31%
.video-tour {
float:left;
width:31%;
border:1px solid #fdbe2f;
background-color:#ffc;
text-align:center;
padding:3px;
overflow:auto;
margin:6px;
}
.video-tour img {
border:1px solid #fdbe2f;
padding:3px;
}
CSS for .content-body which .video-tour is within
.content-body {
padding:10px 15px;
font-size:.8em;
font-family:arial;
overflow:auto;
}
Any help as to why there is no spacing at the bottom in IE6 and spacing in other browsers would be helpful.
Try adding a div at the bottom after video-tour that has a style of clear: both.
I believe its because you need to clear the floats.
You could try place a
<div style="width: 100%; overflow: hidden;"><!-- floats go here --></div>
Around the entire content with video-tour's.