• Locked
1 reply [Last post]
Thu, 2010-09-02 19:24
linde12
linde12's picture
User offline. Last seen 1 year 37 weeks ago. Offline
newbie
Timezone: GMT+2
Joined: 2010-09-02
Posts: 1
Points: 2

Dear forum,

I'd like to position my two CSS-boxes next to eachother on the X-angle, also I'd like to make my mainContent's box to be a static size and not follow the content's size!

Please help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NTIWeb</title>
</head>
<style type="text/css">
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}
 
.mainContent{
float:none;
border: 1px solid black;
margin-right:10%;
margin-left:10%;
height:80%;
width:80%;
background:#0099CC;
}
 
.topmenu{
float:none;
width:80%;
height:24px;
margin:0 auto;
border: 1px solid #000000;
background:#FF6600
}
 
.leftmenu{
float:left;
width:10%;
height:80%;
background:#FF6600;
margin-top:24px;
}
a.btn:visited, a.btn:link
{
text-decoration:none;
color:#000000;
font:"Courier New", Courier, "fast breddsteg";
padding:6px;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
 
a.btn:hover, a.btn:active
{
font:bold;
background:#FF3300;
}
</style>
 
<body>
<!--TOPMENU-->
<div class="topmenu"><a class="btn" href="http://www.google.se">Google</a><a class="btn" href="http://www.google.se">Page</a></div>
<!--LEFTMENU-->
<div class="leftmenu">
abc
</div>
<!--mainContent-->
<div class="mainContent">
:(
</div>
 
 
 
</body>
</html>

Top
Tags:
Thu, 2010-09-02 20:35
#1
CupidsToejam
CupidsToejam's picture
User offline. Last seen 17 weeks 4 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

linde12 wrote: I'd like to

linde12 wrote:

I'd like to position my two CSS-boxes next to eachother

Use floats

Quote:

...make my mainContent's box to be a static size and not follow the content's size!

Use fixed pixel dimensions, not percents.

.mainContent{ width: 200px; height: 600px;}


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
  • Locked