Forum Moderators: open
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>domain name</title>
<style type="text/css">
<!-- background image -->
body {background-image: url(example.jpg); background-repeat: no-repeat;}
<!-- text style -->
p {align:right;
color:white;
font-family:genuine;
font-size:80pt;
line-height:58%;}
div.maintext {margin-right: 550px;
margin-top: 160px;
</style>
</head>
<body>
<div class="maintext">
<p align="right" >DOMAIN</p>
<p align="right" >NAME</p>
<p align="right" >DOT</p>
<p align="right" >COM</p>
</div>
</body>
</html>
[edited by: tedster at 5:45 am (utc) on Aug. 17, 2009]
[edit reason] remove the real domain name [/edit]
The first thing I notice is your css section. The first rule has a syntax error - it should be text-align:right rather than just align:right. Then there's the font-family. I don't know what "genuine" is, but even if it is a font name, it is still only one font and not a "font-family".
So apparently you are just learning HTML and CSS - good for you. Start with some good habits. The best way to make sure your pages display well cross-browser is to begin with valid code, which you can check for free at the W3C:
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Only when you are certain your source code is valid can you really work out any other cross-browser issues. Otherwise you can be stuck in an impossible situation, since each browser has its own error recovery routine and then won't work the same.
I fixed the syntax errors your pointed out (as far as I can tell, font-family is the correct way to specify the name of a font in CSS. Is this wrong?).
I made a few small changes:
1) expressed the background image as a percentage of the browser window, so it scales correctly.
2) defined the dimensions of the "maintext" <div> in the CSS.
However, I'm trying to center the text in the middle of the browser window. I tried margins and relative positioning but I couldn't get it to work. Any tips? Here's the updated code, if you need it.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title here</title>
<style type="text/css">
<!-- background image -->
body {background-image: url(URL in here); background-repeat: no-repeat; background-position: 100%;
width: 100%;
height: 100%}
<!-- text style -->
p {text-align:right;
color:white;
font-family:genuine;
font-size:80pt;
line-height:58%;}
#maintext {width: 300px;
height: 380px;}
</style>
</head>
<body>
<div class="maintext">
</div>
</body>
</html>
[edited by: engine at 11:11 am (utc) on Aug. 17, 2009]
[edit reason] See WebmasterWorld TOS [/edit]
If you want to center it, then why do you right align the text ?
There are a number of ways in CSS to center things and text and IE -as usual- gets it wrong every so often.
The best possible approach is to not develop in IE. Develop in something else, anything else. Fix IE trouble at the very end, much easier, much less frustration.
To center block elements: give it auto margins on the left and right (and a width of course, otherwise it's as wide as its parent)
To center inline elements: text-align:center;
A font family is a list of fonts, not one font. The list of fonts should end with a generic font to avoid the browser default (which is courier if I'm not mistaken)
I've no idea what your "genuine" font looks like, so suggesting alternatives is impossible (and with such a generic sounding name it's virtually impossible to google for it and find something useful)
but try something like:
font-family: genuine, "Gill Sans", arial, helvetica, sans-serif;
Note the quotes around fonts with a space in their name, and the last being one of the generic fonts that all browsers should have.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>domain name</title>
</head>
<style type="text/css">
body {width:100%; height:100%;}
#ohdavidtext {background-image: url(example.jpg);
background-repeat:no-repeat;
width:100%;
height:100%;
margin:auto; }
#text {width: 175px;
height: 260px;
color:white;
position:absolute;
left:40%;
top:28%;
font-size:48pt;
line-height:100%;
font-family:"ms gothic";
text-align:right;}
</style>
<body>
<div id="ohdavidtext">
<div id="text"><b>
DOMAIN
NAME
DOT
COM</b>
</div>
</div>
<div id="bg">
</body>
</html>
[edited by: tedster at 4:45 am (utc) on Aug. 18, 2009]
