PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Schrijfwijze style fout bij img tag

Door Harry H Arends op 18-08-2017 19:33
2.501 views
Ik heb een logo dat ik links in een div wil plaatsen. dit is de HTML code:
<a href="#" class="navbar-left">
<img src="http:\\www.harry-arends.nl/event_2018/images/logo-inverse.png" >
</a>
En dan in de css sectie
.navbar-left.img {
    height: 100%;
  }
Wat ik hiermee bereiken wil is dat het logo passend binnen navbar-left past.
B
Ben van Velzen
18-08-2017 19:36
Zou je niet eerst eens de URL correct in je img tag zetten voordat je verder knutselt? Daarnaast; moet het niet .navbar-left img (dus zonder de extra .) zijn?
Jan R
19-08-2017 11:05
Een en ander in de CV lijkt me ook niet OK nationaliteit ongehuwd :)???
Harry H Arends
19-08-2017 12:30
Jan R op 19/08/2017 11:05:46

Een en ander in de CV lijkt me ook niet OK nationaliteit ongehuwd :)???
Beste Jan,
Vanwaar deze opmerking, heeft niets met de vraag te maken



[size=xsmall]Toevoeging op 19/08/2017 12:33:45:[/size]

Ben van Velzen op 18/08/2017 19:36:53

Zou je niet eerst eens de URL correct in je img tag zetten voordat je verder knutselt? Daarnaast; moet het niet .navbar-left img (dus zonder de extra .) zijn?
Ben,

Wat bedoel je met correcte URL?? en het verwijderen van de punt geeft geen verandering
B
Ben van Velzen
19-08-2017 12:53
Zie je serieus het verschil tussen een / en een \ niet? :-)
Harry H Arends
19-08-2017 16:24 gewijzigd op 19-08-2017 16:25
Ben van Velzen op 19/08/2017 12:53:47

Zie je serieus het verschil tussen een / en een \ niet? :-)
Tuurlijkwel. Heb zo'n vermoeden dat het<img> element niet alles van CSS aan neemt. Ter test het volgende gebouwd:
<body>
    <div id="inhoud" >
        <p>En deze is onderstreept</p>
        <img src="http://www.harry-arends.nl/event_2018/images/logo-inverse.png" >
    </div
</body>
en daarboven de volgende CSS:
<head>
  <title>Untitled</title>
  <style>
  #inhoud {
      width: 50%;
        color: red;
        background-color: BurlyWood ;
        border-radius: 25px;
  }
   #inhoud p {
        color: #FF0000;
        text-decoration: underline;
  }
  #inhoud img {
        height:50%;
  }

  </style>
</head>
en ziedaar het <p> element wordt onderstreept maar het <img> element wordt niet verkleint naar 50% maar blijft gewoon 100%. En ja alles staat tussen een HTML tag

- SanThe -
19-08-2017 16:31
Img height:50% van wat?
Van de div waar die in staat.
En de height van de div is onbekend.
Harry H Arends
19-08-2017 19:37
- SanThe - op 19/08/2017 16:31:04

Img height:50% van wat?
Van de div waar die in staat.
En de height van de div is onbekend.

de CSS van sommige elementen staan in 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
De hoogte van de <nav> is 50px en zou dan 25px moeten worden (bij 50% en passend bij 100%)

- SanThe -
19-08-2017 19:43
Geef eens een link.
A
Adoptive Solution
19-08-2017 19:50
Dit komt dichter in de buurt van het gewenste resultaat :

#inhoud img {
	width:100%;
}


Willem vp
20-08-2017 01:54
> Heb zo'n vermoeden dat het<img> element niet alles van CSS aan neemt.

Programmeren, les 1: Een computer is een dom ding. Hij doet alleen datgene wat jij hem opdraagt te doen. Als hij iets anders doet dan wat jij wilt, dan komt dat doordat jij hem verkeerde opdrachten hebt gegeven. (Dit zijn bij benadering de woorden waarmee mijn studie software engineering begon.)

In dit geval kun je ervan uitgaan dat het img-element exact wordt gestyled zoals dat zou moeten. CSS is een taal met een zekere leercurve en de kans dat er iets gebeurt dat anders is dan je verwacht is best groot. Maar die afwijking is in principe altijd verklaarbaar.

Als ik uitga van de code die je om 16:24 hebt gepost, en in de CSS zet ik de height van #inhoud op 50px, dan wordt de image wel degelijk naar 25px hoogte geschaald. Als dat in de <nav> niet gebeurt, zal dat waarschijnlijk komen doordat er een fout in de CSS zit, of doordat de betreffende regel wordt overruled door een andere.

In dit geval is het vrijwel niet te doen om op basis van codefragmenten aan te wijzen waar precies de fout zit; vandaar dat SanThe vraagt om een link naar de betreffende pagina. Waarschijnlijk zal het dan vrij snel duidelijk zijn waar het probleem zit.

Reageren

Inloggen om te reageren