• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pomocne rozwiązanie w ujarzmieniu potworka?

VPS Starter Arubacloud
+1 głos
416 wizyt
pytanie zadane 16 stycznia 2022 w HTML i CSS przez Bzytek Użytkownik (810 p.)
zmienione kategorie 18 stycznia 2022 przez Comandeer

Cześć,

Wytworzyłem dla potrzeb własnych takiego "potworka"

.atabru {
  display: block;
  margin-bottom: -10px;
  text-align: center;
}
.atabru img {
  content: url("https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605608/atabrule_arfmgs.png");
  display: inline;
  padding: 8px 0;
}
.atabrule-r {
  display: block;
  text-align: center;
}
.atabrule-r img {
  content: url("https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605738/atabrule-r_csrin4.png");
  display: inline;
  padding: 8px 0;
  margin-bottom: -10px
}

i dodałem do tego taki html

<div class="atabru"><img class="atabru" /></div>
<div class="atabrule-r"><img class="atabrule-r" /></div>

I klopssad. Pod tym linkiem sprawdzisz całość

Mój kłopot jest w tym że walidator w wyświetla błędy przy <img class="atabru" /> i <img class="atabrule-r" /> jako braki alt i href.

Obrazków używam jako ozdobniki - raz pojedynczo a raz dwa przeciwnie ułożone.

Czy istnieje  jakieś pozytywne w css rozwiązane  dla div z <img> gdzie obrazek w div byłby responsywny?

2 odpowiedzi

+2 głosów
odpowiedź 16 stycznia 2022 przez SzkolnyAdmin Szeryf (86,280 p.)

Ale dlaczego nie wstawisz po prostu obrazka, tylko bawisz się w contenty? Walidator wyrzuca ci błędy, ponieważ dla tagu img wymagany jest atrybut src, a mocno zalecany atrybut alt https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Responsywność obrazka załatwiasz tradycyjnie:

img {
    max-width: 100%;
    height: auto;
}

lub też przy pomocy tagu picture https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

+1 głos
odpowiedź 16 stycznia 2022 przez VBService Ekspert (251,210 p.)
edycja 16 stycznia 2022 przez VBService

content: nie może być użyte jako atrybut css dla elementu <img>, ponieważ

CSS Content

 

CSS has a property called content. It can only be used with the pseudo-elements ::after and ::before. It is written like a pseudo selector (with the colon), but it’s called a pseudo-element because it’s not actually selecting anything that exists on the page but adding something new to the page.

"dozwolone" atrybuty css dla elementu <img>: [ 1 ]  [ 2 ]

 

jeżeli to ma być jako

Obrazków używam jako ozdobniki - raz pojedynczo a raz dwa przeciwnie ułożone.

może zapisz to tak np.

<div class="atabru">
  <div>
  Czym jest Lorem Ipsum?
  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych
  </div>
</div>
.atabru {
  width: 60vw;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.atabru div {
  height: 100%;
  margin: 0;
  padding: 0.5em 1em;
  background-color: rgba(132,102,0,0.95);
  font: 300 0.95em/1.7 monospace;
  color: white;
}
.atabru::before {
  background-image: url(https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605608/atabrule_arfmgs.png);
  background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%; 
    height: 11px;
    content:"";
}
.atabru::after {
  background-image: url(https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605738/atabrule-r_csrin4.png);
  background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 100%; 
    height: 11px;
    content:"";
}

 

komentarz 16 stycznia 2022 przez Bzytek Użytkownik (810 p.)
edycja 16 stycznia 2022 przez Bzytek

Dzięki za naprowadzenie rozwiązania.

      Jednak szkopuł jest w tym, że tych obrazków używam dla poziomego oddzielenia kolejnego fragmentu tekstu na zasadzie jak poniżej:

Objaśnienie
       Lorem Ipsum jest tekstem stosowanym jako przykładowy Lorem Ipsum jest tekstem stosowanym jako przykładowy Lorem Ipsum

—————————————————— 

(to ten wypośrodkowany obrazek bez tekstu, raz jeden, niekiedy dwa)

       Blaablaa tekstem stosowanym jako przykładowy Lorem Ipsum jest tekstem stosowanym jako przykładowy......

 Szersze części na każdym obrazku - gdy dwa - są naprzeciw siebie (po lewej i prawej stronie. Całość  zawsze nie jest w tabeli jak na objaśnieniu.)

komentarz 17 stycznia 2022 przez Bzytek Użytkownik (810 p.)
przeniesione 18 stycznia 2022 przez Arkadiusz Waluk

Dzięki za podpowiedź  VBService. Niemniej nie opanowuje ona responsywności każdego img z osobna i nie można tego css  "z biegu" zastosować do pojedynczego czasami używanego <img>. Zobacz mój kod w jsfiddle i porównaj screeny (w wersji mobile).

Schow04 to zastosowana twoja => 

  <= Schow takie rozwiązanie bym chciał osiągnąć.

Na teraz mam wymodzone cóś takiego

.atabru {
  background: url('https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605608/atabrule_arfmgs.png') no-repeat;
  float: left;
  height: 10px;
  margin-left: 25px;
  margin-right: 6px;
  padding: 5px 0 5px 10px;
  position: relative;
  width: 600px;
  max-width: 100%;}

.atabrule-r {
  background: url('https://res.cloudinary.com/mtkosciuszko/image/upload/v1512605738/atabrule-r_csrin4.png') no-repeat;
  float: left;
  height: auto;
  margin-left: 25px;
  margin-right: 6px;
  padding: 1px 0 5px 1px;
  position: relative;
  width: 600px;
  max-width: 100%;
  margin-top:-10px;
}

Html zapisałem w ten sposób

<div class="atabru"></div>
<div class="atabrule-r"></div>

Tyle że nie mogę teraz złapać responsywności obydwóch obrazków przy takim  zapisie sad

Czy można to jakoś podreperować ??

Moje wyjaśnienia powyżej są aktualne

komentarz 18 stycznia 2022 przez VBService Ekspert (251,210 p.)
przeniesione 18 stycznia 2022 przez Arkadiusz Waluk

Może w ogóle zrezygnuj z obrazków (obrazka):

i zrób to w css-ie.

 

przykład

<div class="horizontal-rule"></div>
<br />
<div class="horizontal-rule-r"></div>
.horizontal-rule,
.horizontal-rule-r {
  position: relative;
  width: 100%;
  height: 12px;
  background-image: linear-gradient(transparent 50%, rgb(132, 120, 0) 51%);
}
.horizontal-rule::before,
.horizontal-rule-r::before,
.horizontal-rule-r::after {
  display: block;
  content: '';
  width: 12%;
  height: 12px;
  background-color: rgb(132, 120, 0);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.horizontal-rule-r::after {
  position: absolute;
  right: 0;
  bottom: -6px;  
  transform: rotate(180deg);
}

 

 

<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper, diam in hendrerit interdum, ligula urna volutpat risus, et venenatis est turpis in arcu. Suspendisse sagittis malesuada lorem quis commodo. Integer elit diam, dignissim eu sodales quis, vulputate vitae lectus. Morbi sit amet mattis sem. Nam eu nulla volutpat, congue sem vitae, egestas tortor. Aliquam erat volutpat. Sed leo felis, pellentesque sit amet tellus sed, lobortis interdum tellus. Duis consectetur sem tellus, rutrum ullamcorper tortor porta volutpat. Praesent ut libero pretium ligula tincidunt cursus. Suspendisse aliquam sodales lacus. Proin luctus felis at malesuada porta. Quisque ac pharetra est. Integer id metus quis risus lacinia volutpat. Vivamus quis turpis sit amet mi tristique lacinia. Cras sed sollicitudin diam.
  </p>
  <div class="horizontal-rule"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper, diam in hendrerit interdum, ligula urna volutpat risus, et venenatis est turpis in arcu. Suspendisse sagittis malesuada lorem quis commodo. Integer elit diam, dignissim eu sodales quis, vulputate vitae lectus. Morbi sit amet mattis sem. Nam eu nulla volutpat, congue sem vitae, egestas tortor. Aliquam erat volutpat. Sed leo felis, pellentesque sit amet tellus sed, lobortis interdum tellus. Duis consectetur sem tellus, rutrum ullamcorper tortor porta volutpat. Praesent ut libero pretium ligula tincidunt cursus. Suspendisse aliquam sodales lacus. Proin luctus felis at malesuada porta. Quisque ac pharetra est. Integer id metus quis risus lacinia volutpat. Vivamus quis turpis sit amet mi tristique lacinia. Cras sed sollicitudin diam.
  </p>
  <div class="horizontal-rule-r"></div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ullamcorper, diam in hendrerit interdum, ligula urna volutpat risus, et venenatis est turpis in arcu. Suspendisse sagittis malesuada lorem quis commodo. Integer elit diam, dignissim eu sodales quis, vulputate vitae lectus. Morbi sit amet mattis sem. Nam eu nulla volutpat, congue sem vitae, egestas tortor. Aliquam erat volutpat. Sed leo felis, pellentesque sit amet tellus sed, lobortis interdum tellus. Duis consectetur sem tellus, rutrum ullamcorper tortor porta volutpat. Praesent ut libero pretium ligula tincidunt cursus. Suspendisse aliquam sodales lacus. Proin luctus felis at malesuada porta. Quisque ac pharetra est. Integer id metus quis risus lacinia volutpat. Vivamus quis turpis sit amet mi tristique lacinia. Cras sed sollicitudin diam.
  </p> 
</section>
section {
  width: 90vw;
  margin: 0.5em auto;
}
section p {
  font: 300 1em monospace;
}
section p:first-letter {
  font: 900 2em monospace;
  color: rgba(132, 120, 0, 0.5);
  padding: 0.1em;
}
.horizontal-rule,
.horizontal-rule-r {
  position: relative;
  width: 100%;
  height: 12px;
  background-image: linear-gradient(transparent 50%, rgb(132, 120, 0) 51%);
}
.horizontal-rule::before,
.horizontal-rule-r::before,
.horizontal-rule-r::after {
  display: block;
  content: '';
  width: 12%;
  height: 12px;
  background-color: rgb(132, 120, 0);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.horizontal-rule-r::after {
  position: absolute;
  right: 0;
  bottom: -6px;  
  transform: rotate(180deg);
}

 

1
komentarz 24 stycznia 2022 przez Bzytek Użytkownik (810 p.)
Dziękuję za dość ciekawą koncepcję.

Niemniej dręczy mnie też kwestia szybkość ładowania obrazka z moim rozwiązaniu (obrazek jako background w  css)  czy też szybciej będzie ładowanie obrazka bezpośrednio linkiem na stronie? Same ozdobniki obrazkowe mają nie więcej niż 600 - 900 bajtów. Ale łączenie samo w sobie też trwa

Jakie jest wasze zdanie?

Podobne pytania

+2 głosów
3 odpowiedzi 586 wizyt
pytanie zadane 3 kwietnia 2021 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)
+1 głos
0 odpowiedzi 116 wizyt
0 głosów
4 odpowiedzi 344 wizyt
pytanie zadane 10 września 2016 w C i C++ przez Munvik Dyskutant (9,350 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...