Jump to content
  • 0

div вёстка, проблема с блоками

Monachus

Asked by Monachus,

 Share

Question

Monachus Explorer

Monachus

Posted
Posted (edited)

Здравствуйте, задача сделать такое:

1309369308-qwe-6kb.jpg

есть html:


<div id="hmenu">
    <div id="rmenu"></div>
    <div class="menu">
	<ul>
	    <li >
	        <a href="" title="Главная">Главная</a>
	    </li>
	    <li class="page_item page-item-17 current_page_item">
	        <a href="" title="xcvbdhdfh">xcvbdhdfh</a>
	    </li>
	    <li class="page_item page-item-2">
	        <a href="" title="Пример страницы">Пример страницы</a>
	    </li>
        </ul>
    </div>
    <div id="lmenu"></div>
</div>

Никак не могу сделать правильно, подскажите плз как разместить rmenu справа от ячеек, lmenu слева, а меню соответственно в табличке (это практически получилось)


#main{
	margin: 0px auto;
	width: 98%;
}
#hmenu #lmenu{
	float:left;
	border-bottom: 2px solid #000000;
	width:5%;
	background-color: #f0ffff;
}
#hmenu #rmenu{
	float:left;
	border-bottom: 2px solid #000000;
	background-color: #f0f8ff;
	width:5%;
}
#hmenu .menu{
	padding-right: 5%;
	background-color: #00CC00;
	float:left;
	height: 10px;
}
#hmenu .menu ul{
	list-style: none;
}
#hmenu .menu ul li{
	float:left;
	padding: 5px;
	margin: -1px;
}
#hmenu .menu ul li.page_item{
	border: 2px solid #b8b8b8;
}
#hmenu .menu ul li.current_page_item{
	border: 2px solid #000000;
}

Это то что я сделал.

Помогите плз, заранее благодарен! :)

Edited by Monachus
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
LeD4eG Explorer

LeD4eG

Posted
Posted

тогда, простите, я не понимаю зачем Вам столько дивов?

насколько я помню идентификацию страницы, на которой находится пользователь, можно с помощью присвоения id каждой странице и для каждой страницы изменять немного стили.

Link to comment
Share on other sites
  • 0
LeD4eG Explorer

LeD4eG

Posted
Posted

Ах вот оно что!решение достаточно не очевидное!с трудом бросается в глаза.

я так понимаю нижняя рамка всегда чёрного цвета.

вот то, что я набросал за выделенное мне время:


<html>
<head>
<title>Forum task</title>
<style type="text/css">
	*{ /********обнуляем все поля и отступы************/
		margin: 0;
		padding: 0;
	}
	body {/************задаем параметры страницы************/
		width: 800px;
		height: 600px;
	}
	#menu {/***задаём ширину навигационному меню, создаём нижнюю рамку нужного цвета, поле сверху позволяет "опустить" меню****/
		width: 800px;
		border-bottom: 1px solid red;
		margin-top: 30px;
	}
	#menu ul{/*****задаем отступы от левого края, содержащего меню дива. измени количество px посмотри, что происходит*********/
		padding-left: 600px;
	}
	#menu ul li {/****указываем параметры отображения для элементов списка. значениями можно "поиграть", чтобы выстроить получше. 
	              ****отрицательное поле необходимо, чтобы элементы "прилипли" друг к другу.******/
		display: inline;
		margin: -2px;
		border-top: 1px solid gray;
		border-right: 2px solid gray;
		padding: 5px 5px 0 5px;
	}
	#menu ul li:first-child {

/*указываем особые параметры для первого элемента в списке. это левая и верхняя рамки. также ОЧЕНЬ важно!в этом смысл метода!абсолютно позиционируем его. так он удаляется из нормального потока, то его можно расположить именно там, где нам надо. задается отступы сверху и слева. попробуйте изменить значения и Вы увидите, что происходит. Получается следующее: этот элемент "наезжает" на нижнюю рамку и "закрывает" её цветом оступа (или подложки, в общем padding) элемента списка. Цвет указываем необходимый для нас.*/

		border-top: 2px solid black;
		border-left: 2px solid black;
		position: absolute;
		top: 27px;
		left: 560px;
		background: yellow;
	}
	#menu ul li:first-child a{/******задаём цвет ссылок в первом элементе списка*/
		color: black;
	}
	#menu ul li a {/*задаем цвета и способы отображения других ссылок в меню*/
		text-decoration: none;
		margin-bottom: 3px;
		color: red;
	}
