1 Тема від Monolith Востаннє редагувалося Monolith (26.10.2014 13:07:53)

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Тема: Створення структури сайту

Всім привіт.Роблю сайт:шапка, два меню(зліва і справа), а посередині контент, та у кінці підвал.
Але виходить так, що правий блок уходить кудись униз...
Ось:

<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Головна сторінка</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="left"></div>
        <div id="content"></div>
        <div id="right"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

#wrapper{
width:900px;
outline:1px solid black;
padding:5px;
margin:0 auto;
}

#header{
outline:1px solid black;
height:100px;
margin-bottom:12px;
}

#left{
outline:1px solid black;
height:800px;
margin-bottom:12px;
width:150px;
float:left;
}

#right{
outline:1px solid black;
height:800px;
margin-bottom:12px;
width:150px;
float:right;
}

#content{
outline:1px solid black;
height:800px;
margin-bottom:12px;
width:580px;
margin-left:160px;
margin-right:160px;
}

#footer{
outline:1px solid black;
height:50px;
}

Допоможіть будь ласка!

2 Відповідь від VTrim Востаннє редагувалося VTrim (26.10.2014 13:46:58)

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Створення структури сайту

Гляньте такий варіант та переточіть під себе.
http://ab-w.net/CSS/primer36.php
а ще краще,перечитайте все це http://ab-w.net/CSS/css_verstka.php

<head>
 <title>Пример жесткой блочной верстки сайта в три колонки</title>
 <style type="text/css">
 div#block {width:750px; margin:0 auto; background-color:#dddddd}
 div.header {width:750px; height:100px; background-color:#717dc9}
 div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
 div.center_col {width:450px; float:left}
 div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}
 div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
 </style>
 </head>
 <body>
 <div id="block">
 <div class="header"><h1 align="center">Верстка сайта</h1></div>
 <div class="left_col"><p align="center">Меню</p></div>
 <div class="center_col">
 <h2 align="center">CSS верстка сайта</h2>
 <h4 align="center">Жесткая верстка блоками</h4>
 </div>
 <div class="right_col"><p align="center">Ссылки</p></div>
 <div class="footer"><p>© 2010</p></div>
 </div>
 </body>
 </html>

3 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: Створення структури сайту

http://jsfiddle.net/10akecwv/

4 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Створення структури сайту

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <head>
        <a href=""></a>
        <nav></nav>
    </head>
    <aside class="floatleft"></aside>
    <div class="content">
        <div class="row"></div>
    </div>
    <aside class="floatright"></aside>
    <footer></footer>
</body>
</html>

.row - врапер, при можливості можна використовувати в бітьківському елементі щоб не розводити дівішнік
aside - розпихаєм по правій і лівій стороні при необхідності
<section></section> <main></main> <article></article> - додаткові теги, для використання прочитайте документацію

Подякували: 0xDADA11C71

5 Відповідь від Andrews

  • Andrews
  • Користувач
  • Поза форумом
  • Звідки: Виноградів
  • Дата реєстрації: 12.04.2014
  • Повідомлень: 12
    • Репутація: 4

Re: Створення структури сайту

Якось не зовсім логічно роставлено:

 <div id="wrapper">
       <div id="header"></div>
       <div id="left"></div>
       <div id="content"></div>
       <div id="right"></div>
       <div id="footer"></div>
    </div>

Не краще так:

HTML:

<div class="wrapper">

    <div class="header">
    
    </div>
    
    <div class="content">
    
        <div class="con-left">
        
        </div>
        
        <div class="con-right">
        
        </div>
    
    </div>
    
    <div class="footer">
    
    </div>

</div>

CSS:

.wrapper {
    width: 900px;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 0 0 0;    
}

.header {
    width: 100%;
    height: 100px;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0 0;    
}

.content {
    width: 880px;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 10px 10px 10px 10px;    
}

.con-left {
    width: 700px;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    float: left;
}

.con-right {
    width: 180px;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    float: right;
}

.footer {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0 0;        
}

6 Відповідь від Fox

  • Fox
  • Fox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 22.11.2014
  • Повідомлень: 518
    • Репутація: 79

Re: Створення структури сайту

бачу це 

.header {
    width: 100%;
    height: 100px;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0 0;    
}

а в ідеалі

.header {
    position: absolute;//якосль так
    width: 100%;
    height: 100px;
    display: block;
    overflow: hidden;
    margin: 0 0 0 0;
    padding: 0 0 0 0;    
}