www.webdeveloper.com
Results 1 to 10 of 10

Thread: Problem in HTML text alignment.

  1. #1
    Join Date
    Jan 2014
    Location
    Pakistan
    Posts
    15

    Post Problem in HTML text alignment.

    Hi everyone) After i made a drop down navigation menu at the top of my webpage ,i put my paragraph of text but it,s starting right next to my navigational menu .I just want my paragraph to start from below my navigational menu.Need your help)Also please tell me how to upload a screen shots in pics in threads like this so i can include the screen shot of my web page.
    Thanks
    Tahir

  2. #2
    Join Date
    Jan 2014
    Location
    Pakistan
    Posts
    15
    UPDATE:-
    I am posting my source code you guys can spot the problem easily.


    Code:
    <html>
    <head>
    <title>REKLAMA HUB</title>
    <style>
    /*---- CROSS BROWSER DROPDOWN MENU ----*/
    ul#nav {margin: 0 0 0 200px;}
    ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
    ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
    ul.drop { position: relative; z-index: 597; float: left; }
    ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
    ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
    ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
    ul.drop ul li { float: none; }
    ul.drop ul ul { top: -2px; left: 100%; }
    ul.drop li:hover > ul { visibility: visible }
    </style>
    </head>
    <body>
    <ul id="nav" class="drop">
      <li>About Us
        <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Testimonials</a></li>
          <li><a href="#">Staff</a>
            <ul>
              <li><a href="#">George Orsmond</a>
                <ul>
                  <li>Web Design</li>
                  <li>Graphic Design</li>
                  <li>HTML</li>
                  <li>CSS</li>
                </ul>
              </li>
              <li><a href="#">Dave Macleod</a></li>
            </ul>
          </li>
          <li><a href="#">FAQs</a></li>
        </ul>
      </li>
      <li>Advertisers
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Logo Design</a></li>
        </ul>
      </li>
      <li>Affiliates
        <ul>
          <li class="dir"><a href="#">Templates</a></li>
          <li class="dir"><a href="#">Stock Images</a>
            <ul>
              <li><a href="#">Category 1</a></li>
              <li><a href="#">Category 2</a></li>
              <li><a href="#">Category 3</a></li>
              <li><a href="#">Category 4</a></li>
              <li><a href="#">Category 5</a></li>
            </ul>
          </li>
          <li><a href="#">Featured</a></li>
          <li><a href="#">Top Rated</a></li>
          <li><a href="#">Resources</a></li>
        </ul>
      </li>
      <li><a href="#">Our Benefit</a></li>
      <li>Refferral Scheme
       </li>
      <li>FAQ,s </li>
      <li>Contact Us
        <ul>
          <li><a href="#">Contact Form</a></li>
          <li><a href="#">How to get here</a></li>
          <li><a href="#">View the map</a></li>
        </ul>
      </li></ul>
    <p align="justify">Reklama Hub is  a performance based pay per sale network which only deal with digital products and services</br> 
    Our job is to put the advertisers and affiliates under one big platform so the advertisers can place their  digital products and services here to thousands of our affiliates and later they can promote their products and services for getting commissions.</br>In case of each sale the affiliate will get a portion of it as a commission and the rest of it will goes to the advertiser.Well we only deduct the 
    small percentage from the advertiser.</br>
    We know how hard it is to expose your business on internet these days.A
    lot of advertisers are fearful and dont want to put their money into online advertising these days as they are aware of the fact that online competition 
    is incredibly high these days,thatswhy we are taking all risk on ourselves in promoting your product or service online so the advertisers can advertise 
    with reklama hub without any fear because we are the performance based pay per sale network the advertisers will only pay us for the results.</br>
    
    
    On the other hand we treat our affiliates with very special care and attention because they are our valueable assets we are only going to earn if they will earn.It doesnt matter wheather
    you are our small size or a super affiliate you will get the equal attention from our support team</br>
    Tracking and earning reports are available to our affiliates 24/7.They receive prompt payments from us</br> </p>
    COPYRIGHT 2014İREKLAMA HUB
    </body>
    </html>
    Last edited by jedaisoul; 06-17-2014 at 03:46 PM. Reason: QUOTE tags amended to CODE

  3. #3
    Join Date
    Jun 2014
    Posts
    2
    To bring it to a new line, just add a break, <br /> between the end of the list, and the start of the paragraph.
    To upload pictures in threads, take a screenshot by pressing the Prnt Scrn button on your keyboard, go into MS Paint, paste (CTRL+V), save the image, then go to an image site such as imgur, get the direct image link, and put it between the BBCode image tag, [img]LINK_HERE[/img]

  4. #4
    try adding:

    p { clear:both; }

    ul.drop is floated, so the P is riding up under or near the float.

    Though really out have a lot of classes for nothing, a lot of incomplete/invalid markup, and some not exactly stunning menu methodologies there. I'm on the way to bed, but I'll leave the tab open to try and remember to revisit this tomorrow to give you a quick rewrite that will be a bit more... versatile and reliable.

  5. #5
    for left alignment use <p align="left"
    for right <p align="right"
    for centre <p align=center"

    <break> tag is used to separate paragraphs.

  6. #6
    Quote Originally Posted by lushi View Post
    for left alignment use <p align="left"
    for right <p align="right"
    for centre <p align=center"
    Which has nothing to do with the OP's question

    Quote Originally Posted by lushi View Post
    <break> tag is used to separate paragraphs.
    ... and there is no <break> tag. There are line-breaks, <br />, but those really shouldn't be used between OR inside paragraphs, as that's not what they are for.

  7. #7
    Join Date
    Jun 2014
    Posts
    27
    Quote Originally Posted by deathshadow View Post
    try adding:

    p { clear:both; }

    ul.drop is floated, so the P is riding up under or near the float.
    He need to make proper div tag to separate the paragraph from the menu. It is required to structure the web in proper ways not just any way.
    You are right here but i would say better make use of container and content theory and use div tags with proper css properties.

  8. #8
    Quote Originally Posted by shophiarajan47 View Post
    He need to make proper div tag to separate the paragraph from the menu. It is required to structure the web in proper ways not just any way.
    You are right here but i would say better make use of container and content theory and use div tags with proper css properties.
    Except that a DIV is semantically neutral; meaning it doesn't have a blasted thing to do with "structure" of a document and exists solely as a hook for style... which means one should avoid adding DIV until you HAVE TO and have used up all the semantic tags properties FIRST. HR and H1..H6 are 'structural' (and why HTML 5's SECTION, NAV and FOOTER are pointless code bloat) -- DIV and SPAN are not as DIV and SPAN don't MEAN anything other than "this element MAY get a style" -- without saying what that style IS.

    Don't go slapping DIV around things until you NEED a DIV around it!

  9. #9
    Join Date
    Jan 2014
    Location
    Pakistan
    Posts
    15
    Quote Originally Posted by Infamous View Post
    To bring it to a new line, just add a break, <br /> between the end of the list, and the start of the paragraph.
    To upload pictures in threads, take a screenshot by pressing the Prnt Scrn button on your keyboard, go into MS Paint, paste (CTRL+V), save the image, then go to an image site such as imgur, get the direct image link, and put it between the BBCode image tag, [img]LINK_HERE[/img]
    Problem solved ) Million thanks to you buddy

  10. #10
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    use DIV for <ul> tag
    for example
    <div class="header">
    <ul>
    <li></li>
    <li></li>
    </ul>
    </div>

    and the css style code for class header as given below:
    .header {
    width:100%;
    margin:0 auto;
    float:left;

    }

    OR

    style code for paragraph

    p {
    clear:both;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles