Class werkt niet

Status
Niet open voor verdere reacties.

meerweten

Gebruiker
Lid geworden
1 aug 2009
Berichten
111
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:
Knipsel1.JPG

wat ik krijg:
Knipsel.JPG



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>
 
Kan je hier iiets mee
Code:
html:

<article class="item">
   <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" alt="" />
         </div>
         <div class="right">
            Some text that should be next to image                          
         </div>
      </div>
   </blockquote>
</article>

css:

* {
   -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
           box-sizing:border-box
}
.item {
   width: 800px;
   background-color: #000;
   color: #fff;
}
.item h1 {
   padding-bottom: 5px;
   font-size: 18px;
   text-decoration: underline;
   color: #1d7;
   font-weight: 700;
}
.item blockquote {
   width: auto;
   margin-left: 40px;
   padding-left:  10px;
   border-left: 10px solid #1d7;
}
.item h3 a,
.item h3 a:hover,
.item h3 a:active {
   font-size: 18px;
   text-decoration: underline;
   font-weight: 700;
   color: #fff;
}
.item .wrapper {
   width: 100%;
}
.item .wrapper:after {
   display: table;
   content: " ";
   clear: both;
}
.item .left {
   float:left;
   width: 25%;
}
.item .left img {
   display: block;
   width: 100%;
   height: auto;
   border: 0;
}
.item .right {
   float: left;
   width: 75%;
   padding-left: 20px;
}
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan