SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two Divs on the same line

    If I do something like this:

    <div class="bigletter">Q.</div><div class="question">Why does this site look so bad?</div>

    The "Q." is on a line by itself, and the Question is on another line. It is as if there is a <br /> in there when I don't want there to be one. How do I stop that from happening?

    Here's the CSS I'm using:

    .bigletter {
    font-size: large;
    font-family: Poor Richard, Baker, Book Antiqua, serif;
    font-weight: bold;
    background: #fff;
    color: #036;
    }

    .question {
    font-size: small;
    font-family: serif;
    background: #fff;
    color: #036;
    font-weight: bold;
    }

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using a span class

    like:

    Code:
    <span class="bigletter">Q.</span><span class="question">Why does this site look so good?</span>

  3. #3
    SitePoint Enthusiast fuselodge's Avatar
    Join Date
    Apr 2002
    Location
    india
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah..try using <span>
    or maybe you can change the first <div> to <p> and keep the other <div> nested inside the <p> tag.

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To answer the question, you cannot place two DIVs on the same line because DIV is a "block level" element. That means it implies a rectangular area which extends to the edges of the browser window. The contents of the DIV might not extend that far but the DIV boundaries do. Other "block level" tags are:

    TABLE, FORM, P, BLOCKQUOTE

    The reason why SPAN will work is because SPAN is an "inline" tag. This means that it does not disrupt the normal flow of HTML and can be used "inline" with text and other HTML elements without interference. Other "inline" tags are:

    B, I, U, S, SPAN, A
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or maybe you can change the first <div> to <p> and keep the other <div> nested inside the <p> tag.
    You cant' put <div>'s inside <p>'s see here

    I'd suggest the best way is to do this:

    <p class="question"><span class="bigletter">Q</span>Why does this site look so bad?</p>

    Or you could remove the class from the span and change your second css block to:

    p.question span{
    <<insert css here>>>
    }

    which will apply the style to every <span> inside a <p> with a class of question.

    cheers

    alastair

  6. #6
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank You!

    Wow, excellent responses and all very helpful. I now have exactly the look I was after. Much appreciated.

    For those interested, you can have a look at the site that I'm developing. It is still pretty early on in the development cycle but I have made extensive use of CSS. There are only a couple of instances where I needed to use Tables, everything else is done with CSS positioning. It's a 3 column approach, with a header section to hold the logo at the top.

    Any comments are appreciated while I strive to improve the site.

    (It is a retail site, but I think few of you would be my target audience, so I don't feel like this is a shameless plug. Just interested in feedback on the design.)

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chris...

    If you;re looking for feedback on your website, please use the Website Review forum.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Oops.

    Okay, will do. Wasn't aware of this other forum. I'm new here, and busy.


  9. #9
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, for a completely CSS solution:
    Code:
    .q {
      font-size: small;
      font-family: serif;
      background: #fff;
      color: #036;
      font-weight: bold;
    }
    
    .q:before {
      content: "Q. ";
      font: bold large "Poor Richard", Baker, "Book Antiqua", serif;
    }
    And every element with a 'q' class will be preceded by The large "Q. " you were after in browsers that support the :before pseudo-element. :-)

    ~~Ian


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
  •