footer не ще да ми отиде долу

N

newtest

Registered
footer-a не ще да ми застане долу. Това са ми двата файла.
PS: имам и още един проблем - сивата лента дето е с class lenta искам винаги да е на максимален width. Вмомента съм му задал 1680px и като му дал restore down (да стане по-малък) ми се появява scroll бар, а аз не искам да се показва.
[css]
* { padding:0px; margin:0px }

body { background: #000 url('../images/background.jpg') no-repeat top center;
background-size:cover; color:#fff; position:relative;top:0px;min-height:100%; }

#web-site {width:100%;position:absolute;}
#web-site #innerholder {width:980px;margin:0 auto;position:relative}
#header {position:absolute; width:980px;min-height:50px;top:30px}
#header .lenta {position:absolute;width:1680px;height:50px;left:-350px;background:#ccc;z-index:1}
#header #nav {position:absolute;z-index:2;top:5px;width:980px;min-height:40px;}
#header #nav #logo{position:absolute;width:255px;height:112px;border:1px solid #c1c1c1;left:42px;top:-25px}
#header #nav #nav-menu {position:absolute;left:307px;top:11px;width:630px;line-height:20px}
#header #nav #nav-menu li {float:left; list-style:none; padding:0 10px}
#content {position:absolute; top:145px}
#left {position:absolute;left:40px;width:255px;top:5px}
#center {position:absolute;left:310px;width:660px;top:5px}
#footer {position:absolute; height:40px;width:100%;background:#c5c5c5;}
[/css]

HTML: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Site</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	</head>
	<body>
		<div id="web-site">
			<div id="innerholder">
				<div id="header">
					<div class="lenta"></div>
					<div id="nav">
						<div id="logo">
						</div>
						<div id="nav-menu">
							<ul>
								<li><a href="#">Home</a></li>
								<li><a href="#">Home</a></li>
								<li><a href="#">Home</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div id="content">
					<div id="left">
						left
					</div>
					<div id="center">
						center
					</div>
				</div>
			</div>
			<div style="clear:both"></div>
			<div id="footer">
				footer
			</div>
		</div>
	</body>
</html>
 
Не разбрах защо има position:absolute; и очаквате да стане със margin-top ...
махни го това и му сложи margin-ите както ти е кеф.
 
Hous каза:
Не разбрах защо има position:absolute; и очаквате да стане със margin-top ...
махни го това и му сложи margin-ите както ти е кеф.
Увеличете...

Махам го и после се получава така че трябва да бъде фиксирано. Аз не искам да бъде така...

ПС: ако му махна absolute и му сложа маргин ще стане същото като да му сложа top: XX според мен...
 
newtest каза:
Махам го и после се получава така че трябва да бъде фиксирано. Аз не искам да бъде така...
Увеличете...
не работи защото всичко ти е със Position:Absolute;
...

Позиционирай си нещата по друг начин...
просто тая абсолютна позиция ще ти изиграе доста лоша шега при различните браузъри..
позиционирай ги по подобен начин:
Код: 
<div id="header"> 
#header{
width:XX;
height:XX;
margin-left:auto;
margin-right:auto;

<div id="conteiner">
#conteiner{
width:XX;
height:XX;
margin-left:auto;
margin-right:auto;

}

<div id="footer">
#footer{
width:XX;
height:XX;
margin-left:auto;
margin-right:auto;
margin-top:XXpx;
}
 
аз ще ти препоръчам друг начин например

[css]
#wrapper{
width: 900px;
margin: 0 auto;
}

#header{
width: 900px;
height: 66px;
float: left;
background-color: red;
}

#leftnav{
width: 150px;
height: 600px;
background-color: blue;
float: left;
}

#content{
width:750px;
height: 600px;
background-color: green;
float: left;
}

#footer{
width: 900px;
height: 30px;
float: left;
background-color: black;

}
[/css]

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html>
	<head>
	<meta charset="utf-8" />
	<title> Some page</title>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
			
			</div>
			<div id="leftnav">
			</div>
			<div id="content">
			</div>
			<div id="footer">
			</div>
		</div>
	</body>
	</html>

пробвай моя код да видиш как се получава :?:
 
Същата идея,но "обхванато" от wrapper.
Както и да го направи ще е добре,стига да не е position:absolute;
такъв сайт до сега не съм виждал който да изглежда сполучливо под всички браузъри.Трябва много рядко да се ползва това правило според мен.
ps:Ползвай addons на мозила web developer (или firebug) май се казва можеш директно при прегледа на страница та сменяш html/css кода и да виждаш директно от къде е проблема.
Айде успех :)
 
Jorko Благодаря, а сега как да направя една лента под haeder-a дето да бъде 100%...? Същото и за footer-a...

Hous Благодаря и на теб... знам за firebug... chrome си има вграден в него същият... както и IE новите версии и те го имат вграден.
 
newtest каза:
Jorko Благодаря, а сега как да направя една лента под haeder-a дето да бъде 100%...? Същото и за footer-a...
Увеличете...
<div id="lenta"></div>

css:
#lenta{
width:100%;
height:XXpx;
}
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе