X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> div разметка
01es
01es
Topic Starter сообщение 15.4.2008, 18:19; Ответить: 01es
Сообщение #1


Здравствуйте! Ситуация такая: css только осваиваю, и с div знакомлюсь только. Наверное начну по порядку. Делаю макет индекса. Вот его код (index.php):
<link href="style.css" type="text/css" rel="STYLESHEET"></style>
</head>
<body>
<div class="header"><? include("header.html"); ?></div>
<div class="lmenu1"><? include ("lmenu1.php"); ?></div>
<div class="lmenu2"><? include ("lmenu2.php"); ?></div>
<div class="center"><? include ("center.php"); ?></div>
<div class="rmenu1"><? include ("rmenu1.php"); ?></div>
<div class="rmenu2"><? include ("rmenu2.php"); ?></div>
<div class="footer"><? include ("footer.html"); ?></div>


style.css
.header {
    width: 100%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 1px;
    left: 0px;
}
.lmenu1 {
    width: 15%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 5px;
    left: 0px;
}
.lmenu2 {
    width: 15%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 10px;
    left: 0px;
}
.center {
    width: 68%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 5px;
    left: 3px;
}
.rmenu1 {
    width: 15%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: right;
    position: relative;
    top: 5px;
    left: 0px;
}
.rmenu2 {
    width: 15%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: right;
    position: relative;
    top: 10px;
    left: 0px;
}
.footer {
    width: 100%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 10px;
    left: 0px;
}
Вторая левая колонка смещается хз куда...
Если можно поправьте где я ошибся.
И ещё. как сделать каркас который бы не расползался при изменении размера окна браузера? Меня интересует что бы боковые колонки (менюшки) имели постоянную ширину, скажем 200пикс. А верхние и нижние - высоту.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 16.4.2008, 9:19; Ответить: Exterior
Сообщение #2


01es, а зачем для header`а и footerfloat :eek:?

(01es @ 1.1.1970, 07:00)
как сделать каркас который бы не расползался при изменении размера окна браузера?

ставить дилину и ширину в %

(01es @ 1.1.1970, 07:00)
Меня интересует что бы боковые колонки (менюшки) имели постоянную ширину, скажем 200пикс. А верхние и нижние - высоту.

.lmenu1, lmenu2, rmenu1, rmenu2 {
     width: 200px;
}

.header, footer {
     height: 100px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
01es
01es
Topic Starter сообщение 16.4.2008, 13:47; Ответить: 01es
Сообщение #3


Ничего не выходит. Возможно я нахимичил в стилях((( Я делаю сайт, мне нужно:
-что бы менюшки имели фиксированную ширину (150px) и растягивались по высоте.
-центральный блок был строго по центру, и растягивался вертикально по мере заполнения (сейчас, если мало текста. то 2е правое меню заползает под центр).
-верхний блок - по центру, с фиксированной высотой 100px
-нижний блок - по центру, с фиксированной высотой 10px
-менюшки распологались одна над другой
-отступы между блоками - 3px
[IMG]http://i046.radikal.ru/0804/95/0494b1f056a0t.jpg[/IMG]
.header {
    width: 100%;
    height: 100px;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 1px;
    left: 0px;
}
.lmenu1 {
    width: 150px;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 5px;
    left: 0px;
}
.lmenu2 {
    width: 150px;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 25px;
    left: 0px;
}
.center {
    width: 60%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 5px;
    left: 3px;
}
.rmenu1 {
    width: 150px;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: right;
    position: relative;
    top: 5px;
    left: 0px;
}
.rmenu2 {
    width: 150px;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: right;
    position: relative;
    top: 10px;
    left: 0px;
}
.footer {
    height: 20px;
    width: 100%;
    background: #FFFFFF;
    padding: 1px;
    border: solid 1px #999999;
    float: left;
    position: relative;
    top: 10px;
    left: 0px;
}
У меня ничего не выходит... Если не сложно - поправте мои ошибки:popcorn2:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 17.4.2008, 16:55; Ответить: Exterior
Сообщение #4


01es, ну вот вы даже не исправили ошибки на которые я указал - зачем у header и footer вот это:
.header {
width: 100%;
height: 100px;
background: #FFFFFF;
padding: 1px;
border: solid 1px #999999;
float: left;
position: relative;
top: 1px;
left: 0px;

}

.footer {
height: 20px;
width: 100%;
background: #FFFFFF;
padding: 1px;
border: solid 1px #999999;
float: left;
position: relative;
top: 10px;
left: 0px;

}


позиционировать нужно только блоки с меню и контентный и не забывать про атрибут clear:both, чтобы отменять обтекание там, где оно не нужно.

(01es @ 1.1.1970, 07:00)
мне нужно:
-что бы менюшки имели фиксированную ширину (150px) и растягивались по высоте.
-центральный блок был строго по центру, и растягивался вертикально по мере заполнения (сейчас, если мало текста. то 2е правое меню заползает под центр).
-верхний блок - по центру, с фиксированной высотой 100px
-нижний блок - по центру, с фиксированной высотой 10px
-менюшки распологались одна над другой
-отступы между блоками - 3px


ну прям техническое задание на разработку сайта ;)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) DIV'ы в строку
0 RedEclipse 5463 29.9.2016, 17:53
автор: -RedEclipse-
Открытая тема (нет новых ответов) при выборе radio в option не скрывались div
0 serj123 6928 17.4.2016, 17:45
автор: -serj123-
Открытая тема (нет новых ответов) Как заставить отображать несколько элементов DIV в одну строку?
2 Aalena 3999 10.1.2016, 10:18
автор: -Aalena-
Открытая тема (нет новых ответов) Качественное размножение статей, расстановка анкоров, ссылок, разметка тэгами
0 kotsur 2363 13.6.2015, 22:33
автор: -kotsur-


 



RSS Текстовая версия Сейчас: 28.3.2024, 23:36
Дизайн