Уфф ) жизнь заставила. верстка дивами, хелп :) с нуля

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

первый вопрос значится, знатокам



/* PAGE */
ol, ul {list-style: none;}
body, table, tr, td, html {font-size: 12px; font-family:Arial; color:#333333; margin-bottom:0px; margin-top:0px; margin-left:0px; margin-right:0px;}
a {color:#3C3C3C; text-decoration:underline;}
a:hover{text-decoration:none;}

/* HEADER */
#header {height:256px; position: relative; background-image:url(images/bg.jpg); text-align:center; background-position:top; background-repeat:no-repeat;}
.skiplink {display: none;}
.blog-title {font-weight: bold;letter-spacing:-1px; padding:60px 820px 0 0; color:#559431;}
.description {text-decoration: none; color:#000000; padding:0 660px 0 0;}

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

поставил идентификатор, выровнял бек. а далее, как мне именно, внутри этого бека (идентификатора) распологать элементы?

спасибо всем кто ответит и отдельные респекты, кто может в аське помочь

Последний раз редактировалось: 3Sky (15/02/09 в 04:21), всего редактировалось 1 раз

Цитата:

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

относительно (внутри) #header

А вообще немного непонятны вопросы...

Код:

.description {text-decoration: none; color:#000000; padding:0 660px 0 0;}

padding:0 660px 0 0; отступы от хедера верх,право,низ,лево

dejavu писал:

относительно (внутри) #header А вообще немного непонятны вопросы... Код: .description {text-decoration: none; color:#000000; padding:0 660px 0 0;} padding:0 660px 0 0; отступы от хедера верх,право,низ,лево

ну смотри, я что не догнал, почему тогда

.blog-title {font-weight: bold;letter-spacing:-1px; padding:60px 820px 0 0; color:#559431;}
.description {text-decoration: none; color:#000000; padding:0 660px 0 0;}

а они рядом? вот блять не понимаю )

тупанул немного...
блоки идут друг за другом вниз:
<div>
<h1>...</h1>
<p>...</p>
</div>
и padding это оступ текста внутри этого блока (например в <h1> (blog-title) отступ текста сверху 60px)

А вообще, чтобы удобнее было, можешь писать например для каждого класс border:1px solid blue; чтобы видеть где и как какой блог позиционируется

ага ) спасибо, теперь понял ) попер дальше рыть

Может пригодится, когда-то баловался, довольно доходчиво описано.

http://ru.html.net/tutorials/css/

ага) спасибо

текс )

http://test.jaoblogs.com/

изменил длину титла и деска. все поехало. я так понимаю. надо выравнивать по левому краю.

а как написать стиль, чтобы оно все работало только внутри бека?

я догадываюсь как, но хочется узнать мнения спецов

не пойму что такое бек?
чтобы работало только в диве с айди header, надо в стилях написать например
#header h1 {стили}
тогда правило будет работать только для h1 внутри дива header

или если класс, то
#header p.description {стили}

а что именно поехало?

от ) теперь точно понял )) пасиб ) да относительно шапки поехало все

бек = бекграунд

прочол топик чото вдохновило тоже на изучение css

поизучаю.
спасибо.

http://test.jaoblogs.com/

оке ) далее.. как начать форматирование, от края бека? чтобы при любом разренении, текст начинался например, ровно через 30пх, от края бека?

/* PAGE */
ol, ul {list-style: none;}
body, table, tr, td, html {font-size: 12px; font-family:Arial; color:#333333; margin-bottom:0px; margin-top:0px; margin-left:0px; margin-right:0px;}
a {color:#3C3C3C; text-decoration:underline;}
a:hover{text-decoration:none;}

/* HEADER */
.skiplink {display: none;}
#header {height:256px; background-image:url(images/bg.jpg); text-align:left; background-position:top; background-repeat:no-repeat;}
#header h1{font-weight: bold;letter-spacing:-1px; padding:0 0 0 40px; color:#559431;}
#header p.description {text-decoration: none; color:#000000; padding:0 0 0 40px;}

вот такой ща стиль

спасибо!

Че-то вообще нет никакой логики построения структуры...

Я бы брал за исходник такой вариант

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>       <title>Title</title>       <style type="text/css">             body, div, table, tr, td             {                 margin: 0;                 padding: 0;             }             body             {                 color: #000;                 font-size: 12px;                 font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;                 text-align: center;             }                                     #main             {                 margin: 0 auto;                 width: 800px;                 text-align: left;             }                         #hd             {                 margin-top: 10px;                 padding-top: 30px;                 position: relative;                 height: 100px;                 text-align: center;                 border: 1px solid #AAA;             }                         #hd div.title             {                 font-size: 20px;                 font-weight: bold;             }                         #bd             {                 margin-top: 20px;                 padding: 10px;                 height: 500px;                 border: 1px solid #AAA;             }             #ft             {                 margin-top: 20px;                 height: 50px;                 text-align: center;                 border: 1px solid #AAA;             }                         #ft table.menu             {                 margin-top: 5px;                 margin-bottom: 8px;                            }             #ft table.menu td             {                 padding-right: 10px;                                padding-left: 10px;                            }             #ft div.copy             {                 margin: 0 auto;                                font-size: 10px;             }       </style>   </head>   <body>       <div id="main">                   <div id="hd">                 <div class="title">I'm header</div>             </div>                         <div id="bd">                 sdfsdfsddddddd dfs ddsff df sdf             </div>                         <div id="ft">                 <table class="menu" cellpadding="0" cellspacing="0">                     <tr>                         <td><a href="">Home</a></td>                         <td><a href="">Site map</a></td>                         <td><a href="">Contact</a></td>                     </tr>                 </table>                 <div class="copy">&copy; 2008</div>             </div>                   </div>   </body> </html>

спасибо ) буду изучать )

например, чтобы всё в блоке #header начиналось в 30пх от левого края надо
#header {padding: 0 0 0 30px;}
или
#header {padding-left: 30px;}

Триска, стукнись 709 333 25 ночью, дам пару хороших книг по CSS, с примерами. На англицком, но понятных ;)

постучи, если интересно - у меня есть неплохой мини конспект по ксс..

Немного больше, чем для чайника, но достаточно доступно, нежели для ксс-гуру..То есть для нас, десигнеров..=)

Сам уже практически перешёл на вёрстку блочную, лишь иногда трясу Дежавю в асе...=)

пасиб, мужики, стукнусь

тоже спрошу по цсс

вот есть код, который делает резиновую шапку из двух картинок:

Код:

body  {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:80%;font-weight: normal; color: #000000; background: url(/template/images/head-x.gif) top repeat-x #FFFFFF;} .head {background: url(/template/images/logo.jpg) top left no-repeat; height: 69px;}

в body рисуется бэкграунд на всю длину, затем head накладывает лого
вопрос такой, как это сделать только на дивах, тоесть без body?

Код:

div     {        margin: 0;        padding: 0;     }     #main     {         width: 100%;         height: 69px;         background: url(/template/images/head-x.gif) top repeat-x #FFFFFF;        }         #main div.header     {         margin: 0 auto;         height: 69px;         width: 200px; /* ?! */         background: url(/template/images/logo.jpg) top left no-repeat;     }   <div id="main">         <div class="header"></div>   </div>

благодарю!
а вот теперь потребовалось url(/template/images/logo.jpg) сделать динамическим, т.е. logo.jpg logo1.jpg logo2.jpg

Код:

.head {background: url(/template/images/logo.jpg) top left no-repeat; height: 69px;}

прийдется создавать новый файл цсс или можно замутить в одном файле переменную с линками на логотипы?

валидная верстка дивами - это жопа в плане кроссброузерности.

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

а самому все изучать - жизни не хватит, разделение труда - двигатель
прогресса =)

поддерживаю,постоянно приходится юзать хаки для разных браузеров при вёрстке на дивах! я верстаю смешанно,где то лучше таблица,где то див.Тут опять же зависит от контента,на дивах контент в коде можешь расположить почти как угодно,в таблице же нет! Вообщем есть разные задачи,для выполнения которых требуется разная вёрстка.

чем <span> отличается от <div>?

P.S. заказывать на стороне десятиминутные хуюшечки - денег не хватит, а мегапроекты пока не веду, своими силами справляюсь