Afbeelding in main content

Status
Niet open voor verdere reacties.
B

Biancak1

Nieuwe gebruiker
Lid geworden
5 dec 2014
Berichten
1
Goedenavond,

Ik ben momenteel bezig met het bouwen van een website.

Momenteel staat mijn website op:
http://biancakoning.janmwesigwa.com/

Ik ben wel al goed op weg, maar ik wil heel graag de 6 plaatjes (buttons) naast elkaar. Dus 3 boven en 3 eronder.
Ik heb in mijn css al: float: left; staan maar dit werkt niet.

Ik heb geen idee wat er fout is.

Kan iemand mij hiermee helpen?

Ik hoor het graag.

Alvast dank!
 
Ik heb geen directe oplossing voor je vraag/probleem
maar wel een paar adviezen.

  • zorg eerst voor de structuur van de website of de individuele pagina's
    • welke content moet er in en welke elementen ga je daarvoor gebruiken en hoe (in welke volgorde wordt dat op het scherm getoond)
    • daarna pas de 'verfraaiingen' aanbrengen middels css
  • alles wat je bouwt moet regelmatig gecheckt worden met een validator, ook de css; fouten verbeteren en waarschuwingen ter harte nemen
  • wees secuur met wat je 'schrijft'; spelfouten in bestandsnamen doen vermoeden dat je slordig werkt.
  • leer meer over html en css; sommige fouten zijn typische beginnersfouten: verkeerd nesten, werking van block-elementen niet doorhebben, enz.
 
Het is niet te doen om alle html en css van je website door te spitten dus geef ik je hieronder een algemeen toe te passen oplossing. De href van de <a> en de src van de <img> zal je even aan moeten passen. Alles wat bij CSS staat zet je in je stylesheet.
Code: 
HTML:

<style type="text/css">
.btnrow .btn01 a { background-image: url('Fotolijstje-kruipen-achtergond1.png'); }
.btnrow .btn02 a { background-image: url('Schilderij-Konijn-achtergrond3.png'); }
.btnrow .btn03 a { background-image: url('Schilderij-rond-muis-achtergrond1.png'); }
.btnrow .btn04 a { background-image: url('Schilderij-Konijn-achtergrond3.png'); }
.btnrow .btn05 a { background-image: url('Schilderij-rond-muis-achtergrond1.png'); }
.btnrow .btn06 a { background-image: url('Fotolijstje-kruipen-achtergond1.png'); }
</style>
<div class="btnrow">
  <div class="btn btn01">
  <a href="http://www.example.nl">
  <img src="Fotolijstje-kruipen-wit-11.png" alt=""></a>
  </div>
  <div class="btn btn02">
  <a href="http://www.example.nl">
  <img src="Geel-konijn-knop1.png" alt=""></a>
  </div>
  <div class="btn btn03">
  <a href="http://www.example.nl">
  <img src="Schilderij-rond-muis-gekleurd1.png" alt=""></a>
  </div>
</div>
<div class="btnrow">
  <div class="btn btn04">
  <a href="http://www.example.nl">
  <img src="Geel-konijn-knop1.png" alt=""></a>
  </div>
  <div class="btn btn05">
  <a href="http://www.example.nl">
  <img src="Schilderij-rond-muis-gekleurd1.png" alt=""></a>
  </div>
  <div class="btn btn06">
  <a href="http://www.example.nl">
  <img src="Fotolijstje-kruipen-wit-11.png" alt=""></a>
  </div>
</div>

CSS:

.btnrow, .btnrow * { /*reset wat waardes*/
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.btnrow {
  padding-bottom: 10px; /*ruimte onder elke rij*/
}
.btnrow:first-child {
  padding-top: 10px; /*ruimte boven 1e rij*/
}
.btnrow:after { /*clear btn floats*/
  content: "";
  display: table;
  clear: both;
}
.btnrow .btn {
  float: left;
  width: 230px; /*breedte en hoogte van knop*/
  height: 230px;
  margin-right: 10px; /*ruimte rechts elke knop*/
}
.btnrow .btn:first-child {
  margin-left: 10px; /*ruimte links 1e knop*/
}
.btnrow .btn a {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-decoration: none;
  line-height: 1; /*hieronder achtergrond op 100% van knop*/
  background: no-repeat center #fff;
  -webkit-background-size: 100% 100%;
     -moz-background-size: 100% 100%;
          background-size: 100% 100%;
}
.btnrow .btn a img {
  width: 100%;
  height: auto; /*zet hoogte in verhouding*/
  opacity: 1; /*doorzichtigheid effect 0.4 sec*/
  -webkit-transition: opacity .4s;
     -moz-transition: opactiy .4s;
       -o-transition: opacity .4s;
          transition: opacity .4s;
}
.btnrow .btn a:hover img {
  opacity: 0; /*bij mouse-over wordt img doorzichtig*/
  cursor: pointer;
}

In de css heb ik ook een overgangseffect erbij gezet zodat het ene plaatje overgaat (transition) in het andere plaatje.

Oja, kijk je code even na want het "/" hoort altijd voor de tag naam; voorbeeld: <p>.....</p>
Voor de overige punten sluit ik mij bij tecsman aan.

*** edit: door het gebruik van een <img> is de code zoekmachine vriendelijker. Dit kun je nog uitbreiden met
<img title="hier staat wat de foto voorstelt" .......... >

Suc6. Have fun.
 
Laatst bewerkt:
Hallo Biancak1,
voor het probleem wat u heeft zou u de tags <table>, <tr> en <td> gebruiken. Deze geven de mogelijkheid om alles netjes in een rijtje te zetten.
Bijv.

<table>
<tr>
<td>
<img alt="1"> <img alt="1">
</td>
</tr>
<tr>
<td>
<img alt="1"> <img alt="1">
</td>
</tr>
</table>

Mvg Bas.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan