Вертикальные навигационные бары

-1

Хорошо, поэтому я работаю над веб-сайтом. У меня основное содержание веб-сайта посередине, а слева от основного содержимого я хочу вертикальную панель навигации, содержащую разные ссылки на веб-сайте. Я знаю, как создать Navbar и стиль, но я просто не знаю, как я мог бы сделать это без панели навигации мешающей с остальным содержанием сайта, вот пример:Вертикальные навигационные бары

https://gyazo.com/8f8fc2f7e57e9b419671e6fda603546c

как вы можете видеть в ссылке, содержимое панели навигации находится над остальной частью основного содержимого, поэтому я решил добавить float: left; к таблице стилей, и я закончил тем, что был в очереди с основным контентом, за исключением того, что теперь он горизонтальный, а не вертикальный. Почему веб-сайты это делают? Как вы можете разделить разные элементы веб-страницы и свободно перемещать их, не вмешиваясь в другие вещи?

JSFiddle

HTML:

<DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>CSGOMarble</title> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
</head> 
<body> 
<div class="navbar"> 
    <ul> 
    <li>Coin Flip</li> 
    <li>About Us</li> 
    <li>Contact</li> 
    </ul> 
</div> 
</html>

CSS:

body { 
background-color: #999999; 
font-family: Arial, Verdana, sans-serif; 
margin-top: 50px 
} 
h1 { 
background-color: black; 
color:white; 
padding-top: 30px; 
padding-bottom: 30px; 
margin-left: 275px; 
margin-right: 275px; 
border-radius: 10px; 
margin-bottom: 50px; 
} 
.container{ 
margin-left: 275px; 
margin-right: 275px; 

} 

li { 
list-style-type: none; 
float: left; 
}

источник

2016-04-01 Senoj

Для размещения на вашем компьютере и любых других объектов, дисплей. У вас есть только начало веб-страницы. Со временем создайте более стильные «классы», поэтому вам не нужно так много кода CSS на странице. – Sparky256

float: left ш Положите все навигационные предметы рядом друг с другом (пока есть горизонтальное пространство). Для вертикального меню просто используйте display: block на li элементах (это по умолчанию, поэтому вам вообще не нужно писать его в CSS). Это поместит их ниже друг друга.

Чтобы зафиксировать элемент в окне (например, левую часть с помощью меню), используйте на нем position: fixed - это относительно экрана, поэтому он не будет прокручиваться вместе с остальным. Но он будет перекрывать (по умолчанию) другие нефиксированные элементы, такие как основной контент, поэтому вам необходимо разместить их со смещением (например, position: relative; left: 180px;)

источник

2016-04-01 22:43:30 Johannes

Привет! Спасибо за ваш ответ, однако, когда я фиксирую список по горизонтали, все содержимое перекрывается, как вы сказали, и использование позиции не исправить! – Senoj

вы должны поместить его в отдельный DIV – Johannes

Удалить

li {float: left;}

и добавить вместо

.navbar{float: left}

... будет решить вашу проблему

, но я предполагаю, что ваш просто отсутствуют некоторые базовые знания о макетах и о позиционировании HTML элементов, свободно «движение» ваши элементы нужно просто макет были вещи подхожу для ваших нужд, и тогда они не будут INTERFER других вещей :)

Layout учебник: http://www.w3schools.com/html/html_layout.asp
Positioning обучающий: http://www.w3schools.com/css/css_positioning.asp

источник

2016-04-01 22:31:00

Вертикальные навигационные бары

ответ

Смежные вопросы