SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    London, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <div> & text-align problem

    Hi,

    Having some css problems & I could really do with some help; block-level elements & contextual selectors starting to do my head in!

    I have a large <div> for the non-navigation content:
    Code:
    div#content {position: absolute; top: 26px; left: 134px; right: 25px; padding: 10px; border: solid 2px #5F5F5F; }

    Within that, I have floating <div>s for sub-section boxes:
    Code:
    div#floatleft {float: left; background-image: url('box.gif'); width: 220px; height: 300px; margin: 10px; padding-top: 10px; }
    Finally, I'd like an id for the box headers:
    Code:
    #header {color:black; text-decoration: none; text-align: center;}
    Trouble is, with the html below, the text-align:center is being ignored when it should place the txt in the center of the 220px div...shouldn't it?
    Code:
    <DIV id="content">
    <div id="floatleft">
    <p>
    <span id="header">title here</span><br/><br/>
    Waffle</p>
    </div>
    </div>
    Any help appreciated
    Last edited by beesman; Aug 6, 2002 at 11:29.

  2. #2
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why are you using "#"s instead of "."s? I thought it was .header { CSS here } instead of #header {CSS here}

    Also, you don't put semicolons on the last property of a defintion.

    So your CSS definitions should be:

    Code:
    .content {
    	position: absolute; 
    	top: 26px; 
    	left: 134px; 
    	right: 25px; 
    	padding: 10px; 
    	border: solid 2px #5F5F5F
    }
    
    
    .floatleft {
    	float: left; 
    	background-image: url('box.gif'); 
    	width: 220px; 
    	height: 300px; 
    	margin: 10px; 
    	padding-top: 10px
    }
    
    .header {
    	color:black; 
    	text-decoration: none; 
    	text-align: center
    }
    In your first definition, I have never seen the "top", "left", and "right" properties before. Are you sure they are properties?

    Perhaps you need to readup on CSS at http://www.w3schools.com
    The Internet is prettier on a Mac.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    London, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, 'top', 'left', 'right' & 'bottom' are all position properties - see http://www.w3schools.com/css/css_positioning.asp.

    I only use "#"s instead of "."s because I thought that "#"s signify id's, which have greater weight than "."s, which signify classes.

  4. #4
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's nothing wrong with using # instead of . for this - the difference is that # is used to apply styles to an ID while . is used to apply them to a class. An ID may only occur once on a page and should be used for items that are unique on each page (such as the header div) while a class can occur several times.

    I'm pretty sure the reason your text is not centering is that you are applying the style to a <span>, which is an inline element. Inline elements are elements that behave liks <a> or <b> or <i> - they occur within the document and are only as wide as their contents. Hence you are telling the <span> that the text inside it should be centered within the span, but since the span is only as wide as that text you are not seeing any centering occuring.

    There are two possible solutions. The first is to use a <div> instead of a <span>. Divs are block level elements, meaning they are as wide as possible within their containing element. If you change yoursan to a div everything should work fine. However... a better option would be to use a <h1> or <h2> (or <h3> etc) tag. The content you are trying to center is a header, so there is no reason not to use a header tag to center it. Header tags can be styled just like anything else, so you can make it look exactly how you want. Header tags come with some automatic margins which many people dislike, but you can turn these off using margin: 0px.

    I also notice you have two <br> tags under your styled text. You don't need these at all - you can use the header's margin-bottom property to achieve the same effect with less markup.

    Here's how I woulod do what what you are trying to achieve:
    Code:
    <div id="content">
    <div id="floatleft">
    <p>
    <h2>title here</h2>
    <p>Waffle</p>
    </div>
    </div>
    
    h2 {
      text-align: center
      font-size: 150%;
      margin: 0em 0em 1em 0em; // Sets bottom margin to 1em, tweak to fit
    }
    Hope that helps. For more information on why it is better to use "real" HTML tags such as <h1> instead of always using spans and divs see this article (link is to Google'sd cache as evolt is offline over the weekend for relocation): http://216.239.35.100/search?q=cache...hl=en&ie=UTF-8

  5. #5
    SitePoint Enthusiast welded's Avatar
    Join Date
    Jun 2001
    Location
    vancouver.bc.ca
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    skunk, the latest css definitions have extensive support for aural media, above and beyond the ability of the old, depreciated html 1.0 tags you're advocating. remember, they're depreciated for a reason. the w3c couldn't and wouldn't be able to do this without taking steps to accomodate those with disabilities. here's some good stuff to soak up:

    http://www.geoffknagge.com/webdevelo.../2/2ural.shtml
    it's amazing what velocity can do
    when human beings are in season

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    London, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the help everyone - got it sorted


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •