Hey,
ik ben momenteel een website aan het redesignen en bots daarbij op een probleem dat ik voorheen niet had opgemerkt.
het is enige tijd geleden dat ik mij gewaagd heb aan het aanpassen van mijn css code dus mss doe ik iets stoms.
nu is mijn probleem het volgende.
ik gebruik div's om verschillende blokken van elkaar te scheiden en hier ook andere 'properties' aan toe te wijzen.
ik gebruik (zie hieronder) .left en .right om 2 div's naast elkaar te hebben en in de linker een afbeelding te zetten
nu bij het vergroten van deze afbeelding (en ja ik wil deze groter hebben) krijg ik het probleem dat mijn text niet mee opschuift. doe ik hier iets verkeerds?
ook zou ik graag hebben dat als er een afbeelding in de dif met als klasse .left gebruikt wordt deze een maximale afbeeldingsgrote heeft van 200px. momenteel moet ik dit er nog steeds bij zetten maar het lijkt mij dat dit ook anders kan en kan geintegreerd worden in de css code?
wat ik wil:
wat ik krijg:
css code:
html code:
ik ben momenteel een website aan het redesignen en bots daarbij op een probleem dat ik voorheen niet had opgemerkt.
het is enige tijd geleden dat ik mij gewaagd heb aan het aanpassen van mijn css code dus mss doe ik iets stoms.
nu is mijn probleem het volgende.
ik gebruik div's om verschillende blokken van elkaar te scheiden en hier ook andere 'properties' aan toe te wijzen.
ik gebruik (zie hieronder) .left en .right om 2 div's naast elkaar te hebben en in de linker een afbeelding te zetten
nu bij het vergroten van deze afbeelding (en ja ik wil deze groter hebben) krijg ik het probleem dat mijn text niet mee opschuift. doe ik hier iets verkeerds?
ook zou ik graag hebben dat als er een afbeelding in de dif met als klasse .left gebruikt wordt deze een maximale afbeeldingsgrote heeft van 200px. momenteel moet ik dit er nog steeds bij zetten maar het lijkt mij dat dit ook anders kan en kan geintegreerd worden in de css code?
wat ik wil:
wat ik krijg:
css code:
Code:
div.wrapper{
width: 800px;
overflow: hidden;
}
div.toolsWrapper{
width: 980px;
overflow: hidden;
}
div.left{
width: 200px;
float:left;
margin-right:40px;
padding-left:40px;
}
div.right{
margin-left: 20px;
}
html code:
HTML:
<article>
<h1>Audio Projects</h1>
<blockquote>
<h3>
<a href="Damp">
Class D Amplifier
</a>
</h3>
<div class="wrapper">
<div class="left">
<img src="Damp/Damp_front.JPG"/>
</div>
<div class="right" style="margin-left:220px">
Some text that should be next to image
</div>
</div>
</blockquote>
</article>