верстка баннера

prizrak39 · December 11, 2012

Здравствуйте. Осваиваю фреймворк Bootstrap и возникли некоторые сложности.

Необходимо чтобы над горизонтальным меню был баннер такой же шириной как и меню.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Пример Bootstap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
	<div class="row-fluid">	
		<div class="span11">
		<div class="banner"></div>
		</div>
		<div class="span11">
			<div class="navbar">
				<div class="navbar-inner">
					<div class="container">
					    <ul class="nav">
							<li class="active">
								<a href="#">О проекте</a>
							</li>
							<li><a href="#">Доходы</a></li>
							<li><a href="#">Инвесторам</a></li>
							<li><a href="#">Вакансии</a></li>
							<li><a href="#">FAQ</a></li>
						</ul>	
					</div>
				</div>
			</div>		
		</div>
		<div class="span2">
		    <ul class="nav nav-list">
				<li class="active">
					<a href="#">О проекте</a>
				</li>
				<li>
					<a href="#">Доходы</a>
				</li>				
				<li>
					<a href="#">Инвесторам</a>
				</li>
				<li>
					<a href="#">Вакансии</a>
				</li>
				<li>
					<a href="#">FAQ</a>
				</li>
			</ul>		
		</div>
		<div class="span7">
			// Main Part
		</div>
		<div class="span2">
			<ul class="nav nav-list">
				<li>
					<a href="#">Главная</a>
				</li>
				<li class="active">
					<a href="#">Библиотека</a>
				</li>				
			</ul>				
		</div>
	</div>
</div>
</body>
</html>

npofopr · December 11, 2012

А причем тут бутстрап?

Создайте div над меню с width:100%; да и вставьте баннер

prizrak39 · December 11, 2012

Извините пожалуйста. Просто сообщение случайно раньше отправил, чем дописал.

Для баннера определил следующий класс


.banner {
	background: #3AB7FF;
	height: 150px;
	margin-left: 32px;
	margin-bottom: 10px;
	border-radius: 10px;
	margin-top: 10px;
	width: 100%	
}

Если убрать margin-left: 32px; то баннер съезжает налево, подскажите как это можно исправить?

npofopr · December 11, 2012

Не знаю, нужно смотреть уже на готовой странице.

Загрузите хотя бы на jsfiddle.

Проще фаербагом посмотреть, что кого и куда распирает.

prizrak39 · December 11, 2012

Страница

Пока не могу понять почему происходит смещение.

pashkje · December 12, 2012

так устроит http://jsfiddle.net/6jPbQ/1/ ? :rolleyes:

Sign In

верстка баннера

Question

prizrak39

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

prizrak39

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

prizrak39

Link to comment

Share on other sites

pashkje

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information