Βοήθεια για footer width 100%

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Βοήθεια για footer width 100%

Δημοσίευση από neogeo21 » 17 Μαρ 2012 01:59

Θέλω να κάνω το εξής, το footer που έχω φτιάξει σε αυτη την σελίδα να ανοιγει από άκρη σε άκρη στο browser. Eτσι όπως το έχω τώρα παραμένει στο κεντρο τις σελίδας και δεν ανοιγει στις δυο άκρες όπως θα ήθελα.

CSS code

Κώδικας: Επιλογή όλων

body {
margin: 0;
background-image:url(background.jpg);
background-repeat:repeat-x;
}
#container {
margin: 0 auto;
padding: 0px;
width: 980px;
height:820px;
background-image:url(main_back.gif);
}
#header {
background-image:url(main_banner.jpg);
width: 100%;
height: 240px;
margin: 0;
padding: 0;
}
#main_content {
background:none;
width:940px;
height:800px;
padding-top:20px;
padding-bottom:0px;
padding-left:20px;
padding-right:20px;
}
#content1 {
float:left;
background-image:url(main_random.gif);
width: 938px;
height: 500px;
padding-top:40px;
padding-bottom:10px;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}
.content1_inside{
padding-top:10px;
padding-left:7px;
padding-right:2px;
margin:auto;
float:left;
}
.content1_inside p{
	padding-left:5px;
	margin-top:0px;
	text-align:left;
	color: #2F2F2F;
	font-size: 11px;
}
#content2 {
float:left;
background-image:url(main_content2.png);
width: 915px;
height: 133px;
margin-top:20px;
padding-top:10px;
padding-bottom:40px;
padding-left:10px;
padding-right:10px;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
text-align:center;
}
.content2_inside{
padding-top:30px;
padding-left:11px;
padding-right:11px;
margin:auto;
float:left;
}
.content2_inside p{
	padding-left:5px;
	margin-top:0px;
	text-align:left;
	color: #2F2F2F;
	font-size: 11px;
}
.content1_inside .fistimage{
	padding-left:9px;
}
#footer {
float:left;
background-image:url(footer.jpg);
width: 980px;
height: 24px;
padding-top:10px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}
#menu {
        margin: 0;
        padding: 0;
        list-style-type: none;
}
#menu li {
  display: inline;
  padding-right: 15px;
  padding-left: 17px;
}
#menu a:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
text-decoration: none;
} 
#menu a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:# FFFFCC;
text-decoration: none;
} 
#menu a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:# 99CCFF;
text-decoration: none;
}
img {
margin-bottom:5px;
}
.image {
margin-left:5px;
margin-right:5px;
}
.emphasis {
font-weight:bold;
color:#838181;
}
#container #main_content #funny p {
	color: #666;
}
#container #main_content #content2 .content2_inside p {
	font-size: 11px;
}
HTML

Κώδικας: Επιλογή όλων

<div id="footer">
Copyright &copy; Playkid.gr 2011. All Rights Reserved.

</div>

Άβαταρ μέλους
alexisitsios
Δημοσιεύσεις: 447
Εγγραφή: 02 Ιαν 2012 21:37

Βοήθεια για footer width 100%

Δημοσίευση από alexisitsios » 17 Μαρ 2012 09:20

Απ' ότι βλέπω έχεις ορίσει το width από το container και το footer στα 980px. Ουσιαστικά πρέπει να φτιάξεις ένα wrapper έξω από το footer, το οποιο θα είναι 100% και μέσα να είναι το footer. Αν θέλεις στείλε μου σε pm τα αρχεία της html + css για να στο διορθώσω. Καλό θα ήταν βέβαια να χρησιμοποιείς κάποιο css framework όπως το blueprint ή το 960.gs. Θα γλιτώσεις πολύ χρόνο.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης