VPF::Вопрос по CSS - Форум программистов

Anticler

Дата 22.7.2009, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Помогите пож-ста с CSS - я начинающий
Пытаюсь сделать такую форму: user posted image

Но получается х.зает-что http://anticler.3dn.ru/cssfaul.htm. Причем в Internet explorer и в Operе по разному отображается!

Помогите с кодом как правильно сделать

Код


<html>
<head>
  <style type="text/css">
    body{ 
    margin:0; padding:0;
    }
    #topleft { 
    background:#fcc; height:50px; width:50%; float:left
    
    }
    #topright {
    background:#cfc; height:50px; width:50%
    
    }
    #middle {
    background:#ccf; height:200px; width:100%
    
    }  
    #botleft { 
    background:#0cc; height:100%; width:100px ; float:left
    
    }  
    #content {
    background:#7c7; height:100%; float:left
    
    }    
    #botcenter {
    background:#c6c; height:50px; float:left
    
    }
    #botright {
    background:#ccc; height:100%; width:100px 
    
    }
</style>
</head>
<body>
    <div id="topleft">topleft</div>
    <div id="topright">topright</div>
    <div id="middle">middle</div>
    <div id="botleft">botleft</div>
    <div id="content">content</div>
    <div id="botcenter">botcenter</div>
    <div id="botright">botright</div>
</body>
</html>

StachelDraht

Дата 23.7.2009, 10:39 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

в данном случае имхо лучше использовать табличную верстку.
а если уж делаешь блоками, так не забывай про position:absolute / relative;

Это сообщение отредактировал(а) StachelDraht - 23.7.2009, 10:41

Anticler

Дата 23.7.2009, 10:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Цитата(StachelDraht @ 23.7.2009, 10:39

)

в данном случае имхо лучше использовать табличную верстку.
а если уж делаешь блоками, так не забывай про position:absolute / relative;

Да с таблицами проще, но в моем случае необходим именно CSS.
Не могли бы вы указать, где именно в моем коде нужно использовать position:?

Это сообщение отредактировал(а) Anticler - 23.7.2009, 10:58

StachelDraht

Дата 23.7.2009, 11:14 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

а кто запрещает использовать css в табличной верстке, точнее как не крути но без css ты никуда не уедешь

Код


.topleft { 
    background:#fcc; 
    height:50px; 
    width:50%; 
    float:left;
    }
.topright {
    background:#cfc; 
    height:50px; 
    width:50%;
    }

Код


<table width="100%">
 <tr>
  <td class="topleft"></td><td class="topright"></td>
 </tr>
</table>

Это сообщение отредактировал(а) StachelDraht - 23.7.2009, 11:15

Anticler

Дата 23.7.2009, 11:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Цитата(StachelDraht @ 23.7.2009, 11:14

)

а кто запрещает использовать css в табличной верстке, точнее как не крути но без css ты никуда не уедешь

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

Это вообще осуществимо в СSS?

Это сообщение отредактировал(а) Anticler - 23.7.2009, 11:47

StachelDraht

Дата 23.7.2009, 13:41 (ссылка)

(нет голосов)

Загрузка ...

Не Опытный

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 19.1.2006

Репутация: нет
Всего: 1

первая ссылка из гугла
гугл

Это сообщение отредактировал(а) StachelDraht - 23.7.2009, 13:41

Anticler

Дата 23.7.2009, 15:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Цитата(StachelDraht @ 23.7.2009, 13:41

)

первая ссылка из гугла
гугл

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

http://anticler.3dn.ru/cssfaul.htm - просмотр

Код


<html>
<head>
  <style type="text/css">
    body{ 
    margin:0; padding:0;
    }
    #topleft { 
    background:#fcc; height:50px; width:50%; float:left
    
    }
    #topright {
    background:#cfc; height:50px; width:50%; float:right
    
    }
    #middle {
    background:#ccf; height:200px; width:100%; clear:both;
    
    }  
    #botleft { 
    background:#0cc; height:100%; width:100px; float:left
    
    }  
    #content {
    background:#7c7; height:100%;  float:left
    
    }    
    #botcenter {
    background:#c6c; height:50px; clear:both;
    
    }
    #botright {
    background:#ccc; height:100%; width:100px; float:right
    
    }
</style>
</head>
<body>
    <div id="topleft">topleft</div>
    <div id="topright">topright</div>
    <div id="middle">middle</div>
    <div id="botleft">botleft</div>
    <div id="content">content</div>
    <div id="botcenter">botcenter</div>
    <div id="botright">botright</div>
</body>
</html>

Это сообщение отредактировал(а) Anticler - 23.7.2009, 15:17

atomdx

Дата 23.7.2009, 21:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 1.5.2008

Репутация: нет
Всего: нет

Вот что получилось
Правда не получилось растянуть botleft, content и botright до конца страницы

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
  <head>
    <title></title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    #topleft {
      background-color: #f1b0f9;
      float: left;
      width: 50%;
      height: 50px;
    }
    
    #topright {
      background-color: #aceda9;
      float: right;
      width: 50%;
      height: 50px;
    }
    
    #middle {
      background-color: #b4bde9;
      height: 200px;
    }
    
    #botleft {
      background-color: #67d2d8;
      width: 100px;
      float: left;
      height: 70px;
    }
    
    #botright {
      background-color: #2bbf84;
      float: right;
      width: 100px;
      height: 70px;
    }
    
    #content {
      background-color: #be41bb;
    }

    #botcenter {
      background-color: #b6b6b6;
      margin: 0 100px;
      height: 50px;
    }
    </style>
  </head>
  <body>
    <div id="topleft">topleft</div>
    <div id="topright">topright</div>
    <div id="middle">middle</div>
    <div id="botleft">botleft</div>
    <div id="botright">botright</div>
    <div id="content">content</div>
    <div id="botcenter">botcenter</div>
  </body>
</html>

Anticler

Дата 24.7.2009, 09:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Спасибо.
Это конечно лучше чем было, но тут все таки не так, как должно быть. Еслиб можно было сделать чтоб блоки botleft, botright и content растягивались до нижнего края страницы?? smile

я отредактировал блок Сontent - и вот что получилось

http://anticler.3dn.ru/cssfaul1.htm

smile

Это сообщение отредактировал(а) Anticler - 24.7.2009, 09:55

Anticler

Дата 24.7.2009, 09:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

а в IE вообще все прыгает если размер окна браузера менять smile

Это сообщение отредактировал(а) Anticler - 24.7.2009, 09:53

Anticler

Дата 27.7.2009, 12:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Вот у меня кое что получилось. Но почему-то оно не идет на Опере.
http://anticler.3dn.ru/cssfaul_new.htm Только здесь высота блоков зависит от высоты #Content.

Что можно исправить что бы оно отображалось также как и в IE??

Код


<html> 
<head> 
  <style type="text/css"> 
    body{ margin:0; padding:0;} 
    div { margin:0; padding:0;} 
     
    #topleft {    
    background:#fcc; height:50px; width:50%; position:absolute; left:0px;  
    }  
    #topright {  
    background:#cfc; height:50px; width:50%; position:absolute; right:0px;  
    }  
    #middle {  
    background:#ccf; height:200px; width:100%; padding-top: 50px;   
    }  
     
    #container-left {  
    background:#0cc; height:100%; float:left;  
    } 
    #container-right { 
    background:#ccc; height:100%; float:right; 
    } 
    #left { 
    text-align: center; width:100px; float:left;  
    }       
    #right{ 
    text-align: center; width:100px; float:right; 
    } 
    #content { 
    background:#7c7; height: 600px;  
    }     
   #botcenter { 
    background:#c6c; height:50px; margin-right: 100px; 
    } 
 
</style> 
</head> 
<body> 
    <div id="topleft">topleft</div> 
    <div id="topright">topright</div> 
    <div id="middle">middle</div> 
    <div id="container-left"> 
        <div id="left">left</div> 
        <div id="container-right"> 
            <div id="right">right</div>     
            <div id="content">content</div> 
            <div id="botcenter">botcenter</div> 
        </div> 
    </div>     
 
 
</body> 
</html>

И еще тут какой-то маленький глюк - самый нижний блок выступает на 3 пикселя вправо.

Anticler

Дата 29.7.2009, 09:10 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

Помогите пожалуйста исправить, мне нужно только чтобы в Опере отображалось как в IE

Anticler

Дата 4.8.2009, 09:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 2.5.2007

Репутация: нет
Всего: нет

тема актуальна. Есть у кого нибуть какие идеи?

sanyokdb

Дата 4.8.2009, 10:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 4.8.2009

Репутация: нет
Всего: нет

http://www.intensivstation.ch/en/templates
http://www.positioniseverything.net/articl...emaker_form.php
http://www.qrone.org/cssdesigner.html
http://www.maketemplate.com/csstemplate/
http://csscreator.com/?q=tools/layout

может тебе эти помогут... а вообще должены

Это сообщение отредактировал(а) sanyokdb - 4.8.2009, 11:11

atomdx

Дата 7.8.2009, 22:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 13
Регистрация: 1.5.2008

Репутация: нет
Всего: нет

Получилось что-то похожее, на то как должно быть, но не совсем.

Нормально отображается в Opera 9.64, Firefox 3.5.2, Google Chrome 3.0.196.2. Про более ранние версии не знаю.
Ещё в IE8 нормально.

А в ie6 и ie7 всё расползается, из того что не поддерживают табличные значения свойства display.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>CSS TEMPLATE</title>
<style type="text/css">
* {
  border: 0;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
}

#topleft {   
  background: #fcc;
  height: 50px;
  width: 50%;
  position: absolute;
  left:0px;
  text-align: center;
}
  
#topright { 
  background: #cfc;
  height: 50px;
  width: 50%;
  position: absolute;
  right:0px;
  text-align: center;
} 
  
#middle {
  background: #ccf;
  height: 200px;
  width: 100%;
  padding-top: 50px;
  text-align: center;    
}
  
#left {
  text-align: center;
  width: 100px;
  background-color: #bbeaec;
}    

#right {
  text-align: center;
  width: 100px;
  background-color: #fbffa4;
}

#content {
  background: #7c7;
  padding-bottom: 50px;
  text-align: center;
}

#wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

#tr {
  display: table-row;
}

#tr div {
  display: table-cell;
}

#botcenter {
  background: #fbcd79;
  height: 50px;
  margin: 0 100px;
  text-align: center;
  margin-top: -50px;
}
</style>
</head>
<body>
  <div id="topleft">topleft</div>
  <div id="topright">topright</div>
  <div id="middle">middle</div>
  <div id="wrapper">
    <div id="tr">
      <div id="left">left</div>
      <div id="content">content</div>
      <div id="right">right</div>
    </div>
  </div>    
  <div id="botcenter">botcenter</div>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »