Skocz do zawartości


Zdjęcie

Footer nie idzie na dno


  • Zaloguj się, aby dodać odpowiedź
2 odpowiedzi w tym temacie

#1 frosti7511

frosti7511

    Obserwator

  • 5 postów

Napisano 26 04 2013 - 16:01

Mam problem ze strona internetową. Dodałem Footer który zatrzymuje sie na końcu widocznej strony a nie na samym jej kończu. Wszystko jest ok do czasu kiedy nie pojawie sie sidebar. Proszę o jak najszybszą pomoc.chrome 2013-04-26 14-54-29-82.jpg

Kod html do strony:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mass Effect</title>
<style> @import url(css/sum.css); </style>
<SCRIPT language="Javascript">
<
if (navigator.appName == "Netscape") {
document.write('<EMBED SRC="- Leaving Earth.mp3" AUTOSTART=TRUE LOOP=FALSE WIDTH=145 HEIGHT=55></EMBED>') }
else if (navigator.appName == "Sylaba") {
document.write('<EMBED SRC="- Leaving Earth.mp3" AUTOSTART=TRUE LOOP=FALSE WIDTH=145 HEIGHT=55></EMBED>') }
else { if (navigator.appName == "Microsoft Internet Explorer")
document.write('<BGSOUND SRC="- Leaving Earth.mp3" LOOP="2" volume="50">')
}
>
</SCRIPT>
</head>


<body background="images/3.jpg" id="active4" bgcolor="#333333">


<div id="wrapper">

<div id="header">Bartek Antczak / B00062307 / Web Dev 2 Project</div>

</div>
<Center><table border="5px">
<tr align="5px">
<td width="100px" height="35">
<center><a href="index.html"><button type="button">Home</button><a/></center>
</td>
<td width="130px" height="35">
<center><a href="summary.html"><button type="button">Summary</button><a/></center>
</td>
<td width="140px" height="35">
<center><a href="movie.html"><button type="button">Movies</button><a/></center>
</td>



<td width="125px" height="35">
<center><a href="opinion.html"><button type="button">Opinion</button><a/></center>
</td>

<td width="160px" height="35">
<center><a href="merchandise.html"><button type="button">Merchandise</button><a/></center>
</td>

<td width="140px" height="35">
<center><a href="reg.html"><button type="button">Rejestration</button><a/></center>
</td>

<td width="130px" height="35">
<center><a href="sitemap.html"><button type="button">Site&nbspMAP</button><a/></center>
</td>

</tr>
</table></center>
<br>




<div id="column-left1"><iframe width="400" height="360" src="http://www.youtube.com/embed/-_6ZMr2bMco?feature=player_detailpage" frameborder="1" allowfullscreen></iframe></div>


<div id="column-right1"><iframe width="400" height="360" src="http://www.youtube.com/embed/lBRo7JWy744?feature=player_detailpage" frameborder="1" allowfullscreen></iframe></div>
<div id="column-left2"><iframe width="400" height="360" src="http://www.youtube.com/embed/IJvrN6JijuU?feature=player_detailpage" frameborder="1" allowfullscreen></iframe></div>
<div id="column-right2"><iframe width="400" height="360" src="http://www.youtube.com/embed/nyy5fAFw6UM?feature=player_detailpage" frameborder="1" allowfullscreen></iframe></div>
<br>

</div>

<div id="footer">Bartek Antczak / B00062307 / Web Dev 2 Project</div>
</body>
</html>


Css do strony :
body {
height:200%;
background-position: 43% 30%;
background-repeat: no-repeat;
topmargin="50";
leftmargin="50";
}



* {
margin: 0%;
padding: 0%;
}

#wrapper {
width:90 % ;
background: rgba(95, 95, 95, 0.5)
margin: 0 auto;
}

#header {
background: rgba(95, 95, 95, 0.3);

color: white;
position: relative;
}

#column-left {
background: rgba(0, 32, 255, 0.2);
color: yellow;
width: 30%;
float: left;
position: relative;

}

#column-center {
background: rgba(255, 255, 255, 0.4);
clolr:black;
width: 40%;
float: left;
filter: alpha(opacity=50);
position: relative;
}

