Sign in to follow this  
shamahn

Любителям блочной верстки на засыпку!

Recommended Posts

<html> 
<head>
<title></title>
<style>
BODY
{
padding:0;
margin:0;
}
#l1, #l2, #l3, #l4, #l5, #l6, #l7, #l8
{
display:block;
margin:0;
padding:0;
overflow:hidden;
}
#l1
{
background-color:#6699FF;
width:80%;
height:20%;
float:left;
}
#l2
{
width:20%;
height:80%;
background-color:#FF0099;
float:right;
}
#l3
{
width:20%;
height:80%;
background-color:#663399;
float:left;
}
#l4
{
width:80%;
height:20%;
background-color:#0000CC;
float:right;
}
#l5
{
background-color:#FF6633;
width:80%;
height:20%;
float:left;
}
#l6
{
background-color:#FF9966;
width:20%;
height:80%;
float:right;
}
#l7
{
background-color:#FF3366;
width:20%;
height:80%;
float:left;
}
#l8
{
background-color:#FFCC99;
width:80%;
height:20%;
float:right;
}
</style>
</head>
<body>
<div style="height:100%; width:100%; position:absolute;">
<div id="l1"> </div>
<div id="l2"> </div>
<div id="l3"> </div>
<div id="l4"> </div>
</div>
<div style="left:20%;top:20%;width:60%; height:60%;background-color:#FFFFCC;position:absolute;">
<div id="l5"> </div>
<div id="l6"> </div>
<div id="l7"> </div>
<div id="l8"> </div>
</div>
</body>
</html>

ГЫ) вышло, не ожидал от себя такких познаний) Вот только проблемка с линиями в опере(постоянно) мозилле(местами) осел схавал(парадокс))) Тлько правда пока без отступов))

Share this post


Link to post
Share on other sites

Бу-га-га-а-а-а!!! Жжоте товарисчи!!!;)

Vindex10 - И в правду прикольно получилось. Кривовато, с какими-то полосками, но все же прикольно!!! Вот жалко только что в IE этим примером даже и не пахнет.

Но может вернемся все-таки к более простой задаче из первого сообщения темы?:)

Share this post


Link to post
Share on other sites
Нет, сдаюсь, не побороть мне селлспейсинг(((

Да дело даже не в cellspacing... Ты попробуй эту таблицу в IE, ее там вообще нет, какие-то фрагменты кусками на экране.;)

Share this post


Link to post
Share on other sites

Фигасе!!!;)

Молодец! Супер получилось, неожидал такого результата. Жалко что с cellspacing не получилось, но все же я в восторге. Действительно эффектно тем, что это все на дивах.

Неплохая заявка на решение проблемы озвученной в сообщении #1:cool:

Share this post


Link to post
Share on other sites
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML
1.1//EN" "http://www.w3
.org/TR/xhtml11
/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
.cellsBlock { width: 100%;
display: table;
}.cellLeft,.cellMiddle,.cell
Right { display: table-cell
!important; display: inline;
/* для IE */
}.cellLeft,.cellRight {
width:35%; }.cellMiddle {
width:30%;}
<style>
</head>
<body>
<div class="cellsBlock">
<div class="cellLeft"> <h2
>Ячейка 1</h2> <p>текст
первой ячейки</p>
</div> <div
class="cellMiddle"> <h2
>Ячейка 2</h2> <p>текст
второй ячейки</p> </div>
<div class="cellRight"> <h2
>Ячейка 3</h2> <p>текст
третьей ячейки</p>
</div> </div>
</body>
</html>

Share this post


Link to post
Share on other sites

Не-е-е-е... Это совсем не то, повнимательней первое сообщение почитай.

Более менее наглядный пример привел Девятилап в сообщении #17, но там есть недочеты, которые не удовлетворяют требованиям задачи.;)

Share this post


Link to post
Share on other sites

за 10 баксов такие вопросы не решаются, разве что из-за спотривного интереса ;)

а верстать все что угодно можно дивами, это ещ? не самые сложные примеры, лишь бы руки откуда надо росли, да и не традиционное мышление порой неплохо помогает :)

Share this post


Link to post
Share on other sites

2Девятилап не торопись)).. тоже заказы делать надо, освобожусь, то же прикалюсь, попробую верстану ;)

Share this post


Link to post
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
}
#left, #right, #main
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#left
{
float:left;
background-color:black;
color:white;
}
#right
{
background-color:green;
color:yellow;
}
#main
{
position:absolute;
width:100%;
background-color:green;
}
</style>
</head>
<body>
<div id="main">
<div id="left">WWW</div>
<div id="right">EEE</div>
</div>
</body>
</html>

Просто перекрыл линию бэком, в опере не видно в лисе вроде тож не должно, а в ие будет небольшой отступ)

Share this post


Link to post
Share on other sites

Вот вы тут холивар то развели.

То Vladiger and shamahn

Девятилап - Вставил в

<div id="left">1dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd11111111111111111111111111111dddddddd1111111111111111111111111111</div>

и почему то

улетел куда-то (я его еле нашел) вниз...;)

Давно у нас контент стал неразрывным?

Раставь пробулы в том бреде что ты запихнул в блок и удивишня насколько все туда влезает!

overflow: hidden

мог бы и сам подумать вместо того чтобы придираться

В данном случае это крайность!!!

Ну здрасти, приехали!

Эт че такое?

#main { margin: 0 auto; width:1024px;}

Не-е-е-е!!! Давайте не халтурить. У меня видеорежим стоит 800x600 и вообще речь идет о "резиновой верстке" валидном HTML+CSS не зависимой от браузера и видеорежима.

Убери эту строчку из CSS и получишь резиновый макет на всю ширину экрана.

И незабудь здать ширину в процентах!

Мне вот интересно стало: - А вот такую вот простенькую табличку, можно вообще блоками забацать со всей "стабильностью" и "резиновостью" и насколько блочный код будет оптимален и красив?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Разноцветная таблица</title>
<style type="text/css" media="screen">
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td colspan="4" bgcolor="#6699FF"> </td>
<td rowspan="4" bgcolor="#FF0099"> </td>
</tr>
<tr>
<td rowspan="4" bgcolor="#663399"> </td>
<td colspan="2" bgcolor="#FF9966"> </td>
<td rowspan="2" bgcolor="#FFCC99"> </td>
</tr>
<tr>
<td rowspan="2" bgcolor="#FF6633"> </td>
<td bgcolor="#FFFFCC"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="4" bgcolor="#0000CC"> </td>
</tr>
</table>
</body>
</html>

Можно все! Главное как!

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

Ребят тема что лучше или хуже не актуальна уже года два!!!

Share this post


Link to post
Share on other sites
Ребят тема что лучше или хуже не актуальна уже года два!!

Эта тема перешла в простой спор: сможешь такое на блоках или нет, если да, то дам денег. Но это все делаестья не ради денег, а ради удовольствия и практики.

Можно все! Главное как!

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

Вот и попользуй, за одно покажешь насколько умно глаголишь))

Share this post


Link to post
Share on other sites

<style type="text/css" media="screen">
#q1, #q2 {float: left; }
#q1 {background: red; width:100%;}
#q2 {background: blue;}
* {height:100%}
</style>
</head>
<body>
<div id="q1">

<div id="q2">
Привfffffffffffffffggddddddffffffffffffffffffffffffffffffffffffffffffggggggggggggggggggggggffffет
</div>
Трехчастная фактурная форма, несмотря на внешние воздействия, символизирует голос, и здесь в качестве модуса конструктивных элементов используется ряд каких-либо единых длительностей. Кластерное вибрато, на первый взгляд, варьирует октавер, о чем писали такие авторы, как Н. Луман и П. Вирилио. Механизм власти, на первый взгляд, полифигурно приводит серийный ревер, об этом прямо сказано в ст. 2 Конституции РФ. Совершенно неверно полагать, что политическое учение Платона регрессийно вызывает миксолидийский христианско-демократический национализм, исчерпывающее исследование чего дал М. Кастельс в труде "Информационная эпоха". П. Бурдье понимал тот факт, что теологическая парадигма категорически трансформирует системный политический процесс в современной России, однако сами песни забываются очень быстро.
</div>
</body>

я не очень задачу понимаю ((( то или не то ?

Share this post


Link to post
Share on other sites

у меня лучше, с запасом!)

только осталось решить проблему с длинными строками

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen">
body { margin:0; padding:0; height:100%;}
#left, #main { height:100%; margin:0; padding:0; }
#main { position: absolute; width:100%; }
#left { background: #face00; float:left;}
#right { background: #cefa00;}


</style>
</head>
<body>





<div id="main">
<div id="left">1dddddddd1111111111111111111111111111</div>
<div id="right">

sasa
</div>
</div>



</body>

</html>

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

Share this post


Link to post
Share on other sites

to maddogrts

Вроде бы так, но в осле расползается)

to Девятилап

2столбцовый макет. Ширина левого меняется произвольно (в зависимости от содержимого). Правый - от конца левого и до конца экрана.

Тут сказано просто двухстолбцовый макет, значит высоты одинаковые. ИМХО

Вот код для столбцов не растянутых на всю высоту:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
}
#left, #right
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#left
{
float:left;
background-color:black;
color:white;
}
#right
{
background-color:green;
color:yellow;
}
#main
{
position:absolute;
width:100%;
background-color:green;
}
</style>
</head>
<body>
<div id="main">
<div id="left">WWW wwwwwwwwwwwwwwwwww wwwwww wwwwwwwwwwwwwwww wwwwwwww wwwwwwwwwwwwww wwwww<br/>w huoehfhse agfi aef</div>
<div id="right">EEE</div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

Vindex - может ты и прав - помозгуем

Черт, в моей верстке куча проблем:

1) ресайз окна - съезжает второй столбец

2) футер не подцепить. вернее с трудом.

Ищем дальше народ ;)

PS а спортивный интерес берет свое даже на работе)))

UPD ребята, если сделаем кроссбраузерно - нам респект - даже A List Apart не знает кроссбраузерного решения %)

Share this post


Link to post
Share on other sites

Так, давайте правильно поставим задачу.

Нужен резиновый двухколоночный макет, с футером и хедером

левый столбец ширины контента, а правый - все оставшееся место

оптимизация верстки под 1024

при условии если контент правой части шире чем его ширина - верстка не должна ехать

давайте под такие условия подгонять.

конечно кросбраузерность в первую очередь, валидность - по возможности

Ребят, мы мазохисты?

Share this post


Link to post
Share on other sites

Кто сказал что оптимизация под 1024, и про хедер с футером никто не заикался) Или это уже новое задание? Кстати, а что означает по вашему не расползаться?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,451
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Вернулся в свою созданную тему через 4,5 года. )) После создания темы около года верстал заказы на фрилансе. От обычной верстки до полноценных LP и небольших сайтов. Даже один раз из своей верстки шаблон Wordpress сделал.   Потом заинтересовался другими нишами и верстку забросил. Арбитражил, занимался СЕО, даже трейдил криптовалютой больше года. Но опять потянуло в вебразработку. Пытаюсь снова все вспомнить. Мешает только основная работа - мало времени остается на своё хобби.  В общем, кому сроки не жмут и кто не боится доверится джуниору, милости просим. Сверстаю, подправлю, помогу. В свободное от работы время. Бескорыстно. Просто хочется снова покодить и не просто так, а чтобы с пользой.  Почта : zdl79@mail.ru Skype : forest19791 Телеграмм : https://t.me/forestino
    • Могу попробовать. Опыт верстки 1 год. Но в связи с основной работой, не связанной с IT, мало на это времени. zdl79@mail.ru
    • Здравствуйте, кажется я делаю что-то не так, но вот что именно никак не пойму.
      Проблема в следующем: подключаю карусель и блок становится неактивен, хотя вроде бы все должно работать как нужно.
      Пробовал подключать карусель и через cdn и через скачанный архив - результат один и тот же.
      Открывал через google, firefox и opera-у - все так же никакого сдвига.
      Подключал по инструкции на официальном сайте.
      Пробовал использовать SlickSlider, но результат тот же.
  • Popular Contributors