Εμφάνιση εικόνας έξω από το div

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

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

Απάντηση
rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Εμφάνιση εικόνας έξω από το div

Δημοσίευση από rafinos » 20 Αύγ 2013 12:07

Παιδιά έχω φτιάξει ένα slideshow σε μια σελίδα... σε όλους τους browser είναι μια χαρά ...
εκτός από ie7 και παλαιότερο (τώρα θα μου πείτε... υπάρχει ακόμη τέτοιο πράγμα... αλλά οκ)

Έτσι μου το εμφανίζει σε όλους τους browser

Εικόνα
Και έτσι στους "άχρηστους" browser της ms

Εικόνα

css κώδικας

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

#slider{
		margin: 0 auto;
		width: 600px;
		height: 190px;
		text-align: center;
		border: 1px solid #432973;
	}
	
	#slider #next{
		margin-top: 20px;
		right: -20px;
		top: 60px;
		width: 20px;
		height: 30px;
		float: right;
		position: relative;
		background-image: url('images/next.png');
		z-index: 99;
		cursor: pointer;
	}
	
	#slider #next:hover{
		background-image: url('images/next_hover.png');
	}
	
	#slider #prev{
		margin-top: 20px;
		;
		top: 60px;
		width: 20px;
		height: 30px;
		float: left;
		position: relative;
		background-image: url('images/prev.png');
		z-index: 99;
		cursor: pointer;
	}
	
	#slider #prev:hover{
		background-image: url('images/prev_hover.png');
	}
	
	#slider #image_slider{
		width: 600px;
		height: 190px;
		position: absolute;
		overflow: hidden;
	}
html κώδικας

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

<div id="slider">
   <div id="prev"></div>
   <div id="next"></div>
   <div id="image_slider">
	<img src="slider_images/image1.jpg" height="190" width="600">
        <img src="slider_images/image2.jpg" height="190" width="600">
        <img src="slider_images/image3.jpg" height="190" width="600">
        <img src="slider_images/image4.jpg" height="190" width="600">
        <img src="slider_images/image5.jpg" height="190" width="600">
        <img src="slider_images/image6.jpg" height="190" width="600">			
    </div>
</div>

το πρόβλημα είναι το position:absolute; μέσα στο #image_slider

αν το σβήσω γίνεται το παρακάτω σε όλους τους browser

Εικόνα

*το slideshow δουλεύει με το plugin cycle

rafinos
Δημοσιεύσεις: 306
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Εμφάνιση εικόνας έξω από το div

Δημοσίευση από rafinos » 21 Αύγ 2013 14:10

ΟΚ παιδιά το έκανα...

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

#slider&#123;
		margin&#58; 0 auto;
		width&#58; 642px;
		height&#58; 190px;
	&#125;
	
	#slider #next&#123;
		top&#58; 80px;
		width&#58; 20px;
		height&#58; 30px;
		float&#58; right;
		position&#58; relative;
		background-image&#58; url&#40;'images/next.png'&#41;;
		z-index&#58; 99;
		cursor&#58; pointer;
	&#125;
	
	#slider #prev&#123;
		top&#58; 80px;
		width&#58; 20px;
		height&#58; 30px;
		float&#58; left;
		position&#58; relative;
		background-image&#58; url&#40;'images/prev.png'&#41;;
		z-index&#58; 99;
		cursor&#58; pointer;
	&#125;
	
	
	#slider #image_slider&#123;
		width&#58; 600px;
		height&#58; 190px;
		margin&#58; 0 auto;
		border&#58; 1px solid #432973;
		overflow&#58; hidden;
	&#125;


Απάντηση

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

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

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