How do I get my basic css to work?

Discussion in 'CSS' started by scoxy, May 20, 2006.

0
  1. #1
    Well this is my first attempt at designing with CSS, and as I haven't really used guides or anything I have some questions and would be greatful for any help.

    I do have one specific question, which is how do I get another two boxes below the original two boxes?
    Also how can I center the whole page?

    Is there any aspect to my coding which is bad practice or something. Thanks.

    <html>
<head>
<style type="text/CSS">
<!--
body {
	background-color: #363;
}
.main {
	width: 250px;
	border: 1px solid #BFB;
	background-color: #FFF;
	padding: 2px;
	float: left;
	height: 240px;
	margin-right: 5px;
	display: block;
}
.title {
	width: 100%;
	background-color: #6C6;
	position: relative;
	top: 0px;
	left: 0px;
	padding: 2px;
}
#menu {
	width: 150px;
	border: 1px solid #BFB;
	background-color: #FFF;
	padding: 2px;
	float: left;
	height: 500px;
	margin-right: 5px;
}

#menutitle {
	width: 100%;
	background-color: #6C6;
	position: relative;
	top: 0px;
	left: 0px;
	padding: 2px;
}
.main1 {
	width: 250px;
	border: 1px solid #BFB;
	background-color: #FFF;
	padding: 2px;
	float: left;
	height: 240px;
	clear: right;
}

.title1 {
	width: 100%;
	background-color: #6C6;
	position: relative;
	top: 0px;
	left: 0px;
	padding: 2px;
	margin: 0;
}
.titlef {
	font-family: verdana;
	font-size: 12pt;
	font-weight: 700;
	color: #252;
	margin: 0;
}
.description {
	font-family: verdana;
	font-size: 10pt;
	font-weight: 500;
	color: #363;
	padding: 10px;
	margin: 0;
}
-->
</style>
</head>
<body>
<div id="menu">
<div id="menutitle">
<p class="titlef">Title</p>
</div>
</div>
<div class="main">
<div class="title">
<p class="titlef">Title</p>
</div>
<p class="description">Description</p>
</div>
<div class="main1">
<div class="title1">
<p class="titlef">Title</p>
</div>
<p class="description">Description</p>
</div>
</body>
</html>
    HTML:
    Sorry I forgot to say I deleted part of the code which my question refers to. But If you save that code as a page you should see two boxes to the right of a bigger box, is it possible to get another two boxes below the original?
     
    scoxy, May 20, 2006 IP
  2. rosytoes

    rosytoes Peon

    Messages:
    230
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am no css guru but this is what I come up with. I added a div to wrap all your boxes on the right hand side and give it a width which is wide enough for 2 boxes side by side. I have done away with your main1 and title1 and just use main and title for all your boxes.

    <html>
<head>
<style type="text/CSS">
<!--
body {
    background-color: #363;
	margin: 0;

}
.title {
    background-color: #6C6;
    padding: 2px;
}
#menu {
    width: 150px;
    border: 1px solid #BFB;
    background-color: #FFF;
    padding: 2px;
    float: left;
    height: 500px;
}
#menutitle {
    background-color: #6C6;
	padding: 2px;
}
.main {
    width: 250px;
    border: 1px solid #BFB;
    background-color: #FFF;
    padding: 2px;
    height: 240px;
	float: left;
    margin-right: 5px;
    display: block;
}
.description {
    font-family: verdana;
    font-size: 10pt;
    font-weight: 500;
    color: #363;
    padding: 10px;
    margin: 0;
}
#main {width: 522px; margin-left: 165px;}
* html #main {margin-left: 157px; width: 510px;}
.topmargin {margin-top: 10px;}
-->

</style>

</head>

<body>

<div id="menu">
<div id="menutitle">
Title
</div>
</div>
<div id="main">
	<div class="main">
	<div class="title">Title</div>
	<p class="description">Description</p>
	</div>
	<div class="main">
	<div class="title">Title</div>
	<p class="description">Description</p>
	</div>
	<div class="main topmargin">
	<div class="title">Title</div>
	<p class="description">Description</p>
	</div>
	<div class="main topmargin">
	<div class="title">Title</div>
	<p class="description">Description</p>
	</div>

</div>
</body>
</html>
    Code (markup):
     
    rosytoes, May 20, 2006 IP
  3. scoxy

    scoxy Peon

    Messages:
    332
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ah thanks, that's a much more logical way of doing it. I just checked it and it looks good, so thanks for the help.
     
    scoxy, May 20, 2006 IP