Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Уфф ) жизнь заставила. верстка дивами, хелп :) с нуля
цитата
13/05/08 в 16:26
 3Sky
приветствую всех, долго я брыкался, но жизнь заставляет icon_smile.gif начинаю осваивать верстку дивами. пока вообще ничо не понимаю, если честно.

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



/* 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 раз
цитата
13/05/08 в 16:37
 dejavu
Цитата:
вопрос следующий, относительно чего выравнивать дескрипшен. т.е щас вообще не понимаю, если честно.

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

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

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

padding:0 660px 0 0; отступы от хедера верх,право,низ,лево icon_smile.gif
цитата
13/05/08 в 16:43
 3Sky
dejavu писал:
относительно (внутри) #header

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

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

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


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

.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;}

а они рядом? вот блять не понимаю )
цитата
13/05/08 в 16:55
 dejavu
тупанул немного...
блоки идут друг за другом вниз:
<div>
<h1>...</h1>
<p>...</p>
</div>
и padding это оступ текста внутри этого блока (например в <h1> (blog-title) отступ текста сверху 60px)

А вообще, чтобы удобнее было, можешь писать например для каждого класс border:1px solid blue; чтобы видеть где и как какой блог позиционируется
цитата
13/05/08 в 17:02
 3Sky
ага ) спасибо, теперь понял ) попер дальше рыть icon_smile.gif
цитата
13/05/08 в 17:49
 Монах
Может пригодится, когда-то баловался, довольно доходчиво описано.

http://ru.html.net/tutorials/css/
цитата
13/05/08 в 17:53
 3Sky
ага) спасибо icon_smile.gif
цитата
13/05/08 в 18:38
 3Sky
текс )

http://test.jaoblogs.com/

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

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

я догадываюсь как, но хочется узнать мнения спецов
цитата
13/05/08 в 18:47
 Petek
не пойму что такое бек? icon_smile.gif
чтобы работало только в диве с айди header, надо в стилях написать например
#header h1 {стили}
тогда правило будет работать только для h1 внутри дива header

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

а что именно поехало?
цитата
13/05/08 в 18:52
 3Sky
от ) теперь точно понял )) пасиб ) да относительно шапки поехало все

бек = бекграунд
цитата
13/05/08 в 19:09
 shamit
прочол топик чото вдохновило тоже на изучение css icon_smile.gif
цитата
13/05/08 в 19:30
 Evilin
поизучаю.
спасибо.
цитата
13/05/08 в 19:32
 3Sky
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;}

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

спасибо!
цитата
13/05/08 в 19:37
 wMaster
Че-то вообще нет никакой логики построения структуры...

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

Код:

<!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>
цитата
13/05/08 в 19:38
 3Sky
спасибо ) буду изучать )
цитата
13/05/08 в 19:41
 Petek
например, чтобы всё в блоке #header начиналось в 30пх от левого края надо
#header {padding: 0 0 0 30px;}
или
#header {padding-left: 30px;}
цитата
13/05/08 в 20:57
 Adulter
Триска, стукнись 709 333 25 ночью, дам пару хороших книг по CSS, с примерами. На англицком, но понятных ;)
цитата
13/05/08 в 20:58
 erobrand
постучи, если интересно - у меня есть неплохой мини конспект по ксс..

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

Сам уже практически перешёл на вёрстку блочную, лишь иногда трясу Дежавю в асе...=)
цитата
13/05/08 в 21:03
 3Sky
пасиб, мужики, стукнусь icon_smile.gif
цитата
15/05/08 в 13:56
 ibiz
тоже спрошу по цсс icon_smile.gif

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

body  {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:80%;font-weight: normal; color: #000000; background: url(/template_m/images/head-x.gif) top repeat-x #FFFFFF;}

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


в body рисуется бэкграунд на всю длину, затем head накладывает лого
вопрос такой, как это сделать только на дивах, тоесть без body?
цитата
15/05/08 в 14:21
 wMaster
Код:

    div
    {
       margin: 0;
       padding: 0;
    }

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


  <div id="main">
        <div class="header"></div>
  </div>
цитата
19/05/08 в 12:28
 ibiz
благодарю!
а вот теперь потребовалось url(/template_m/images/logo.jpg) сделать динамическим, т.е. logo.jpg logo1.jpg logo2.jpg

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


прийдется создавать новый файл цсс или можно замутить в одном файле переменную с линками на логотипы?
цитата
19/05/08 в 12:53
 alt
валидная верстка дивами - это жопа в плане кроссброузерности.

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

а самому все изучать - жизни не хватит, разделение труда - двигатель
прогресса =)
цитата
19/05/08 в 13:09
 Vigo

поддерживаю,постоянно приходится юзать хаки для разных браузеров при вёрстке на дивах! я верстаю смешанно,где то лучше таблица,где то див.Тут опять же зависит от контента,на дивах контент в коде можешь расположить почти как угодно,в таблице же нет! Вообщем есть разные задачи,для выполнения которых требуется разная вёрстка.
цитата
23/05/08 в 18:49
 ibiz
чем <span> отличается от <div>?

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


Эта страница в полной версии