#column-right {
background:rgba(255, 0, 0, 0.2);
color: yellow;
width: 30%;
float: left;
filter: alpha(opacity=50);
position: relative;
}

#footer {
position:absolute;
bottom:0;
width:100%;
background: rgba(255, 255, 255, 0.7);
color:#000000;
text-align: right;
filter: alpha(opacity=50);


}

button
{

display: block;
padding: 5px 5px 5px 0.5em;
border-left: 6px solid #1958b7;
border-right: 6px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration:none;
width: 100%;
cell_over:BACKGROUND-COLOR: #ffffff;
cell_out:BACKGROUND-COLOR: #000000;
font-size:20px;
opacity:0.7;
left:40%;
}



button:hover
{
display: block;
padding: 8px 8px 8px 0.5em;
border-left: 10px solid #508fc4;
border-right: 10px solid #1958b7;
background-color: #2175bc;
color: #fff;
text-decoration:none;
width: 100%;
cell_over:BACKGROUND-COLOR: #000000;
cell_out:BACKGROUND-COLOR: #ffffff;
font-size:20px;
left:40%;
}

a
{
text-decoration: none;
}

aside
{

position: absolute;
top:77%;
right:0%;

}

#column-right1 {
background: rgba(175, 175, 175, 0.2);
color: white;
width: 50%;
float: left;
filter: alpha(opacity=50);
position: relative;
text-align:center;
}

#column-left1 {
background: rgba(175, 175, 175, 0.2);
color: white;
width: 50%;
float: left;
position: relative;
text-align:center;
}

#column-right2 {

color: white;
width: 50%;
float: left;
filter: alpha(opacity=50);
position: relative;
text-align:center;

}

#column-left2 {

color: white;
width: 50%;
float: left;
position: relative;
text-align:center;
}

#bigsum
{
float-left: 25%;
color: white;
font-sieze: 21px;
}

#column-center111 {
background: rgba(255, 255, 255, 0.4);
clolr:black;
width: 25%;
float: left;
filter: alpha(opacity=50);
position: relative;
}

#column-center11 {
background: rgba(255, 255, 255, 0.4);
clolr:black;
width: 25%;
float: left;
filter: alpha(opacity=50);
position: relative;
}

#column-right11 {
background:rgba(255, 0, 0, 0.2);
color: yellow;
width: 25%;
float: left;
filter: alpha(opacity=50);
position: relative;
}

#column-left11 {
background: rgba(0, 32, 255, 0.2);
color: yellow;
width: 25%;
float: left;
position: relative;

}

#mp3
{
float: right;
bottom:0;
}

#mp31
{
width:7%;
height:2%;
float: left;
bottom:0;
}

#footer1 {
position:absolute;
height:5%;
bottom:0;
width:100%;
background: rgba(255, 255, 255, 0.7);
color:#000000;
text-align: right;
filter: alpha(opacity=50);

}

a
{
color:yellow;
}

#column-right1111 {
background: rgba(175, 175, 175, 0.2);
color: white;
width: 50%;
float: left;
filter: alpha(opacity=50);
position: relative;
text-align:center;
}

#column-left1111 {
background: rgba(175, 175, 175, 0.2);
color: white;
width: 50%;
float: left;
position: relative;
text-align:center;
}

iframe
{
opacity:0.7;
}

  • 0

#2 bipiw

bipiw

    Zaawansowany użytkownik

  • 1 180 postów

Napisano 26 04 2013 - 16:16

http://kurs.browsehappy.pl/CSS/Float
Pewnie musisz dodać do stylu stopki clear:both;

  • 1

#3 frosti7511

frosti7511

    Obserwator

  • 5 postów

Napisano 26 04 2013 - 17:52

Float i�clear - Kurs BrowseHappy
Pewnie musisz dodać do stylu stopki clear:both;

dzięki wielkie pomogło ale jeszcze zmienilem z position:absolute; na position:relative;
szukałem 2 dni jak to zrobić i sie denerwowałem . Dzięki wielkie za tak szybką pomoc :)

  • 0

Zobacz więcej tematów z tagiem: footer CSS



Użytkownicy przeglądający ten temat: 1

0 użytkowników, 1 gości, 0 anonimowych