гуляющие элементы

Jekil · January 8, 2013

Добрый день! Подскажите пожалуйста

Делаю простенький шаблончик на вордпресс.

Будет выглядеть примерно так

но у меня фигня происходит с менюхами при уменьшении размера окна браузера, они съезжают

как и див.entry

код хедера:


<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset');?>">
<title>
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s' ), max( $paged, $page ) );
?>
</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script('comment-reply'); ?>
</head>
<!--img src="wp-content/themes/sn_test/img/bt_main.png" width="188" height="170" alt="ГЛАВНАЯ"-->
<body <?php body_class(); ?>>
<div id="outerWrapper">
<header>
<div id="menu1">
<!--КНОПКА 1-->
?<ul>
<li><a href="http://svobodnye-narody.ru/" class="home"><span>home</span></a></li>
</ul>
<!--КНОПКА 2-->
?<ul>
<li><a href="http://svobodnye-narody.ru/" class="forum"><span>forum</span></a></li>
</ul>
<!--КНОПКА 3-->
?<ul>
<li><a href="http://svobodnye-narody.ru/" class="dkp"><span>dkp</span></a></li>
</ul>
</div>
<div id="menu2">
<!--КНОПКА 1-->
?<ul>
<li><a href="http://svobodnye-narody.ru/" class="home"><span>home</span></a></li>
</ul>
<!--КНОПКА 2-->
?<ul>
<li><a href="http://svobodnye-narody.ru/" class="forum"><span>forum</span></a></li>
</ul>
<!--КНОПКА 3-->
?<ul>
<li><a href="http://svobodnye-narody.ru/" class="dkp"><span>dkp</span></a></li>
</ul>
</div>
</header>

и

цсс:


* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
}
body {
background: url("img/background_v4.jpg") no-repeat top;;
background-color:#000;
background-attachment: inherit;
}
h1, h2, h3 {
font-weight: bold;
}
h1 {
font-size: 2em;
margin-left:auto;
margin-right:auto;
}
h2 {
font-size: 1.5em;
}
#outerWrapper {
height: auto;
/*width:1900px;*/
margin: auto;
}
header {
margin-bottom: 0px;
margin-left:auto;
margin-right:auto;
width:1900px;
margin: auto;
}
header h1 {
display:none;
font-size: 2.5em;
margin-left:auto;
margin-right:auto;
}
/*nav.mainMenu {
padding: 5px;
}
nav.mainMenu ul li {
display: inline;
list-style: none;
margin-right: 20px;

}*/
/*МЕНЮ(ЛЕВО)*/
#menu1{
width:188px;
overflow:hidden;
height: 388px;
margin-top: -65px;
margin-right: auto;
margin-left: 300px;
}
#menu1 ul{
list-style:none;
}
#menu1 li{
list-style:none;
display:block;
float:left;
margin:0 4px;
}
#menu1 li a{
display:block;
float:left;
}
#menu1 li a:hover{
}
#menu1 li a span{
display:none;
}
#menu1 li a.current{
display:block;
float:left;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:66px;
text-decoration:none;
padding:0 25px;
}
#menu1 li a:hover.current{
color:#fff;
}
/*КНОПКА 1*/
#menu1 li a.home{
background:url(img/bt_main.png) no-repeat;
width:188px;
height:177px;z-index: 3;
position: absolute;
}
#menu1 li a:hover.home{
background:url(img/bt_main_hover.png) no-repeat;
}
/*КНОПКА 2*/
#menu1 li a.forum{
background:url(img/bt_forum.png) no-repeat;
width:188px;
height:177px;
margin-top: 100px;
margin-left: 10px;
overflow: hidden;
z-index: 2;
position: absolute;
}
#menu1 li a:hover.forum{
background:url(img/bt_forum_hover.png) no-repeat;
}
/*КНОПКА 3*/
#menu1 li a.dkp{
background:url(img/bt_dkp.png) no-repeat;
width:188px;
height:177px;
margin-top: 190px;
margin-left: 8px;
overflow: hidden;
z-index: 1;
position: absolute;
}
#menu1 li a:hover.dkp{
background:url(img/bt_dkp_hover.png) no-repeat;
}
/*КОНЕЦ МЕНЮ(ЛЕВО)*/
/*МЕНЮ(ПРАВО)*/
#menu2{
width:188px;
overflow:hidden;
height: 388px;
margin-top: -388px;
margin-right: auto;
margin-left: 1416px;
}
#menu2 ul{
list-style:none;
}
#menu2 li{
list-style:none;
display:block;
float:left;
margin:0 4px;
}
#menu2 li a{
display:block;
float:left;
}
#menu2 li a:hover{
}
#menu2 li a span{
display:none;
}
#menu2 li a.current{
display:block;
float:left;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:66px;
text-decoration:none;
padding:0 25px;
}
#menu2 li a:hover.current{
color:#fff;
}
/*КНОПКА 1*/
#menu2 li a.home{
background:url(img/bt_main.png) no-repeat;
width:188px;
height:177px;
z-index: 3;
position: absolute;
}
#menu2 li a:hover.home{
background:url(img/bt_main_hover.png) no-repeat;
}
/*КНОПКА 2*/
#menu2 li a.forum{
background:url(img/bt_forum.png) no-repeat;
width:188px;
height:177px;
margin-top: 100px;
margin-left: 10px;
overflow: hidden;
z-index: 2;
position: absolute;
}
#menu2 li a:hover.forum{
background:url(img/bt_forum_hover.png) no-repeat;
}
/*КНОПКА 3*/
#menu2 li a.dkp{
background:url(img/bt_dkp.png) no-repeat;
width:188px;
height:177px;
margin-top: 190px;
margin-left: 8px;
overflow: hidden;
z-index: 1;
position: absolute;
}
#menu2 li a:hover.dkp{
background:url(img/bt_dkp_hover.png) no-repeat;
}
/*КОНЕЦ МЕНЮ(ПРАВО)*/
#contentWrap {
width: 100%;
overflow: auto;
/*margin-left: -14px;
margin-top: -321px;*/
}
#content {
width: 700px;
float: right;
}
#content article, .widget-area aside, form#commentform, h2#pageTitle {
margin-bottom: 20px;
}
div.entry {
/*margin: 10px 0;*/
background: url("img/bg_content_v2.png") repeat top;
margin: 169px auto 0;
padding: 15px;
width: 910px;
height: auto;
}
div.entry p, div.entry a {
text-align:center;
margin: auto;
padding: 15px;
width: 910px;
height: auto;
}
.widget-area {
width: 220px;
}
input#s {
width: 150px;
}
footer {
/*border-top: 2px #666 solid;*/
font-size: .8em;
text-align:center;
padding: 10px;
background: url("img/border_bt2.png") no-repeat top;
height: 30px;
margin-bottom: 10px;
margin-top: 0px;
}
.page #content {
width: 100%;
float: none;
}

я нуб во всех этих делах и не понимаю почему так происходит, два дня сидел пробовал менять все что мог. думал дело в position да нифига. Чет понять не могу в чем проблема.

Подскажите пожалста, где искать корень проблемы? Как поправить?

npofopr · January 9, 2013

Зачем вы вообще уменьшаете размер браузера?

Ваш шаблон вообще изначально делался как адаптивный? Или вы просто сами решили, по уменьшать размер

И лучше ссылку на сайт, это ворпдресс, и там я думаю, не только те стили, что вы выложили.

Jekil · January 9, 2013

действительно я дурак

обидно

конечно же я пока понятия не имею(точнее не имел) что такое адаптивный веб-дизайн / адаптивная верстка

и естественно шаблон делался без учета "адаптивности"

на сайте сейчас не этот шаблон но ссылка вот - http://svobodnye-narody.ru/

В общем я вас понял спасибо! Будем изучать html/css дальше =))) ну и вордпресс до кучи

madhed · January 10, 2013

Оба меню жестко заданы на странице, для начала попробуйте задать расстояния не в пикселях, а в %. И лучше через position, а не margin.

Jekil · January 12, 2013

Спасибо, попробовал сделать свой шаблончик более адаптивным

стало значительно получше

но

терь менюшки в горизонтали остаются на месте

но по вертикали разъезжаются и давят на нижний блок и все разъезжается

http://test.svobodnye-narody.ru/

чтот никак не понимаю как же сделать толково?

Николя223 · January 13, 2013

гуляющие элементы

где люди такие эпитеты находят

)))

конечно же я пока понятия не имею(точнее не имел) что такое адаптивный веб-дизайн / адаптивная верстка
и естественно шаблон делался без учета "адаптивности"
на сайте сейчас не этот шаблон но ссылка вот - http://svobodnye-narody.ru/

вы не правильно делаете. все ваши меню, должны помещаться в один элемент, шапку. - ДИВ, с POSITION:relative (если у меню стоит absolute)и высотой HEIGHT, который размещаете в верху.

А в него уже встраивайте всё что угодно

Edited January 13, 2013 by Николя223

Jekil · January 13, 2013

блин я подозреваю что мое меню можно сделать как-то получше =))) но познаний не хватает

вы не правильно делаете. все ваши меню, должны помещаться в один элемент, шапку. - ДИВ, с POSITION:relative (если у меню стоит absolute)и высотой HEIGHT, который размещаете в верху.
А в него уже встраивайте всё что угодно

т.е. у меня должен быть например <div id="menu"> с POSITION:relative и HEIGHT и внутри него уже все 6 <ul><li></ul></li> рисовать?

блин казалось бы чего проще нарисовать чуть ли не одну простенькую страничку, но нет блин решишь одну проблему вылезит другая

опять вечер убил на это и что-то никак

так завтра на свежую голову после работы подумаю обо всем основательно.

Полюбому как всегда все окажется элементарно

:facepalmxd:

Николя223 · January 14, 2013

т.е. у меня должен быть например <div id="menu"> с POSITION:relative и HEIGHT и внутри него уже все 6 <ul><li></ul></li> рисовать?
блин казалось бы чего проще нарисовать чуть ли не одну простенькую страничку, но нет блин решишь одну проблему вылезит другая
опять вечер убил на это и что-то никак
так завтра на свежую голову после работы подумаю обо всем основательно.
Полюбому как всегда все окажется элементарно

Все так начинали))) профессионализм с опытом придет - тогда уже вообще задумываться не будите что куда вставлять - руки сами всё сделают)))) главное - практика!!

Sign In

гуляющие элементы

Question

Jekil

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Jekil

Link to comment

Share on other sites

madhed

Link to comment

Share on other sites

Jekil

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

Jekil

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information