Как да центрирам цялата страница в средта на браузъра хоризо

G

grizli

Registered
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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=windows-1251" />
<title>Задача</title>
<meta name="description" content="html, css" />
<meta name="keywords" content="html, css, web design" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/zada4a.css" />
</head>

<body>
	<div id="header">
		<ul>
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a></li>
			<li><a href="#">Menu 3</a></li>
			<li><a href="#">Menu 4</a></li>
			<li><a href="#">Menu 5</a></li>
		</ul>
	</div>

        <table cellpadding="0"; cellspacing="0" align="left" width="170px">

            <tr>
                <td class="links"><a href="#">Link 1</a></td>
            </tr>
            <tr>
                <td class="links"><a href="#">Link 2</a></td>
            </tr>
            <tr>
                <td class="links"><a href="#">Link 3</a></td>
            </tr>
            <tr>
                <td class="links" ><a href="#">Link 4</a></td>
            </tr>
            <tr>
                <td class="links"><a href="#">Link 5</a></td>
            </tr>
            <tr>
                <td class="links"><a href="#">link 6</a></td>
            </tr>
            <tr>
                <td class="links"><a href="#">Link 7</a></td>
            </tr>
            <tr>
                <td class="links"><a href="#">Link 8</a></td>
            </tr>
       </table>


     <div id ="cont">
	 </div>
     <div id="footer">
        <ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
		</ul>
     </div>


    </body>
</html>

CSS
Код: 
html, body {position: relative; height: 100%; background: #ccc; color: #000; font-size: 18px; font-family: georgia,verdana, sens-serif; margin: 0px; padding: 0px;}
#header {line-height: 56px; height: 56px; width: auto; margin: 0 auto; padding: 0 0 0 0; background-color: green;}
#header ul {margin: 0 0 0 450px; padding:0 0 0 0; list-style-type: none;}
#header ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 20px; font-family: arial; font-weight: bold;}
#header ul li a {color: #fff; text-decoration: none;}
#header ul li a:hover {color: #fff; text-decoration: underline;}
#header ul li a:active {color: #cac2c2;}

.links{padding:0px;margin:0px;}
.links a{padding: 5px 0 0px 5px; line-height: 13px; text-decoration: none; font-family: georgia; font-size: 15px; font-weight: normal; color: #e0427d; background-color:#ccff99; display:block; height:22px; border: 1px solid #999900;}
.links a:hover {background-color:#ffcc66;}
.links a:visited {color: #e0427d;}


#cont {background: url(../img/DSC00193.jpg) no-repeat; width: 640px; height: 480px; margin: 0 0 0 170px;}
#footer {line-height: 38px; padding: 0 0 0 0; background: #999900; margin: 536px 0 0 0; height: 38px; width: 100%; position: absolute;  bottom:0;}
#footer ul {margin: 0 0 0 500px; padding:0 0 0 0; list-style-type: none;}
#footer ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 14px; font-family: arial; font-weight: bold;}
#footer ul li a {color: #fff; text-decoration: none;}
#footer ul li a:hover {color: #fff; text-decoration: underline;}
#footer ul li a:active {color: #cac2c2;}

Не знам дали обяснявам добре. Искам цялата страница да е центрирана хоризонтално при всякаква резолюция. Е, размерът на картинката си остава такъв. Но Таблицата, хедъра и футеа да не започват в началото и да стигат до края. Направих 2 дива в ляво и дясно - в които няма нищо и им зададох ширина в проценти - не стана. Някой по навътре в материята може ли да помогне? Значи при различна ширина на монитора, разстоянието в двата края да е различно.
 
Практиката в такива случай е -СЛАГАШ ЦЕЛИЯ САЙТ в ЕДИН ДИВ и този див му даваш определена ширина и margin-left:auto; margin-right:auto;
т'ва е ,дано помогне :)
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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=windows-1251" />
<title>Задача</title>
<meta name="description" content="html, css" />
<meta name="keywords" content="html, css, web design" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/zada4a.css" />
</head>

<body>
<div id="website">
<div id="header">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>

<table cellpadding="0"; cellspacing="0" align="left" width="170px">

<tr>
<td class="links"><a href="#">Link 1</a></td>
</tr>
<tr>
<td class="links"><a href="#">Link 2</a></td>
</tr>
<tr>
<td class="links"><a href="#">Link 3</a></td>
</tr>
<tr>
<td class="links" ><a href="#">Link 4</a></td>
</tr>
<tr>
<td class="links"><a href="#">Link 5</a></td>
</tr>
<tr>
<td class="links"><a href="#">link 6</a></td>
</tr>
<tr>
<td class="links"><a href="#">Link 7</a></td>
</tr>
<tr>
<td class="links"><a href="#">Link 8</a></td>
</tr>
</table>


<div id ="cont">
</div>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>

</body>
</html>


html, body {position: relative; height: 100%; background: #ccc; color: #000; font-size: 18px; font-family: georgia,verdana, sens-serif; margin: 0px; padding: 0px;}
#website {width:960px; height:auto; margin:0px auto;}
#header {line-height: 56px; height: 56px; width: auto; margin: 0 auto; padding: 0 0 0 0; background-color: green;}
#header ul {margin: 0 0 0 450px; padding:0 0 0 0; list-style-type: none;}
#header ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 20px; font-family: arial; font-weight: bold;}
#header ul li a {color: #fff; text-decoration: none;}
#header ul li a:hover {color: #fff; text-decoration: underline;}
#header ul li a:active {color: #cac2c2;}

.links{padding:0px;margin:0px;}
.links a{padding: 5px 0 0px 5px; line-height: 13px; text-decoration: none; font-family: georgia; font-size: 15px; font-weight: normal; color: #e0427d; background-color:#ccff99; display:block; height:22px; border: 1px solid #999900;}
.links a:hover {background-color:#ffcc66;}
.links a:visited {color: #e0427d;}


#cont {background: url(../img/DSC00193.jpg) no-repeat; width: 640px; height: 480px; margin: 0 0 0 170px;}
#footer {line-height: 38px; padding: 0 0 0 0; background: #999900; margin: 536px 0 0 0; height: 38px; width: 100%; position: absolute; bottom:0;}
#footer ul {margin: 0 0 0 500px; padding:0 0 0 0; list-style-type: none;}
#footer ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 14px; font-family: arial; font-weight: bold;}
#footer ul li a {color: #fff; text-decoration: none;}
#footer ul li a:hover {color: #fff; text-decoration: underline;}
#footer ul li a:active {color: #cac2c2;}
 
IvanAdamov каза:
html, body {position: relative; height: 100%; background: #ccc; color: #000; font-size: 18px; font-family: georgia,verdana, sens-serif; margin: 0px; padding: 0px;}
#website {width:960px; height:auto; margin:0px auto;}
#header {line-height: 56px; height: 56px; width: auto; margin: 0 auto; padding: 0 0 0 0; background-color: green;}
#header ul {margin: 0 0 0 450px; padding:0 0 0 0; list-style-type: none;}
#header ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 20px; font-family: arial; font-weight: bold;}
#header ul li a {color: #fff; text-decoration: none;}
#header ul li a:hover {color: #fff; text-decoration: underline;}
#header ul li a:active {color: #cac2c2;}

.links{padding:0px;margin:0px;}
.links a{padding: 5px 0 0px 5px; line-height: 13px; text-decoration: none; font-family: georgia; font-size: 15px; font-weight: normal; color: #e0427d; background-color:#ccff99; display:block; height:22px; border: 1px solid #999900;}
.links a:hover {background-color:#ffcc66;}
.links a:visited {color: #e0427d;}


#cont {background: url(../img/DSC00193.jpg) no-repeat; width: 640px; height: 480px; margin: 0 0 0 170px;}
#footer {line-height: 38px; padding: 0 0 0 0; background: #999900; margin: 536px 0 0 0; height: 38px; width: 100%; position: absolute; bottom:0;}
#footer ul {margin: 0 0 0 500px; padding:0 0 0 0; list-style-type: none;}
#footer ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 14px; font-family: arial; font-weight: bold;}
#footer ul li a {color: #fff; text-decoration: none;}
#footer ul li a:hover {color: #fff; text-decoration: underline;}
#footer ul li a:active {color: #cac2c2;}
Увеличете...

Погледна ли футера, какво става с него? Стига до края...
 
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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=windows-1251" />
<title>Задача</title>
<meta name="description" content="html, css" />
<meta name="keywords" content="html, css, web design" />
<meta name="robots" content="index, follow" />
<link type="text/css" rel="stylesheet" href="css/zada4a_1.css" />
</head>

<body>
	<div id="all">	
		<div id="header">
			<ul>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
				<li><a href="#">Menu 5</a></li>
			</ul>
		</div>
		<div id="content">
			<table cellpadding="0"; cellspacing="0" align="left" width="170px">

				<tr>
					<td class="links"><a href="#">Link 1</a></td>
				</tr>
				<tr>
					<td class="links"><a href="#">Link 2</a></td>
				</tr>
				<tr>
					<td class="links"><a href="#">Link 3</a></td>
				</tr>
				<tr>
                <td class="links" ><a href="#">Link 4</a></td>
				</tr>
				<tr>
					<td class="links"><a href="#">Link 5</a></td>
				</tr>
				<tr>
					<td class="links"><a href="#">link 6</a></td>
				</tr>
				<tr>
					<td class="links"><a href="#">Link 7</a></td>
				</tr>
				<tr>
					<td class="links"><a href="#">Link 8</a></td>
				</tr>
			</table>
			<div id="pic">
			</div>
			<div id="cont"></div>	 	
			<div id="adds">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
			<div id="adds_1">dawdfaw fdafa adfafa asdsf ddcsa gfhgd gsg grrg</div>
        
			<div class="clearer"> </div>
		
		</div>
     
		<div id="footer">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
			</ul>
		</div>
	</div>

    </body>
</html>

CSS

Код: 
html, body {position: relative; height: 100%; background: #ccc; color: #000; font-size: 18px; font-family: georgia,verdana, sens-serif; margin: 0; padding: 0 auto;}
#all {width:960px; height:auto; margin:0px auto;}
#header {line-height: 56px; height: 56px; width: auto; margin: 0 auto; padding: 0 0 0 0; background-color: green; 
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 9px 9px 0px 0px;
border-radius: 9px 9px 0px 0px;}
#header ul {margin: 0 0 0 450px; padding:0 0 0 0; list-style-type: none;}
#header ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 20px; font-family: arial; font-weight: bold;}
#header ul li a {color: #fff; text-decoration: none;}
#header ul li a:hover {color: #fff; text-decoration: underline;}
#header ul li a:active {color: #cac2c2;}

.links{padding:0px;margin:0px;}
.links a{padding: 5px 0 0px 5px; line-height: 13px; text-decoration: none; font-family: georgia; font-size: 15px; font-weight: normal;
color: #e0427d; background-color:#ccff99; display:block; height:22px; border: 1px solid #999900;}
.links a:hover {background-color:#ffcc66;}
.links a:visited {color: #e0427d;}
#pic {height: 227px; width: 170px; margin: 0px 0 0 0; background: url(../img/img1.jpg) no-repeat; padding: 0 0 0 0;
position: absolute; top: 309px; left: 195px;}

#cont {background: url(../img/DSC00193.jpg) no-repeat; width: 640px; height: 480px; margin: 0px 0 0 170px;}
#adds {border: 1px solid #999900; height: 210px; width: 142px; float: right; margin: -476px 0 0 0; font-size: 15px; font-family: georgia;
padding: 0px 2px 2px 2px; text-align: left; background:#dddddd;
-webkit-border-radius: 6px ;
-moz-border-radius: 6px;
border-radius: 6px;
}
#adds_1 {border: 1px solid #999900; height: auto; width: 142px; float: right; margin: -255px 0 0 0; font-size: 15px; font-family: georgia;
padding: 0px 2px 2px 2px; text-align: left; background:#dddddd;
-webkit-border-radius: 6px ;
-moz-border-radius: 6px;
border-radius: 6px;}

#footer {line-height: 38px; padding: 0 0 0 0; background-color: #999900; margin: 0 auto; height: 38px; width: 960px; position: absolute;  bottom:0;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-radius: 0px 0px 9px 9px;
border-radius: 0px 0px 9px 9px;}
#footer ul {margin: 0 0 0 300px; padding:0 0 0 0; list-style-type: none;}
#footer ul li{margin: 18px 20px 0 0; padding: 0; list-style-type: none; display: inline; font-size: 14px; font-family: arial; font-weight: bold;}
#footer ul li a {color: #fff; text-decoration: none;}
#footer ul li a:hover {color: #fff; text-decoration: underline;}
#footer ul li a:active {color: #cac2c2;}
.clearer{line-height: 0px; font-size: 0px; clear: both;	overflow: hidden;}

Значи картинката под таблицата успявам да я визуализирам само с абсолютно позициониране. Как да стане без абсолютно? Благодаря предварително.
Ето тази: #pic {height: 227px; width: 170px; margin: 0px 0 0 0; background: url(../img/img1.jpg) no-repeat; padding: 0 0 0 0;
position: absolute; top: 309px; left: 195px;}


PS: Умишлено не съм дал точката още - чакам малко помощ за тая картинка.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе