href div below img div

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

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

Απάντηση
shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

href div below img div

Δημοσίευση από shortyjr » 17 Μαρ 2010 21:13

Γεια σας παιδια.

Εχω ενα div με εικόνα και αν βάζω κάτω απο αυτο το div αλλο div με εικόνα πάλι, τότε κάθετα ακριβώς απο κάτω απο το προηγούμενο. ομως αν βάλω div με link τοτε πηγαίνει αριστερα πάνω απο την εικόνα του πρώτου div. ξέρει κανεις γιατι?>
Τελευταία επεξεργασία από το μέλος shortyjr την 17 Μαρ 2010 22:56, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

href div below img div

Δημοσίευση από dimsis » 17 Μαρ 2010 21:55

Το κάνεις float:left το πρώτο div; αν ναι τότε παίζει μήπως η δεύτερη εικόνα δεν χωράει σε πλάτος και την πάει από κάτω;

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

href div below img div

Δημοσίευση από shortyjr » 17 Μαρ 2010 22:55

Εσκεμένα την κάνω float:left . Αυτό θέλω. κάθε εικόνα να μπαινει κατω απο την αλλη.
και απλα το λινκ το οποιο θα μορφωποισω με css να μπει και αυτο ακριβώς κατω απο την πρώτη εικόνα

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

href div below img div

Δημοσίευση από dimsis » 17 Μαρ 2010 23:12

Αν θέλεις να μπαίνει η μια εικόνα κάτω από την άλλη δεν πρέπει να βάλεις float:left τότε...
φτιάξε ένα
<div>
<img src="tade" />
<br />
<a href="link">link</a>
</div>

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

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

href div below img div

Δημοσίευση από shortyjr » 17 Μαρ 2010 23:46

αυτο θελω παιδια.
μια εικονα
απο κατω ενα λινκ το οποιο θα φιαξω με css ωστε να εχει εικονα.
και απο κάτω πάλι εικονα

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

HTML&#58; 
. 
</head> 

<body> 
  
 <div id="header"> 
  
  <div id="menu"> 
   <ul> 
    <li><a href="1.html" class="1 active">1</a></li> 
    <li><a href="2.html" class="2">2</a></li> 
    <li><a href="3.html" class="3">3</a></li> 
    <li><a href="4.html" class="4">4</a></li> 
    <li><a href="5.html" class="5">5</a></li> 
   </ul> 
  </div> 
  
 </div> 
  

 <div class="head1"> 
 <img src="Pictures/head1.jpg" style="float&#58;right; margin-right&#58; 51px; margin-top&#58; 0px"/> 
 </div> 

<div id="header"> 
<div id="play">    
<ul> 
 <li><a href="2.html" class="play">play</a></li> 
</ul> 
</div> 
</div> 

 <div class="ab"> 
 <img src="Pictures/ab.jpg" style="float&#58;right; margin-top&#58; 0px"/>  
 </div> 
  
</body> 

</html> 

CSS&#58; 

div#header &#123;width&#58; 1010px; margin&#58; 0 auto;&#125; 
.ab &#123;width&#58; 1010px; margin&#58; 0 auto;&#125; 
.head1 &#123;width&#58; 1010px; margin&#58; 0 auto;&#125; 
#play &#123;height&#58;23px;padding&#58;0px 0px;overflow&#58;hidden;&#125; 
#play ul &#123; display&#58;block; height&#58;23px; margin&#58; 0 0;&#125; 
#play ul li &#123; display&#58; inline; &#125; 
#play ul li a &#123;display&#58; block; float&#58; left; height&#58; 23px; background-image&#58; url&#40;Pictures/play.jpg&#41;; text-indent&#58; -9999px; outline&#58; none;&#125; 
#play ul li a.buyalot &#123;width&#58; 107px; background-position&#58; 0 0;&#125; 
#play ul li a.buyalot&#58;hover, #play ul li a.play&#58;focus &#123;background-position&#58; 0 -23px;&#125; 

#menu &#123;height&#58;60px; padding&#58;25px 55px; overflow&#58;hidden;&#125; 
#menu ul &#123;display&#58;block; height&#58;60px; margin&#58;0 0;&#125; 
#menu ul li &#123;display&#58;inline;&#125; 
#menu ul li a &#123;display&#58;block; float&#58;left; height&#58;60px; background-image&#58;url&#40;Pictures/Menu.jpg&#41;; text-indent&#58;-9999px; outline&#58;none;&#125; 

    #menu ul li a.1 &#123;width&#58; 149px; background-position&#58; 0 0;&#125; 
   #menu ul li a.2 &#123;width&#58; 255px; background-position&#58; -149px 0;&#125; 
    #menu ul li a.3 &#123;width&#58; 223px; background-position&#58; -404px 0;&#125; 
   #menu ul li a.4 &#123;width&#58; 159px; background-position&#58; -627px 0;&#125; 
   #menu ul li a.5 &#123;width&#58; 114px; background-position&#58; -785px 0;&#125; 
    
    #menu ul li a.1&#58;hover, #menu ul li a.1.active, #menu ul li a.1&#58;focus &#123;background-position&#58; 0 -60px;&#125; 
   #menu ul li a.2&#58;hover,#menu ul li a.2.active, #menu ul li a.2&#58;focus &#123;background-position&#58; -149px -60px;&#125; 
   #menu ul li a.3&#58;hover, #menu ul li a.3.active, #menu ul li a.3&#58;focus &#123;background-position&#58; -404px -60px;&#125; 
   #menu ul li a.4&#58;hover,#menu ul li a.4.active, #menu ul li a.4&#58;focus &#123;background-position&#58; -627px -60px;&#125; 
   #menu ul li a.5&#58;hover,#menu ul li a.5.active, #menu ul li a.5&#58;focus &#123;background-position&#58; -785px -60px;   &#125; 
    
a &#123; outline&#58; none; &#125;
Συνημμένα
Untitled.png
εικονα
(9.88 KiB) Μεταφορτώθηκε 201 φορές

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

href div below img div

Δημοσίευση από dimsis » 18 Μαρ 2010 00:10

Κάτι τέτοιο; http://avadaz.com/playground/imagesandlink.htm

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

<!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" xml&#58;lang="el" lang="el">
<head>
<meta name="lang" http-equiv="Content-Language" content="el" />
<title>Test by DimSis</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="Description" content="test" />
<meta name="Keywords" content="test" />
<meta name="author" content="Developed by Dimitris Siskopoulos" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
div#header &#123;width&#58; 1010px; margin&#58; 0 auto;&#125;
.ab &#123;&#125;
.head1 &#123;&#125;
#play &#123;height&#58;23px;padding&#58;0px 0px;overflow&#58;hidden;&#125;
#play ul &#123; display&#58;block; height&#58;23px; margin&#58; 0 0;&#125;
#play ul li &#123; display&#58; inline; &#125;
#play ul li a &#123;display&#58; block; float&#58; left; height&#58; 23px; background-image&#58; url&#40;Pictures/play.jpg&#41;; text-indent&#58; -9999px; outline&#58; none;&#125;
#play ul li a.buyalot &#123;width&#58; 107px; background-position&#58; 0 0;&#125;
#play ul li a.buyalot&#58;hover, #play ul li a.play&#58;focus &#123;background-position&#58; 0 -23px;&#125;

#menu &#123;height&#58;60px; padding&#58;25px 55px; overflow&#58;hidden;&#125;
#menu ul &#123;display&#58;block; height&#58;60px; margin&#58;0 0;&#125;
#menu ul li &#123;display&#58;inline;&#125;
#menu ul li a &#123;display&#58;block; float&#58;left; height&#58;60px; background-image&#58;url&#40;Pictures/Menu.jpg&#41;; text-indent&#58;-9999px; outline&#58;none;&#125;

