Could someone show me how to create three column divs with the middle div 1040px width and the left and right divs are elastic so they contract when the window is resized. this will center the middle div at all times.
There is a way, I just find out! :D
HTML:
<div id='siteHeadLeft'></div>
<div id='site'>
<div id='siteHeadRight'></div>
CSS:
#siteHeadRight{
height:95px;
float: right;
margin-right: -500px;
background-image:url(../IMG/menu_bg.png);
background-repeat:repeat-x;
width: 50%;
}
#site{
float: left;
width:1000px;
}
#siteHeadRight{
height:95px;
float: right;
margin-right: -500px;
background-image:url(../IMG/menu_bg.png);
background-repeat:repeat-x;
width: 50%;
}
You can center a fixed width div simply by adding this CSS:
div {
width: 1040px;
margin: 0px auto;
}
If you want to add a background, you would add it to the div's parent element, or the body of the page.
If your goal is simply to center the middle div, simply give it the following CSS properties:
width: 1040px;
margin: auto;
position: relative (or static. NOT absolute or fixed);
You can set a tiling background-image for the body element that will cover the area on either side of your div.
EDIT: Here's an example that comes pretty close to what you're looking for: http://jsfiddle.net/kqVFy/
Related
Please forgive my lack of design knowledge but I am confused by a bit of div positioning. I have a header div. Within that header I want two divs, one for the logo, and below that another for some content. I have labeled them logo and card respectively. However, when I try to put them both into the html, calling them in proper order, the card div simply lays atop the logo div rather than beneath it. I have tried using pretty much every variation of "clear: xxx" both in the css and inline within the html but they have no effect whatsoever. Can someone explain why this isn't working? Posting relevant css and html below.
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
position:absolute;
top: 3px;
left: 50%;
margin-left: -198px;
}
#header .card {
position: absolute;
left: 50%;
margin-left: -500px;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: left;
}
And the HTML:
<div id="header">
<div class="logo"><%= link_to image_tag("srlogo.png",alt:"Logo"), 'index.html' %></div>
<div class="card">Some text here</div>
</div>
Any help is greatly appreciated.
Edit: So yes, clearly I am an idiot for trying to use "clear" with no floated elements. I understand that now. So how do I get one division below, rather than on top of, the other?
Get rid of all your absolute positioning. It's rubbish.
http://jsfiddle.net/2BpfF/1/
If you want the .logo DIV to be centered on the page and you know it's width you can do this:
#wrapper {
width: 999px;
margin: 0 auto;
}
#header {
height:416px;
margin-top: 0px;
}
#header .logo {
margin: 0 auto;
width: 333px;
}
#header .card {
background-image: url(http://lorempixel.com/999/367/);
background-repeat: no-repeat;
height: 367px;
}
HTML
<div id="wrapper">
<div id="header">
<div class="logo"><img src="http://lorempixel.com/333/49/" /></div>
<div class="card">Some text here</div>
</div>
</div>
margin: 0 auto; adds 0px margins to the top and bottom of the DIV while calculating the left and right amount for you so it will center. This will only work with a known width.
It seems like you want to center everything. So I would start with a wrapper DIV and center that. I did this with #wrapper.
Remember that source order matters and that by default your .logo DIV will display before your .card DIV without any CSS.
You can also remove the width: 100%; from your #header DIV as all DIVs by default are block level elements. Block level elements always take up the full width of their containing element unless told otherwise.
As for the opacity of the background image I think the best solution would to do this for your image file and not with CSS as I don't think opacity is very versatile yet. What I mean my this is if you set opacity: 0.5; to a DIV, then everything in that div is 50% opaque. I'm not a guru on opacity so you'd have to dig into that a little deeper. But I would just set the opacity in your image editor to 50% and output a PNG file so the alpha(opacity) chanels will be there. JPG files do not have alpha channels for transparency.
You don't have any floated elements, so clear has absolutely no effect.
Absolute positioning removes the element from the document flow, so floating and clearing will have no effects on such positioned elements, since floating adjusts the element within its content flow.
Avoid absolute positioning. Same thing you can achieve using something like this :
#header {
height:440px;
width: 100%;
margin-top: 0px;
background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7
}
#header .logo {
padding: 5px;
text-align:center;
}
#header .card {
margin-left: auto;
height: 367px;
width: 999px;
background:url(/assets/hback.png) 0 0 no-repeat;
clear: both;
padding: 5px;
}
I want to display an ASP.NET image in the middle of a div (both horizontally and vertically), how should I arrange my div and image (image should be runat=server), also I should set max-width and max-height styles for my image, DIV acts as a placeholder, and my image should be inside the DIV, and it should be exactly centered both horizontally and vertically, can you show my the correct HTML and CSS? is there any sample?
Use:
CSS
.placeholder{min-width:200px; min-height:200px;}
.placeholder img{
margin: 0px auto; /*centers element horizontally*/
vertical-align:middle; /*centers element vertically */
}
Your html should like something like:
<div class="container">
<div class="placeholder">
<!-- load image here -->
</div>
</div>
I worked REALLY HARD on finding the solution, hopeful it's 100% helpful :-)
<html>
<style>
.placeholder {
width: 250px;
min-width: 250px;
height: 250px;
min-height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
top: 40%;
margin: -100px 0 0 -125px;
}
</style>
<IMG class="placeholder" src="http://www.swoo.co.uk/content/images/icons/stackoverflow.png">
</html>
Replace any img you want in place of the URL that equals to the "src".
Note that it works also while zoom in and zoom out in the browser, it stays EXACTLY in the MIDDLE of the page, best code you could find :)
I have a container div, within that div are other div's. In there I use jQuery .show() to show stuff.
#container {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
background-color: white;
height: 100%;
}
#content {
font-size: 15;
margin: 0 auto 0 auto;
width: 550px;
}
The content div grows longer than the container div, so the white background stops when I scroll down, leaving me with no white background there.
How can this be fixed?
http://jsfiddle.net/K6PAn/8/
I think this will be your answer, Adding padding to the top and bottom will always make the white shown.
Hope this helps, If it's not the correct answer, sorry! D:
Add an extra div at the end of the content with clear:both e.g.
<div style="clear:both"></div>
Dave
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}
How can I center an image horizontally and aligned to the bottom of the container at the same time?
I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time.
Here is what I have:
.image_block {
width: 175px;
height: 175px;
position: relative;
margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}
<div class="image_block">
<img src="..." border="0">
</div>
That code aligns the image to the bottom of the div. What do I need to add/change to make it also center the image horizontally inside the div? The image size is not known before hand but it will be 175x175 or less.
.image_block {
width: 175px;
height: 175px;
position: relative;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/* nothing specific */
}
explanation: an element positioned absolutely will be relative to the closest parent which has a non-static positioning. i'm assuming you're happy with how your .image_block displays, so we can leave the relative positioning there.
as such, the <a> element will be positioned relative to the .image_block, which will give us the bottom alignment. then, we text-align: center the <a> element, and give it a 100% width so that it is the size of .image_block.
the <img> within <a> will then center appropriately.
This also works (taken a hint from this question)
.image_block {
height: 175px;
width:175px;
position:relative;
}
.image_block a img{
margin:auto; /* Required */
position:absolute; /* Required */
bottom:0; /* Aligns at the bottom */
left:0;right:0; /* Aligns horizontal center */
max-height:100%; /* images bigger than 175 px */
max-width:100%; /* will be shrinked to size */
}
wouldn't
margin-left:auto;
margin-right:auto;
added to the .image_block a img do the trick?
Note that that won't work in IE6 (maybe 7 not sure)
there you will have to do on .image_block the container Div
text-align:center;
position:relative; could be a problem too.
This is tricky; the reason it's failing is that you can't position via margin or text-align while absolutely positioned.
If the image is alone in the div, then I recommend something like this:
.image_block {
width: 175px;
height: 175px;
line-height: 175px;
text-align: center;
vertical-align: bottom;
}
You may need to stick the vertical-align call on the image instead; not really sure without testing it. Using vertical-align and line-height is going to treat you a lot better, though, than trying to mess around with absolute positioning.
Remove the position: relative; line. I'm not sure why exactly but it fixes it for me.
have you tried:
.image_block{
text-align: center;
vertical-align: bottom;
}
#header2
{
display: table-cell;
vertical-align: bottom;
background-color:Red;
}
<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
<p>this is a test</p>
</div>
</div>