Question

Jak zrobić żeby obraz się wyświetlił w programie, czy w css się nie zagnieżdża, czy kolor jest zapisany dobrze text-shadow?

    #main{  
         font-family: 'helvetica', 'garamond', 'arial', 'sans-serif';
		 font-size: 32px;
         display: inline-block; 
		 border: 63px;
		 padding: 6px;
		 margin:  69px 66px 56px 69px; }
		                            
		    .aside {
			 background-image: url(lisc.jpg);
			 background-size: cover;
             width: 67px;
			 height: 560px;
			 margin: 0px;
			 padding: 2px;
			 float: left;
			 
		     
		                            }
			
         		  
		   
		   #article-1 {
		   float: left;
		   text-decoration: underline; 
		   letter-spacing: 2px;
		   word-spacing: 3px;
		   font-size: 32px;
		   overflow-x: hidden;
		   overflow-y: scroll;
		   
		                             }
		   #article-2 {
		    clear: left;
		    text-decoration: underline; 
		    letter-spacing: 2px;
			word-spacing: 3px;
		    font-size: 32px;
			overflow-x: hidden;
			overflow-y: scroll;
		   }
		   #article-3 {
		    clear: left;
		    text-decoration: underline; 
		    letter-spacing: 2px;
			word-spacing: 3px;
		    font-size: 32px;
		    overflow-x: hidden;
			overflow-y: scroll; 
		   }
			
			
			
			
		
           text-shadow: 1 px, 1 px, 5 px, #aa09aa;
		   background-color: #3fd93f;
		   position: relative;
		   color: #633600;
           background-image: url(klon.jpg); 
		   position: absolute;
           background-repeat: round;
		   
                                       }                         

 

Comments

Czym jest końcowe 7 linijek (56-62)? Co to ma w zamyśle robić? I o który obrazek ci chodzi

---

@Petrone, zwróć uwagę na:

Kiedy użyć identyfikatora, a kiedy klasy?

 

Jeżeli łapiemy dwa lub więcej elementów w CSS, to siłą rzeczy pozostaje nam użyć klasy (gdyż nadanie tego samego id dwóm lub więcej elementom łamie regułę unikalności identyfikatora - duży błąd!). Jednak co w przypadku, gdy chcemy uchwycić tylko jeden element – skoro możemy użyć zarówno identyfikatora jak i klasy, to który sposób jest lepszy?

 

Cóż, to złożony problem. Ustanowienie identyfikatora w HTML wymusza na przeglądarce obsługę mechanizmu unikalności tegoż elementu (jest on wówczas wyróżniony w specjalny sposób w tzw. hierarchii DOM). Jeżeli jedynym naszym celem jest ostylować element, to ustanowienie unikalnego id wydaje się być niepotrzebną, lekką przesadą.

 

Identyfikator powinniśmy zastosować przede wszystkim w tych elementach, które zamierzamy później uchwycić w skryptach JavaScript, albo które będą służyć jako tzw. punkty nawigacyjne witryny (kotwice nawigacyjne).

 

Reasumując: stosowanie identyfikatora tylko do celów ostylowania elementu w CSS jest niepotrzebnym "mieszaniem" w hierarchii DOM. Mówiąc najprościej: nie jest to optymalne. Natomiast absolutnie nie jest to błędem! Specyfikacja W3C HTML5 (źródło) mówi wyraźnie: Element posiadający unikalny identyfikator może zostać użyty do różnorodnych celów - przede wszystkim jako sposób linkowania do konkretnych części dokumentu (kotwica nawigacyjna), jako uchwyt dla skryptów JS oraz do ostylowania konkretnego elementu w CSS.

---

@Petrone, 

czy w css się nie zagnieżdża ...

Jak korzystać z natywnego zagnieżdżania CSS w swoich aplikacjach internetowych.

---

Chodzi mi o suchy liść z moich obrazów i o gałąź klonu też z moich obrazów.

---

@wizarddos, suchylisc.jpg galazklonu.jpg ze zdjęć

Answer 1

W html-u istnieje kilka sposobów na umieszczanie obrazków na stronie.

1. Element <img>
    

   <img src="ciezka/do/obrazka.png" alt="Opis obrazka">

2. Element <figure> i <figcaption>
   Elementy te są używane do grupowania obrazków z odpowiadającym im opisem.
    

   <figure>
     <img src="ciezka/do/obrazka.png" alt="Opis obrazka">
     <figcaption>Opis obrazka</figcaption>
   </figure>

3. Element <picture>
   Element pozwala dostarczyć różne wersje obrazka w zależności od rozmiaru ekranu.
    

   <picture>
     <source srcset="ciezka/do/obrazka.png" media="(min-width: 1200px)">
     <source srcset="ciezka/do/obrazka.png" media="(min-width: 600px)">
     <img src="sciezka/do/obrazka-small.jpg" alt="Opis obrazka">
   </picture>
   

4. Użycie tła w elemencie <div>
    

   <div style="background-image: url('ciezka/do/obrazka.png'); 
               background-size: cover; 
               width: 300px; height: 200px;"></div>

 

---

 

Element <svg>  [ demonstracja on-line ]

<svg width="200" height="100">
  <image xlink:href="sciezka/do/obrazka.png" width="200" height="100" />
</svg>

<svg width="200" height="100">
  <defs>
    <pattern id="image" x="0" y="0" width="1" height="1">
      <image xlink:href="ciezka/do/obrazka.png" width="200" height="100" />
    </pattern>
  </defs>
  <rect width="200" height="100" fill="url(#image)" />
</svg>

 

 

BTW, poprawny zapis text-shadow

text-shadow: 1px 1px 5px #aa09aa;

margin: 0px jeżeli podajemy 0 (zero) nie ma potrzeby podawać jednostki miary 

margin: 0;

 

Answer 2

To jest ogólne do main. O taki z kodu html.