SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    kind of simulated table cell

    hi all

    i've got this on my page
    <div class="newsItem">
    <h6>this is the title of the news item</h6>
    <p>here are some details</p>
    </div>

    i have the header tag with a background colour
    so it's like a table header, but the problem is that
    it doesn't start right from the top of the newsItem div
    there is some whitespace between
    then the whitespace between the bottom of the </h6> tag
    and the start of the <p> tag is too great, i want to reduce that as well

    my h6 style has padding for the sides, but no no other sizing styles

    i would give a link, but i'm still testing on my home pc
    so nothing online just yet
    i have attached a pic of the situation
    the top is what i have, the bottom is what i would like, with the black
    just being something to separate the two pics

    anyway, my question is how can i reduce the amount of space between
    the starting of the <h6> and the <div> containing it

    and also, how do i reduce the amount of space between the
    closing of the </h6> and the start of the <p> tag

    also, definitely not using a table

    thanks

    [edit]
    hmmm. having trouble with the attachment
    anyway, it looks like a table with an empty row at the top
    followed by a row with background colour, followed by a row
    with data and stuff, then an empty row to finish
    if you can understand that, i want to remove the "two empty rows"
    from my div, if this doens't make sense, i'll post again tomorrow
    with the actual code, and a pic hopefully

    one more thing, if you can understand what i'm saying
    the block looks ok in ie, but in firebird (my preferred) that's where it looks out of whack
    Attached Images Attached Images
    Last edited by dtra; Oct 9, 2003 at 00:13.

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How's this?

    Code:
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    div.newsItem {
    	border: 3px ridge #eee;
    	font: 80% verdana, sans-serif;
    	width: 20%;
    }
    
    div.newsItem h6 {
    	padding: 2px;
    	width: auto;
    	background: #eee;
    	margin: 0px 0px -1.4em;
    	border-bottom: 1px solid black
    }
    
    div.newsItem p {
    	padding: 0px 6px;
    }
    </style>
    </head>
    <body>
    <div class="newsItem">
    	<h6>Your Title Goes Here</h6>
    	<p>here are some details</p>
    </div>
    </body>
    </html>
    Works in ie6, ns7 and opera7

    -xDev
    Last edited by xDev; Oct 9, 2003 at 01:56.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to play around with the margin and padding to the various elements to get the desired effect.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool thanks, the -1.4 was too much, so i used -.5

    also, with using stylesheets, can i get some advice
    is it better to put all the styles in one stylesheet
    or would it be better to have only the styles that are used
    on every or most pages in the style sheet, and then put
    the minor styles into the actual page that uses them?

    thanks again

  5. #5
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dtra
    cool thanks, the -1.4 was too much, so i used -.5

    also, with using stylesheets, can i get some advice
    is it better to put all the styles in one stylesheet
    or would it be better to have only the styles that are used
    on every or most pages in the style sheet, and then put
    the minor styles into the actual page that uses them?

    thanks again
    You can go either way but I find it much easier to declare every style in an external stylesheet
    <link rel="stylesheet" type="text/css" href="css/yourStyles.css" />

    That way you won't forget what you haven't defined yet, or defined, and the first time someone goes on your site the stylesheet gets cached so download times are negligible.

    Also, if you start including your styles in the head of the page, search robots have to go through all your style declarations before they come to the meat of your page.

    Some people don't like to link to an external style because they think the extra header call by the server isn't worth the overhead. I don't agree, servers can certainly handle a call to a simple css file and as I said before, it gets cached the first time through anyway.

    As long as you keep it to one file, your ok.

    -xDev

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok, i was going to cut up my style sheet
    but what said makes sense, i think i only made
    one change that was actually on the page, rather than in the style sheet
    lucky i was a bit lazy over the weekend


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
  •