</style>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Forum</a></li>
		<li><a href="#">About Us</a></li>
	</ul>
</div>
</body>
</html>

сохраните код в редакторе. сохраните, как веб-страницу, и откройте в браузере.

на моём мониторе всё получилось именно так, как Вам надо.

у этого способа две проблемы:

1. position: absolute - не совсем хороший метод решения проблем. слишком большая зависимость от разрешения пользователя.

2. текст первой ссылки распологается немного ниже (в моём случае), чем остальные. ну это можно как-нибудь решить: например, за счёт увеличения жирности текста ссылки, либо его размера.

Link to comment
Share on other sites
  • 0
Monachus Explorer

Monachus

Posted
  • Author
Posted (edited)

вот решение:


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			Блог
		</title>
		<style type="text/css">
			.menu{
				position: relative;
				/*padding-top: 100px;*/
				z-index: 32;
				float:left;
				width: 100%;
				border-bottom: 2px solid #000000;
				margin-top: -10px;
				margin-bottom: -1px;
			}
			.menu ul{
				list-style: none;
				margin-bottom: 2px;
				background-color: #00CC00;
			}
			.menu ul li{
				position: relative;
				z-index: 31;
				float: left;
				padding-left: 10px;
				padding-right: 10px;
				border: 2px solid #b8b8b8;
				border-bottom:none;
				margin-bottom: -2px;
				margin-left: -2px;
			}
			.menu ul li.current_page_item{
				position: relative;
				z-index: 33;
				border: 2px solid #000000;
				border-bottom: 2px solid #fff;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<ul>
				<li >
					<a href="http://monachus.name/" title="Главная">Главная</a>
				</li>
				<li class="page_item page-item-17 current_page_item">
					<a href="http://monachus.name/xcvbdhdfh" title="xcvbdhdfh">xcvbdhdfh</a>
				</li>
				<li class="page_item page-item-2">
					<a href="http://monachus.name/sample-page" title="Пример страницы">Пример страницы</a>
				</li>
				<li class="page_item page-item-2">
					<a href="http://monachus.name/sample-page" title="Пример страницы">Пример страницы</a>
				</li>
			</ul>
		</div>
	</body>
</html>

как всё сократилось круто :) LeD4eG спасибо за помощь :)

Edited by Monachus
Link to comment
Share on other sites
  • 0
LeD4eG Explorer

LeD4eG

Posted
Posted

а теперь окончательно оптимизируем стили страницы. и всё ещё круче сократится :D


<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>
                        Блог
                </title>
                <style type="text/css">
                        .menu{
                            float:left;
                            width: 100%;
                            border-bottom: 2px solid #000;
                        }
                        .menu ul{
                            list-style: none;
						}
                        .menu ul li{
			    float: left;
                            padding-left: 10px;
                            padding-right: 10px;
                            border: 2px solid #b8b8b8;
                            border-bottom: none;
			    margin-bottom: -2px;
                            margin-left: -2px;
                        }
                        .menu ul li.current_page_item {
                           position: relative;
                           border: 2px solid #000000;
                           border-bottom: 2px solid #fff;
                        }
                </style>
        </head>
        <body>
                <div class="menu">
                        <ul>
                              <li >
                                      <a href="http://monachus.name/" title="Главная">Главная</a>
                              </li>
                              <li >
                                      <a href="http://monachus.name/xcvbdhdfh" title="xcvbdhdfh">xcvbdhdfh</a>
                              </li>
                              <li>
                                      <a href="http://monachus.name/sample-page" title="Пример страницы">Пример страницы</a>
                             </li>
                             <li class="current_page_item">
                                       <a href="http://monachus.name/sample-page" title="Пример страницы">Пример страницы</a>
                             </li>
                        </ul>
                </div>
        </body>
</html>

твоё решение намного элегантнее, чем моё. но всё-таки почитай, что такое position: relative и z-index.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept