Jump to content
  • 0

Господа,у меня много вопросов,нужна Ваша поддержка!

tolik_ke

Asked by tolik_ke,

 Share

Question

tolik_ke Explorer

tolik_ke

Posted
Posted

Я только начал свой путь в этом деле. Решил попрактиковаться,скачал шаблон,решил его посильней изменить. Решил сделать резиновую(адаптивную) верстку,с горем пополам справился. Вот теперь столкнулся с проблемами и целый день не могу справиться,голова кипит, знающих прошу помочь,пока я с ума не сошел.

 

1)съехавшие картинки-ссылки ни при каких условиях не хотят возвращаться и становиться горизантально. Нужно чтобы они всегда были в центре окна браузера.

2)точно так же в самом центре нужно чтобы стояла картинка баннер вверху.

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

 

Пожалуйста,вытащите меня из тупика.

/* CSS Document */		html,body { height: 100%;		max-height: 1280;		margin:0; padding: 0;	}body {	font:11px Arial, Helvetica, sans-serif;	color:#535353;	background:#FFFDE4 url(../images/bg.jpg) left top repeat-x;	margin:0px;	padding:0px;}#container {	width:80%;	margin:0px auto;	text-align:justify;	}.banner {	position:center; /* Положение слоя от левого края */     margin-left: 15%; /* Отступ слева */}.header {	height:32px;	background:#1B1B1B;	text-align:right;}.workzone {	padding:28px 0px 0px 0px;}#sidebar {	float:left;	margin-left: 22%;	border: 1px solid #333; /* Параметры рамки вокруг */	margin-right: 20px;	margin-bottom:45px;    width: 200px; /* Ширина слоя */    padding: 5px; /* Поля вокруг текста */ 		}#content {font-size: 20px;text-align:justify;	background: #eee 100; /* фон контента */	margin-right: 22%;	margin-left:;    padding: 20px ; /* поле слева */}.latestprojectzone {	padding:20px 0px 0px 0px;	margin: 20px 0px 0px 0px;}.projectgallery {	border-bottom:1px solid #CCCAB6;	padding-bottom:20px;	color: #000000;}.project-img 	{  width:50px;  height:50px;  margin-left:10px;  margin-right:10px;  float:left;  display:block; }.clear {	clear:both;	margin:0px;	padding:0px;}.footer {	background:url(../images/footer.jpg) left  bottom repeat-x;}.footerinside {	width:950px;	margin:0 auto;	text-align:right;	padding:11px 16px 45px 0px;	color: #F3F3F3;}/* Menu Styles Start Here */a {	color:#000000;	text-decoration:underline;}a:hover {	text-decoration:none;}.topmenu {	padding:7px 0px 0px 0px;}.topmenu ul {	margin:0px;	padding:0px}.topmenu li {	display:inline;	border-right:1px solid #ffffff;	padding:0px 10px 0px 10px;}.topmenu li a{	font:bold 11px Tahoma, Arial, Helvetica, sans-serif;	color:#ffffff;	text-decoration:none;}.topmenu li a:hover {	color:#cccccc;}.footerlink {}.footerlink ul {	margin:0px;	padding:0px;}.footerlink li {	display:inline;	border-right:1px solid #ffffff;	padding:0px 10px 0px 10px;}.footerlink li a{	color:#ffffff;	font-weight:bold;	text-decoration:none;}.footerlink li a:hover {	color:#cccccc;}ul#menu {list-style-type:none; margin:0; padding:0;}ul#menu li a{	color:#909090; /* цвет букв в обычном состоянии */	background: url(images/vert_menu.png) no-repeat 0 0; /* путь к изображению */	text-decoration:none; 	width: 200px;	height: 55px;	display:block;	border:none;	text-shadow: #ddd 2px 2px 0; /* цвет тени у букв в обычном состоянии */	}ul#menu li a:hover{	background-position: 50% 100%;	width: 200px;	height: 55px;	display:block;	color:#fff; /* цвет букв в активном состоянии */	text-shadow: #1185EE 2px 2px 0;	/* цвет тени у букв в активном состоянии */}ul#menu li a span{	font-family:sans-serif; /* Шрифт букв */	font-size:18px; /* размер букв */	padding:17px 0 0 20px;	display:block;	}/* Menu Styles End Here *//* Text Styles Start Here */h1 {	font:26px Georgia, Arial, Helvetica, sans-serif;	color:#000000;	padding:0px;	margin:0px 0px 20px 5px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ООО «ГенСтройСервис» </title><link href="stylesheet/style.css" rel="stylesheet" type="text/css" /></head><body><div id="container">	<div class="header">		<div class="topmenu">			<ul>				<li><a href="aboutus.html">О компании</a></li>				<li><a href="projects.html">Услуги компании</a></li>				<li><a href="services.html">Аренда</a></li>				<li><a href="support.html">Вакансии</a></li>				<li><a href="privacy.html">Партнеры</a></li>				<li style="border:none;"><a href="contact.html">Контакты</a></li>			</ul>		</div>		</div>					<div class="banner"> 		<img class="content_img" src="images/bannerlogo.jpg" usemap="#logo">		<map id="logo" name="logo"><area shape="rect" alt="" title="" coords="23,19,523,126" href="index.html" target="_self" />		</div>		<div class="clear"></div>			<div class="clear"></div>		</div>			<div class="workzone">		<div id="sidebar">						<ul id="menu">	<li><a href="aboutus.html"><span>О компании</span></a></li>	<li><a href="projects.html"><span>Услуги компании</span></a></li>	<li><a href="services.html"><span>Аренда</span></a></li>	<li><a href="support.html"><span>Вакансии</span></a></li>	<li><a href="privacy.html"><span>Партнеры</span></a></li>	<li><a href="contact.html"><span>Контакты</span></a></li>			</ul>			</div>						<div id="content">				<h1>ООО «ГенСтройСервис»</h1>																	Общество с ограниченной ответственностью «ГенСтройСервис» организовано в апреле 2007 года. Основной профиль нашей кампании – строительство наружных объектов/сетей теплоснабжения, водоснабжения и канализации. В период с 2007 по 2014 гг. ООО «ГенСтройСервис» участвовало во многих крупных и значимых строительных проектах Северо-Западного региона РФ, в частности в 2014 году подходит к завершению 3-х летний период комплекса работ по устройству внутриплощадочных инженерных сетей теплоснабжения, канализации и водоснабжения объекта: «Следственный изолятор на 4000 мест в Санкт-Петербурге» - «Кресты».					<br />					<br />							ООО «ГенСтройСервис» располагает штатом квалифицированных сотрудников, парком спецтехники и оборудования, которые позволяют решать любые по сложности производственные задачи.		</div></div>			<div class="clear"></div>						<div class="latestprojectzone">				<h1></h1>				<div class="projectgallery">					<div style="height:113px;">						<table>							<tr>						<div class="projectimg"><a href="#"><img src="images/project1.jpg" alt="" border="0" /></a></div>						<div class="projectimg"><a href="#"><img src="images/project2.jpg" alt="" border="0" /></a></div>						<div class="projectimg"><a href="#"><img src="images/project3.jpg" alt="" border="0" /></a></div>						<div class="projectimg"><a href="#"><img src="images/project4.jpg" alt="" border="0" /></a></div>						<div class="clear"></div>											<div class="clear"></div>					</div>					<div>						<div class="projecttxt">Наши награды</div>						<div class="projecttxt">Документация</div>						<div class="projecttxt">Лицензии</div>						<div class="projecttxt">Черный список</div>						<div class="clear"></div>					</div>				</div>												<div class="clear"></div>			</div>		</div>						<div class="clear"></div>			</div>		</div>		<div class="clear"></div>	</div>	<div class="clear"></div></div><div class="clear"></div><div class="footer">	<div class="footerinside">		<div class="footerlink">					</div>	</div></div><div class="clear"></div></body></html>

2159b8fd0bbc.jpg

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
tolik_ke Explorer

tolik_ke

Posted
  • Author
Posted

CSS обрезался. выложи сюда: http://jsfiddle.net/.

 

http://jsfiddle.net/ss2Ny/2/

 

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

 

eb55ee56316bc15b0716204aec033ff6.png

Link to comment
Share on other sites
  • 0
tolik_ke Explorer

tolik_ke

Posted
  • Author
Posted

так ваш футер лежит в блоке с наградами и т.п. 

вынесите его из этого блока, и у вас в конце зачем-то пустая таблица там :)

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

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

  • Similar Content

    • Mondeus
      Вёрстка футера на движке Xenforo
      By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } }  

    • zeiger2
      Смена background-image при работе с псевдоклассом hover
      By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • Марко
      Не работает селектор .class
      By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



  • Обсуждения

    • 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