#menu ul li a.1 &#123;width&#58; 149px; background-position&#58; 0 0;&#125;
#menu ul li a.2 &#123;width&#58; 255px; background-position&#58; -149px 0;&#125;
#menu ul li a.3 &#123;width&#58; 223px; background-position&#58; -404px 0;&#125;
#menu ul li a.4 &#123;width&#58; 159px; background-position&#58; -627px 0;&#125;
#menu ul li a.5 &#123;width&#58; 114px; background-position&#58; -785px 0;&#125;
   
#menu ul li a.1&#58;hover, #menu ul li a.1.active, #menu ul li a.1&#58;focus &#123;background-position&#58; 0 -60px;&#125;
#menu ul li a.2&#58;hover,#menu ul li a.2.active, #menu ul li a.2&#58;focus &#123;background-position&#58; -149px -60px;&#125;
#menu ul li a.3&#58;hover, #menu ul li a.3.active, #menu ul li a.3&#58;focus &#123;background-position&#58; -404px -60px;&#125;
#menu ul li a.4&#58;hover,#menu ul li a.4.active, #menu ul li a.4&#58;focus &#123;background-position&#58; -627px -60px;&#125;
#menu ul li a.5&#58;hover,#menu ul li a.5.active, #menu ul li a.5&#58;focus &#123;background-position&#58; -785px -60px;   &#125;
   
a &#123; outline&#58; none; color&#58;#F33; font-size&#58;1.2em;&#125;

#outerdiv &#123; border&#58;1px solid #ccc; width&#58;150px; &#125;
</style>
</head>
<body>

<div id="header">
  <div id="menu">
     <ul>
      <li><a href="1.html" class="1 active">1</a></li>
      <li><a href="2.html" class="2">2</a></li>
      <li><a href="3.html" class="3">3</a></li>
      <li><a href="4.html" class="4">4</a></li>
      <li><a href="5.html" class="5">5</a></li>
    </ul>
   </div>
</div>
<div id="outerdiv">
<div class="head1"><img src="http&#58;//www.downloadsoftware4free.com/screen/thumb/MSN-funny-msn-display-picturesmsn-display-pictures.jpg" /></div>
<a href="2.html" class="play">play bouzouki?</a>
<div class="ab"><img src="http&#58;//nikadon.com/wp-content/uploads/2008/09/funny-150x150.jpg" /></div>
</div>

</body>
</html>
Έβγαλα τα width 1010 που είχες στα 2 divs με τις εικόνες και τα inline float ... δεν χρειάζονται. Όπως και το #outerdiv { border:1px solid #ccc; width:150px; } πο έβαλα επίσης δεν είναι απαραίτητο...

shortyjr
Δημοσιεύσεις: 66
Εγγραφή: 17 Φεβ 2010 01:49

href div below img div

Δημοσίευση από shortyjr » 18 Μαρ 2010 00:30

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

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

href div below img div

Δημοσίευση από dimsis » 18 Μαρ 2010 00:51

http://avadaz.com/playground/imageoverother.htm

το CSS position και το z-index.
Αν βάλεις μεγαλύτερο z-index στο .ab από ότι στο .head1 θα έρθει εκείνη η εικόνα από πάνω...

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

<style>
body, html &#123; margin&#58;0; padding&#58;0&#125;
.head1 &#123;
	position&#58; relative;
	z-index&#58;10;
&#125;
.ab &#123;
	position&#58; absolute;
	top&#58;0px;
	left&#58;0px;
	z-index&#58;9;
&#125;
</style>
</head>
<body>
<div id="outerdiv">
  <div class="head1"><img src="http&#58;//www.downloadsoftware4free.com/screen/thumb/MSN-funny-msn-display-picturesmsn-display-pictures.jpg" alt="1" onmouseover="this.style.visibility='hidden'"/> Mouse Over Me</div>
  <div class="ab"> <img src="http&#58;//nikadon.com/wp-content/uploads/2008/09/funny-150x150.jpg" alt="2"/> </div>
</div>

Απάντηση

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

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

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