Премини към съдържанието
NerdyBurdy

При зуум на страницата менюто се отлепя

Препоръчан отговор


Здравейте, от няколко дена уча HTML и CSS днес тръгнах да си правя една страничка, като проектче, след като направих част от главната страница видях, че като зуумвам с Гугал Кром меню-то ми се отлепя.

когато Кром е на 100% зуум: <img>http://store.picbg.net/pubpic/20/F4/a5b57fd8ca2520f4.jpg</img>
когато Кром е на 110% зуум: <img>http://store.picbg.net/pubpic/B8/5A/f7307d2da416b85a.jpg</img>

когато стане на 150% пак се маха това разстояние и, ако зуумна над 150% пак се появява това разстояние.

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

ето кодът ми.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>WWII POW Camp Shumen</title>
	<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
	<header class="mainHeader">
		<img src="http://goo.gl/04j7Nn">
		<h1>WWII POW camp Shumen - people and stories</h1>
		<p>This web-site supports the idea for tolerance and collaboration between ordinary people from different nations, <br>that used to be divided by WWII</br></p>
		<nav>
			<ul>
				<li><a href="#">Camp History</a></li>
				<li><a href="#">POW Roster</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Shumen,Bulgaria</a></li>
				<li><a href="#">Battles, losses</a></li>
				<li><a href="#">Crews, stories</a></li>
				<li><a href="#">Maps, Pictures</a></li>
				<li><a href="#">Links</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<article>
			<header>
				<h3>The Bulgarians and Gen. HALL 's mission 1944/45</h3>
			</header>
			<img src="http://shumen-camp.info/images/evrov.jpg">
			<p>WWII Shumen POW camp for Allied military personal, mostly from aircrafts, fallen on the territory of Bulgaria existed from November 1943 till September 1944 . New Bulgarian government released all 328 POW-s from 9 nations from the camp on the 8th September 1944.</p>
			<p>The POW camp was under the jurisdiction of the Shumen Garrison Commander - General Georgi Kovachev.</p>
			<div>
				<p>Read More</p>
			</div>
		</article>
	</main>
	<aside class=topAside>
		<h4>Shumen Monument</h4>
		<img src="img/pametnik.jpg">
	</aside>
	<aside class="botAside">
		<h4>Bulgaria Millitary</h4>
		<img src="img/bgFlag.jpg">		
	</aside>


</body>
</html>
body{
	margin:0 auto;
	background-image: url("img/bg3.jpg");
	  background-repeat: no-repeat;
  	background-position:center;
  	background-attachment:fixed;
}

header.mainHeader{
	height:300px;
}

header.mainHeader img{
	height:276.5px;
	width:100%;
	 position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;

}

header.mainHeader h1{
  	color: #fff;
  	font-size: 28px;  
  	font-family: 'Shift', sans-serif;
  	font-weight: bold;
  	text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  	-floatmoz-text-shadow: 0 0 2px #000;
  	-webkit-text-shadow: 0 0 2px #000;
  	padding-left:3%;

}

header.mainHeader p{
	color:#FFEFD5;
	font-weight: bold;
  	text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  	-floatmoz-text-shadow: 0 0 2px #000;
  	-webkit-text-shadow: 0 0 2px #000;
  	padding-left: 4%;

}
header.mainHeader nav{
	padding-left:0 auto;
	padding-bottom: 0 auto;
	border:1.5px solid #555353;
	margin:0 auto;
	height:40px;
	width:100%;
	position:relative;
	top:155px;
	background-color:gray;

}
header.mainHeader nav ul{
	list-style: none;
	margin:0 auto;
	padding:left 0 auto;

}
header.mainHeader nav ul li{
	float:left;
	display:inline;
	padding-left:0 auto;
}
header.mainHeader nav a:link, header.mainHeader nav a:visited{
	color:orange;
	text-decoration: none;
	display:inline-block;
	padding:12px 8px;
	padding-left:0 auto;
	text-align: left;
	position:relative;
	right:40px;
}
header.mainHeader nav a:hover{
	height:16px;
	color:#555353;
	background-color:orange;

}

main{
	background-image: url("img/mainbg.jpg");
	border: 7px solid transparent;
	border-image: url(img/borderimg.jpg) 50 round;
	margin-top:2%;
	margin-left:2%;
	height:120%;
	width:70%;
	float:left;
	padding-right:2%;
}
main h3{
	text-align: center;
}
main img{
	background-color:;
	float:right;
	padding: 1.5%;
	height:40%;
	width:50%;
}
aside.topAside{
	margin-top:2%;
	margin-right:2%;
	float:right;
	height:230px;
	width:20%;
	border:1px solid black;
}
aside.topAside h4{
	text-align:center;
	border:1px solid red;
	margin:0 auto;
}
aside.topAside img{
	height:85%;
	width:85%;
}
aside.botAside{
	margin-right:2%;
	margin-top:2%;
	float:right;
	height:230px;
	width:20%;
	border:1px solid black;

}
aside.botAside img{

	height:85%;
	width:85%;
}
aside.botAside h4{
	text-align:center;
	border:1px solid red;
	margin:0 auto;

}

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

публикувано (редактирано)

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

Използвай background-size: 100%

 

след като направих част от главната страница видях, че като зуумвам с Гугал Кром меню-то ми се отлепя.

Може ли малко по-подробно, че нещо от снимките особена разлика не виждам.

Редактирано от Stoyannnov (преглед на промените)

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Използвай background-size: 100%

 

Може ли малко по-подробно, че нещо от снимките особена разлика не виждам.

Виж на втората снимка когато е зумнато на 110% как между снимката и сивото поле на меню има една много малка тънка бяла линия.

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
публикувано (редактирано)

 

 

  1. header.mainHeader nav{
  2. padding-left:0 auto;
  3. padding-bottom: 0 auto;
  4. border:1.5px solid #555353;
  5. margin:0 auto;
  6. height:40px;
  7. width:100%;
  8. position:relative;
  9. top:155px;
  10. background-color:gray;
  11.  
  12. }

Използвал си фиксирана стойност за височината на nav-а.

Редактирано от Stoyannnov (преглед на промените)

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Използвал си фиксирана стойност за височината на nav-а.

% ли да използвам ?


Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Да.

ами не стана като ползвах % мисля, че е заради това, че позиционирам nav контейнера и заради това при зум се прецаква леко, но ако не го позиционирам контейнера на nav ми стои в средата в контейнера на header не знам защо така.

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Отдели nav-а от хедъра. Направи го в отделен div. 

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

За да не спамя повече постове ще попитам тук. Направих меню, което е контейнер залепен до хедар контейнера. След като почнах да му слагам различни стойности във CSS файла, когато задавах на nav.mainnav.ul.li стойност display:inline backgrounda на nav елемента ми изчезваше проверих в нета и видях, че ползват Overflow:hidden за да се оправи тази грешка, можете ли да ми кажете защото става така, че li-тата като им задам да са inline ми махат фона на Nav тага.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>WWII POW Camp Shumen</title>
	<link rel="stylesheet" type="text/css" href="style2.css">
	 <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
</head>
<body>
	<header class="mainHeader">
		<img src="img/headerbg.png">
		<h1>WWII POW camp Shumen - people and stories</h1>
		<p>This web-site supports the idea for tolerance and collaboration between ordinary people from different nations, <br>that used to be divided by WWII</br></p>
	</header>
	<nav class="mainNav">
			<ul>
				<li><a href="#">Camp History</a></li>
				<li><a href="#">POW Roster</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Shumen,Bulgaria</a></li>
				<li><a href="#">Battles, losses</a></li>
				<li><a href="#">Crews, stories</a></li>
				<li><a href="#">Maps, Pictures</a></li>
				<li><a href="#">Links</a></li>
			</ul>
	</nav>
</body>
</html>

CSS:
 

body{
	margin:0 auto;
	background-image: url("img/bg3.jpg");
	background-repeat:no-repeat;
  	background-position:center;
  	background-attachment:fixed;
  	clear:both;
}
header.mainHeader{
	height:300px;
	margin-top:0 auto;
	border:1px solid red;

}
header.mainHeader img{
	height:301px;
	width:100%;
	 position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    margin-bottom:0 auto;

}
header.mainHeader h1{
  	color: #fff;
  	font-size: 34px;  
  	font-family: 'Shift', sans-serif;
  	font-weight: bold;
  	text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  	-floatmoz-text-shadow: 0 0 2px #000;
  	-webkit-text-shadow: 0 0 2px #000;
  	padding-left:3%;

}

header.mainHeader p{
	color:#FFEFD5;
	font-weight: bold;
  	text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  	-floatmoz-text-shadow: 0 0 2px #000;
  	-webkit-text-shadow: 0 0 2px #000;
  	padding-left: 4%;
  	font-size:19.5px;

}
nav.mainNav{
	border:1px solid red;
	height:13.5%;
	width:100%;
	background-color:gray;

}
nav.mainNav ul{
	border:1px solid red;
	list-style:none;
	margin:0 auto;
	padding-left:0;
}
nav.mainNav ul li{
	border:1px solid green;
	display:inline;
	float:left;
}

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Регистрирайте се или влезете в профила си за да коментирате

Трябва да имате регистрация за да може да коментирате това

Регистрирайте се

Създайте нова регистрация в нашия форум. Лесно е!

Нова регистрация

Вход

Имате регистрация? Влезте от тук.

Вход

×

Информация

Поставихме бисквитки на устройството ви за най-добро потребителско изживяване. Можете да промените настройките си за бисквитки, или в противен случай приемаме, че сте съгласни с нашите условия за ползване.