PDA

View Full Version : Center div in height



kimikai
04-30-2012, 06:40 PM
So I have a website that's made with layout measurements for a common used screen (1024x768 or w/e it exactly is). I used a bg color to fill up the white space as soon as the screen is bigger than this.
Now basically that all works fine, but my website is aligned to the top on bigger screens (so it leaves a huge colored bg space underneith).
Is there a way to center my div to like...the middle of the screen, so itll have room on the bottom and top on bigger screens??
Also its not like i have a big div and something inside needs to be centered.
I really need the whole div to be centered.

mlegg
04-30-2012, 09:24 PM
What is a link to the page? or at least post the coding for it

ApacheTech
05-01-2012, 03:58 AM
Centreing Vertically.

CSS level 2 doesn't have a property for centreing things vertically. There will probably be one in CSS level 3. But even in CSS2 you can centre blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.

The example below centres a paragraph inside a block that has a certain given height. A separate example (http://www.w3.org/Style/Examples/007/center-example) shows a paragraph that is centred vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.


//CSS Style
#container
{
min-height: 10em;
display: table-cell;
vertical-align: middle
}

//HTML Code
<div id="container">
<p>
Vertically aligned text</p>
</div>

kimikai
05-01-2012, 06:57 AM
Ill try to show what i mean by 2 paint pictures,, just rough sketches of what i mean,, and then post the HTML and CSS code with it.

What i have now is:
http://img88.imageshack.us/img88/4581/currentt.png
The Darkblue is the div that contains all of my website (the divs name is "all" in the coding) right now, its centered to middle horizontally but to the top vertically which leaves an ugly background spot (which is huge in my opinion) down the bottom on bigger screens.

What i want is this:
http://img832.imageshack.us/img832/1121/whatiwant.png
The Darblue again is the div that contains all of my website, just what i basically want is that its both horizontally and vertically centered. I just have no idea how to do this, also i dont know if its maybe smarter to make a big table that contains all the other divs, instead of a div that contains all the divs??

This is the HTML:

<div id="all">
<div id="header_wrap">
<div id="header">
</div>
</div>

<div id="main_wrap">
<div id="site_wrap">
<table width="941" height="402" border="0" align="center">
<tr>
<td width="162" background="images/menu_bg.jpg"><iframe name="menu" src="menu.html" frameborder="0" width="162px" height="402px" allowtransparency="true" scrolling="no"></iframe></td>
<td width="14"></td>
<td width="751" background="images/content_bg.jpg"><iframe name="content" src="home.html" frameborder="0" width="751px" height="402px" allowtransparency="true" scrolling="auto"></iframe></td>
</tr>
</table>
</div>
</div>
</div>

This is the CSS:

#all {
width:100%;
height:673px;
}

#header_wrap {
width:100%;
height:263px;
margin-top:auto;
background:url(images/header_bg.jpg);
}

#header {
width:960px;
height:262px;
margin:0 auto;
margin-top:auto;
background:url(images/header.png);
}

#main_wrap {
width:100%;
height:410px;
margin:0;
background:url(images/rest_bg.jpg);
}

#site_wrap {
width:960px;
height:410px;
margin:0 auto;
background:url(images/rest_bg.jpg);
}

ApacheTech
05-01-2012, 02:49 PM
Read this: http://www.w3.org/Style/Examples/007/center.en.html

kimikai
05-01-2012, 03:12 PM
I got as much,, but the thing that worries me is that i dont have a block thats as big as the window...
Does this mean ill have to make the div that has everything inside as big as the window or just give the div id="all" the css: display: table-cell; vertical-align: middle; command??

ApacheTech
05-01-2012, 04:36 PM
If that's how you want it, yeah. You can create <div id="sitewide"></div> as a wrapper for your whole page. Or you could just use the fullcreen example given and use your own dimensions for the div.

kimikai
05-01-2012, 08:44 PM
Ive tried all kinds of codes into the CSS now...also the one from the example... but somehow its just not coming together. When i use display table-cell with vertical align nothing happens. When i try something with top % its not working, position absolute isnt working either.
How am i going to set up the coding i just dont see it anymore :confused:

The div="all" should be the one that wraps the whole website and that gets the coding for the vertical alignment. Its just not doing what its supposed to do

ApacheTech
05-01-2012, 09:06 PM
There may be something in CSS3, have a look at http://www.wiibart.com/vertical-centering-with-css3

That was just one of many pages from a simple web search with your favourite search engine.

kimikai
05-01-2012, 09:40 PM
fixed it,, after a lill longer of looking around i found a way to actually get it done ^-^

tnx for the help tho

ApacheTech
05-01-2012, 09:49 PM
Good. :D Out of interest, which solution did you end up using?

kimikai
05-02-2012, 08:43 AM
Ermm well i found something about a table setting that would get it done, ill try to put the coding in here:
basically what i did is wrapping the whole website into a table, and the divs that i used i put them into <td> getting this code:

<table id="wrapper" border="0" width="100%" align="center">
<tr>
<div>
<td>
<div id="header_wrap">
<div id="header">
</div>
</div>

<div id="main_wrap">
<div id="site_wrap">
<table width="941" height="402" border="0" align="center">
<tr>
<td width="162" background="images/menu_bg.jpg"><iframe name="menu" src="menu.html" frameborder="0" width="162px" height="402px" allowtransparency="true" scrolling="no"></iframe></td>
<td width="14"></td>
<td width="751" background="images/content_bg.jpg"><iframe name="content" src="home.html" frameborder="0" width="751px" height="402px" allowtransparency="true" scrolling="auto"></iframe></td>
</tr>
</table>
</div>
</div>
</td>
</div>
</tr>
</table>

This way you can add a style to the table which makes it possible to use a vertical-align command getting this CSS:

html, body, #wrapper {
margin:0;
padding:0;
height:100%;
border:none;
background:#1c7ac0;
text-align:center;
}

#wrapper {
margin:0 auto;
text-align:left;
vertical-align:middle;
width:100%;
}

Eventually this was the coding that got me where I wanted to be, and it works perfectly fine, i tested it in both IE and Chrome.

ApacheTech
05-03-2012, 12:24 AM
Ahh. OK.

See, what you've done there is inadvertently made your website totally non-SEO compliant. Tables are bad, bad, bad! Maybe in the 90's tables were the cutting edge of web page design but now, for layout purposes, they are considered obsolete and should be avoided at all costs.

Search Engine Bots cannot see inside table cells and screen readers for blind users mess up big time when they encounter tables. Tables should be used minimally on your site, for displaying data which needs to be in tabular form, they should never be used for the layout and aesthetics of the site.

I would consider playing around with the functions of CSS3 first. Get rid of the tables and forget about them.

keyboard
05-03-2012, 01:51 AM
Search Engine Bots cannot see inside table cells

Correct me if I'm wrong, but used correctly, they can...
But yes, tables are terrible in the way of layout.
Try using <div></div>'s and css instead.

djr33
05-03-2012, 02:26 AM
SEs can see inside tables. They just rank the content lower because it should be details, not (main) 'content'

ApacheTech
05-03-2012, 11:48 AM
Ahh, my mistake. Apologies for that. I've been told that by a few people but I suppose they were paraphrasing.

djr33
05-04-2012, 01:48 AM
The idea is correct, but the details aren't. SEs can't see everything-- specifically, some elements generated by Javascript (especially Ajax), and content inside Flash. But usually they can read all of the HTML code, but improper coding will make them misinterpret the semantics (meaning) of the page, so this is why using tables for content (or flash, for that matter) is a bad idea. Or images, although I haven't seen anyone using images of text on a site in about 5 years, haha :D

ApacheTech
05-10-2012, 12:14 AM
Using images for text also goes against accessibility and usability guidelines. When designing your site, think what it will look like for all forms of colour blind users, visually impaired users, people who use screen readers (blind users) and the mos debilitating disability of them all, people who still use Internet Explorer. For any of these users, your site will look, act and feel completely different to how you perceive it to be.

This is especially important for business sites and eCommerce sites. It has been known for companies to be successfully sued by disabled users because it was impossible for them to use the website facilities.

djr33
05-10-2012, 06:11 PM
It has been known for companies to be successfully sued by disabled users because it was impossible for them to use the website facilities.Do you have any information about that? That sounds really weird to me, and I'd be strongly opposed to that. I don't think it's the job of a visual-medium content creator to make it accessible to anyone else, and I think it makes creating a website too potentially dangerous (you can get sued for not making it good enough?). A website is inherently visual, and the only way around it is with special tools-- wouldn't a valid legal excuse be "buy/make better software to read the website"?
I certainly support doing everything possible to make a site accessible, but legally being at fault for something like that is really extreme, and stupid in my opinion. that's like suing the radio for not letting deaf people listen. It's unfortunate, but inherent.
Can I sue a painter for not making it accessible to a blind person, or sue a rock-climbing business for not making it accessible to disabled people? That's just taking it too far...

(Of course if there is ever any intent to make it inaccessible, that's a different issue.)

ApacheTech
05-10-2012, 09:43 PM
I don't have any detailed evidence. It was mentioned as part of our Web Page Design module in uni. It was a ticketing office for a major sporting event that had no method for certain disabled users to buy tickets from their site. There was a class action against the site and they had to pay damages. I'm not sure of anything other than that now I'm afraid.

keyboard
05-11-2012, 12:15 AM
Here's (http://www.gawds.org/show.php?contentid=102) an article about it. Of course this is English law and not American/Australian (or any other country) and would probably (most definetly) be different, but it's still interesting to read...

P.s. How'd we get from centering divs vertically to discrimanation law?

ApacheTech
05-11-2012, 12:42 AM
It was a natural progression, 'onest guv'. *tips hat*

djr33
05-11-2012, 05:32 AM
That's just bizarre. Thanks for the link, though.

keyboard
05-11-2012, 05:44 AM
That's just bizarre.

What is?

P.s - ApacheTech - If there was a like button, I would have hit it then made another account and hit it again :D

djr33
05-11-2012, 06:13 AM
The link about the accessibility law. Interesting, though.
(In the case that it is the only way to, for example, buy tickets, I can see the problem, but not about the website itself, rather the company as a whole not having an alternative.)

kimikai
05-11-2012, 07:41 AM
The best part is that we got from centering divs, to the law, while im here sitting trying to adjust the layout as much as possible to make a fluid one ;) lol

djr33
05-12-2012, 05:20 AM
kimikai, if you still need help with this, then please continue with discussing your problem. If you think the tangent is getting in the way of that, I'd be happy to split it into a new thread. Reply here or send me a PM-- just let me know.

ApacheTech
05-12-2012, 10:30 AM
The vertical centreing question was answered on page one. The OP said the matter was resolved, or so I thought.

kimikai
05-12-2012, 03:10 PM
Yeh i fixed the problem a long time ago to center it. Like i said,, im working on a fluid webdesign for the website now =]

ApacheTech
05-12-2012, 03:12 PM
Damn you Facebook! I instinctively keep trying to "like" forum posts! :s

Glad we were able to help anyway, kinda makes the tangent worthwhile. :D

kimikai
05-13-2012, 12:50 PM
Yep thanks alot =]

For the thing that i needed there,, it worked, =D
Its a matter of wanting to get things even better now