Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Вопрос по CSS


Автор: Anticler 22.7.2009, 16:33
Помогите пож-ста с 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
в данном случае имхо лучше использовать табличную верстку.
а если уж делаешь блоками, так не забывай про position:absolute / relative;

Автор: Anticler 23.7.2009, 10:57
Цитата(StachelDraht @  23.7.2009,  10:39 Найти цитируемый пост)
в данном случае имхо лучше использовать табличную верстку.
а если уж делаешь блоками, так не забывай про position:absolute / relative;

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

Автор: StachelDraht 23.7.2009, 11:14
а кто запрещает использовать 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>

Автор: Anticler 23.7.2009, 11:45
Цитата(StachelDraht @  23.7.2009,  11:14 Найти цитируемый пост)
а кто запрещает использовать css в табличной верстке, точнее как не крути но без css ты никуда не уедешь

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

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

Автор: StachelDraht 23.7.2009, 13:41
первая http://zhilinsky.ru/2007/05/24/css-blochnaya-verstka/ из гугла
http://www.google.ee/search?hl=ru&q=блочная+верстка&btnG=Поиск+в+Google&lr=&aq=f&oq=

Автор: Anticler 23.7.2009, 15:14
Цитата(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>

Автор: atomdx 23.7.2009, 21:58
http://atomdx.ru/css.html
Правда не получилось растянуть 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
Спасибо. 
Это конечно лучше чем было, но тут все таки не так, как должно быть. Еслиб можно было сделать чтоб блоки  botleft,  botright и content растягивались до нижнего края страницы?? smile 

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

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

smile 

Автор: Anticler 24.7.2009, 09:44
а в IE вообще все прыгает если размер окна браузера менять smile 

Автор: Anticler 27.7.2009, 12:35
Вот у меня кое что получилось. Но почему-то оно не идет на Опере. 
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
Помогите пожалуйста исправить, мне нужно только чтобы в Опере отображалось как в IE

Автор: Anticler 4.8.2009, 09:00
тема актуальна. Есть у кого нибуть какие идеи?

Автор: sanyokdb 4.8.2009, 10:54
http://www.intensivstation.ch/en/templates
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
http://www.qrone.org/cssdesigner.html
http://www.maketemplate.com/csstemplate/
http://csscreator.com/?q=tools/layout

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

Автор: atomdx 7.8.2009, 22:04
http://atomdx.ru/cssNew.html, но не совсем.

Нормально отображается в 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>

Автор: atomdx 7.8.2009, 22:46
http://atomdx.ru/cssNewWithIE.html

Код

/* cssNewIE.css for IE6 and IE7 */
#left {
  position: absolute;
  top: 250px;
  left: 0px;
  height: 100%;
}

#content {
  margin-left: 100px;
  margin-right: 100px;
  height: 100%;
  padding-bottom: 0px;
}

#right {
  position: absolute;
  top: 250px;
  right: 0px;
  height: 100%;
}

#botcenter {
  margin-top: -50px;
}


Код

<!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>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/cssNewIE.css" media="all" />
<![endif]-->
</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>

Автор: Anticler 19.8.2009, 10:19
atomdx,  Спасибо огромное  smile 

ты гений  smile 
 smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)