Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Simple HTML question


  • Please log in to reply
33 replies to this topic

#1 patbox

patbox

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 28 March 2009 - 06:44 PM

This is probably a very simple question, but I could not solve it:

How do I achieve to display text in the vertical middle of the page?

(It is easy to do it horizontally with align="center", but to do it vertically probably need a bit of trick.)
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:37 AM

Posted 28 March 2009 - 06:55 PM

style="margin-top:50%; margin-bottom:50%;"

Right off the top of my head......

#3 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 28 March 2009 - 09:09 PM

style="margin-top:50%; margin-bottom:50%;"

Right off the top of my head......


Thanks, I tested it. It does not seem to work. This is what I did:

<body style="margin-top:50%; margin-bottom:50%;">
<center>
hello
</center>
</body>

And it gave me a long vertical slide bar, and the text was off the screen, I had to scroll down. Check that out.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#4 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 28 March 2009 - 09:16 PM

You gave me a good motivation and I think I found the solution:

<body>
<table width=100% height=100%>
<tr><td>
<center>
hello
</center>
</td></tr>
</table>
</body>

Strange enough it gives text to the middle of the page. It seems that <center> works both vertically and horizontally.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:37 AM

Posted 29 March 2009 - 09:49 AM

a. You are using improper markup to center your text. If you want to center your text in a table cell, you use align="center"
b. <center> is deprecated, which means that it should not be used at all. There may come a point in time where browsers quit supporting it, and your page will break.
c. center has nothing to do with vertical alignment.
:thumbsup:

#6 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 29 March 2009 - 02:31 PM

a. You are using improper markup to center your text. If you want to center your text in a table cell, you use align="center"
b. <center> is deprecated, which means that it should not be used at all. There may come a point in time where browsers quit supporting it, and your page will break.
c. center has nothing to do with vertical alignment.
:thumbsup:



Yes I noticed. I cant put an embedded object or a picture to the center of page, what ever I do, what ever I try.

All I want is to put e.g. a picture to the center of a page (vertically and horizontally).

I guess the solution would be to create some table %100 x %100 and align it vertically, but nothing works for me

:-(
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#7 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:10:37 PM

Posted 29 March 2009 - 11:22 PM

with CSS2, you could do that with "<div style="position: absolute; top: 50%; left: 50%;"><img src="PathToImage" /></div>" You could also do "margin-bottom: 50%; margin-top:(if this would be needed, don't remember) 50%; margin-left:(not sure if left is the right argument) 50%;" There is also "valign=center align=center" Though that has been deprecated...

#8 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 30 March 2009 - 09:44 PM

with CSS2, you could do that with "<div style="position: absolute; top: 50%; left: 50%;"><img src="PathToImage" /></div>" You could also do "margin-bottom: 50%; margin-top:(if this would be needed, don't remember) 50%; margin-left:(not sure if left is the right argument) 50%;" There is also "valign=center align=center" Though that has been deprecated...


Ok I will try that. This sounds good. No idea what is CSS2, but I sow the <div> tags somewhere. I will also try the valign parameter. Was align depreciated as well? I use align in 100% of my scripts.

The margin-bottom and margin-top did not for for me. I.e. the picture has 20% of the website side, and I put margin-top and margin-bottom at 50%--- I am left with a page of 120% size and ugly side bars.

Thank you all for the great suggestions. Keep me posted.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#9 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:10:37 PM

Posted 30 March 2009 - 10:21 PM

Well you could try the margins at 25%... The CSS2 is not supported by Internet Explorer... Yes I do believe align has been depreciated, I haven't used it in some time now... You could also try using the picture in the background... Using CSS, you could easily position it to be centered...

#10 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 30 March 2009 - 10:56 PM

Well you could try the margins at 25%... The CSS2 is not supported by Internet Explorer... Yes I do believe align has been depreciated, I haven't used it in some time now... You could also try using the picture in the background... Using CSS, you could easily position it to be centered...


a. But if I position it with CSS all my readers using IE will will not see it in the middle? That is a big price.
b. I could live it putting it down with at least 25% margins.. not perfect but better then <br><br><br>
c. What do you use if not align? How anything be done without align="center"?
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#11 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:37 AM

Posted 30 March 2009 - 11:15 PM

But if I position it with CSS all my readers using IE will will not see it in the middle? That is a big price.

Yeah, well this statement is incorrect:

CSS2 is not supported by Internet Explorer


CSS2 has been a standard since 1998, and just underwent a minor revision last year. Perhaps he meant CSS3?

What do you use if not align? How anything be done without align="center"?

You use CSS styles.
http://www.quackit.com/css/css_align.cfm
http://www.ehow.com/how_2284643_left-right...-align-css.html

Incidentally, if you have a question about which tags are deprecated, or how to use the tags, use a search like this:inurl: w3c.org align. Replace 'align' with any tag that you are questioning. The text will tell you exactly which browsers trip over which tags, or which tags are deprecated, etc.

#12 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:10:37 PM

Posted 31 March 2009 - 01:08 PM

No CSS2, position, and top, left/right, is a part of CSS2, Internet Explorer does not support those... Supposedly Internet Explorer 8 is supposed to support some aspects of CSS2, but they are not going to completely support CSS2 or 3..
Patbox - You can have the image as a background image, the css for changing the position of a background image is supported with Internet Explorer.

#13 patbox

patbox
  • Topic Starter

  • Members
  • 456 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:07:37 AM

Posted 31 March 2009 - 09:31 PM

Patbox - You can have the image as a background image, the css for changing the position of a background image is supported with Internet Explorer.


The image was an example, in fact I want to put embedded objects to the middle of page (like videos). I am really shocked how many differences there are between FF and IE (probably also OPera does its own stuff).
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#14 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:37 AM

Posted 31 March 2009 - 09:45 PM

No CSS2, position, and top, left/right, is a part of CSS2

That is hardly the same as IE not supporting CSS2. What you meant was that it doesn't support some elements. :thumbsup:

I am really shocked how many differences there are between FF and IE

Why? Are you shocked at the difference between VW, Ferrari ,and Volvo? They are completely independent projects. Why would you expect them to behave the same way? This has been the bane of web developers for years.
The problem that you are trying to solve is that you want different types of objects to behave in the same way, and that isn't going to happen. The best you can do is center an IFrame or a Div, and then feed the content into that container.

#15 burn1337

burn1337

  • Banned
  • 311 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:10:37 PM

Posted 31 March 2009 - 10:31 PM

No, I mean that prior to IE8, IE had no support for CSS2... (If I remember correctly, IE7, didn't have support for CSS2 either...)
Patbox - Ok so you want an image in the center of the page, but you also want objects in the center of the page... So are you wanting the objects to overlay the picture, or are you wanting the picture to overlay the objects? btw with the method I said, you don't have to have it as the background of all your pages, I meant in the div you want to display it, set it as it's background pic, and use the background alignment capabilities...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users