CSS верстка

**Zigzag** · 15.07.2006, 22:52

Собственно, т.к. я еще не до конца вник во все тонкости подобной верстки, то периодически возникают вопросы.

Ниже ссылка на страничку, на которой видна структура главной страницы верстаемого мной сейчас сайта.

Проблема в следующем. Как мне заставить растягиваться вертикально блок news, если в блок greeting растягивается текстом также по вертикали? Т.к. при том раскладе, что имею сейчас, если 1 блок растягивается, второй это не делает, а ся компоновка страницы рассыпается.

Есть вариант у меня заключения блоков greeting и news в родительский блок, например. Однако, будет ли это грамотным решением проблемы?
[Только зарегистрированные пользователи могут видеть ссылки. ]

вот код xHTML

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="copyright" content="(c) 2006 LOVATA Group" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" */>
</head>
<body>

****






</body>
</html>

вот код CSS

Код:

* {
****margin: 0;
****padding: 0;
}
html, body{
****background: #000;
****min-width: 1004px;
****height: 100%;
****font: 12px Verdana, Helvetica, sans-serif;****
}
a:link, a:visited *{
****color: black;
****text-decoration: none; 
}
a:active, a:hover {
****color: black;
****text-decoration: none;
}
.supheader {
****background: Aqua;
****height: 20px;
****width: 1004px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
.header {
****background: Orange;
****height: 241px;
****width: 770px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
#menu {
****background: #ffc;
****height: 241px;
****width: 234px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
#greeting {
****background: #9cf;
****height: auto;
****min-height: 260px;
****width: 600px;
****max-width: 600px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
#news {
****background: #cfc;
****height: auto;
****min-height: 260px;
****width: 404px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
#quality *{
****background: #ffd;
****height: 170px;
****width: 430px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
#development {
****background: #fcd;
****height: 170px;
****width: 340px;
****overflow: hidden;
****display: inline-block;
****float: left;
}
#copyright {
****background: red;
****height: 170px;
****width: 234px;
****overflow: hidden;
****display: inline-block;
****float: left;
}

**makeitso** · 15.07.2006, 23:07

Однако, будет ли это грамотным решением проблемы?

Будет.

**Zigzag** · 15.07.2006, 23:15

еще мнения?

**Zigzag** · 16.07.2006, 01:07

короче, решил просто все блоки запихнуть в блок main и ограничить его по ширине

**Zigzag** · 16.07.2006, 01:22

возник другой вопрос, в блоке header у меня должны быть расположены в одну строку 3 изображения, центральное изображение по высоте больше, чем крайние.

изображениям задан id как мне их отпозиционировать? если задаю position: absolute, то никаких проблем, выставляю их так, как хочу. но это не есть правильно. соответственно выбираю position: relative. насколько мне известно, это значение свойства position задает начало координат относительно предыдущего элемента, будь то текст или изображение или вообще div-блок. для первого изображения я задаю такие параметры

Код:

#img_head_1 {
****position: relative;
****top: 30px;
****left: 20px;
}

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

**makeitso** · 16.07.2006, 08:09

возник другой вопрос, в блоке header у меня должны быть расположены в одну строку 3 изображения

float: left;?

**Zigzag** · 16.07.2006, 10:49

да, точно... выставил обтекание слева, теперь прагть перестали картинки. но откуда же все таки начала отсчета координат каждой из них? первая отлично позиционируется относительно левого верхнего угла родительского блока header, а вот остальные? вторая картинка почему-то на 20px перекрывает правую часть второй!

**makeitso** · 16.07.2006, 18:19

[Только зарегистрированные пользователи могут видеть ссылки. ]

**Zigzag** · 24.07.2006, 17:04

собственно еще вопрос. вот страничка

[Только зарегистрированные пользователи могут видеть ссылки. ]

мне нужно что бы в контент области (голубой цвет), внутренние блоки: картика, заголовок, текст, были вы ровнены по правому краю, однако при придании им float: right; внутренние блоки выровнялись по правому краю, но поменялись местами, как это исправить?

**DareDevil** · 24.07.2006, 20:39

Поменять их местами в коде?

**Zigzag** · 24.07.2006, 21:28

не устроит, при этом при выводе контента без CSS, соответственно поменяются блоки эти местами...

**Pupil** · 24.07.2006, 22:28

Дай им float: left; и заключи их в еще один блок с float: right;
Все эти блоки имеют фиксированную ширину.

**Zigzag** · 25.07.2006, 01:43

низя, тот же родительский длок тоже граничит с блоком справа, тада и они поменяются местами, а если еще выше сделать блок родительский с флоат райт, то код какой-то некрасивый

**Zigzag** · 24.08.2006, 23:44

поднимаю тему снова, т.к. так и не нашел решение проблемы, ща попытаюсь подробнее ее описать.

Прошу помощи в решении следующей проблемы.
Есть документ с плавающим позиционированием элементов.
В нем родительский блок main имеет следующие параметры

Код:

#main {
****height: auto;
****width: 1004px;
}

Далее в него заключены контентные блоки с параметрами

Код:

****display: inline-block;
****float: left;
****overflow: hidden;

и фиксированными размерами.

Проблема в следующем. Ровно посередине есть блок content с параметрами

Код:

#content {
****min-height: 290px;
****width: 1004px;
****display: inline-block;
****float: right;
****overflow: hidden; *
}

В него необходимо вставить абзацы

, каждый с заголовком <h2>, причем, заголовки должны бать выровнены по правому краю, т.е. быть прижаты к левому краю абзаца. Каким образом добиться этого? Менять в коде местами абзацы и заголовки и применять к ним float: right неприемлемо, т.к. это нарушает семантику при просмотре с отключенным CSS. Давно бьюсь над решением проблемы, но никак не могу найти решение. Заранее благодарен.

На рисунке изображено схематическое расположение блоков (header на самом деле состоит из 2х идущих подряд блоков header и menu, но здесь это не важно, потому menu я опустил.).

[Только зарегистрированные пользователи могут видеть ссылки. ]

на макете текст и заголовки выглядят так

[Только зарегистрированные пользователи могут видеть ссылки. ]

Отмечу, что абзац

должен быть по ширине ровно 706px, т.е. заголовок должен прижиматься к левому краю абзаца...

Саму страницу можно посмотреть здесь

[Только зарегистрированные пользователи могут видеть ссылки. ]

а главную страницу сайта здесь

[Только зарегистрированные пользователи могут видеть ссылки. ]

заодно хотелось бы услышать замечания по поводу верстки в целом. Отмечу, что меню пока недоделано. Есть еще проблема ссылка english отображается как мне нужно только при прописанном локальном правиле, при его выносе во внешний файл оно не работает, почему?? И почему при валидации выскакивает ошибка <header>, как я понимаю, валидатор ругается на вложенность, но почему??

**Artemij** · 13.09.2006, 22:47

Начал осваивать CSS.

В процессе изучения решил переделать свой сайт, в котором CSS было минимум.

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

У меня следующие вопросы к опытным верстальщикам:

1. Как заменить изображения?

В XHTML у меня <img>, а в CSS:

Код:

#top_left_corner { display: block;
 * * * * * * *background-image: url(images/corners/left_top.gif);
 * * * background-repeat: no-repeat;
 * * * background-position: center center; }

В XHTML следующий код:

Код:

<div id="top_left_corner"> </div>

Вопрос, если делаю всё правильно, то что должно быть между div, чтобы изображение появилось?

2. Если таких изображений 20. Для каждого писать свой id?

**Artemij** · 16.09.2006, 02:44

Следующий вопрос.

Хочу создать column из 3х cells. Дело в том, что высоту первой и третей я знаю, а вот высота второй (средней) должна зависеть от кол-ва контента. Как реализовать подобное в CSS?

XHTML:

Код:

<div id="container">
 * <div id="top_image"></div>
 * <div id="middle_image></div>
 * <div id="bottom_image></div>
</div>

CSS:

Код:

#container {
margin: 0px;
padding: 0px;
width: 20px;
height: ???;
float: left;
position: relative; }

#top_image {
background-image: url(images/top_image.gif);
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-left: 0px;
float: left; }

#middle_image {
background-image: url(images/middle_image.gif);
background-repeat: repeat-y;
width: 20px;
height: ???;
margin-left 0px;
float: left; }

#bottom_image {
background-image: url(images/bottom_image.gif);
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-left: 0px;
float: left; }

Собственно, я заменяю разметку таблицами, на разметку CSS.

**gremushka** · 17.09.2006, 00:26

блин............а книжки не пробовали почитать? Молли Хольцшлаг например? ну и Философию CSS на всякий случай..........

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

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

**Artemij** · 17.09.2006, 01:17

блин............а книжки не пробовали почитать? Молли Хольцшлаг например? ну и Философию CSS на всякий случай..........

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

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

gremushka

А прочитать вопрос выше, вникнуть в его суть и конкретно помочь не пробовал(а)?

Или ты уже тока

умеешь?

**Artemij** · 19.09.2006, 01:22

Проблема решена.

k: Спасибо всем, кто не откликнулся, вы нужны для массовки.

**Рёга** · 19.11.2006, 19:56

Подскажите если это вообще возможно сделать конечно средствами CSS. У меня в HTML написано следующие "<tr onmouseover="mover(this,'E2EFFE&#39

" onmouseout="mout(this,'transparent&#39

">" как это можно средствами CSS выразить ?

Тема: CSS верстка

Опции темы

Поиск по теме

Отображение

Похожие темы

Вёрстка

Вёрстка

Верстка

CSS верстка

Вёрстка CSS :)

Ваши права