CSS background

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

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

Απάντηση
giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

CSS background

Δημοσίευση από giorgos-1000 » 06 Ιαν 2012 22:27

Έχω το εξής πρόβλημα:
Όταν το περιεχόμενο της σελίδας είναι πιο μεγάλο από την εικόνα main_back.gif
δεν συνεχίζεται η εικόνα ακόμα και με το background-repeat: repeat;

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

#backm {
background-image:url(main_back.gif);
margin: 0 auto;
padding: 0px;
width: 781px;
height:800px;
}

Άβαταρ μέλους
nackgr
Δημοσιεύσεις: 1444
Εγγραφή: 22 Ιαν 2006 20:02
Τοποθεσία: Αθηνα
Επικοινωνία:

CSS background

Δημοσίευση από nackgr » 07 Ιαν 2012 09:47

αυταααααααααααα...
e-Byte.gr
Dafuq.gr

giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

CSS background

Δημοσίευση από giorgos-1000 » 07 Ιαν 2012 11:20

nackgr το είχα δοκιμάσει αλλά πάλι είχα πρόβλημα

να και μια φωτογραφία:
http://img190.imageshack.us/img190/2593 ... shotrc.png

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

CSS background

Δημοσίευση από apsuh0s » 07 Ιαν 2012 13:10

Αυτό που δείχνεις πάντως στο screenshot γίνεται χωρίς τη χρήση εικόνων αλλά μόνο με CSS.

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

<style>
body   &#123;background&#58;#a5e766;&#125;
.main  &#123;width&#58;900px;margin&#58;0 auto;background&#58;#94e24a;border-bottom&#58;25px solid #4e4f3d;padding&#58;20px;&#125;
</style>

<div class="main">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text....</p>
<p>Contrary to popular belief, Lorem...</p>
</div><!-- .main -->
</body>
Δοκίμασε το στο project σου και δες αν σου κάνει μια τέτοια προσέγγιση
.ninja { color: black; visibility: hidden !important; }

giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

CSS background

Δημοσίευση από giorgos-1000 » 07 Ιαν 2012 14:54

apsuh0s
ευχαριστώ πολύ για την βοήθεια σου!!! :D



το footer κολλάει πάνω , ενώ εγώ θέλω να είναι στα 800px
http://img207.imageshack.us/img207/5359 ... hot1vc.png

μόνο όταν το περιεχόμενο είναι μεγαλύτερο από 800 px να μεγαλώνει όπως εδώ
http://img827.imageshack.us/img827/8185 ... hot3ea.png

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

CSS background

Δημοσίευση από apsuh0s » 07 Ιαν 2012 16:27

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

<style>
body&#123;background&#58;#a5e766;margin&#58;0;&#125;
.container&#123;width&#58;940px;margin&#58;0 auto;&#125;
.main&#123;background&#58;#94e24a;padding&#58;20px;min-height&#58;760px; /* 760px + 2*20px&#40;padding&#41;=800px */&#125; 
ul&#123;list-style&#58;none;background&#58; #630;overflow&#58;hidden;padding&#58;10px;margin&#58;0;&#125;
li&#123;float&#58;left;margin-right&#58;60px;&#125;
li&#58;last-child&#123;margin-right&#58;0;&#125;
li a&#123;color&#58;white;text-decoration&#58;none;&#125;

</style>

<body>
<div class="container">
<div class="main">
	<p>It is a long established fact</p>
    <p>It is a long established fact that </p>
</div><!-- .main -->
<footer>
	<ul>
    	<li><a href="#">list item 1</a></li>
    	<li><a href="#">list item 2</a></li>
    	<li><a href="#">list item 3</a></li>
    	<li><a href="#">list item 4</a></li>
    	<li><a href="#">list item 5</a></li>
    	<li><a href="#">list item 6</a></li>
	</ul>
</footer>
</div><!-- .container -->
</body>
Δοκίμασε το και πες μου
.ninja { color: black; visibility: hidden !important; }

giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

CSS background

Δημοσίευση από giorgos-1000 » 07 Ιαν 2012 16:44


Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

CSS background

Δημοσίευση από apsuh0s » 07 Ιαν 2012 17:52

Σε προηγούμενο μήνυμα σου έγραψες πως θέλεις το footer στα 800px και εφόσον το περιεχόμενο ξεπερνάει τα 800px τότε να κατεβαίνει το footer. Κατάλαβα καλα;

Εφόσον δεν επηρεάζεις το document flow με κάποιο τρόπο δεν μπορεί το footer να είναι κολλημένο πάνω. Ότι βάζεις πρώτο στο markup, θα εμφανίζεται και πρώτο και θα σπρώχνει τα υπόλοιπα προς τα κάτω.

Για κάποιο λόγο θέλεις το footer στα 800px. Θα μπορούσες πολύ απλά επομένως να ορίσεις το ύψος του container του περιεχομένου σου στα 800px.

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

.main-content&#123;height&#58;800px;&#125;
Εφόσον όμως θέλεις το περιεχόμενο να σπρώχνει το footer προς τα κάτω εφόσον το πρώτο ξεπερνάει τα 800px τότε πρέπει να ορίσεις σε αυτό ελάχιστο ύψος.

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

.main-content&#123;min-height&#58;800px;&#125;
Στο markup φροντίζεις να βάλεις πρώτα το περιεχόμενο και στη συνέχεια το footer.

Δεν περιγράφω κάτι άλλο από αυτό που σου παρέθεσα στο προηγούμενο μήνυμα μου. Δεν μπορώ να γνωρίζω για ποιο λόγο το footer σου παραμένει κολλημένο πάνω αν δε δω τον κώδικά σου. Δώσε όλο το κώδικα που έχεις γράψει μέχρι τώρα για τη συγκεκριμένη σελίδα.

Αν θέλεις μην βάζεις screenshots από το αποτέλεσμα που έχεις φτάσει αλλά βάλε αυτό που θέλεις να πετύχεις. Ζωγράφισε το με το paint και ονομάτισε το κάθε section.
.ninja { color: black; visibility: hidden !important; }

giorgos-1000
Δημοσιεύσεις: 30
Εγγραφή: 06 Ιαν 2012 22:11
Τοποθεσία: Θεσσαλονίκη

CSS background

Δημοσίευση από giorgos-1000 » 07 Ιαν 2012 18:39

Ο κώδικας του home.html

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Αρχική Σελίδα</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<div id="container">

<div id="header">
</div>

<div id="navigation">
<ul id="menu"> 
<li><a href="home.html"  title="Αρχική">Αρχική</a></li> 
<li><a href="sections.html"  title="Τομείς-Ειδικότητες">Τομείς-Ειδικότητες</a></li> 
<li><a href="mathimata.html"  title="Μαθήματα">Μαθήματα</a></li> 
<li><a href="fwto.html"title="Φωτογραφίες">Φωτογραφίες</a></li> 
<li><a href="projects.html"  title="Προγράμματα">Προγράμματα</a></li>
<li><a href="programa.html"  title="Ωρολόγιο Πρόγραμμα">Ωρ. Πρόγραμμα</a></li> 
<li><a href="registrations.html"  title="Εγγραφές">Εγγραφές</a></li>    
<li><a href="communication.html"  title="Επικοινωνία">Επικοινωνία</a></li>      
</ul>
</div>

<div id="main_content"></div>

</div>

</body>

</html>
Ο κώδικας του style.css

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

body &#123;
margin&#58; 0;
background-color&#58; #A4E666;
&#125;

#main_content &#123;
width&#58;900px;
margin&#58;0 auto;
background&#58;#94e24a;
border-bottom&#58;25px solid #4e4f3d;
padding-bottom&#58;1;
&#125; 

#container &#123;
background-image&#58;url&#40;main_back.gif&#41;;
background-repeat&#58;repeat;
margin&#58; 0 auto;
padding&#58; 0px;
width&#58; 900px;
height&#58;800px;
&#125;

#header &#123;
width&#58; 900px; 
height&#58; 117px;
margin&#58; 0;
padding&#58; 0;
background-image&#58;url&#40;main_banner.jpg&#41;;
&#125;

#navigation &#123;
background-image&#58;url&#40;navbar.jpg&#41;;
width&#58; 900px; 
height&#58; 31px;
padding-top&#58;9px;
&#125;

#menu &#123;
        margin&#58; 0;
        padding&#58; 0;
        list-style-type&#58; none;
&#125;

#menu li &#123;
  display&#58; inline;  padding-right&#58; 13px;
  padding-left&#58; 15px;
&#125;

#menu a&#58;link&#123;
font-family&#58; Verdana;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;#ffffff;
text-decoration&#58; none; 
&#125;

#menu a&#58;hover &#123;
font-family&#58; Verdana;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;#A4E666;
text-decoration&#58;underline; 
&#125;

#menu a&#58;visited &#123;
font-family&#58; Verdana;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;#FFFFCC;
text-decoration&#58; none; 
&#125; 

#menu a&#58;active &#123;
font-family&#58; Verdana;
font-size&#58;11px;
font-weight&#58;bold;
color&#58;#99CCFF;
text-decoration&#58; none; 
&#125; 

Απάντηση

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

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

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