Text Boxes, CSS, And a big headache [Archive]

Katouu

03-03-2009, 04:12 PM

I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found here: http://www.myspace.com/nourotika

I have tried and tried and this is the website that came closest to my problem...

My code would be:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">


</style></head>

<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>

http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg
This would be the regular resolution I'm looking for

http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg
And this would be my screen resolution problem Sad

I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated.

Excavator

03-03-2009, 05:30 PM

Hello katouu,
In this example I've

put a DocType at the beginning, see the link about DocTypes in my sig below
got rid of the inline styles
positioned things with floats and margins instead of absolute positioning

The different colors are just so you can see where each div is. I put height:700px; on #menu but it may not be needed when you start putting your menu in it.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font: bold 11px "Comic Sans MS";
background: #000 url(http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg) no-repeat left top;
text-align: center;
color: #F00;
}
* { /*zeros out default margin/padding*/
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 865px;
margin: 190px 0 0 370px; /*places #wrap 190px down, 370px left*/
overflow: auto; /*clears the floats*/
}
#menu {
background: #00FF00;
float: left; /*so content can go next to it*/
width: 300px;
height: 700px; /*for testing*/
}
#content {
background-color: #0000FF;
margin: 130px 0 300px; /*moves #content 130px down and makes room for #menu*/
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
menu goes here
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</body>
</html>