Лучший способ создать макет, как показано ниже?

Каков наилучший способ получить макет, как показано ниже: HTML & CSS (не может использовать CSS3)?Лучший способ создать макет, как показано ниже?

Мой главный вопрос касается навигационной панели, плавающей посредине верхней части внутреннего контейнера.

Также как бы вы предложили создать навигационную панель? Для этого нужны закругленные углы и перекатывание, но пока нет подменю.

http://sevdev.com/mockup.png

Разъяснение

мне нужна помощь с позиционированием навигационной панели, так что если при изменении размера окна он остается в его положении.

Я не могу использовать CSS3, потому что это корпоративный сайт, и многие браузеры клиенты используют не совместимы с CSS3

источник

2010-11-17 Sev

Почему вы не можете использовать CSS3? Это не сервер, это зависит от браузера. –

добавлен раздел разъяснений – Sev

Работа демо:. http://vidasp.net/tinydemos/layout-demo.html

(я не делал тень или закругленные углы - это те функции CSS3 Если вы хотите, чтобы эти функции в старых браузерах, вы будете нуждаться обходными, но это уже совсем другое история ...)

источник

2010-11-17 23:57:55

почти точно, чего я хотел, спасибо большое! +1 – Sev

@Sev Для достижения теней и закругленных углов выполните поиск по переполнению стека для получения подходящих вопросов. –

JQuery для навигации, остальное довольно просто, чтобы выяснить, до тех пор, как вы» re знакомый с xhtml/css/js

источник

2010-11-17 22:22:10 yoda

Я согласен. JQuery хорош, если он использует Javascript, но как он может помочь ему с навигацией? – AndreKR

@AndreKR навигация производится с помощью jQuery – yoda

Получите горизонтальный список от Listamatic и расположите его абсолютно в нужном положении.

источник

2010-11-17 22:22:43 AndreKR

, но это не поможет, если размер окна изменится. Мне нужно, чтобы nav-bar плавно вставал на место при изменении размера окна. – Sev

«Абсолютно (я)« Я имел в виду »дать ему положение: абсолютное». Вы все равно можете сделать его относительным * в другом поле *. – AndreKR

Используйте один div для внешней линии в вашем прямоугольнике. Дайте это дополнение равным расстоянию, которое вы хотите во внутреннюю область. Также дайте это div position = "relative", чтобы помочь с позиционированием других элементов. (Логотип и меню должны сидеть в этом div, но вне внутреннего div)
Используйте div для внутренней области. Дайте этой ширине = «100%» и дайте ей естественную высоту.
Абсолютно поместите логотип относительно верхнего и левого.
Абсолютно положение относительно параметра меню на верхней и правой (это будет держать на месте при изменении размера)

Для закругленных углов на меню, самый простой способ, если вам нужно поддерживать полнофункциональные браузеры и отсутствие вертикального масштабирования будет просто использовать соответствующие фоновые изображения. Найдите «технологию раздвижных дверей», и вы должны найти то, что вам нужно.

источник

2010-11-17 22:46:38 edeverett

для панели навигации, я бы использовал неупорядоченный список, стиль, как обычно, чтобы сделать меню вам нравится (jquery будет отлично подходит для выпадающих списков и т. Д.), А затем создать div вне меню что-то как это:

<div id="navregion"> 
    <ul id="nav"> 
     <li><a href="#" class="active">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
     <li><a href="#">Menu Item</a></li> 
    </ul> 
</div>

Я хотел бы затем дать #navregion более высокий Z-индекс, относительное/абсолютное позиционирование внутри колонны и/или родительского #div и и сверху: х справа: у значения.

источник

2010-11-17 22:50:05 calweb

Что-то вроде этого http://jsfiddle.net/U2PUw/4/

источник

2010-11-17 22:50:50

+1 для прохладного сайта, а также основной макет, который я хотел! – Sev

-1 для inline css. Есть пространство для этого в jsFiddle, который вы знаете ... –

Во-первых, вы должны начать с этой базовой структуры.

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" href="styles.css"> <!-- include your external css here --> 
</head> 
<body> 
<div id="container"> 

<div id="header"> 
<a href="index.html"><img src="logo.jpg" alt="My Company"></a> <!-- standard practice to make logos a link back to homepage --> 

<ul id="nav"> 
    <li>Home</li> 
    <li>Products</li> 
    <li>XYZ</li> 
    <li>Features</li> 
</ul> 

<ul id="contentNav"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 
</div> 

<div id="content"> 
</div> 
</div> 
<script type="text/javascript" src="scripts.js"></script> <!-- include your javascript here, if any --> 
</body> 
</html>

После того, как у вас есть шаблон, вы можете начать строить свой CSS. Хотя я не буду стилизовать всю страницу для вас, вам дадут несколько указаний о том, что делать ...

Для достижения эффекта > в между ULS, вы можете использовать либо <li> > </li> или вы можете поместить изображение > в качестве фонового изображения элементов Li. Если вы выберете первый, вам нужно будет поиграть с отступом, чтобы получить позицию в самый раз, если вы выберете позже, вам нужно будет добавить дополнительные классы к элементам li, чтобы определить, какие получают фон, а какие нет.

Чтобы получить эффект внутренней границы, просто дайте границу div id = "content".

Чтобы получить содержимое Nav для пересечения границы содержимого, вам необходимо вывести его из потока документа с абсолютным позиционированием.

Для того, чтобы получить содержание навигация, чтобы иметь желаемый стиль, просто примените границу к li и примените эффекты опрокидывания, используя: link: visited:: hover: focus: active pseudo-classes.

источник

2010-11-17 22:51:53 Moses

+1 спасибо за приятное объяснение. он не обеспечивает именно то, что мне нужно, но он попадает туда – Sev

использование положение: фиксированный.

<div id="nav"> ... </div> 
#nav { position:fixed, top: 30px; z-index: 1000}

, что это начало

источник

2010-11-17 22:59:08

Ваш заголовок один блок, область содержимого другой блок. Плавающее навигационное меню представляет собой неупорядоченный список <ul>, в котором перемещаются элементы списка <li>.

Отдайте заголовок блока position: relative; и поместите свое навигационное меню внутри заголовка. Затем дайте свое навигационное меню position: absolute; bottom: -30px; right: 15px;. Откорректируйте вкус.

Для закругленных углов попробуйте использовать -moz-border-radius, -webkit-border-radius и -khtml-border-radius, оставив IE в качестве нечетного. Если это нехорошо, и если слова навигационного меню фиксированы по длине и не требуют динамического перевода, используйте изображения. Если это нехорошо, вам нужно будет сыграть с несколькими изображениями, чтобы создать правильные закругленные углы или проверить округленное округление на основе JQuery.

источник

2010-11-17 23:29:40 Tom

Я обычно использую поплавки, а затем отрицательное верхнее поле, чтобы получить макет навигации, который вы хотите. Он должен оставаться застрявшим вправо (или везде, где вы его плаваете) по мере изменения размера браузера.

CSS3 поможет вам упростить закругленные углы, на самом деле это не поможет в макете, поэтому я не стал бы беспокоиться о том, чтобы не использовать его.

HTML:

<html> 
<body> 

    <div id="box"> 
     <div id="nav">Nav</div> 
     <p>Lorizzle ipsizzle dolizzle crunk amet</p> 
    </div> 

</body> 
</html 

#box { 
    background:black; 
    float:left; 

    margin:50px; 
}

CSS:

#nav { 
    margin-top:-10px; 
    background:silver; 
    float:right; 
} 

p { 
color:white; 
}

Предварительный просмотр на jsFiddle.

источник

2010-11-17 23:40:25

Лучший способ создать макет, как показано ниже?

ответ

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