Проблем CSS

LiskO · 7 Август 2009

Та опитвам се да си направя сайт.
И не съм много напред с CSS.
Обаче се понаучих. Така ето на тази картинка е структората на сайта
ми в общи линии.
Нещата отбелязани с 1 съм ги направил перфектно.
Нещата отбелязани с 0 ми куцат.

Така трябва да направя 1 бг с float left.
После прая 2 дива с floadt left, обаче се бъркат нещо с долното
Щото горе са 2 па доло 1.Ако ме разбирате.
Clear-вал съм си навсякъде, където трябва (демек не са едно до друго и пак нещо не става.
Та ако може някой да помогне

devent · 7 Август 2009

Дай код?

LiskO · 7 Август 2009

Код:

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body {
	background: #000 url('../images_/body_loop.gif') repeat-x 0 0;
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.clear {
	clear: both;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
}

#body-top-text {
	background: url('../images_/body_top_text.png') no-repeat left bottom;;
	height: 31px;
	width: 326px;
	float: left;
	display: block;
	position: relative;
	left: 95px;
	top: 30px;
}

#body-top-symbol {
	background: url('../images_/body_top_symbol.png') no-repeat left bottom;;
	height: 102px;
	width: 95px;
	float: left;
	display: block;
	position: relative;
	left: 87px;
	top: 15px;
}

.body-top-image {
	background: url('../images_/body_top_image.png') no-repeat 0 0;
	width: 382px;
	margin-left: 133px;
	height: 139px;
	display: block;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 50%;
}

#header-menu {
	background: url('../images_/header_menu.jpg') no-repeat left bottom;
	height: 40px;
	padding-top: 7px;
	clear: both;
	padding-left: 87px;
}

.topnavi {
	float: left;
	padding: 2px 0 0 33px;
	position: relative;
	left: 120px;
	height: 28px;
	overflow: hidden;
	background: url('../images_/topnavi_lft.gif') no-repeat 26px bottom;
}
.topnavi ul {
	background: url('../images_/topnavi_mid.gif') repeat-x;
	height: 28px;
	overflow: hidden;
	width: 415px;
}
.topnavi li {
	float: left;
	list-style: none;
}
.topnavi a {
	padding: 8px 15px;
	text-transform: uppercase;
	font-size: 10px;
	color: #7c7b7b;
	height: 12px;
	float: left;
	display: block;
	text-decoration: none;
}
.topnavi a:hover {
	color: #BBB;
}

#main {
	height: 176px;
	clear: both;
	overflow: hidden;
}

.main-lft {
	background: url('../images_/main_lft.jpg') no-repeat 0 0;
	width: 84px;
	height: 176px;
	display: block;
	float: left;
}

.main-mid {
	width: 821px;
	float: left;
	display: block;
	background: url('../images_/main_mid.jpg') repeat-x 0 0;
	height: 157px;
	padding-top: 19px;	
}

#top-sms {
	width: 900px;
	display: block;
	padding-right: 4px;
}

.top-1-sms, .top-2-sms, .top-3-sms {
	float: left;
	padding: 5px;
	border: 1px solid #000;
	height: 140px;
	width: 140px;
	background: #0f0f0f url('../images_/top_navi.gif') no-repeat;
}

.top-4-sms, .top-5-sms {
	float: left;
	padding: 5px;
	border: 1px solid #000;
	height: 140px;
	width: 140px;
	background: #0f0f0f url('../images_/top_navi.gif') no-repeat;
}


.top-space {
	float: left;
	display: block;
	width: 200;
	height: 140px;
}

.top-sms_navi-text {
	padding: 8px;
	font-size: 10px;
	color: #7C7B7B;
}

.top-sms_navi-text p {
	font-size: 11px;
	line-height: 16px;
	padding:10px 5px;
}

.top-sms_navi-text p a {
	text-decoration: none;
	color: #aaa;
	border-bottom: 1px dotted #aaa;
}

.main-rit {
	float: right;
	background: url('../images_/main_rit.jpg') no-repeat 0 0;
	display: block;
	width: 55px;
	height: 176px;
}

#space {
	float: left;
	display: block;
	width: 100%;
	height: 20px;
	clear: both;
}

.body {
	float: left;
	width: 620px;
}

.body-header {
	margin: 0 auto;
	width: 620px;
	height: 10px;
	display: block;
	position: relative;
	left: 71px;
	top: 0px;
	background: url('../images_/body_header.gif') no-repeat;
}

.body-background {
	width: 620px;
	height: 300px;
	display: block;
	position: relative;
	left: 70px;
	top: 0px;
	background: url('../images_/body_background.gif') repeat-y;
}

.inner-body {
	width: 620px;
	padding: 15px 15px 15px 25px;
	color: #333;
}

.body-footer {
	margin: 0 auto;
	width: 640px;
	height: 10px;
	display: block;
	position: relative;
	left: 71px;
	top: 0px;
	background: url('../images_/body_footer.gif') no-repeat;
}


.sidebar {
	float: right;
	width: 242px;
	overflow: hidden;
}

.sidebar h3 {
	font-size: 10px;
	font-weight: normal;
}

.bar {
	background: url('../images_/bar_background.gif') repeat-y 0 0;
	width: 212px;
	display: block;
	float: left;
}

.bar img {
	border: none;
}

.bar h3 {
	background: url('../images_/bar_bottom.gif') no-repeat 0 0;
	height: 23px;
	padding-bottom: 5px;
	clear: both;
	overflow: hidden;
	width: 212px;
	display: block;
	padding-left: 20px;
	text-align: center;
	padding-top: 19px;
	color: #FFF;
	text-transform: uppercase;
}

