Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji
 
Szukanie zaawansowane



Strony: [1]
DrukujPobierz PDF
Autor Wątek: [ROZ] Stopka, problem  (Przeczytany 2274 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
ZETT93
Użytkownik

Reputacja: 11 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: zett@gimpuj.info
Licencja: Copyright
Wiadomości: 385
Galeria Użytkownika


Zaraz Cię wyciosam!


Zobacz profil
« : 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 :


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;
}
« Ostatnia zmiana: 07.12.2008, 17:15:23 wysłane przez ZETT93 » Zapisane
I'M BACK !
ZETT93
Użytkownik

Reputacja: 11 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: zett@gimpuj.info
Licencja: Copyright
Wiadomości: 385
Galeria Użytkownika


Zaraz Cię wyciosam!


Zobacz profil
« Odpowiedz #1 : 06.12.2008, 20:33:06 »
Nikt nie pomoże??






Podwójny post aby odświeżyć.
« Ostatnia zmiana: 06.12.2008, 23:44:36 wysłane przez karmazynka » Zapisane
I'M BACK !
mmiicc
√ ι ק

Reputacja: 14 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-BY-SA
Wiadomości: 1 423
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #2 : 06.12.2008, 21:47:16 »
Ja ekspertem nie jestem, ale zamiast:
Kod:
position:relative;
bottom:0px;

bym wstawił:
Kod:
clear: both;
Zapisane
Śledź gimptools.pl na  lub Identi.ca
ZETT93
Użytkownik

Reputacja: 11 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: zett@gimpuj.info
Licencja: Copyright
Wiadomości: 385
Galeria Użytkownika


Zaraz Cię wyciosam!


Zobacz profil
« Odpowiedz #3 : 07.12.2008, 14:12:35 »
Niestety bez zmian Smutny 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;
}
Zapisane
I'M BACK !
mmiicc
√ ι ק

Reputacja: 14 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-BY-SA
Wiadomości: 1 423
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #4 : 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
Zapisane
Śledź gimptools.pl na  lub Identi.ca
ZETT93
Użytkownik

Reputacja: 11 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: zett@gimpuj.info
Licencja: Copyright
Wiadomości: 385
Galeria Użytkownika


Zaraz Cię wyciosam!


Zobacz profil
« Odpowiedz #5 : 07.12.2008, 17:15:02 »
No teraz pomogło Uśmiech Dzięki za pomoc, zaraz sobie zobaczę ten dodatek:)

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

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

Pozdrawiam, już dodaję tag [ROZ] do tematu, może komuś się przyda Uśmiech
Zapisane
I'M BACK !
Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aHyde zoneArchiwum[Archiwum] Pomocna dłoń - GIMPWątek: [ROZ] Stopka, problem
Skocz do: