Template με χώρο για διαφημίσεις στα αριστερά και στα δεξιά how to ;

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
asteriosg
Δημοσιεύσεις: 75
Εγγραφή: 03 Οκτ 2012 16:24

Template με χώρο για διαφημίσεις στα αριστερά και στα δεξιά how to ;

Δημοσίευση από asteriosg » 06 Μαρ 2013 15:53

Τελευταία παρατηρώ ότι αρκετά websites υιοθετούν σχεδιαστικά template του τύπου αυτού : http://www.protothema.gr όπως της εφημερίδα Πρώτο Θέμα, όπου στο δεξιό και αριστερό μέρος της σελίδας υπάρχει χώρος για διαφημίσεις-διαφημιστικά banners ας τα πούμε.

Παρατηρώ επίσης ότι καθώς μειώνω το παράθυρο του browser μου συρρικνώνοντας το προς τα αριστερά το αριστερό banner χάνεται και τέλος-αρχή της σελίδα είναι το κεντρικό div που περιέχει τη σελίδα.

Δεν ξέρω να το περιγράψω καλά, αλλά μπορείτε να το δείτε εδώ http://www.protothema.gr .

Πως μπορούμε να φτιάξουμε ένα τέτοιο template με τα χώρο για διαφημίσεις αριστερά και δεξιά ;
Μπορεί κάποιος να δώσει ένα παράδειγμα ή κάποιο link που να μιλά για αυτού του τύπου το template ;

Πχ

Στο παράδειγμα παρακάτω, αν συρρικνώσουμε τέρμα αριστερά το παράθυρο του browser μας, το Left side content δεν χάνεται ! Ενώ στο protothema.gr χάνεται !

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

<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<title>CSS Template</title>
</head>

<body id="backdrop">
<div id="container">
  <div id="header">
    <center>Header</center>
  </div>
  <div id="leftBar">
    <center>Left Side</center>
  </div>
  <div id="maincontent">
    <center>Main Content</center>
  </div>
  <div id="rightBar">
    <center>Right Side</center>
  </div>
  <div id="footer">
    <center>Footer</center>
  </div>
</div>
</body>
</html> 

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

#backdrop &#123;
    background-color&#58;#333;
&#125;
 
#container &#123;
  margin&#58;auto;
  width&#58; 100%;
  background&#58; #ffffff;
&#125;
 
#header &#123;
  background&#58; #90F;
&#125;
 
#leftBar &#123;
  float&#58; left;
  width&#58; 20%;
  background&#58; #999;
&#125;
 
#maincontent &#123;
  float&#58;left;
  width&#58;60%;
  background-color&#58; #FF9;
&#125;
 
#rightBar &#123;
  float&#58;right;
  width&#58; 20%;
  background&#58; #999;
&#125;
 
#footer &#123;
  clear&#58;both;
  background&#58;#90F;
&#125;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Template με χώρο για διαφημίσεις στα αριστερά και στα δεξιά how to ;

Δημοσίευση από korgr » 06 Μαρ 2013 16:29

Πάρε κόσμε :)
Γιατί έχω και εγώ την δική μου οπτική περί open source :)
http://odyssey.webpage.gr/gr/pages/jque ... nd-banners

asteriosg
Δημοσιεύσεις: 75
Εγγραφή: 03 Οκτ 2012 16:24

Template με χώρο για διαφημίσεις στα αριστερά και στα δεξιά how to ;

Δημοσίευση από asteriosg » 06 Μαρ 2013 16:37

Ευχαριστώ ενδιαφέρον αλλά αν δεν κάνω λάθος στο protothema.gr δεν είναι με javascript εκεί σωστά ;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Template με χώρο για διαφημίσεις στα αριστερά και στα δεξιά how to ;

Δημοσίευση από alou » 06 Μαρ 2013 17:05

