Jump to content
  • 0

Сайт На Дивах

people2010

Asked by people2010,

 Share

Question

people2010 Explorer

people2010

Posted
Posted (edited)

Вот решил попробовать создать меню на дивах,страно, но чего-то не выходит, хотя читал что нужно использовать float:left и float:right для навигации с правой и левой стороны, у меня что-то вообще не то получилось. Подскажите пожалуйста, как его исправить.

http://www.sharemania.ru/0178464

Edited by people2010
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
people2010 Explorer

people2010

Posted
  • Author
Posted (edited)

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

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="content" />
<meta name="keywords" content="content"  />
<title>Главная</title>
</head>
<body class="marginpadding">
<div class="shapkafon">
<div class="shapka"></div>
</div>
<div class="item"></div>
<div id="left ">
    <div>Пункт 1</div>
	<div>Пункт 2</div>
	<div>Пункт 3</div>
	<div>Пункт 4</div>
	<div>Пункт 5</div>
	<div>Пункт 6</div>
	<div>Пункт 7</div>
	<div>Пункт 8</div>
	<div>Пункт 9</div>
	<div>Пункт 10</div>
</div> 

<div class="item"></div>
<div id="right ">
	<div">Пункт 1</div>
	<div>Пункт 2</div>
	<div>Пункт 3</div>
	<div>Пункт 4</div>
	<div>Пункт 5</div>
	<div>Пункт 6</div>
	<div>Пункт 7</div>
	<div>Пункт 8</div>
	<div>Пункт 9</div>
	<div>Пункт 10</div>
</div>
<div id="center">
Привет мир!
</div>
</body>
</html>

Файл style.css

/*Стили для сайта*/
* {
	margin:0; 
	padding:0;
}
body {
	min-width:770px;
}
img {
	border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }
.item{height:34px; background:url(img/videoyroki.png) no-repeat;
}
#center{margin-left:213px; margin-right:213px;}

Edited by people2010
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

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

Не надо плодить лишних элементов и свойств. Каждый пункт - ссылка, т.е. тэг <a></a> Так зачем вы обернули каждый пункт в блок? Начинайте пока со скелета, оформление и связанные с ним дополнительные элементы налепите потом. Позже научитесь как в шахматах смотреть вперед на несколько ходов.

Значит, вместо 

<div>Пункт 1</div>

используем 

<a href="#">Пункт 1</a>

решётка тут временно, пока не появится реальный адрес.

Потом внимательно следим за вложенностью 

<div id="left"><div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>

Тут вы напутали уже в первой строке. Исправляем 

<div id="left">
<a href="#">Пункт 1</a>
<a href="#">Пункт 2</a>
<a href="#">Пункт 3</a>
<a href="#">Пункт 4</a>
<a href="#">Пункт 5</a>
<a href="#">Пункт 6</a>
<a href="#">Пункт 7</a>
<a href="#">Пункт 8</a>
<a href="#">Пункт 9</a>
<a href="#">Пункт 10</a></div>

Чтобы каждая ссылка начиналась с новой строки можно пойти разными путями, ну например добавить в стилях 

#left a {display:block;}

Не понятно что это за градиенты у вас на фоне. Как это должно выглядеть при вертикальном меню?

Зачем указана высота блокам #right и #left? Содержимого явно больше, а для фона вы отменили размножение.

Что за класс у body, зачем?

Link to comment
Share on other sites
  • 0
people2010 Explorer

people2010

Posted
  • Author
Posted

Столкнулся ещё с небольшой трудностью, не получаеться разместить рамку, таким образом, нарисовал на фото.Вот код.

Файл index.php

<!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"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Главная</title> 
</head> 
<body> 
<div class="shapkafon"> 
	<div class="shapka"></div> 
</div> 

<div id="left"> 

						<div class='title'></div> 

		<div class="menu ramka" id="ikonka_menu1"><a href="#">Новости жизни</a></div> 
		<div><a href="#">Про клоунов из Москвы</a></div> 
		<div><a href="#">О жизни Таиси Лапиной</a> </div> 
		<div><a href="#">О Ефросиньи</a></div> 
		<div><a href="#">Про Деда Мороза</a></div> 
		<div><a href="#">Платёжные системы</a></div> 
		<div><a href="#">Работа с видео и аудио</a></div> 
		<div><a href="#">О жизни Мистер Бина</a></div> 
		<div><a href="#">Кто такой Джин?</a></div> 
		<div><a href="#">Создание моб.телефонов</a></div> 
		<div><a href="#">Какие бывают зайцы</a></div> 
		<div><a href="#">Психология</a></div> 
		<div><a href="#">Красота</a></div> 
		<div><a href="#">Спорт и здоровье</a></div> 
		<div><a href="#">Бизнес дяди Пети</a></div> 
		<div><a href="#">Сетевой маркетинг</a></div> 
		<div><a href="#">О детях из Украины</a></div> 
</div>   
</div> <!-- Закрываем  id="left"-->
	<div id="right"> 
		<div class='title'></div> 
		<div>Пункт 1</div> 
		<div>Пункт 2</div> 
		<div>Пункт 3</div> 
		<div>Пункт 4</div> 
		<div>Пункт 5</div> 
		<div>Пункт 6</div> 
		<div>Пункт 7</div> 
		<div>Пункт 8</div> 
		<div>Пункт 9</div> 
		<div>Пункт 10</div> 
	</div> 
	<div id="center"> 
		<p></p> 
	</div> 
<div id="footer"></div> 
</body> 
</html>

Файл style.css

/*Стили для сайта*/
* {
	margin:0;
	padding:0;
}
body {
	min-width:770px;
}
img {
	border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; border:1px solid black;}
.ramka{border:1px solid black; }
.title{height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px; margin:6px;  }
.menu a{text-decoration:none; }
#ikonka_menu1{background:url(img/p1.jpg) no-repeat; margin-left:7px; }

http://ipicture.ru/uploads/100909/TP6BzUjhah.jpg

http://www.sharemania.ru/0137823

Link to comment
Share on other sites
  • 0
people2010 Explorer

people2010

Posted
  • Author
Posted

1)Вот опробовал сократить, возникла проблема, не знаю как сократить вот эти строки, то есть именно вот это:

5px center no-repeat;

из этого:

#ikonka_menu1{background:url(img/p13.jpg) 5px center no-repeat;

Как оформить правильно чтоб не было дублирования?

2)Не знаю как правильно сделать чтоб при наведении мышкой на один из пунктов меню, пункт меню делался белым. Дело в том, что

я для всего меню задал фон: .menu{background-color:#f7f8f6;}

А как сделать чтоб именно на определённый навести пункт и он менял свой цвет, не получается никак.

Вот переделанный мною код:

Файл index.php

<!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">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
	<div class="shapka"></div>
</div>

   <div id="left" >
   <div class='title'></div>
   <div class="menu">
   <div id="ikonka_menu1"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu2"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu3"> <a href="#">Пункт</a> </div>
   <div id="ikonka_menu4"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu5"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu6"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu7"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu8"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu9"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu10"><a href="#">Пункт</a></div>
   <div id="ikonka_menu11"><a href="#">Пункт</a></div>
   <div id="ikonka_menu12"><a href="#">Пункт</a></div>
   <div id="ikonka_menu13"><a href="#">Пункт</a></div>
   <div id="ikonka_menu14"><a href="#">Пункт</a></div>
   <div id="ikonka_menu15"><a href="#">Пункт</a></div>
   <div id="ikonka_menu16"><a href="#">Пункт</a></div>
   <div id="ikonka_menu17"><a href="#">Пункт</a></div>
  </div>
	</div> <!--Закрываем id="left"-->
	<div id="right">
		<div class='title'></div>
		<div>Пункт 1</div>
		<div>Пункт 2</div>
		<div>Пункт 3</div>
		<div>Пункт 4</div>
		<div>Пункт 5</div>
		<div>Пункт 6</div>
		<div>Пункт 7</div>
		<div>Пункт 8</div>
		<div>Пункт 9</div>
		<div>Пункт 10</div>
	</div>
	<div id="center">
		<p>Привет мир!</p>
	</div>

<div id="footer"></div>
</body>
</html>

Файл style.css

/*Стили для сайта*/

* {

margin:0;

padding:0;

}

body {

min-width:770px;

}

img {

border: 0;

}

.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }

.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }

#right{float:right; width:213px; }

#left{float:left; width:213px; }

#center{margin-left:213px; margin-right:213px;}

.title{height:34px; background:url(img/videoyroki.png) no-repeat;

border:1px solid black;}

#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}

.menu div{font-family:Verdana, sans-serif; font-size:12px;

padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;

border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;

}

.menu a{text-decoration:none; background-color:#f7f8f6;}

.menu{background-color:#f7f8f6;}

.menu a:visited{color:black; }

/*—————--Иконки для меню—————————*/

#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat;

}

#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;

}

#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;

}

#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;

}

#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;

}

#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;

}

#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;

}

#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;

}

#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;

}

#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;

}

#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;

}

#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;

}

#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;

}

#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;

}

#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;

}

#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;

}

#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;

}

/*————————————————————--*/

http://www.sharemania.ru/0290717

Link to comment
Share on other sites
  • 0
people2010 Explorer

people2010

Posted
  • Author
Posted

Короче вот так сделал пробное, меня так устраивает, но проблема в том,что этот стиль будет действовать только для 1 лишь пункта меню, при наведении мышкой фон будет меняться, то есть после вот этой строки:

#ikonka_menu1:hover{background-color:white;}

Но что писать 17 раз по такой строке? есть какой-то выход?

Вот весь файл ксс.

/*Стили для сайта*/
* {
	margin:0;
	padding:0;
}
body {
	min-width:770px;
}
img {
	border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }

#center{margin-left:213px; margin-right:213px;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}

#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu div{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
}

.menu{background-color:#f7f8f6;}
.menu a{text-decoration:none; }

.menu a:visited{color:black; }



/*—————--Иконки для меню—————————*/

#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat; 
}

#ikonka_menu1:hover{background-color:white;}


#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;

}

#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
}

#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;

}

#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;

}

#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
}

#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
}

#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;

}

#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;

}

#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;

}

#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;

}

#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;

}


#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;

}

#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;

}

#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;

 }

#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
}

#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;

}



/*————————————————————--*/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept