Hoe laat ik twee afbeeldingen meeschalen (van naast elkaar naar onder elkaar)?

Status
Niet open voor verdere reacties.
L

Laura1608

Gebruiker
Lid geworden
6 jun 2014
Berichten
17
Goedenavond,

Op mijn eigen website heb ik een probleem bij de pagina 'portfolio'.

Ik heb twee afbeeldingen naast elkaar neergezet, alleen als de pagina wordt verkleind, verkleinen de afbeeldingen mee. Ik zou liever hebben dat ze bij het verkleinen van de pagina onder elkaar komen te staan (op 100% van de verkleinde pagina). Dit is de css code:

.imgbox{
width: 50%;
color: #000;
display: inline;
}
.imgbox img{
width: 90%;
}

En dit de html:

<article class="imgbox left">
<a href="tekst.html"><img src="img/tekst.jpg"></a>
</article>

<article class="imgbox right">
<a href="beeld"><img src="img/beeld.jpg"></a>
</article>

Daarnaast nog een klein probleempje: onder deze html code moet ik ongeveer 10x <br /> zetten (ja, ik weet hoe gek dit is) om mijn footer niet dwars door mijn twee afbeeldingen te laten lopen. Dit gaat goed, maar bij het verkleinen van de pagina zorgt dit voor een probleem. Iemand enig idee hoe ik dit anders kan aanpakken?

Alvast bedankt! Laura
 
Laatst bewerkt door een moderator:
Ik zie dat je gebruik maakt van media queries.
Als je daar nou bij zet als je de mobiel weergave weergeeft (daar gaat het om denk ik):
Code: 
float: none;

Die gaat op je .right en .left.
 
googlemuscle zei:
Ik zie dat je gebruik maakt van media queries.
Als je daar nou bij zet als je de mobiel weergave weergeeft (daar gaat het om denk ik):
Code: 
float: none;

Die gaat op je .right en .left.
Klik om te vergroten...

Bedankt voor het antwoord! Heb float toegevoegd en het werkt!

Weet je mijn tweede vraag toevallig ook te beantwoorden?

Daarnaast nog een klein probleempje: onder deze html code moet ik ongeveer 10x <br /> zetten (ja, ik weet hoe gek dit is) om mijn footer niet dwars door mijn twee afbeeldingen te laten lopen. Dit gaat goed, maar bij het verkleinen van de pagina zorgt dit voor een probleem. Iemand enig idee hoe ik dit anders kan aanpakken?
Klik om te vergroten...

Bij de mobiele weergave staat de footer weer veelste ver naar beneden, omdat die afbeeldingen niet meer net zo groot zijn..
 
Ik zou dan op je footer dit toepassen:
Code: 
position: absolute;
bottom: 0;
left: 0;


(En al je br tags mogen dan weg:p)
 
Laatst bewerkt:
googlemuscle zei:
Ik zou dan op je footer dit toepassen:
Code: 
position: absolute;
bottom: 0;
left: 0;


(En al je br tags mogen dan weg:p)
Klik om te vergroten...

Werkt inderdaad voor de websiteversie voor de pagina 'portfolio', maar bij zowel alle andere pagina's, als bij de mobiele versie staat de footer ineens dwars door de teksten heen.. Oeps!
 
Over welk gedeelte van de css heb je het precies? Mobiele of websiteversie? En moet ik dat andere bij de footer laten staan (bij websiteversie)??
 
Gewoon op de websiteversie zou moeten werken gezien je css zo.
Die positie absolute en wat ik net zei kun je op footer laten staan.
 
Sorry, ik begrijp je niet helemaal. Waar moet ik die position relative precies op toepassen? :)
 
Op de div waar je footer in zit.

Dus bijvoorbeeld op je "Over mij" pagina zit je footer in de
Code: 
<div class="container clearfix">

Dan geef je die div dus een position relative.
 
Oh op die manier! Ik ga er binnenkort even naar kijken.

Heel erg bedankt voor al je antwoorden! Fijne dag!
 
Ben ik weer! Heb het even uitgeprobeerd door dit toe te passen:

<article class="footer right" position="relative">
<p>2014 © contact: </p>
</article>

Is dat de goede manier? Er verandert in ieder geval niks.

Ik hoor het wel van je!
 
Laatst bewerkt door een moderator:
Ik zou dan op je footer dit toepassen:
Code:
position: absolute;
bottom: 0;
left: 0;

(En al je br tags mogen dan weg)
Klik om te vergroten...

Nee sorry, dit zorgt alleen nog maar voor meer verschuivingen. Nog suggesties?
 
Uhm in je voorbeeld geef je je class footer een positie relative.
Die positie moet op de parent van je footer.

Raar want als ik het zo probeer op jou website werkt het gewoon..
 
Uhm in je voorbeeld geef je je class footer een positie relative.
Die positie moet op de parent van je footer.

Raar want als ik het zo probeer op jou website werkt het gewoon..
Klik om te vergroten...


Kan je de code anders geven van wat jij hebt geprobeerd in mijn website? :) lijkt me handiger!
 
Laatst bewerkt:
Misschien zou je eerst dit 'snel' willen proberen?

Haal al die <br> weg en zet op je footer (gewoon de website versie)
Code: 
clear:both
 
Je zou rustig gewoon 1 br tag laten staan om het iets naar beneden te doen.
Zal voor mobiel niet veel uitmaken.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan