SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question can I use any other tags or CSS elements

    For this example instead of using br or clear or figure tag can I use any other tags or CSS elements?
    test.jpg
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>my page</title>
    <style>
    img.one
    {
    float:right;
    width:400px;
    height:312px;
    
    }
    
    
    h1.two {text-align:right;}
    
    
    </style>
    </head>
    <body>
    <h1 class="two">this is some text.</h1>
    
    <img class="one" src="images/old.jpg" alt="">
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <h1 class="two">this is some text.</h1>
    
    
    
    </body>
    </html>
    Attached Images Attached Images
    Last edited by cpradio; Jul 12, 2013 at 10:26. Reason: Added a descriptive title and html tags

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,435
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    Use a descriptive thread title; yours means nothing and is no help to anyone in the future.

    Put your code in the code tags so that it is easier to read.

  3. #3
    Non-Member
    Join Date
    Jul 2013
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use whatever tag or means to clear a float you want.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Vertical margins or padding are usually better choices than <br> tags.

    There is no instance of "clear" in the code, so I'm just guessing that you are asking about {clear:both}. The way your example is coded, adding {clear:both} to the <h1> tag would be appropriate. (Although one should not have 2 <h1> tags on a real page.)

    I've never heard of a "figure tag". Maybe you mean the <img> tag?

    I'm confident you will find all the answers to these and other questions in most any book about HTML and CSS.

    (Your images are still pending approval.)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Not sure if this is what you meant but here are a number of variations:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>my page</title>
    <style type="text/css">
    .one,.two{float:right;clear:right}
    </style>
    </head>
    <body>
    <h1 class="two">this is some text.</h1>
    <img class="one" src="http://placehold.it/340x312" alt="image description">
    <h2 class="two">this is some text.</h2>
    </body>
    </html>
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>my page</title>
    <style>
    body{text-align:right}
    img.one {
    	display:inline-block;
    	width:400px;
    	height:312px;
    }
    </style>
    </head>
    <body>
    <h1 class="two">this is some text.</h1>
    <img class="one" src="http://placehold.it/340x312" alt="image description">
    <h2 class="two">this is some text.</h2>
    </body>
    </html>
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>my page</title>
    <style type="text/css">
    .wrap{text-align:right}
    </style>
    </head>
    <body>
    <div class="wrap">
    <h1 class="two">this is some text.</h1>
    <img class="one" src="http://placehold.it/340x312" alt="image description">
    <h2 class="two">this is some text.</h2>
    </div>
    </body>
    </html>
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>my page</title>
    <style type="text/css">
    .caption{ text-align:right}
    .caption span{display:block}
    </style>
    </head>
    <body>
    <div class="caption"><span>Caption top</span><img class="one" src="http://placehold.it/340x312" alt="image description"><span>Caption Bottom</span></div>
    </body>
    </html>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by ronpat View Post
    I've never heard of a "figure tag".
    It's a new HTML element:

    http://html5doctor.com/the-figure-figcaption-elements/

  7. #7
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can place div tag before h1 instead of br tag.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    Off Topic:

    It's a new HTML element:

    http://html5doctor.com/the-figure-figcaption-elements/
    Thanks very much for the note and the reference, Ralph.


  9. #9
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you should use margin replace for br tag

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Please when contributing to a thread say something more constructive than a one line vague statement. Some of the replies above are close to "fluff" and add nothing to this discussion.


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
  •