Υπάρχουν πολλοί τρόποι να καταλήξεις σε ένα αποτέλεσμα. Ο Kor στου πρότεινε κάτι που έφτιαξε ο ίδιος (nice :D ) με js αλλά το πιο σύνηθες και μάλλον πιο σωστό - για να καλύψεις και περισσότερες αντίστοιχες ανάγκες - θα ήταν να προσαρμόζεις το template σου με media queries, ώστε να υπάρχουν (ή να κρύβονται) container με τις κατάλληλες διαστάσεις και συμπεριφορές για κάθε ανάλυση.

Κάποια από αυτά τα container θα ήταν και της διαφήμισης που λες.

Πχ, σε ένα template που έχει σταθερό πλάτος 960px δεν έχει νόημα να του προσθέσεις πλαϊνά banner όταν η οθόνη είναι 1024, ενώ μπορείς να βάλεις διαφορετικές διαστάσεις banner σε οθόνες 1200+ και 1600+ pixel.

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

#container &#123;width&#58;960px;&#125;
.....

@media only screen 
and &#40;min-width &#58; 1024px&#41; &#123;
#left-banner, #right-banner &#123;display&#58;none;&#125;
&#125;

@media only screen 
and &#40;min-width &#58; 1224px&#41; &#123;
#left-banner &#123;width&#58;100px;position&#58;fixed;top&#58;0px;left&#58;0px;&#125;
#right-banner &#123;width&#58;100px;position&#58;fixed;top&#58;0px;right&#58;0px;&#125;
#left-banner img, #right-banner img &#123;width&#58;100px;height&#58;auto;&#125;
&#125;


@media only screen 
and &#40;min-width &#58; 1624px&#41; &#123;
#left-banner &#123;width&#58;100px;position&#58;fixed;top&#58;0px;left&#58;0px;&#125;
#right-banner &#123;width&#58;100px;position&#58;fixed;top&#58;0px;right&#58;0px;&#125;
#left-banner img, #right-banner img &#123;width&#58;200px;height&#58;auto;&#125;
&#125;


Έτσι βέβαια φορτώνεις τις εικόνες χωρίς να είναι σίγουρο ότι θα χρησιμοποιηθούν, υπάρχουν όμως και άλλοι καλύτεροι τρόποι για να αποφύγεις τέτοια θέματα.

asteriosg
Δημοσιεύσεις: 75
Εγγραφή: 03 Οκτ 2012 16:24

Template με χώρο για διαφημίσεις στα αριστερά και στα δεξιά how to ;

Δημοσίευση από asteriosg » 06 Μαρ 2013 19:51

Ενδιαφέρον alou δεν είχα ασχοληθεί με media queries σε css ποτέ ακόμα δεν έτυχε.

Κάτι τέτοιο έχει βάση τι λέτε ;
Σκέφτηκα αυτό :

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

<div id="wrapper">
    
    <div>keimeneoeoeeoeoeod eoedkejedioe jdioejdoeidjeoidjeiodjeo idjeo </div>
    
    <div id="bannerwrapper">
        <div class="banner">
            Banner Background
        </div>
    </div>
        
      <div>
   keiemeneoeeoeooeoeoeeodedkdmdo edeod e deid edo ekd oede pdjeidjeidedieid eid ehd iehdeh eidjeijdeidedied iede
        </div>
</div>

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

#wrapper &#123;
    width&#58; 140px; 
    display&#58; block; 
    margin&#58; auto;
    background&#58; #ccc;        
&#125;

#bannerwrapper &#123;
    background&#58; #aaa;
    display&#58; block;
    height&#58; 100px;
&#125;

#bannerwrapper .banner &#123;
    border&#58; 1px solid #f00;
    position&#58; absolute;
    background&#58; #555;
    left&#58; 0;
    right&#58; 0;
    height&#58; 100px;   
&#125;
Απλά πως θα μπορούσαμε το bannerwrapper να εμφανίζεται κάτω απο το wrapper ίσως με τίποτα z-indexes ;

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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