Πρόβλημα με εικόνα

Oufis3 · 13 Μαΐου 2017

Προσπαθώ να βάλω μία εικόνα με css αλλά δεν μπαίνει. Ορίστε το css :


#myInput {
  background-image:url('/SearchButton.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL .up a {
  border: 1px solid #ddd;
  margin-top: -1px; --> stamatai tous diplous pinakes <--
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL .up a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL .up a:hover:not(.header) {
  background-color: #eee;
}

το html :

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li class="up"><a href="#" class="header">A</a></li>
  <li class="up"><a href="#">Adele</a></li>
  <li class="up"><a href="#">Agnes</a></li>

  <li class="up"><a href="#" class="header">B</a></li>
  <li class="up"><a href="#">Billy</a></li>
  <li class="up"><a href="#">Bob</a></li>

  <li class="up"><a href="#" class="header">C</a></li>
  <li class="up"><a href="#">Calvin</a></li>
  <li class="up"><a href="#">Christina</a></li>
  <li class="up"><a href="#">Cindy</a></li>
</ul>

tzotzosgr · 13 Μαΐου 2017

Καλησπέρα,

Κοιτά το path της εικόνας!

Oufis3 · 13 Μαΐου 2017

Καλησπέρα,

Κοιτά το path της εικόνας!

Το έχω κοιτάξει πάρα πολύ.

tzotzosgr · 13 Μαΐου 2017

είμαι 100% ότι είναι λάθος το path!

αν μπορείς δώσε link online

Oufis3 · 13 Μαΐου 2017

είμαι 100% ότι είναι λάθος το path!

αν μπορείς δώσε link online

Δεν είναι ονλινε ειναι στο Υ/Η

tzotzosgr · 13 Μαΐου 2017

https://ufile.io/ttcds κατέβασε από εδώ τα αρχεία που έκανα ( έβαλα μια εικόνα τυχαία)

Oufis3 · 13 Μαΐου 2017

https://ufile.io/ttcds κατέβασε από εδώ τα αρχεία που έκανα ( έβαλα μια εικόνα τυχαία)

δεν μπορεισ να βαλεις τον κοδικα εδω?

dominotrix · 13 Μαΐου 2017

Γιατι δε μπαινεις στο codepen.io και να το κανεις εκει realtime?

Oufis3 · 13 Μαΐου 2017

ακόμα δεν μου βγάζει την εικόνα μου

Γιατι δε μπαινεις στο codepen.io και να το κανεις εκει realtime?

η εικόνα δεν μπαίνει εκει που την θέλω(δεν εμφανιζεται)

tzotzosgr · 13 Μαΐου 2017

https://jsfiddle.net/svaubjdt/ δες

Oufis3 · 13 Μαΐου 2017

Η εικόνα ειναι ο μεγεθυντικος φακός

tzotzosgr · 13 Μαΐου 2017

ακόλουθα βήμα βήμα

φτιάξε ένα φάκελο ονόμασε τον όπως θες πχ demo

μέσα στον φάκελο βάλε την εικόνα SearchButton.png

μέσα στον φάκελο βάλε το style.css

#myInput {
  background-image:url('SearchButton.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL .up a {
  border: 1px solid #ddd;
  margin-top: -1px; --> stamatai tous diplous pinakes <--
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL .up a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL .up a:hover:not(.header) {
  background-color: #eee;
}

μέσα στον φάκελο βάλε το index.html

<!DOCTYPE html>
<html>
<head>

<title>Demo image css</title>
<link rel="stylesheet" href="style.css" type="text/css" />

	
</head>
<body>

<input type="text" id="myInput" onkeyup="search()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li class="up"><a href="#" class="header">A</a></li>
  <li class="up"><a href="#">Adele</a></li>
  <li class="up"><a href="#">Agnes</a></li>

  <li class="up"><a href="#" class="header">B</a></li>
  <li class="up"><a href="#">Billy</a></li>
  <li class="up"><a href="#">Bob</a></li>

  <li class="up"><a href="#" class="header">C</a></li>
  <li class="up"><a href="#">Calvin</a></li>
  <li class="up"><a href="#">Christina</a></li>
  <li class="up"><a href="#">Cindy</a></li>
</ul>

</body>
</html>

και μετά run index.html

XPHSTOS_ · 14 Μαΐου 2017

Το πρόβλημα σου είναι στο path της εικόνας.
Δια του λόγου το αληθές δες το codepen Site: εδώ .

H εικόνα που τραβαω από το unsplash παίζει μια χαρά άρα αν εσύ δεν βλέπεις εικόνα τότε έχει πρόβλημα ή η εικόνα ή το path αυτής!
99.9% είναι το path.

Μήπως η εικόνα δεν είναι χύμα στον ίδιο φάκελο με το css?
Μήπως θέλει '../SearchButton.png'
Μήπως κάποιος χαρακτήρας στο όνομα της εικόνας είναι στα ελληνικά (κανα 'o')?

Tiphonas · 14 Μαΐου 2017

Σιγουρέψου ότι το path της εικόνας ειναι το σωστό.

Επίσης καλου κακού για το τεστ σου βάλε ολα τα γραμματα μικρά στο ονομα της εικόνας π.χ searchbutton.png

Σιγουρέψου ότι όντως ειναι png και jpg. Αν είναι jpg σιγουρεψου αν είναι jpg ή jpeg.

Σύνδεση

Πρόβλημα με εικόνα

Προτεινόμενες αναρτήσεις

Oufis3

tzotzosgr

Oufis3

tzotzosgr

Oufis3

tzotzosgr

Oufis3

dominotrix

Oufis3

tzotzosgr

Oufis3

tzotzosgr

XPHSTOS_

Tiphonas

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση