Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Помогите с версткой

Обсуждение темы Помогите с версткой в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Это мой первый опыт подобного начинания, так что критика принимается!При верстке в дриме вроде все ровненько выходит, но стоит открыть в браузере верстка ...


Закрытая тема
 
Опции темы
Старый 14.06.2015, 18:52   #1
Это мой первый опыт подобного начинания, так что критика принимается!При верстке в дриме вроде все ровненько выходит, но стоит открыть в браузере верстка начинает плыть( Все что нагуглил не помогло или руки кривые... Задача стоит выровнять менюшку и <article> по горизонту. Ссылка на исходники:https://yadi.sk/d/lKfZmE87hFAcD
собственно CSS:
html{
background-image: url(\images/blue_fon2.png);
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width:auto;
max-width:1600px;
min-width:900px;
}
body{
width: auto;
height: auto;
max-width: 1600;
min-width: 900;


}
.it assist{
height: 0px;
clear: both;
float: left;
}
/*TOP AREA*/
.top_area {
width: auto;
height: 200px;
max-width: 1600px;
min-width: 900px;
}

.logotype {
float: left;
height: 110px;
width: 400px;
}
.contacts {
float: right;
font-size: 20px;
position: relative;
visibility: visible;
list-style: none;
}
.contacts b{
color: #009;
}
/*Index slider start*/
.slider_wrap {
width: 40%;
height: 70%;
position: relative;
overflow: visible;
visibility: visible;
display: inline-block;
background-color: #000;
margin-left: 50px;
}
.slider_wrap img {
width:100%;
height:100%;
display: none;
position: absolute;
top: 0;
}
.slider_wrap img:first-child {
display:block;
}
.slider_wrap span {
margin-top:-13px;
width:15px;
height:26px;
display:block;
position:absolute;
top:50%;
cursorointer;
}
.slider_wrap span.next:hover {

}
.slider_wrap span.prev:hover {

}
/*Index slider end*/
div.menu {
width: auto;
height: 60px;
position: relative;
max-width: 1200px;
min-width: 900px;
margin: 0 auto;
left: 50%;
}
ul.menu {
font-size: 26px;
font-family: "Comic Sans MS", cursive;
height: auto;
width: auto;
background-color: #96C;
margin: 0 auto;
max-width: 1200px;
min-width: 900px;
right: 50%;
position: relative;
}
ul.menu li {
float: left;
list-style: none;
background-color: #939;
margin-left: -15px;
padding-right: 35px;
padding-left: 60px;
}

ul.menu li a {
color: #FF0;
text-decoration: none;
text-shadow: 1px 0px #FC0;
font-style: normal;
}

ul.menu li a:hover {
color: #000;

}

ul.menu li ul {
display: none;
background-color: #96C;
margin-left: -60px;
}

ul.menu li:hover ul {
display: block;
position: absolute;
}

ul.menu li:hover ul li {
float: none;
}

ul.menu ul li {
background-color: #96C;
}

ul.menu ul li:hover {

}

ul.menu ul li a {
color: #FF0;
}

ul.menu ul li a:hover {
color: #000;
}

ul.menu li:hover ul li a {

}
/*ARTICLE*/
section.text_area{
width: 74%;
font-size: 20px;
margin: 0 auto;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-style: normal;
color: #000;
font-variant: small-caps;
font-weight: normal;
border: 1px solid;
border-color: #FF0;
margin-top: 50px;
background-color: #0CF;
min-width: 900px;
max-width: 1200px;
text-align: center;
}
#image{
width: auto;
height: auto;
clear: both;
float: none;
min-width: 80%;
max-width: 80%;
margin: 0 auto;
padding-top: 50px;
padding-left: 90px;
}
.image{
border: 1px solid;
border-color: #FF0;
border-radius: 10px;
display: block;
float: left;
}
.image_content {
width: 300px;
height: 200px;
float: left;
padding-bottom: 30px;

}
.subtext{
width: 30%;
height: 200px;
float: left;
padding-right: 55px;
padding-left: 25px;

}

.text_area span{
color: #FF0;
font-style: normal;
text-decoration: underline;
text-shadow: 1px 1px #000;
text-transform: uppercase;
}
/*FOOTTER*/
#credits {
margin: 20px 0 40px;
padding: 10px 0 0;
color: #000;
font-size: 0.9em;
border: 2px;
border-top-color: #CF0;
border-top-style: solid;
font-style: italic;
float: left;
width: 100%;
}
.id asist {
width: 0px;
}
 
Старый 14.06.2015, 18:52
Ссылки
Старый 15.06.2015, 13:09   #2
привет! я посмотрел твою работу. у меня на всех браузерах кроме IE7, выгладить так https://yadi.sk/d/HmkUZ-T0hFp5e
 
Старый 15.06.2015, 16:04   #3
как то у тебя все крепко запутанно, юзайн notepad какой нибудь типа Sublime и тд
нет ничего проще чем выровнять два div-а по центру... не знаю в чем там проблема

width:100px;
margin: 0 auto;


или один див

width:100%;
text-align:center;

внутренний
width:1000px;
display:inline-block; или intine

а у тебя с этим дримом такая каша, просто вилы
 
Этот пользователь сказал спасибо Hispanic за это полезное сообщение:
moby dik (16.06.2015)
Старый 16.06.2015, 11:36   #4
спасибо
 
Старый 16.06.2015, 11:36
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ребята помогите с версткой! Mixongur HTML, CSS, JavaScript 8 29.12.2015 04:26
Проблема с версткой volFernion HTML, CSS, JavaScript 12 08.06.2010 05:21
Помогите, пожалуйста, с версткой сайта Dimitry HTML, CSS, JavaScript 2 24.04.2010 19:18
Помогите пожалуйста разобраться с версткой taylerx HTML, CSS, JavaScript 4 09.10.2009 16:54
Помогите мне с версткой разобраться Scorp HTML, CSS, JavaScript 12 04.10.2009 17:35


Текущее время: 08:12. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум