How to add horizontal line with two words on same line as below?

Discussion in 'HTML & Website Design' started by ahmedsalah, Jul 23, 2019.

0
  1. #1
    I try to add horizontal line with two word under image but it not give me result i need .
    fiddle that show what i try to do as following :

    How to show two words (this is test1-this is test2) with horizontal line on same line

    https://jsfiddle.net/p7oqvnah/1/

    my desired result i need actually do as image below :

    http://www.mediafire.com/view/8onnlk9ed4oe4br/How_to_design_red_part_on_picture_.png

    my problem on part under image slide-2.png that include two words with horizontal line
    and parts under two words as image display
     
    ahmedsalah, Jul 23, 2019 IP
  2. Spoiltdiva

    Spoiltdiva Acclaimed Member

    Messages:
    7,837
    Likes Received:
    2,973
    Best Answers:
    53
    Trophy Points:
    520
    #2
    1.Open Word (double click word app icon)
    2.Click Blank Document
    3.Click Insert Tab
    4.Click Shapes
    5.Select a line shape
    6.Draw your line
     
    Spoiltdiva, Jul 23, 2019 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,803
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #3
    Don't use tables for regular content.

    I'd query the use of H2 for this but you know what else is on the page. I'm not sure why the H2 has a class of left when you want them centred. With the addition of the parent div you could leave the class out of the html and do it all in the css

    Change the headings to
    <div class='myblock'><h2 class="left"><span>THIS IS A TEST1</span></h2></div>

<div class='myblock'><h2 class="left"><span>THIS IS A TEST2</span></h2></div>
<div style='clear:both;'>
</div>
    HTML:
    Add this to the css 
    .myblock{float: left; width: 50%;}
    Code (CSS):
     
    sarahk, Jul 23, 2019 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Why the table? Why the SPAN? Why the clearing DIV? What makes these "the start of major subsections of the page" when the first one clearly has NO CONTENT to be a heading OF?

    @Spoiltdiva was being sarcastic, because your HTML is such utter and complete gibberish nonsense you might as well be trying to build a site with Word. (which is basically volunteering to suck the business end of a 12 gauge)

    Your content should dictate the markup via semantics, right now it's hard to say what your proper HTML should be since I've no idea what the ACTUAL content is or why these are headings.

    But those types of oddball screwups are present across the entire page. DIV + IMG doing H1's job, DIV + IMG possibly doing background-image's job (though if it's an advert what makes it a "bg"... )...

    You might want to back up a bit and learn a bit more HTML before worrying about what things look like. (with what things look like NOT being HTML's job!)
     
    deathshadow, Aug 10, 2019 IP