|
CSS - Newb In Need Of Help: Vertically Centering Divs
Hi, I'm new here. I wasn't sure if this was a javascript problem or a css (I'm thinking it's probably a css problem). I've been using css for about a year, all very straight forward until my friend asked me to make some changes to his site
Bascially what he wanted me to do is 1. vertically center the entire site to the browser window, and 2. also vertically center the title and caption for his photogallery Below is a link to the site I'm working on Code: http://theo.mypreview.co.uk/gallery/test I added some javascript that I found searching on google which isn't working quite right. This is the javascript code Code: (function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
If you follow the link posted to the site I'm working on you should see 3 thumbnails, 1st thumbnail is a video which is my main struggle to center vertically. The other 2 thumbnails are for images. If you click on one of the thumbnails for a picture you will see how the title and caption align vertically (not quite center)* For some reason the div containing the main image content ignores the height so the margins are too big. *Video is posted within the span class called "phototext" which is where the descriptions for the images appears. side note - this javascript seems stop IE6 and 7 from loading the page Thanks Larss Similar TutorialsHey, I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys. Basically, the page is going to look like this Any advice would be greatly appreciated. Thanks! is it possible to center something vertically inside a container without the use of tables? I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work. PHP Code: <div style="width:100% height:100%; text-align:center;"> <!-- code goes here --> </div> thanks goran. I'm having trouble understanding how to vertically center an inline list in a div. Can anyone recommend some reading? The list is used for a horizontal nav bar with a background. I've set the height of the div to 20px because that's the height of the bg image. Also: Should the font specs be where they are (#nav ul) or maybe in the #nav section? Here's the code: Code: #nav {
background: url(../images/nav_bg2.gif);
text-align: center;
overflow: hidden;
height: 20px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
display:inline;
margin:0;
padding:0;
}
http://erichalsten.com/ It shows up fine in Firefox/Opera/Safari, but in IE the vertical alignment is off. I'm working from this example, but it doesn't seem to do the trick. Does anyone have any input or a link they can reference me to? Thanks. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Hi guys, I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen. Something like this URL http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg I have written the following test and the forms are placed correctly inside the left and right divs. Code:
<HTML>
<Head>
<style type="text/css">
div.wrapper {
position: relative;
clear: both;
width: 100%;
border : 1px solid #000000;
}
div.left {
float: left;
width: 50%;
background: #ffffff;
border : 1px solid #000006;
}
div.right {
float: right;
width: 50%;
background: #ffffff;
border : 1px solid #000001;
}
</style>
</Head>
<Body>
<div class="wrapper">Wrapper
<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
</div>
</Body>
</HTML>
A couple of problems with the above. 1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy. 2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above) Thanks DIV blocks display incorrectly in IE8 and it's driving me insane.. I tried adjusting padding for each column amongst other things but no dice! Everything looks fine in FireFox and IE9. I'm not allowed to post links as a new user but the website is dmstriping dot com. You'll have to fix the below links yourself. Any help would be greatly appreciated! **Here are the css files:** dmstriping dot com/new site/css/style.css dmstriping dot com/new site/css/layout.css Web Site: dmstriping dot com/new site/index.html Hi all, I know there are certain tricks to vertically center texts or images in a div area. And I have read somewhere there are plans to avoid current complexity compared with tables. For example, provided I use same CSS... Code:
div,table{
width: 250px;
height: 100px;
border: 1px solid red;
text-align: center;
}
...we optain well vertically centered text in this table... Code: <table> <tr><td>this IS vertically centered</td></tr> </table> ...but not in this div based one... Code: <div>this IS NOT vertically centered</div> I ask, do you know an easy way to acomplish the same we get with tables? Thanks! I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two.... However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated. Oh, I know my code could be a bit more clean, this is just a comp. I've also tested this on FF so far. I doubt IE will return favourable results either. My example: www.efacln.com/Untitled-1.html My CSS code: Code:
#container
{
MARGIN: 5px;
}
#header_container
{
border-color: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-LEFT: none;
BORDER-RIGHT: none;
WIDTH: 100%;
}
#header_content
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
BORDER-TOP: none;
BORDER-BOTTOM: none;
WIDTH: 600px;
HEIGHT: 100px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
}
#kirk_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
WIDTH: 550px;
HEIGHT: 100px;
FLOAT: left;
POSITION: absolute;
MARGIN-TOP: 5px;
MARGIN-RIGHT: 2.5px;
}
#navigationblock
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: THIN;
WIDTH: 410px;
POSITION: relative;
FLOAT: RIGHt;
MARGIN-TOP: 5px;
MARGIN-LEFT: 2.5px;
}
#scott_news
{
BORDER-COLOR: black;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
width: 410PX;
MARGIN-TOP: 1 px;
MARGIN-TOP: 5px;
}
</STYLE>
I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom. Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something? Is there a way to get the #middle div to stretch vertically to fill up the remaining space of the page, say with min-height etc.? Thanks, Mark Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
min-height:100%;
height: 100%;
}
html{
border: 1px solid red;
}
body{
border: 1px solid blue;
}
#container{
border: 1px solid green;
}
#top{
border: 1px solid yellow;
}
#middle{
border: 1px solid black;
min-height: 100%;
height: auto;
}
#bottom{
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="container">
<div id="top"> </div>
<div id="middle"> </div>
<div id="bottom"> </div>
</div>
</body>
</html>
hello geniuses. I know this is likely a very silly question. I am a designer looking to move closer to the 21st century of web development. how do I keep a group of divs generated in the form of a page as I have set up at: http://greentypeoftube.com/div/home1.html basically I want the whole group to be centered regardless of browser window. I've tried a bunch of things, including putting it all in a container, but it just bleeds over. please to help me someone, I appear to be obsessed and am not performing my duties here chained to the desk. - I have another question which may be better separated to another ? but I'll also add it here just in case someone knows both answers... in this same situation, is there a way to allow for the content window to automatically place scrollbars such as if I used an I-frame? thankyou for the genius of help. p I'm having a little problem with centering divs: I have a dynamic page that displays items. Each item has it's own div containing an image and a title. I want these divs to be centered but also to drop onto multiple lines if necessary, for example: There is room for 4 items per row within the container div, so one item would be centered, two items would be centered, and so on, but 5 items would have 4 divs on the top row and one div centered underneath: 1 item: [div] 2 items: [div][div] 4 items: [div][div][div][div] 5 items: [div][div][div][div] [div] 10 items: [div][div][div][div] [div][div][div][div] [div][div] and so on. I can get this to work by using float to automatically drop the next 4 onto the next row, but is there a 'center' attribute or technique I could use to keeps these divs centered? I hope this makes sense to you all!! I'm trying to create a gallery, composed of an image and description divs (like so); pic1 What I want is to wrap these divs with a bordered div, that will accomodate as many of them per row as will fit the width of the browser, but also centering the wrapper like thus examples: pic2 This is what I have so far: Code:
<html>
<head>
<title></title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<style>
html, body
{
margin: 0px;
}
div#item_container_box
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}
#item_container
{
margin: 10px;
border: solid 1px #000;
padding: 2px 0px 2px 0px;
}
html>body #item_container
{
padding: 2px;
}
div.spacer
{
width: 200px;
background-color: #333;
clear: both;
}
div.center
{
width: 50%;
}
div.item
{
float: left;
text-align: center;
/* float: left; */
width: 200px;
height: auto;
margin: 2px;
}
div.data
{
float: left;
width: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div align=center>
<div id="item_container_box">
<div id="item_container" align="center">
<div class="spacer">.</div>
<div class="center"></div>
<div class="item"><img src="_data/images/records/1.jpg"><div class="data">Item 1</div></div>
<div class="item"><img src="_data/images/records/2.jpg"><div class="data">Item 2</div></div>
<div class="item"><img src="_data/images/records/3.jpg"><div class="data">Item 3</div></div>
<div class="item"><img src="_data/images/records/4.jpg"><div class="data">Item 4</div></div>
<div class="item"><img src="_data/images/records/5.jpg"><div class="data">Item 5</div></div>
<div class="item"><img src="_data/images/records/6.jpg"><div class="data">Item 6</div></div>
<div class="center"></div>
<div class="spacer">.</div>
</div>
</div>
</div>
</body>
</html>
Some help on this, would be very much appreciated. Are there any recommended techniques for centering a DIV in a page regardless of the screen size? I'd like to have an image centered on the page, and several images positioned over it. I envision the main image and the other images positioned relative to the top left of the main DIV, which is always centered on the page... Is there any way to center a <div> block itself, not the text in it? Using this code:
Code: #block{
padding:2px;
margin-left:auto;
margin-right:auto;
width: 480px;
}
(which I am currently using) centers it in Firefox, but not IE. Also the code which adds a rollover effect to the links in the menu works in Firefox but not IE. Code: #menu li:hover{
background-color:#369;
}
The site's current URL is here, because my webhost's disk is full, and they are having problems with PHP scripts not working. Having an odd rendering problem involving centering content in a fixed-width right hand column that lies within a fixed width centered master content div. Take a look at the template he http://www.ipfwcommunicator.org/devindex.php At first I tried to center the content using align="center" in the HTML markup, which I know is a no-no, so I'm not too sad it didn't work. I then tried {margin-left: auto; margin-right: auto;}, thinking it would work in IE as it does with tables, but it did not. Both of these attempts worked worked with most modern browsers (Moz/Firefox/Safari/NN7) but failed on MSIE5/Mac and IE6/Win. Nice and compliant, and I would be happy in a perfect world, but alas, 90% of my readers use a (vastly) imperfect browser. I decided to get a bit more professional and utilize CSS positioning, setting the DIVs that hold the content boxes (i.e., Weather/Search/etc.) as {position: relative; left: 15px;}This also worked in most browsers, but oddly enough on IE5 Mac (and assume IE6 win although I didn't have a chance to test) the boxes centered but the tables inside the weather/search boxes that allow for cross-platform formating jutted out the side. Lastly, and this is the current solution, since the column is fixed width and the boxes are fixed width, I used the "ice" solution of dividing the remaining margin by two, and setting margin-left: equal to that. In this case: {margin-left: 15px;} Oddly enough this works FINE on everything, even IE5/Mac, but doesn't work on IE6/Windows, which instead results in what appears to be 5 or 6px more than the defined 15px. Compare here between Firefox and IE6 and you'll see it. And CSS is here So the question: What IS the best way to center up those boxes in that column? This is my first major CSS undertaking, having worked with nested tables up until now, so any pointers on my bad markup will be gladly accepted Thanks in advance, Aiden hi, and thanx for helping me if you do i am a complete newbie to aligning my images in css ive built the layout in photoshop then sliced it and everything but i cant get any images to stay lined up in mozilla after they work in IE and in any other resolution other then mine (1024x768) if you could help me get started i would really appreciate it |
|||||||