| View previous topic :: View next topic |
| Author |
Message |
leon match
Joined: 03 Mar 2008
Posts: 10
|
 Posted: Mon Mar 03, 2008 7:44 pm how to center text horizontaly and adjust it's vert. pos.? |
 |
|
|
how do I center text on the page (browser) horizontally, adjusting it's height at the same time verticcaly??
I hope my question is clear ))
I want the text to appear in the center on every width monitor but to be exactly and always on one height!! what would be the HTML code??
thank you... |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Mon Mar 03, 2008 8:22 pm |
|
|
|
This is one way using inline styling. The paragraph will always use half of the screen and be in the center.
| Code: |
| <p style="width:50%; margin:0 auto;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam.</p> |
|
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Mon Mar 03, 2008 8:42 pm |
|
|
|
| sticks464 wrote: |
This is one way using inline styling. The paragraph will always use half of the screen and be in the center.
| Code: |
| <p style="width:50%; margin:0 auto;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam.</p> |
|
but how do I position it on the desired height??I need it to be almost at the bottom?? almost, not totaly!!
I used <div align="center">text</div> and the text is in the center but it sticks to the top of the page!! |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Mon Mar 03, 2008 10:51 pm |
|
|
|
This works if it is the only div on the page. If there are other containers it will not work.
| Code: |
<div style="width:50%; margin:50% auto 0 auto; padding:10px;">
<p style="margin:0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam.</p>
</div> |
Is this a footer your trying to get to stick to the bottom of the page? |
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Tue Mar 04, 2008 5:50 am |
|
|
|
no it is a text with a link:
www.crystaluxworld.com
I managed to center the media object on the page (to be in the middle of any size monitor) and now I need this text ("to skip intro ENTER HERE") to be under it centered as well!
thank you for your help!! |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Tue Mar 04, 2008 7:20 am |
|
|
|
Give this a try, it will center in all resolutions and screen size
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="KEYWORDS" content="Crystal, Crystal jewellery, Swarovski crystals">
<meta name="DESCRIPTION" content="Crystalux - World Famous Crystal Jewellery">
<meta name="generator" content="CoffeeCup Visual Site Designer, Version 5.3 for Windows">
<title>Crystalux - World Famous Crystal Jewelry</title>
<script language="JavaScript" type="text/javascript">
<!--
window.onerror = null;
manufacturer = navigator.appName;
versionnum = parseFloat(navigator.appVersion);
if (manufacturer.indexOf('Netscape') >= 0 && versionnum < 4.0)
location.href = 'files/error.html';
if (manufacturer.indexOf('Microsoft') >= 0 && versionnum < 4.0)
location.href = 'files/error.html';
//-->
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
background: #000;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
}
a {
color: #535353;
font-weight: bold;
}
#container {
position: absolute;
top: 50%;
left: 50%;
margin-top: -235px;
margin-left: -326px;
height: auto;
width: 653px;
height: 470px;
}
#container p{
padding: 20px 0 0 0;
margin: 0;
text-align: center;
}
div.Object0 {
width: 653px;
height:422px;
}
</style>
</head>
<body>
<div id="container">
<div class="Object0">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" id="Crystalux" with="" sound="" last="">
<param name="movie" value="Crystalux with sound Last.swf">
<param name="quality" value="high">
<param name="loop" value="false">
<param name="wmode" value="transparent">
<embed style="width: 653px; height: 422px;" src="Crystalux with sound Last.swf" loop="false" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>
</div>
<p><a href="http://www.crystaluxworld.com/Crystalux_Home.html">SKIP INTRO</a></p>
</div>
</body>
</html> |
|
|
madprof
Joined: 26 Jan 2008
Posts: 98
|
| Posted: Tue Mar 04, 2008 11:19 am |
|
|
|
| You can only ever vertically center something in CSS that is fixed in height. If the content you want varies, it can't be done. At least not in CSS. |
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Tue Mar 04, 2008 3:27 pm |
|
|
|
Sticks, you are good !! respect!!
I don't know how you did it - I'm new in this... for me it's all magic!!
thank you...
one more question, if you don't mind?
how do you center the whole page?? the following pages of my website are made for the old monitor and on the bigger screen they lean to the left...
is there any code that makes the page stay in the center??
thank you again!! |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Tue Mar 04, 2008 5:40 pm |
|
|
|
This little bit of css does it all. It's the container that houses all the content. Just applying a margin to the right and top may be fine for your personal monitor but not for the web when the monitor size is unknown.
| Code: |
#container {
position: absolute;
top: 50%; /* container to center of screen from top */
left: 50%; /* container to center from left */
margin-top: -235px; /* minus half the container height */
margin-left: -326px; /*minus half the container width */
height: auto; /* not needed if height is set */
width: 653px; /* width of container */
height: 470px; /* height of container */
} |
By giving the container top and left 50%, this moves the top left corner to the screen center. That's where the negative margins come in. It moves the container back half the width and height.
If you notice I added pixels to make it higher than the movie to make room for the text link at the bottom. I then added some padding to the top of the paragraph to move it down from the movie. |
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Sat Mar 08, 2008 10:45 am |
|
|
|
beautiful!! I realized that you made the movie and the text as one "container"... I did not quite understand about "negative margins" and what are their for, but it is because of my lack of education in this field... and what do you mean "to make IT higher than the movie? to make what higer??
please forgive me my st...ty )) |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Sat Mar 08, 2008 1:30 pm |
|
|
|
"it" being the paragraph of text. Padding to the top to move the paragraph 20px below the movie.
| Code: |
#container p{
padding: 20px 0 0 0;
margin: 0;
text-align: center;
} |
|
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Sun Mar 09, 2008 8:12 am |
|
|
|
I still don't understand - you made it higher than the movie!! Why is it at the bottom of the movie then, if you made it higer ("it" is a paragraf of text - SKIP INTRO)??
may be you ment - "I added pixels to make the movie higher to make room for the text link at the bottom" ?? |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Sun Mar 09, 2008 12:33 pm |
|
|
|
| Pretty much correct. I made the height of the container that holds the movie and paragraph of text higher so both would fit. It would make no difference if the text were at the top or bottom, there would still have to be room for it. If the container were the same height as the movie, the text would be hidden behind the movie because the movie would by default be on top. |
|
leon match
Joined: 03 Mar 2008
Posts: 10
|
| Posted: Sun Mar 09, 2008 6:39 pm |
|
|
|
I got it finally, thanks... ))
the other thing that I can not acomplish is to center the entire page so that it would stay in the middle of any size monitor (I am talking about next pages of my website)!! is there any code that you could do this...?? |
|
sticks464
Joined: 31 Dec 2006
Posts: 1171
|
| Posted: Sun Mar 09, 2008 7:18 pm |
|
|
|
Do the same as previously posted
| Code: |
#container {
position: absolute;
top: 50%; /* container to center of screen from top */
left: 50%; /* container to center from left */
margin-top: -235px; /* minus half the container height */
margin-left: -326px; /*minus half the container width */
height: auto; /* not needed if height is set */
width: 653px; /* width of container */
height: 470px; /* height of container */
} |
Container being the container that all your code is in. |
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
