Διπλό background. Γίνεται;

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

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

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από manolism » 09 Δεκ 2008 16:33

Εγώ πάλι γιατί νομίζω ότι έπρεπε να είναι έτσι:
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
<div id="bgt">
<div id="main">
<div class="header">
<div class="anim">
</div>
<div class="title">
<?php echo $mosConfig_sitename; ?></div>
<div style="clear:both"></div>
</div>

<div class="navbar">
<div class="nav">
<jdoc:include type="modules" name="user3" style="table" />
</div>
</div>

<div class="mainColumn">
<div id="leftColumn" class="column">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>
<div class="contentColumn">
<div id="rightColumn" class="column">

<jdoc:include type="modules" name="top" style="rounded" />


<jdoc:include type="modules" name="right" style="rounded" />
</div>
<div id="inner_contentColumn" class="mc">
<div><div><div><div>
<?php if($this->countModules('user1 or user2')) : ?>
<table class="nopad user1user2">
<tr class="latest" valign="top">
<?php if($this->countModules('user1')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>

</td>
<?php endif; ?>
<?php if($this->countModules('user1 and user2')) : ?>
<td class="greyline">&nbsp;</td>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
</td>
<?php endif; ?>
</tr>
</table>

<div id="maindivider"></div>
<?php endif; ?>

<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />

</td>
</tr>
</table>
</div></div></div></div>

</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer">
<div style="color:#698F48;"><center><jdoc:include type="modules" name="footer" style="xhtml"/></center></div>
</div>
</div>
</body>
</html>
Επίσης φτιάξε το

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

#bgt 
&#123; 

height&#58;100%; 
width&#58;760px; 
top&#58;0; 
background&#58; url&#40;../images/footer.jpg&#41; repeat-x; 
position&#58;fixed; 
background-position&#58;center; 
&#125;
σε

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

#bgt 
&#123; 

height&#58;100%; 
width&#58;760px; 
top&#58;0; 
background&#58; url&#40;../images/footer.jpg&#41; repeat-x position&#58;fixed; 
background-position&#58;center; 
&#125;
Και δοκίμασε και βάλε στο #bgt το

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

margin&#58; 0 auto;

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 09 Δεκ 2008 16:39

Με αυτό που είπες, δεν εμφανίζεται και πάει ολόκληρο αριστερά!

Βάζοντας και το margin: 0 auto; απλά ξαναεπιστρέφει στο κέντρο χωρίς να το εμφανίζει!

[δοκίμασα να βάλω το </div> στο τέλος, πριν το </body> μου φαίνεται λογικό]

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από manolism » 09 Δεκ 2008 16:52

Βλέπω κάτι div που ανοίγουν και κλείνουν χωρίς id ή class.

Τι ρόλο βαράνε αυτά.

Γενικά γινεται λίγο της τρελής αλλά αν δεν το έχω μπροστά μου και να το ταλαιπωρήσω δεν ξέρω τι να υποθέσω.

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 09 Δεκ 2008 16:57

Eίναι joomla template, δεν το έχω πειράξει το index.php , εκτός από το <div> που συζητήσαμε παραπάνω.

Έχω απελπιστεί, τι να πω... :(

Άβαταρ μέλους
PixelDog
Δημοσιεύσεις: 435
Εγγραφή: 16 Σεπ 2008 17:19

Διπλό background. Γίνεται;

Δημοσίευση από PixelDog » 09 Δεκ 2008 17:28

το ξανα περνω απο την αρχη γιατι μαλλον σε μπερδεψα

σε περιπτωση που θες το περιεχομενο να ειναι μεσα στο δευτερο background κανεις αυτο

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

body &#123; 
   margin&#58; 0; 
   padding&#58; 0; 
   background&#58; #e5e5e5 url&#40;background01.jpg&#41; repeat; 
    
&#125; 

#container &#123; 
margin&#58; 0 auto; 
padding&#58; 0px;
width&#58;760px; 
background&#58; #e5e5e5 url&#40;background02.jpg&#41; repeat-x; 
&#125;
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body>
<div id="container">
<div id="main">
<div class="header">
<div class="anim">
</div>
<div class="title">
<?php echo $mosConfig_sitename; ?></div>
<div style="clear:both"></div>
</div>

<div class="navbar">
<div class="nav">
<jdoc:include type="modules" name="user3" style="table" />
</div>
</div>

<div class="mainColumn">
<div id="leftColumn" class="column">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>
<div class="contentColumn">
<div id="rightColumn" class="column">

<jdoc:include type="modules" name="top" style="rounded" />


<jdoc:include type="modules" name="right" style="rounded" />
</div>
<div id="inner_contentColumn" class="mc">
<div><div><div><div>
<?php if($this->countModules('user1 or user2')) : ?>
<table class="nopad user1user2">
<tr class="latest" valign="top">
<?php if($this->countModules('user1')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>

</td>
<?php endif; ?>
<?php if($this->countModules('user1 and user2')) : ?>
<td class="greyline">&nbsp;</td>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
</td>
<?php endif; ?>
</tr>
</table>

<div id="maindivider"></div>
<?php endif; ?>

<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />

</td>
</tr>
</table>
</div></div></div></div>

</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer">
<div style="color:#698F48;"><center><jdoc:include type="modules" name="footer" style="xhtml"/></center></div>
</div>
</div>
</body>
</html>




αλλιως



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

body &#123; 
   margin&#58; 0; 
   padding&#58; 0; 
   background&#58; #e5e5e5 url&#40;background01.jpg&#41; repeat; 
   position&#58; relative; 
&#125; 

#bgt &#123;        

   height&#58; 100%; 
   width&#58; 50%; 
   left&#58;25%; 
   top&#58;0; 
   background&#58; url&#40;background.jpg&#41; repeat-x; 
   position&#58;fixed; 
   background-position&#58;center; 
   z-index&#58;-10; 


στο bgt τις διαστασεις καλυτερα δωστες σε % το height το αφηνεις οπως ειναι το width κοιτα
να συμβαδίζει με το left π.χ αν θες width 60% αφαιρεις απο το 100% τα 60 και υστερα διαιρεις με το 2 (100-60=40/2=20) αρα το left το βαζεις 20% για να ειναι στην μεση

και μετα αυτο

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

<body><div id="bgt"></div>
<div id="main">
<div class="header">
<div class="anim">
</div>
<div class="title">
<?php echo $mosConfig_sitename; ?></div>
<div style="clear:both"></div>
</div>

<div class="navbar">
<div class="nav">
<jdoc:include type="modules" name="user3" style="table" />
</div>
</div>

<div class="mainColumn">
<div id="leftColumn" class="column">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif; ?>
</div>
<div class="contentColumn">
<div id="rightColumn" class="column">

<jdoc:include type="modules" name="top" style="rounded" />


<jdoc:include type="modules" name="right" style="rounded" />
</div>
<div id="inner_contentColumn" class="mc">
<div><div><div><div>
<?php if($this->countModules('user1 or user2')) : ?>
<table class="nopad user1user2">
<tr class="latest" valign="top">
<?php if($this->countModules('user1')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>

</td>
<?php endif; ?>
<?php if($this->countModules('user1 and user2')) : ?>
<td class="greyline">&nbsp;</td>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<td>
<div class="latest">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
</td>
<?php endif; ?>
</tr>
</table>

<div id="maindivider"></div>
<?php endif; ?>

<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />

</td>
</tr>
</table>
</div></div></div></div>

</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div id="footer">
<div style="color:#698F48;"><center><jdoc:include type="modules" name="footer" style="xhtml"/></center></div>
</div>
</body>
</html>
μην ξεχασεις να βαλεις z-index:1; στο #main για να ειναι το περιεχομενο πανω απο το δευτερο background
I Hate My Notepad

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 09 Δεκ 2008 19:36

Ευχαριστώ για το ενδιαφέρον!

Θα τα δοκιμάσω πάλι όταν πάω σπίτι [είμαι στο γραφείο] κι ελπίζω να τα καταφέρω! :D

Άβαταρ μέλους
EneMe
Super Moderator
Δημοσιεύσεις: 13307
Εγγραφή: 09 Ιούλ 2002 13:29
Τοποθεσία: Στο κέντρο της Ελλάδας!
Επικοινωνία:

Διπλό background. Γίνεται;

Δημοσίευση από EneMe » 09 Δεκ 2008 23:44

Mε περισσότερη προσοχή και λίγο άγγιγμα από τον lunarmedia, βγήκε άκρη!

Σας ευχαριστώ πολύ! :D

Απάντηση

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

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

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