www.webdeveloper.com
Results 1 to 12 of 12

Thread: How to make text stay in the center of the page

  1. #1
    Join Date
    May 2011
    Posts
    6

    How to make text stay in the center of the page

    Hi. I have simple page with "rubber" header and footer 20% each, 60% is my content space. Text should stay in the content right in the middle and take spase of 20% of the screen as well as header or footer (or 1/3 of the content region). Anybody can help me plz?
    Here how my page should look like
    http://img854.imageshack.us/img854/2417/webj.jpg

  2. #2
    Join Date
    Sep 2009
    Posts
    163
    your link is not working.
    If you just want to keep your text in center then use the center tag.
    I think is the basic for HTML

  3. #3
    Join Date
    May 2011
    Posts
    6

    Code

    I need text to stay not just in the center of the line, but in the center of the whole page and size to be not in pixels, but in %, 20% of the screen, I don't know if it is possible at all. Can anybody help me with code?

  4. #4
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    You should just set your margins to auto.



    margin-left:auto;
    margin-right;auto;

  5. #5
    Join Date
    May 2011
    Posts
    6
    but how about top and bottom? And I need it to be always 1/3 of the content (or 20% of the whole page). So when you restore down the window the text would stay in line and would not divide in two or three lines.
    here is the example http://img854.imageshack.us/img854/2417/webj.jpg (if this link doesn't work for some reason from this forum, try to copy and paste plz)

  6. #6
    Join Date
    May 2011
    Posts
    6
    does anybody know how to solve this problem ?

  7. #7
    Join Date
    Apr 2011
    Location
    Outer Space
    Posts
    7
    I'm guessing you want the content text to be center and 1/3 of space between the header and footer. If that's what you meant you need to apply this to the content area?
    HTML Code:
    margin-top: 33.3%;
              margin-bottom: 33.3%;
    can you be a bit more specific?
    that would help us solve ur problem

  8. #8
    Join Date
    May 2011
    Posts
    25
    Specifics would help. I would create a div in css set the margin to 0 and padding to whatever you want to space from the top.

  9. #9
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    If you want something to remain 'glued' to the bottom of the page, look at the CSS on my robots generator page. The link is in my signature.

    I have 'glued' an advert for my MetaTagGenerator in the footer on the right hand side and it stays there. You can use this same technique to fix your header or footer.

    I've used a static menu like this on TheSearchEngineList.com - go and have a look to see how it works with a header.

  10. #10
    Join Date
    May 2011
    Posts
    6
    Thanks, but if somobody could give me a code for whole body would be nice, cuz I'm very very beginner

  11. #11
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,114
    Maybe the best way to start is with a template that does what you want already.

    You can download a lot of free Open Source Web Designs that you can modify - you can certainly find one that does what you want it to do.

    http://www.oswd.org - Open Source Web Designs.

    Good luck!

  12. #12
    Join Date
    May 2011
    Posts
    6
    No, I don't want a template, and there are no such template I need. Here is the test page http://design.pindosiya.com/ I need this text in the middle to stay in one line and take about 20% of the whole page all the time, I mean when you restore down the page this text should not split.
    And another question, I need to do menu in the middle of that footer to look like three columns, and I don't want it to look like links.
    And I need it to look the same in every browser.
    Guys I will really appreciate the full code. Thank you

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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