I'm working on making a simple photography website for someone, and I'm stuck trying to figure out the horizontal positioning. I have the margins set to auto on left/right, and the position set on relative. It should go in the middle, shouldn't it?
I have a picture slideshow that I want in the middle, and then there's the navigation that I have on the right side. The nav is in the right place, but the slideshow is stuck overlapping with the navigation and I can't figure out how to get it to center horizontally.
Here's the nav:
#nav {
position: fixed;
top: 22%;
right: 1%;
text-align: center;
}
The rogue slider:
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:400px;
width:600px;
margin: 100px auto 0;
overflow:visible;
position:relative;
}
The slider is contained in the wrapper div:
.wrapper {
height: 100%;
width: 55%;
margin-right: auto;
margin-left: auto;
background: #eaeaea;
padding-bottom: 150px;
}
What can be done to get this right?
If you need more info, you can take a look at the page and source code:
bwphotog.com
The child .container element is wider than its parent, .wrapper. If you remove the 960px width of the container it will be centralized.
Change your .container class to this
.container {
margin: 0 auto;
overflow: hidden;
/* width: 960px; */
}
Related
I have a parent div with two child div(header and body), I want to set header position fixed on top and only body should scroll.
HTML
<div class="box">
<div class="header">Header</div>
<div class="body">Body</div>
CSS
.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: absolute;
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}
I found the header div overlaps parent div's scroll bar. I can't set parent div position as relative because I want header position fixed. I can't set header position as 'fixed' because this content avilable somewhere middle of the page.
How can I avoid absolute positioned child not overlaps parent's scroll bar?
Find jsfiddle: http://jsfiddle.net/T43eV/1/
The overflow property should be set on the .body, not .box, as such : http://jsfiddle.net/T43eV/8/
Does this help?
.box { position:relative; }
EDIT: There isn't any need to use absolute anyway, remove that and put overflow:auto on .body.
jsFiddle
.box {
height: 300px;
border: 1px solid #333;
}
.header {
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 200px;
background: #999;
width:100%;
overflow: auto;
}
EDIT: I don't think you can do this consistently across platforms. You could kind of do it by setting your right property on .header to be as large at the scrollbar, but the size of the scrollbar is bound to the operating system and isn't a single size.
You could look into an iframe as that will create a page within your page, scrollbar and all.
If it helps set z-index:-1 in .header and the header will not overlap the scroll bar.
Here is the working fiddle:
http://jsfiddle.net/T43eV/28/
One way of doing it would be by using a sticky position. This will keep the header inside the scrollable div but won't make it overlap the scroll (or get behind the scroll if you set a lower z-index)
.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: sticky;
top:0;
height: 100px;
margin-bottom:-100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}
However this is not supported by internet explorer
So I have two elements floated next to each other and one has a set width and the other needs to be a percentage so that when the window/browser is resized the content will flow with it. However I am having trouble keeping the content floated next to each other when the window size is smaller than certain ratio.
Here is my css code:
.box {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
}
p {
width: 95%;
float: left;
margin: 0;
padding: 0;
}
Is there a way around this? Here is my fiddle so you can see what is going on.
My example
If you make the size smaller you will see the P tag drops down below the box.
If the box is a fixed width you can use the following styles:
.item {
padding-left: 60px;
}
.box {
width: 50px;
height: 50px;
float: left;
margin-left: -60px;
background-color: blue;
}
p {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
http://jsfiddle.net/3QhzS/1/
otherwise you will need to add a little bit of jquery to it to add styles on the fly:
http://jsfiddle.net/3QhzS/6/
If you don't know the width of the div.box (as you stated in comments) then you can use position:relative to the p tag which will do the trick.
p{
position:relative;
/* anchoring top, left and right sides */
top:0px;
right:0px;
left:0px;
margin:0;
padding:0;
}
Working Fiddle
Working Fiddle(with two div's)
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav
This code works for IE7 and 8 but not for 6. How can I get it to work for 6. Or is there a better way to do it?
#contentLoading {
width:90px;
height: 90px;
position: fixed;
top: 50%;
left: 50%;
background:url(_img/ajax-loader4.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
border:2px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}
Did you know that IE6 does not support position: fixed;? It will be rendered as a static element.
I usually use something like:
#contentLoading {
width: 90px;
margin-left: auto;
margin-right: auto;
}
If you'd like to center the #contentLoading div within a container you can do it like so:
#contentLoading {
width: 500px; /* whatever width you want */
margin: 0px auto; /* top and bottom margin of zero, left and right are automatically calculated based on the space available in the enclosing container */
}
For Ie6, you need to text-align:center the body in your CSS, and then style the main wrapping div with text-align:left, to re-align the text toe the left.
Here is a example.
body{
text-align: center; /*This alligns all content to the center for IE6*/
}
#mainWrapper{
width: 900px;
margin: 0 auto;
text-align: left; /*This re aligns all content within this id to the left*/
}