• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

css positioning help

R

Rabbitfacedkilla

Gawd
Joined
Jan 1, 2001
Messages
581
So I'm working on a simple layout for a business venture and I'm having a hell of a time floating a layer on top of another set of layers. You'll see what I mean in a second.

The layout so far is as shown below in an icky low quality jpg:

layout.jpg


Code to make it all happen is two files, index.html & styles.css.


Index.html
Code: 
<html>
<head>
<title>JDM Authority - 6535950 Canada Inc</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="frame">

  <div id="banner">
	<img src="images/layout/banner.png">
  </div>
  
  <div id="contentcenter">
    <h1>content center</h1>
 </div>

  <div id="bottom">
	<img src="images/layout/bottom.png">
  </div>
</div>
  <div id="menu">
	<p>TEST</p>
  </div>
</body>


</html>

styles.css
Code: 
	body {
		text-align:center;
		font-family:Helevetica, Times;
		background: #FFFFFF;

		}
	
	#frame {
		width:909px;
		height: 800px;
		text-align:left;
		}		
		
	#banner {
		height:360px;
		width:738px;
		float:left;
		background:#fff;
		}
	
	#contentcenter {
		width:909px;
		float:left;
		background:#fff;

		}
	
	#bottom {
		height: 90px;
		width:909px;
		padding-left: 200px;
		float: left;
		background:#fff;
		}
	
	#menu {
		height: 350px;
		background: #fff;
		}

The layer I'm trying to float is menu as defined in the styles.css file, it renders as TEST on that disgusting JPEG above. For whatever reason (i know i'm doing something wrong, but I can't figure it out) it floats left on the very bottom. Mind explaining to this very tired fellow what I'm doing wrong?

And before everyone jumps on the standards / validation bandwagon, yes, none of this will validate as of yet. Layout first, validation later. :)
 
Try experimenting a lot with where your "div" blocks are declared in the HTML. Additionally, try cleaning up the repetitive use of identical settings and values in each div statement. The result is that your work is easier to troubleshoot.

The code below isn't an answer, but rather a possible direction to take. I assumed that the menu needed to lay over the 3-sided rectangle near the top-left. This will not perfectly line up, but should get you started in a good direction.

Code for HTML:
Code: 
<html>
	<head>
		<title>JDM Authority - 6535950 Canada Inc</title>
		<link href="styles.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="pageContent">
			<div id="frame">
				<div id="menu">
					<p>TEST</p>
				</div>

				<div id="banner">
					<img src="images/layout/banner.png">
				</div>
  	
  				<div id="contentcenter">
    					<h1>content center</h1>
				</div>
	
  				<div id="bottom">
					<img src="images/layout/bottom.png">
				</div>
			</div>

		</div>
	</body>
</html>

Code for CSS: ( *** See my in-line comment)
Code: 
body {
	text-align:center;
	font-family:Helevetica, Times;
	background: #FFFFFF;
}

#pageContent {
	width: 909px;
	background:#fff;
}

#frame {
	height: 800px;
	text-align:left;
}		
	
#banner {
	height:360px;
	width:738px;
	float:left;
}

#contentcenter {
	float:left;
}

#bottom {
	height: 90px;
	padding-left: 200px;
	float: left;
}

#menu {
	height: 350px;
	text-align: left;
	float: left;
	margin-left: 50px;  /* <--- Experiment with this pixel value */
	position: absolute;    /* This line is important to force the physical position  */
}


And slightly on topic ... look for a Firefox plugin called "Web Developer". Has tons of extremely useful UI rendering tools for seeing and making in-line changes to HTML/CSS.


HTH !!
 
You must log in or register to reply here.
Back
Top