.bar ul {
	width: 178px;
	padding-left: 25px;
	overflow: hidden;
}

.bar ul li {
	list-style: none;
	height: 30px;
	overflow: hidden;
	padding-bottom: 1px;
	background: url(images/hori_div.gif) repeat-x left bottom;
}

.bar ul li a {
	text-decoration: none;
	color: #5e5e5e;
	padding-top: 7px;
	font-family: "Century Gothic", Arial, Tahoma;
	display: block;
	height: 23px;
	padding-left: 3px;
	outline: none;
}

.bar ul li a:hover {
	background: url(images/sbar_a_hili.gif) repeat-x left bottom;
}

.bar-footer {
	background: #000 url('../images_/bar_footer.gif') no-repeat 0 0;
	height: 45px;
	width: 212px;
	display: block;
	padding-bottom: 10px;
	clear: both;
}

.login {
	background: url('../images_/login_bar.jpg');
	width: 242px;
	height: 229px;
	display: block;
	clear: both;
}

.login a {
	color: #70cee6;
	text-decoration: none;
}

.login a:hover {
	border-bottom: 1px dotted #70cee6;
}

.login h3 {
	float: right;
	padding-top: 17px;
	padding-right: 30px;
	width: 175px;
	height: 30px;
	text-align: center;
	text-transform: uppercase;
	color: #333;
	font-weight: normal;
}

.login p {
	clear: both;
	width: 135px;
	color: #939393;
	line-height: 18px;
	padding: 5px 0 5px 30px;
}

.footer {
	float: left;
	width: 873px;
	overflow: hidden;
	position: relative;
	left: 60px;
	top: 10;
}

.footer-header {
	margin: 0 auto;
	width: 873px;
	height: 10px;
	display: block;
	position: relative;
	left: 0px;
	top: 0px;
	background: url('../images_/footer_header.gif') no-repeat;
}

.footer-background {
	width: 873px;
	display: block;
	position: relative;
	left: 0px;
	top: 0px;
	background: url('../images_/footer_background.gif') repeat-y;
}

.inner-footer {
	width: 873px;
	padding: 10px 5px 5px 10px;
	color: #333;
}

.inner-footer  p {
	font-size: 11px;
	line-height: 10px;
	padding: 10px 300px;
	color: #333;
}

.footer-footer {
	margin: 0 auto;
	width: 873px;
	height: 10px;
	display: block;
	position: relative;
	left: 1px;
	top: 0px;
	background: url('../images_/footer_footer.gif') no-repeat;
}

Код:

<body>
<div id="wrapper">
<div id="body-top-symbol"></div>
<div id="body-top-text"></div>
<div class="clear"></div>
<div id="header-menu">
 <div class="topnavi">
<ul>
 <li><a href="index.php">Home</a></li>
 <li><a href="index.php">About</a></li>
 <li><a href="index.php">Contact</a></li>
</ul>
 </div>
</div>
<div class="clear"></div>
<div class="body-top-image"></div>
<div id="main">
 <div class="main-lft"></div>
 <div class="main-mid">
  <div id="top-sms">

	<div class="top-space"> </div>
   <div class="top-1-sms">
	<img src="./images_/user_sexy.jpg" alt="iwa" />
   </div>

	<div class="top-space"> </div>
   <div class="top-2-sms">
	<img src="./images_/user_sexy.jpg" alt="sexy" />
   </div>

	<div class="top-space"> </div>
   <div class="top-3-sms">
	<img src="./images_/user_sexy.jpg" alt="iwety" />
   </div>

	<div class="top-space"> </div>
   <div class="top-4-sms">
	<img src="./images_/user_sexy.jpg" alt="MARIQ" />
   </div>

	<div class="top-space"> </div>
   <div class="top-5-sms">
	<img src="./images_/user_sexy.jpg" alt="liskouu" />
   </div>
  </div>
 </div>
 <div class="main-rit"></div>
</div>
<div id="space"></div>
<div class="first">
 <div class="first_male-header"></div>
  <div class="first_male-background">
   <div class="inner-first_male">
<img src="./images_/user_sexy.jpg" alt="liskouu" />
     <p align="center" ></p>
   </div>
  </div>
 <div class="first_male-footer"></div>

 <div class="first_frmale-header"></div>
  <div class="first_frmale-background">
   <div class="inner-first_frmale">
<img src="./images_/user_sexy.jpg" alt="liskouu" />
     <p align="center" ></p>
   </div>
  </div>
 <div class="first_frmale-footer"></div>
</div>


<div class="sidebar">
 <div class="login">
  <h3>Login</h3>
 </div>
	<br /><br />
  <div class="bar">
  <h3>Menu</h3>
   <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php">About</a></li>
    <li><a href="index.php">Contact</a></li>
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php">About</a></li>
    <li><a href="index.php">Contact</a></li>
   </ul>
  <div class="bar-footer"></div>
 </div>
</div>

<div class="body">
 <div class="body-header"></div>
  <div class="body-background">
   <div class="inner-body">

     <p align="center" ></p>
   </div>
  </div>
 <div class="body-footer"></div>
</div>
	<br /><div id="space"></div>
<div class="footer">
 <div class="footer-header"></div>
  <div class="footer-background">
   <div class="inner-footer">
<p> © 2009. Всички права запазени.</p>
   </div>
  </div>
 <div class="footer-footer"></div>
</div>
</div>
<div id="space"></div>
</body>

Проблем CSS

LiskO

Registered

devent

Super Moderator

LiskO

Registered