Разметка сайта - HTML и CSS

Masafi · 23.03.2013, 12:40

Код страницы:
index.php

Код HTML:

<html>
<head>
<title>Новости | Главная | Галерея 250 школы</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body bgcolor="#CCCCCC">
<center>
<table width="800" bgcolor="#000000">
<tr>
<td>
<center>
<div class="top">
<a href="index.php"><img src="images/top.jpg" width="800"></a><br>
<h2><div align="left">Меню Последние изображения | Главная</div></h2>
</div>
<div class="left">
Прихожая<br>
<ul>
<li><a href="index.php" class="podmenu">Главная</a></li>
<li><a href="menu.php" class="podmenu">Карта сайта</a></li>
</ul>
Галерея<br>
<ul>
<li><a href="works.php?id=1" class="podmenu">Грамоты</a></li>
<li><a href="works.php?id=2" class="podmenu">Детские работы</li>
<li><a href="works.php?id=3" class="podmenu">Взрослые работы</li>
<li><a href="works.php?id=4" class="podmenu">Авторские работы</li>
</ul>
</div>
<div class="center">

</div>
<div class="down">

</div>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>

default.css

Код:

.title {
text-align: center;
}
.top {
width: 100%;
float: top;
}
.left {
width: 100px;
float: left;
text-align: left;
}
.center {
width: 100%;
float: center;
}
.down {
width: 100%;
float: both;
}
body {
color: #CCCCCC;
font-family: Comic Sans MS;
}
.right.img {
-webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */
display: inline-block; padding-left: 8px; vertical-align: text-top; text-indent: 0px;}
.left.img {
-webkit-transform: rotate(90deg); /* Chrome y Safari */
-moz-transform: rotate(90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */
-o-transform: rotate(90deg); /* Opera */
display: inline-block; padding-right: 8px; vertical-align: text-top; text-indent: 0px;}
a:link.podmenu {color:#99CCFF;}
a:visited.podmenu {color:#99CCFF;}
a:hover.podmenu {color:#99CCFF;}
a:active.podmenu {color:#99CCFF;}
a:link.menu {color:#3399FF;}
a:visited.menu {color:#3399FF;}
a:hover.menu {color:#3399FF;}
a:active.menu {color:#3399FF;}

Вот что получается:

А мне надо, чтобы было примерно так:

Т.е. чтобы меню было по центру в своем столбце, а заголовок в своем:

Masafi · 23.03.2013, 12:55

Скидываю сам сайт www.rar

Alar · 23.03.2013, 13:17

Код:

<div align="left">Меню Последние изображения | Главная</div>

сделать так

Код:

<div align="left">Меню</div><div align="left2"> Последние изображения | Главная</div>

left2 - прописать в стилях с необходимым маргином паддингом или чем уж вы захотите сдвинуть или выравнять или например может справа захотите разместить

Masafi · 23.03.2013, 18:30

Цитата:

Сообщение от Alar

Код:

<div align="left">Меню Последние изображения | Главная</div>

сделать так

Код:

<div align="left">Меню</div><div align="left2"> Последние изображения | Главная</div>

left2 - прописать в стилях с необходимым маргином паддингом или чем уж вы захотите сдвинуть или выравнять или например может справа захотите разместить

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

MyLastHit · 23.03.2013, 23:33

Это и есть универсальное. Лучше сделайте так, как написали выше. На данном этапе стоит сменить направление, иначе потом будут сложности.

Masafi · 27.03.2013, 11:22

Цитата:

Сообщение от MyLastHit

Это и есть универсальное. Лучше сделайте так, как написали выше. На данном этапе стоит сменить направление, иначе потом будут сложности.

Мдя... Можно все упростить тогда:

Код HTML:

<div align="left">Меню<img src="прозрачный пиксель" width="расстояние">Последние изображения | Главная</div>

Но я все же хочу найти универсальный метод для всех

23.03.2013, 23:33	#5
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Это и есть универсальное. Лучше сделайте так, как написали выше. На данном этапе стоит сменить направление, иначе потом будут сложности. Ненавижу быть как все, но люблю, чтобы все были как я.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
шаблонная разметка...	Student1992	PHP	0	12.11.2011 15:17
Разметка страницы	romanzi	Общие вопросы Delphi	2	03.06.2011 18:23
Разметка страницы	n2k	HTML и CSS	4	11.03.2011 11:40
Разметка div'ами	Vasily-Z	HTML и CSS	7	30.07.2010 05:06
Разметка страницы	CEPEJJJJJKA	Фриланс	5	22.03.2010 13:06

23.03.2013, 12:55	#2
Masafi Форумчанин Регистрация: 12.03.2011 Сообщений: 113	Скидываю сам сайт www.rar

23.03.2013, 13:17	#3
Alar Александр Администратор Регистрация: 28.10.2006 Сообщений: 17,501	Код: `<div align="left">Меню Последние изображения \| Главная</div>` сделать так Код: `<div align="left">Меню</div><div align="left2"> Последние изображения \| Главная</div>` left2 - прописать в стилях с необходимым маргином паддингом или чем уж вы захотите сдвинуть или выравнять или например может справа захотите разместить Купить рекламу на форуме за 42 тыс руб за месяц размещения