Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts

    H1 not displaying as inline despite the CSS command

    MAIN CSS - Instructions

    p {margin-top:1px;}
    h1,h2 {display:inline-block; float:none; margin-bottom:0px; padding:0;}

    TEXT CSS - Instructions

    h1 {font-family:Arial;font-size:18px;font-weight:bold;font-style:normal;text-decoration:none;color:#000000;letter-spacing:0.0em;}

    h2 {font-family:Arial;font-size:18px;font-weight:bold;font-style:italic;text-decoration:none;color:#000000;letter-spacing:0.0em;}


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    ... (straight to H1/H2 Paragraphs examples) ...
    
    <p align="justify"><font face="Arial" size="3">
    Welcome to the <a href="http://example.com" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><h1>Example</h1></a> website,  <h2>Example</h2> ... </font></p>
    
    <p align="justify"><font face="Arial" size="3"><h1>example</h1></font></p>
    I look forward to hearing from you shortly,

    LWD

  • #2
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Also, I was wondering if you could verify that the solution to this issue works in IE8/Firefox & Safari (current version)
    HOW DRINKING RESTRUCTURED WATER BENEFITS YOUR WELLBEING AND SAVES YOU LOTS OF MONEY: http://bit.ly/pje6qX

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    If you want to make <h1> inline and want some content in same line... you have to define it's width because by default all block elements has 100% width of their parent element.

    Last edited by vikram1vicky; 07-31-2011 at 07:30 PM.

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Example of css/html coding please as i have changed the width with no change IN DESIGN.
    Last edited by learningwebd; 07-31-2011 at 02:00 AM.
    HOW DRINKING RESTRUCTURED WATER BENEFITS YOUR WELLBEING AND SAVES YOU LOTS OF MONEY: http://bit.ly/pje6qX

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you cannot define a width or a height once you make an element inline

    Code:
    h1 { display: inline; }
    if you want to define a width, you have to float it to the left

    Code:
    h1 { display: inline; float: left; width: 200px; }
    though floating defeats the whole purpose of display: inline;, its the only way to set a defined width/height

  • Users who have thanked Sammy12 for this post:

    learningwebd (07-31-2011)

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts
    What is the best practice for displaying H1/H2 inline with my content in the HTML/CSS structure as outlined in my
    Code:
     Code above
    ?... thanks for the previous info though Sammy, but it doesn't stop the H1 starting on a new line. So I require further knowledge which resolves my issue.

    Kind regards
    Last edited by learningwebd; 07-31-2011 at 03:35 PM.
    HOW DRINKING RESTRUCTURED WATER BENEFITS YOUR WELLBEING AND SAVES YOU LOTS OF MONEY: http://bit.ly/pje6qX

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    If you want to make <h1> inline and want some content in same line... you have to define it's lenght because by default all block elements has 100% width of their parent element.

    What do u mean by "define it's length"?...
    HOW DRINKING RESTRUCTURED WATER BENEFITS YOUR WELLBEING AND SAVES YOU LOTS OF MONEY: http://bit.ly/pje6qX

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by learningwebd View Post
    What do u mean by "define it's length"?...

    I meant width

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    1.<p> and <h1> are display: block; by default. which means they take up all the width possible (in this case 100% of the screen)
    -------------------------------------------------------------
    <p>
    -------------------------------------------------------------
    -------------------------------------------------------------
    <h1>
    -------------------------------------------------------------



    2. here's what float: left; to the <h1> will do
    -------------------------------------------------------------
    <p>
    -------------------------------------------------------------
    -----
    <h1> everything underneath it will come up here
    -----



    3. now what if you floated them both to the left?
    ---- -----
    <p> <h1> everything underneath it will come up here.
    ---- -----



    4. so now all that's left is to "clear" your floats

    Code:
    .clear { clear:both; }
    Code:
    <div class="container">
     <p></p>
     <h1></h1>
     <div class="clear"></div>
    </div>
    <div class="rest_of_content"></div>
    or set a height equal to the greatest height of the <p> or <h1>. if h1 is the greatest height with 22px, set the .container to 22px height. That will push all the "rest of the content" down.

    ---- ----- -------------------------------------------------
    <p> <h1> CLEARED
    ---- ----- -------------------------------------------------
    everything underneath it will stay down
    Last edited by Sammy12; 07-31-2011 at 07:48 PM.

  • Users who have thanked Sammy12 for this post:

    learningwebd (08-01-2011)

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    In the <style> I set * { margin: 0; padding: 0; }. By default all tags have margins and paddings even though you don't put them there. This sets all tags to margin: 0; and padding: 0;


  • Users who have thanked Sammy12 for this post:

    learningwebd (08-01-2011)

  • #11
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    In the <style> I set * { margin: 0; padding: 0; }. By default all tags have margins and paddings even though you don't put them there. This sets all tags to margin: 0; and padding: 0;

    Thanks Sammy,

    Your advice has been helpful...

    HOWEVER, I am seeking coding which allows me to place h2 and h2s within my paragraph, not seperately.

    Is that possible?
    HOW DRINKING RESTRUCTURED WATER BENEFITS YOUR WELLBEING AND SAVES YOU LOTS OF MONEY: http://bit.ly/pje6qX

  • #12
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    If your mean to paragraph is <p> tag, then by W3C standards, you cannot have header tags (<h1>, <h2>,...) within <p> tag or <p> within header tags (<h1>, <h2>,...)

    If you want to have heading for each paragraph, try following code:

    Code:
    <div>
    <h2>some header text</h2>
    <p>some text here.......</p>
    </div>
    <div>
    <h2>some header text</h2>
    <p>some text here.......</p>
    </div>
    Let me know if it is same you are asking or your query is different form this....

  • Users who have thanked vikram1vicky for this post:

    learningwebd (08-01-2011)

  • #13
    New Coder
    Join Date
    Jan 2011
    Posts
    23
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    If your mean to paragraph is <p> tag, then by W3C standards, you cannot have header tags (<h1>, <h2>,...) within <p> tag or <p> within header tags (<h1>, <h2>,...)

    If you want to have heading for each paragraph, try following code:

    Code:
    <div>
    
    <h2>some header text</h2>
    <p>some text here.......</p>
    </div>
    <div>
    <h2>some header text</h2>
    <p>some text here.......</p>
    </div>
    Let me know if it is same you are asking or your query is different form this....

    Thanks Vik,

    I had realized this a while ago, but wondered if there was a hack. O well, I have settlled for making an image a h1 and a title as a h2. Thanks again Sammy and Vikram!!!
    HOW DRINKING RESTRUCTURED WATER BENEFITS YOUR WELLBEING AND SAVES YOU LOTS OF MONEY: http://bit.ly/pje6qX


  •  

    Posting Permissions

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