CSS & Window sizes

Discussion in 'CSS' started by can2564, May 19, 2008.

0
  1. #1
    I have issues with window sizes...

    I'm trying to avoid tables and using Div's for everything...

    I create something on my laptop that has a 15in monitor screen then check it out at work, which has a 17 wide screen and every thing is off...

    Have tryed position: absolute; & position: relative;
    tryed using % & px... no matter what I do it's always different...

    Is there a special trick to this?

    Here is a few bits of code:

    Let me explain a littel first... header is the container for the headers(title)... headers 1&2 are the actual headers which are just words that are off set slightly from each other... header 3 is a different title under headers 1&2...


    #container {
    margin: 0px 0px 0px 0px;
    position: absolute;
    width: 900px;
    }


    body{
    background-image:url('images/modRecRm 1.jpg');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:top left;
    background-color:#000;
    font-family:papyrus;
    color:#AB9F82;
    font-size:12px;
    }



    /*************header*******************/

    #header{
    margin:0px 0px 0px 440px
    }

    #head2{

    margin:-70px 0px 0px 0px;
    color:#99ccff;
    font-size:45px;
    }

    #head1{

    margin:0px 0px 0px 0px;
    font-size:45px;
    padding-left:2px;
    color:#fff;
    }

    #head3{
    color:red;
    font-size:18px;
    margin:0px 0px 0px 100px;
    }
    /******************************************/

    /***************Line under name*************/

    #line{
    border-bottom: 1px solid #AB9F82;
    margin:-60px 0% 0% 440px;
    width:340px;
    }
    ______________________

    <div id="container">

    <div id="header">
    <p class id="head1"><span>The Jane Deans</span></p>
    <p class id="head2"><span>The Jane Deans</span></p>
    <p class id="head3"><span>Classic Rock</span></p>
    </div>

    <div id="line"></div>

    Advanced thanks for any suggestions...
     
    can2564, May 19, 2008 IP
  2. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #2
    do you have a live link? much easier to help
     
    HDaddy, May 21, 2008 IP
  3. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It's hard to code something when you don't know what the end result is supposed to look like. Here's some code to get you started. I've essentially replace your #Header1 with proper H1/H2/H3 tags and cleaned up the code. Hopefully, this should get you started.

    Some of your code may have been cut. It's either because I didn't understand what you wanted it to do, or it simply didn't work.

    Note that I didn't keep the #Line because I wasn't sure what you wanted underlined exactly.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">

/* ===== FRAMEWORK ===== */

body {
	background: #000000 url('images/modRecRm 1.jpg') no-repeat top left fixed;
	color: #AB9F82;
	font-size: 67.5%;
	margin: 0;
	padding: 0;
	}
	
div#container {
	background-color: #FF0000;
	font-size: 1.2em;
	font-family: Papyrus, "Times New Roman", Times, serif;
	position: absolute;
	left: 0;
	top: 0;
	width: 900px;
	}
	
/* ===== HEADERS ===== */

div#header {
	margin: 0 0 0 440px;
	}
	
	div#header h1 {
		color: #99CCFF;
		font-size: 4.5em;
		margin: 0; /* Removed negative margin since application unknown. */
		}
		
	div#header h2 {
		color: #FFFFFF;
		font-size: 4.5em;
		margin: 0;
		padding: 0 0 0 2px;
		}
		
	div#header h3 {
		color: #FF0000;
		font-size: 1.8em;
		margin: 0 0 0 100px;
		}
	
</style>
</head>
<body>

<div id="container">
		<div id="header">
			<h1>The Jane Deans header 1</h1>
			<h2>The Jane Deans header 2</h2>
			<h3>Classic Rock</h3>
		</div>
	<div id="line"></div>
</div>

</body>
</html>
    HTML:
     
    steelfrog, May 22, 2008 IP