| | |
HTML Div Help
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
Hello,
First of all I would like to say this is a great layout and has helped me a lot. Now, on to my question. :lol:
I cant seem to get my divs to always align to the center of the page.
Thats the CSS...this works okay, it simply aligns the DIV to the absolute top like I wan't it to.
Unfortunately it does not align to the center of the screen though... I'm not sure why. Any ideas? Any help is appreciated.
First of all I would like to say this is a great layout and has helped me a lot. Now, on to my question. :lol:
I cant seem to get my divs to always align to the center of the page.
HTML and CSS Syntax (Toggle Plain Text)
body { background-color:#e6e6e6; } #header { position:absolute; top:0px; }
HTML and CSS Syntax (Toggle Plain Text)
<div align="center" id="header"> <img src="images/index_01.gif" /></div>
The problem is that the deprecators in W3C took away the center tag, and left us with nothing easy to replace it with in CSS. They are thinking in terms of newspaper-style publishing, where the text is important, and the image is an obstruction the text must wrap around.
There is a way to do it. You have to be sneaky.
In the style section or style sheet:
At the point where the image belongs:
The sneaky trick is that the div doesn't know (or care) whether its contents are text or image. It centers everything. The clear is needed to keep the image from seeking the left or right edge, and the rest is there to keep the div from otherwise messing things up.
You can also put a p block above or below the image with a caption.
There is a way to do it. You have to be sneaky.
In the style section or style sheet:
HTML and CSS Syntax (Toggle Plain Text)
.cenimg {text-align: center; margin-top: 0px; margin-bottom: 0px; padding: 0px;} .centim {clear: both;}
HTML and CSS Syntax (Toggle Plain Text)
<div class="cenimg"> <img src="picture.jpg" alt="a picture" class="centim" /> </div>
You can also put a p block above or below the image with a caption.
Last edited by MidiMagic; Jan 26th, 2007 at 12:38 pm. Reason: typogoofical error
Daylight-saving time uses more gasoline
text-align:center; in CSS is an extremely easy replacement for center; in the way you just suggested. A div with text-align:center; works pretty much exactly the same as <center>. As such, there's no real need for <center> in modern HTML versions. I'd say <center> is more functionally obsolete than neccessarily deprecated for a good reason.
The problem is always aligning things to the vertical center =P You can do it using hacky absolute positioning tricks in CSS, using hacky style-overrides in JavaScript; or you can make a giant table and use a vertical-align:center; TD. Still. Giant tables don't always work properly in true DOCTYPE (X)HTML (1+)4+.
The problem is always aligning things to the vertical center =P You can do it using hacky absolute positioning tricks in CSS, using hacky style-overrides in JavaScript; or you can make a giant table and use a vertical-align:center; TD. Still. Giant tables don't always work properly in true DOCTYPE (X)HTML (1+)4+.
Plato forgot the nullahedron..
Heck I still like the center tag.
I see it as a bonus of sorts, if a page looks as close as possible to how it looks with a stylesheet as it does without one.
So, I've started CSS-aligning blocks, then putting center tags inside, then putting data.
Q: Hey isn't that terrible for accessibility?! people might not want to see your titles/subtitles/copyright statements in the middle of their page?
A: Well, they didn't have to click to my site ^_-
I see it as a bonus of sorts, if a page looks as close as possible to how it looks with a stylesheet as it does without one.
So, I've started CSS-aligning blocks, then putting center tags inside, then putting data.
Q: Hey isn't that terrible for accessibility?! people might not want to see your titles/subtitles/copyright statements in the middle of their page?
A: Well, they didn't have to click to my site ^_-
Last edited by MattEvans; Feb 20th, 2007 at 2:30 am. Reason: didn't see thread was marked solved, missed pasting code snippet anyway
Plato forgot the nullahedron..
![]() |
Similar Threads
- Hyperlink a div (JavaScript / DHTML / AJAX)
- How to have the div layer center on any browser? (JavaScript / DHTML / AJAX)
- div inside another div , actually over the bottom slice (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS Rendering Differently in FF and IE
- Next Thread: Anyone good with Favlets? window links?
| Thread Tools | Search this Thread |
Tag cloud for HTML and CSS
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl






