HTML Div Help

Thread Solved

Join Date: Jan 2007
Posts: 1
Reputation: RyuuJin Silver is an unknown quantity at this point 
Solved Threads: 0
RyuuJin Silver's Avatar
RyuuJin Silver RyuuJin Silver is offline Offline
Newbie Poster

HTML Div Help

 
0
  #1
Jan 23rd, 2007
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.

HTML and CSS Syntax (Toggle Plain Text)
  1. body {
  2. background-color:#e6e6e6;
  3. }
  4.  
  5. #header {
  6. position:absolute;
  7. top:0px;
  8. }
Thats the CSS...this works okay, it simply aligns the DIV to the absolute top like I wan't it to.

HTML and CSS Syntax (Toggle Plain Text)
  1. <div align="center" id="header"> <img src="images/index_01.gif" /></div>
Unfortunately it does not align to the center of the screen though... I'm not sure why. Any ideas? Any help is appreciated.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: HTML Div Help

 
0
  #2
Jan 26th, 2007
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:

HTML and CSS Syntax (Toggle Plain Text)
  1. .cenimg {text-align: center;
  2. margin-top: 0px;
  3. margin-bottom: 0px;
  4. padding: 0px;}
  5. .centim {clear: both;}
At the point where the image belongs:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="cenimg">
  2. <img src="picture.jpg" alt="a picture" class="centim" />
  3. </div>
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.
Last edited by MidiMagic; Jan 26th, 2007 at 12:38 pm. Reason: typogoofical error
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: HTML Div Help

 
0
  #3
Jan 26th, 2007
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+.
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: HTML Div Help

 
0
  #4
Feb 16th, 2007
The need for the center tag is the space saved, compared to adding all of that style code for each centered object. When the ISP charges you by the megabyte of storage space, believe me, it matters.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: HTML Div Help

 
0
  #5
Feb 19th, 2007
It also makes a difference in how many users can download the page before your download limit is exceeded.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: HTML Div Help

 
0
  #6
Feb 20th, 2007
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 ^_-
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..
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC