Polskie Forum Użytkowników GIMP-a

Hyde zone => [Archiwum] Pomocna dłoń - GIMP => Wątek zaczęty przez: ZETT93 on 05.12.2008, 17:18:41


Tytuł: [ROZ] Stopka, problem
Wiadomość wysłana przez: ZETT93 on 05.12.2008, 17:18:41
Witam!
Piszę stronkę i mam problem z umieszczeniem stopki na stronie; kombinuję i nic mi nie wychodzi, stopka cały czas nie jest na samym dole, tylko tak :
(http://www.gimpuj.info/replacement.png) (http://img409.imageshack.us/my.php?image=screencs4.jpg)

Tutaj kod html stopki:

Kod:
   <div id="footer">
    	<div class="footer_column long">
                <h3>TU NAPISZ JAKIEŚ INFO O SOBIE CZY CO TAM SOBIE CHCESZ</h3>
				<p>DALSZE</p>		
				<p>I JESZCZE COŚ</p>
			</div>

	        <div class="footer_column">
                <h3>Odnosniki</h3>
				<ul>
                    		<li><a href="">LINK</a></li>
            			<li><a href="">LINK</a></li>
					<li><a href="">LINK</a></li>			
					<li><a href="">LINK</a></li>
                </ul>
            </div>
            
            <div class="footer_column">
                <h3>Inne odnosniki</h3>
				<ul>
                  		<li><a href="">LINK</a></li>
            			<li><a href="">LINK</a></li>
                </ul>
            </div>
        </div>
    </div>

A tu css:

Kod:

#footer {
	background-image:url(images/footer.jpg);
	background-repeat:repeat-x;
	padding:40px;
	position:relative;
	bottom:0px;
	min-height:130px;
}

Tytuł: Odp: Stopka, problem
Wiadomość wysłana przez: ZETT93 on 06.12.2008, 20:33:06
Nikt nie pomoże??






Podwójny post aby odświeżyć.

Tytuł: Odp: Stopka, problem
Wiadomość wysłana przez: mmiicc on 06.12.2008, 21:47:16
Ja ekspertem nie jestem, ale zamiast:
Kod:
position:relative;
bottom:0px;

bym wstawił:
Kod:
clear: both;

Tytuł: Odp: Stopka, problem
Wiadomość wysłana przez: ZETT93 on 07.12.2008, 14:12:35
Niestety bez zmian :( Wstawię cały kod, może ktoś doszuka się błędów i dlaczego to nie działa...

HTML:
Kod:
<!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>Wpisz se tu nazwe</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/.ico" />
</head>

<body>
 <div id="main" class="container">

        	<div id="header">
            
            	<ul id="menu">
                	<li><a href="index.html" class="active">O mnie</a></li>
                	<li><a href="">Inne aukcje</a></li>
                	<li><a href="">Informacje</a></li>
              
                </ul>
 </div>

 <br><br><br><br><br><br><br><br><br><br>
 <div id="block_featured" class="block">
            	<div class="block_inside">
                <div id="header">
                	<div class="image_block">
                    	<img src="images/card.jpg" alt="Eden"/>                    </div>
                    <div class="text_block">
                        <h2>WPISZ TUTAJ NAZWĘ PRODUKTU</h2>

                        <small>RODZAJ, W TYM WYPADKU KARTA DŹWIĘKOWA</small>
                       <p>A TUTAJ KRÓTKA SPECYFIKACJA<p>
                	</div>
                </div>
            </div>
 </div>
  
  <div id="block_featured" class="block">
            	<div class="block_inside">

                <div id="header">
                	<div class="image_block">
                    	<img src="images/card.jpg" alt="Eden"/>                    </div>
                    <div class="text_block">
                        <h2>WPISZ TUTAJ NAZWĘ PRODUKTU</h2>
                        <small>RODZAJ, W TYM WYPADKU KARTA DŹWIĘKOWA</small>
                       <p>A TUTAJ KRÓTKA SPECYFIKACJA<p>

                	</div>
                </div>
            </div>
 </div>
 
  <div id="block_featured" class="block">
            	<div class="block_inside">
                <div id="header">
                	<div class="image_block">
                    	<img src="images/card.jpg" alt="Eden"/>                    </div>

                    <div class="text_block">
                        <h2>WPISZ TUTAJ NAZWĘ PRODUKTU</h2>
                        <small>RODZAJ, W TYM WYPADKU KARTA DŹWIĘKOWA</small>
                       <p>A TUTAJ KRÓTKA SPECYFIKACJA<p>
                	</div>
                </div>
            </div>

 </div>
  <br><br><br><br><br><br>
   <div id="footer">
    	<div class="footer_column long">
                <h3>TU NAPISZ JAKIEŚ INFO O SOBIE CZY CO TAM SOBIE CHCESZ</h3>
				<p>DALSZE</p>		
				<p>I JESZCZE COŚ</p>
			</div>

	        <div class="footer_column">
                <h3>Odnosniki</h3>
				<ul>
                    		<li><a href="">LINK</a></li>
            			<li><a href="">LINK</a></li>
					<li><a href="">LINK</a></li>			
					<li><a href="">LINK</a></li>

                </ul>
            </div>
            
            <div class="footer_column">
                <h3>Inne odnosniki</h3>
				<ul>
                  		<li><a href="">LINK</a></li>
            			<li><a href="">LINK</a></li>

                </ul>
            </div>
        </div>
    </div>
	
</body>
</html>

</body>
</html>

CSS:
Kod:
@charset "UTF-8";

body {
	margin:0px; padding:0px;
	background-color:#131211;
	font-family:Arial, Helvetica, sans-serif;
	color:#7f7d78;
	font-size:13px;
	line-height:19px;
	
}

#main {
	background:#c1b4a0 url(images/tlo.jpg);
	background-repeat:no-repeat;
	padding-bottom:250px;
}

.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
	margin-left:50px;
	margin-right:50px;
	position:relative;
}
.ribbon {
	position:absolute;
	top:-3px;
	right:-3px;
}
.block_inside { 
	display:block; 
	border:15px solid #ffffff;
	background: #ffffff 
	padding:30px;
	overflow:auto;
}
.image_block {
	border:1px solid #b5b5b5;
	background-color:#d2d2d2;
	padding:5px 5px 1px 5px;
	float:left;
}
.image_block img {
	border:1px solid #b5b5b5;

}
.text_block {
	float:left;
	width:430px;
	margin-left:30px;
	padding-top:30px;
}
#header {
	padding-top:20px;
	padding-bottom:20px;
}
#logo h1, #logo small {
	margin:0px;
	display:block;
	text-indent:-9999px;
}
#logo {
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	width:570px;
	height:158px;
}
ul#menu {
	margin:0px;
	padding:0px;
	position:absolute;
	right:79px;
	top: 17px;
}
ul#menu li {
	display:inline;
	margin-left:12px;
}
ul#menu li a {
	text-decoration:none;
	color:#716d6a;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
	color:#211e1e;
}
#footer {
	background-image:url(images/footer.jpg);
	background-repeat:repeat-x;
	padding:40px;
	clear: both;
	min-height:308px;
}

#footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
.footer_column {
	float:left;
	width:120px;
	margin-right:30px;
}
#footer .long {
	width:610px;
}
#footer h3 {
	color:#e2dddc;
	text-transform:uppercase;
	font-size:10px;
}
.footer_column ul li, .footer_column ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

h2 {
	margin:0px 0px 10px 0px;
	font-size:36px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
	line-height:39px;
	letter-spacing:-1px;
}
h3 {
	margin:10px 0px 5px 0px;
	font-size:14px;
	line-height:21px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
}
h4 {
	color:#007de2;
	margin:0px 0px 0px 0px;
}
small {
	color:#595856;
	font-weight:bold;
	font-size:11px;
	display:block;
	margin-bottom:15px;
}

.container {
	width:1150px;
	margin:0 auto;
	position:relative;
}

Tytuł: Odp: Stopka, problem
Wiadomość wysłana przez: mmiicc on 07.12.2008, 16:19:11
1. W kodzie strony masz niepotrzebne:
Kod:
  </body>
</html>
na końcu.
2. W CSS do #footer dodaj sobie:
Kod:
background: #cdcdcd;
i będziesz widział jaki obszar zajmuje stopka.
3. Masz w stopce ustawioną wysokość minimalną (min-height) na 310px i padding z każdej strony na 40px, co razem daje 390px wysokości stopki i tyle właśnie jest.
4. W CSS #main masz ustawiony padding-bottom na 250px i to powoduje, że pod stopką masz jeszcze 250px wolnego miejsca
5. Jeszcze parę błędów jak np. używanie <br>

Polecam zainstalowanie dodatku do Firefox'a do mierzenia https://addons.mozilla.org/pl/firefox/addon/539

Tytuł: Odp: Stopka, problem
Wiadomość wysłana przez: ZETT93 on 07.12.2008, 17:15:02
No teraz pomogło :) Dzięki za pomoc, zaraz sobie zobaczę ten dodatek:)

A <br> dodałem aby porobić przerwy między oknami ;]

Nie jestem jeszcze tak zaawansowany :P Ale chyba to można ustawić w CSS, zaraz spróbuję:)

Pozdrawiam, już dodaję tag [ROZ] do tematu, może komuś się przyda :)


Powered by SMF 1.1.21 | SMF © 2006-2011, Simple Machines