Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text Boxes, CSS, And a big headache

    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">
    <!--
    body {
    background-color: #000;
    }
    -->


    </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/t...xi/regular.jpg
    This would be the regular resolution I'm looking for

    http://i158.photobucket.com/albums/t...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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.
    Code:
    <!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
            <!--end menu--></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>
                <!--end content--></div>
        <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •