Защо не се подреждат?

X

xlebabarov

Registered
Здравейте, от скоро работя с div-ове и както виждате ми е доста трудничко. С 300 зора успях да стигна до тук със дизайна, който си правя:

Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color: #c0c9d8;
	background-repeat: repeat-x;
}

.input_stext{
	background-color: #1e252f;
	border: 0px;
	color: #758092;
}
.input_image{
	width: 71px;
	height: 27px;
}

#umenu{
	height: inherit;
}
.umenu{
	width: 940px; height: 56px;
}

.navbar{
	position: absolute; z-index: 100; width: 100%; height: 36px; top: 0px; left: 0px; background-image: url(http://web-tourist.net/userfiles/1158.png); background-repeat: repeat-x;
}
.navbar_search{
	position: inherit;
	right: 74px;
	padding: 4px;
	width: 180px;
	height: 27px;
	background-image: url(http://web-tourist.net/userfiles/1165.png);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}
</style>
</head>
<body>

<div class="navbar">
	<div class="navbar_search">
   	<div style="padding: 3px;"></div>
    <input type="text" name="s_text" class="input_stext" />
    </div>
	<div style="position: inherit; width:76px; height: 29px; top: 3px; right: 0px;">
   	<div style="padding: 1px;">
   	<input type="image" name="search" src="http://web-tourist.net/userfiles/1164.png" class="input_image"/>
    </div>
	</div>
</div>

<div id="spacer" style="padding-top:46px;"></div>
<div style="background-image: url(); width: 980px; height: 22px; margin-left: auto; margin-right: auto;"></div>
<div style="width: 980px; height: 100px; margin-left: auto; margin-right: auto; background-color: #004eff;">
<div class="umenu">
	<div id="umenu" style="background-image: url(http://web-tourist.net/userfiles/1159.png); background-repeat: no-repeat;"></div>
	<div id="umenu" style="background-image: url(http://web-tourist.net/userfiles/1161.png); background-repeat: repeat-x; width: 928px;"></div>
	<div id="umenu" style="background-image: url(http://web-tourist.net/userfiles/1160.png); background-repeat: no-repeat;"></div>
</div>
</div>
<div style="background-image: url(http://web-tourist.net/userfiles/1163.png); width: 980px; height: 22px; margin-left: auto; margin-right: auto;"></div>

</body>
</html>

Тази част от кода:

Код: 
<div class="umenu">
	<div id="umenu" style="background-image: url(http://web-tourist.net/userfiles/1159.png); background-repeat: no-repeat;"></div>
	<div id="umenu" style="background-image: url(http://web-tourist.net/userfiles/1161.png); background-repeat: repeat-x; width: 928px;"></div>
	<div id="umenu" style="background-image: url(http://web-tourist.net/userfiles/1160.png); background-repeat: no-repeat;"></div>
</div>

Трябва да ми представлява менюто и трябва да е лента, чиито два края свършват с картинки.. Така, но нещо не успях да го направя :?

Как може да стане?
 
Някаква идея къде бъркам?
 
Аз бих го направил по следния начин!

<div class='umenu'>
<div align='left'><img src='1.jpg'>
</div>
Тук ти е менюто
<div align='right'><img src='2.jpg'>
</div>
</div>
 
Код: 
<div class="umenu">
   <img src="http://web-tourist.net/userfiles/1159.png" alt="" style="width: 6px; height: 56px; border: 0;" /><img src="http://web-tourist.net/userfiles/1161.png" alt="" style="width: 928px; height: 56px; border: 0;" /><img src="http://web-tourist.net/userfiles/1160.png" alt="" style="width: 6px; height: 56px; border: 0;" />
</div>
Заповядай. :)

Редакция:
А, после за линковете в меню-то, можеш да направиш така в CSS-a:
Код: 
.umenu ul {
	text-align: center;
	margin-top: -40px;
}

.umenu ul li {
	display: inline;
	padding-left: 10px;
}

.umenu ul li a {
	text-decoration: none;
	color: #000;
}

.umenu ul li a:hover {
	color: #fff;
}

Самото меню в HTML:
Код: 
<div class="umenu">
   <img src="http://web-tourist.net/userfiles/1159.png" alt="" style="width: 6px; height: 56px; border: 0;" /><img src="http://web-tourist.net/userfiles/1161.png" alt="" style="width: 928px; height: 56px; border: 0;" /><img src="http://web-tourist.net/userfiles/1160.png" alt="" style="width: 6px; height: 56px; border: 0;" />
	<ul>
		<li><a href="#">edno</a></li>
		<li><a href="#">dve</a></li>
		<li><a href="#">tri</a></li>
		<li><a href="#">chetiri</a></li>
		<li><a href="#">pet</a></li>
	</ul>
</div>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе