Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

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

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

Απάντηση
laspoor
Δημοσιεύσεις: 6
Εγγραφή: 25 Ιαν 2014 04:07

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από laspoor » 25 Ιαν 2014 04:55

Θα ήθελα να μάθω πως γίνεται να φτιάξω κάτι σαν αυτό http://www.alphatv.gr/webtv/live !?
Δείτε το link θέλω να δημιουργήσω αυτά τα δυό πλαινά διαφημιστικά μπανεράκια δεξιά και αριστερά. Διάβασα και το θέμα σας http://www.freestuff.gr/forums/viewtopic.php?t=64964 και κατέληξα στο να φτιάξω το παρακάτω όμως το αποτέλεσμα δεν είναι ακιρβώς αυτό που θα ήθελα.. αντί το μπανεράκι να είναι κολλημένο στην αριστερή μεριά του wrapper όπως στη σελίδα του alphatv.gr το μπανεράκι μου εμφανίζεται κολλημένο στην αριστερή πλευρά της οθόνης !

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

#wrapper {
margin : 0 auto 0 auto;
width : 800px;
height : 800px;
background-color:green ;
}


@media screen and (min-width : 1024px) {
#mybanner {background-color:red;width:100px;height:150px;position:fixed;top:0px;left:0px;}
#mybanner img{width:100px;height:auto;}
}


@media screen and (min-width : 1224px) {
#mybanner {background-color:blue;width:100px;height:150px;position:fixed;top:0px;left:0px;}
#mybanner img {width:200px;height:auto;}
}

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

<html>
<body>
<div id="mybanner"></div>
<div id="wrapper "></div>
</body>
</html> 
Πως θα πετύχω αυτό που μπορεί να δεί κανείς με τα μπανεράκια στο http://www.alphatv.gr/webtv/live ;

Άβαταρ μέλους
neundex
Δημοσιεύσεις: 40
Εγγραφή: 19 Σεπ 2013 09:49
Επικοινωνία:

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από neundex » 25 Ιαν 2014 11:40

εσύ έχεις το div mybanner εκτος του wrapper και του δίνεις position fixed με top και left = 0. Που σημαίνει πως είναι λογικό να στο βάλει στο αριστερό μέρος της οθόνης και όχι του wrapper.

βαλε το div mybanner μέσα στο wrapper, δώστου position fixed όπως το έχεις αλλά δώσε και right:50% ή/και left:50% ανάλογα και φερτο εκεί που θες με margin.

επισης μιλάς για 2 banners ενώ έχεις ένα div mybanner.

laspoor
Δημοσιεύσεις: 6
Εγγραφή: 25 Ιαν 2014 04:07

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από laspoor » 25 Ιαν 2014 20:09

επισης μιλάς για 2 banners ενώ έχεις ένα div mybanner.
Παραθέτω στο παράδειγμα παραπάνω για συντομία απλά μόνο το αριστερό !

Είσαι σωστός neundex τελκά μόνο που μου παρουσιάστηκε ένα ακόμα νέο πρόβλημα τώρα. Έκανα όπως με συμβούλεψες τα παρακάτω όμως όταν δοκίμασα να βάλω στη θέση των banners μια εικόνα διαστάσεων 150 x 100 τότε όταν πάω να μικρύνω το παράθυρο του περιηγητή μου κάτω από 800px πλάτος τα δυο μπανεράκια που ως πρώτα εμφανίζονταν αριστερά και δεξιά σωστά, τώρα εμφανίζονται πάνω από το wrapper, το ένα πάνω απ το άλλο και το οπτικό απότέλεσμα είναι χάλια δες πως μοιάζει,

Πρίν
Εικόνα

Και Μετά
Εικόνα

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

#wrapper &#123;
margin &#58; 0 auto 0 auto;
width &#58; 800px;
height &#58; 800px;
background-color&#58;green ;
&#125;

@media screen and &#40;min-width &#58; 1024px&#41; &#123;
#mybanner &#123;background-color&#58;red;width&#58;100px;height&#58;150px;position&#58;fixed;top&#58;0px;left&#58;0px;left&#58;50%;margin-left&#58;400px;&#125;
#mybanner img&#123;width&#58;100px;height&#58;auto;&#125;
&#125;

@media screen and &#40;min-width &#58; 1224px&#41; &#123;
#mybanner &#123;background-color&#58;red;width&#58;100px;height&#58;150px;position&#58;fixed;top&#58;0px;left&#58;0px;left&#58;50%;margin-left&#58;400px;&#125;
#mybanner img&#123;width&#58;100px;height&#58;auto;&#125;
&#125;

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

<html>
<body>
<div id="wrapper "></div>
<div id="mybanner"><a href="http&#58;//www.freestuff.gr" target="_blank"><img src="image.jpg" alt="Freestuff" title="Freestuff" border="0" /></a></div>
</body>
</html> 
Πως θα το διορθώσουμε για να μην κάνει αυτό το άσχημο "Μετά" που έδειξα και στην εικόνα παραπάνω ;
Τελευταία επεξεργασία από το μέλος laspoor την 25 Ιαν 2014 21:09, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
neundex
Δημοσιεύσεις: 40
Εγγραφή: 19 Σεπ 2013 09:49
Επικοινωνία:

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από neundex » 25 Ιαν 2014 20:56

εδώ δείχνεις το media query για desktops (min-width : 1024px) για την διάσταση που λες στα 800px έχεις φτιάξει άλλο query; γιατί δεν παίζει με το συγκεκριμένο.. δώσε αν θες ένα live link

laspoor
Δημοσιεύσεις: 6
Εγγραφή: 25 Ιαν 2014 04:07

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από laspoor » 25 Ιαν 2014 21:05

neundex έγραψε:εδώ δείχνεις το media query για desktops (min-width : 1024px) για την διάσταση που λες στα 800px έχεις φτιάξει άλλο query; γιατί δεν παίζει με το συγκεκριμένο.. δώσε αν θες ένα live link
Δοκίμασα να βάλω από το άλλο θέμα http://www.freestuff.gr/forums/viewtopic.php?t=64964 το

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

@media screen and &#40;min-width &#58; 800px&#41; &#123;
#left-banner, #right-banner &#123;display&#58;none;&#125;
&#125; 
Αλλά τότε δεν εμφανίζοταν τα μπανεράκια όπως πρώτα σωστά ! Αυτό κανονικά δεν θα έπρεπε εξαφανίζει τα μπανεράκια στη δική μου περίπτωση δηλαδή όταν μίκρινα το παράθυρο του περιηγητή μου από 800 και κάτω ;

Τον κώδικα τον έχω σε wamp localhost δεν έχω κάποιο live link :(

Όταν λες αν έχω φτιάξει άλλο query για το 800 θές να πείς κάτι σαν και αυτό ??? ,

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

@media screen and &#40;min-width &#58; 800px&#41; &#123;
#mybanner &#123;background-color&#58;red;width&#58;100px;height&#58;150px;position&#58;fixed;top&#58;0px;left&#58;0px;left&#58;50%;margin-left&#58;400px;&#125;
#mybanner img&#123;width&#58;100px;height&#58;auto;&#125;
&#125;
Γιατί και με αυτό το ίδιο πρόβλημα έχω, τα μπανεράκι είναι το ένα πάνω στο άλλο πάνω από το wrapper όπως δείχνω στη εικόνα του "Μετά" παραπάνω, άρα ;

Άβαταρ μέλους
neundex
Δημοσιεύσεις: 40
Εγγραφή: 19 Σεπ 2013 09:49
Επικοινωνία:

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από neundex » 25 Ιαν 2014 22:17

μαλλον έχεις μπερδευτεί με την λογική του min width και max width στα media queries.

όταν ορίζεις στο query, @media screen and (min-width : 800px), βάζεις μέσα όσα css θες να εκτελούνται από αναλύσεις οθονών 800px και πάνω.

όταν ορίζεις στο query, @media screen and (max-width : 800px), βάζεις μέσα όσα css θες να εκτελούνται από αναλύσεις οθονών 800px και κάτω.

οπότε εσύ για αναλύσεις 800px και κάτω, θες:

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

@media screen and &#40;max-width &#58; 800px&#41; &#123; 
#mybanner &#123;background-color&#58;red;width&#58;100px;height&#58;150px;position&#58;fixed;top&#58;0px;left&#58;0px;left&#58;50%;margin-left&#58;400px;&#125; 
#mybanner img&#123;width&#58;100px;height&#58;auto;&#125; 
&#125;

αλλά για να παίξει σωστά σε αυτήν την ανάλυση(κάτω από 800px), θα πρέπει λογικά κόψεις και το width του wrapper, αλλιώς θα σου φάει ωφέλιμο χώρο. ή να το κρύψεις με display:none; για κάτω από 800px.

laspoor
Δημοσιεύσεις: 6
Εγγραφή: 25 Ιαν 2014 04:07

Μπανεράκια με @mediaqueries πλάι στο wrapper πως ;

Δημοσίευση από laspoor » 25 Ιαν 2014 22:42

neundex έγραψε:μαλλον έχεις μπερδευτεί με την λογική του min width και max width στα media queries.

όταν ορίζεις στο query, @media screen and (min-width : 800px), βάζεις μέσα όσα css θες να εκτελούνται από αναλύσεις οθονών 800px και πάνω.

όταν ορίζεις στο query, @media screen and (max-width : 800px), βάζεις μέσα όσα css θες να εκτελούνται από αναλύσεις οθονών 800px και κάτω.
Έχεις δίκιο τα μπέρδεψα, τώρα κατάλαβα πως έχει η κατάσταση και να σαι καλά που μου τα ξεμπέρδεψες !

Απάντηση

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

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

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