the images are not responding with its CSS code or mowing to the top

I can’t find this code on our link

Hi, the problem is that the you have two container, small-8 column and small-4 column.
One is on the left and the other on ther right (this is ok).
But the imges are all in the second block.
You should have a code like this (if i understand what you want):
<div class=”small-8 column”>
<div class=”section1″> </div>
<div class=”section2″> dedede</div>
</div>

<div class=”small-4 column”>
<div class=”aside1″> </div>
</div>
<div style=”clearboth”></div>

The you should replicate this code for every line.

thanks ,
the section 1 and section 2 (under the class=”small-8 column”) as you tell in the example above.
its each border of it is divided into 2 subsections.

<div class=" media-object">
<div class="section-repair2">
<div class="subsection-repair2 small-6 column media-object-section">Grote beurt</div>

<div class="subsectionX-repair2 small-6 column media-object-section"><img src="https://webdesignleren.net/wp-content/uploads/2016/11/autopech-in-zomer.svg" alt="" />  </div>
</div>  </div>

foundation works with 12 column. so I have first divided the whole page into 2 sections
1- the left side into small-8 column..
2-the right side into small-4 column.
then I have created 4 borders in the left section( small-8 column)
now I have each border divided into 2 subsections
as example:
<div class=”small-8 column”>
<div class=”section1″>
<div class=”subsection1-first small-6 column> </div>
<div class=”subsection1-second small-6 column”> </div>
</div>
<div class=”section2″>
<div class=” subsection2-first small-6 column”> </div>
<div class=”subsection2-second small-6 column”> the picture url I have replaced here as example </div>
</div>
and the problem is that when I am using padding or margin to rplace the picture in the right position in the border the css code is not responding .exmple:
.subsection2-second {
padding-top:1rem;
or
margin-top:1rem;
}
so as you see the picture is not moving to its place as I tell in css>
thanks
johannes

Do you want add padding o margin to div inside the other div the aside1, aside2 and aside3?
Sorry, i’m trying to understand.

Hi, now i understand.
The problem is the image, if you try to insert the same image of the first block the problem desappear.
What i don’t understand is why the image has no dimesion.

thanks ,
they are svg format.
here is an example:

<div class="subsectionX-repair small-6 column media-object-section">
    <img src="https://webdesignleren.net/wp-content/uploads/2016/11/auto-reparatie.svg" alt="auto-reparatie" class="alignnone size-medium wp-image-4249" />
  </div>

I have converted jpeg images into svg format in Illustrator, maybe this can be the problem .
I am going to test first with inserting some text and jpeg image in subsection class to see if the problem is solved.
thanks again
johannes

Whith jpg you should resolve the problem.
Remember… when you insert floating element inside a div, es.:
<div class=”section-repair2″>
<div class=”subsection-repair2 small-6 column media-object-section”>Grote beurt</div>
<div class=”subsectionX-repair2 small-6 column media-object-section”></div>
</div>

before close the div hou must insert ad element wich close the floating (clear:both style), es.:
<div class=”section-repair2″>
<div class=”subsection-repair2 small-6 column media-object-section”>Grote beurt</div>
<div class=”subsectionX-repair2 small-6 column media-object-section”></div>
<div style=”clear:both”></div>
</div>

Tell me if the problem was resolved.
Have a nice day

I see that the image which I had converted to svg format in Illustrator is not recognized in css with positive values(margin-top) but it is recognized with negative values to move it to upward(margin-top) or downward.

for example if I write this code:

.subsectionX-repair,
img {
margin-top:-42px;
}
`
then you can see on my website: https://webdesignleren.net/reparatie-ondehoud/

that the blue arrow logo has moved to upward in the subsection of container.
my questions are now :
1-what can be the reason I have to use negative values to let the svg format arrow to move upward or downward?
is this because when I converted jpeg to svg format the jpeg(image) is embedded in svg format?
2-shall this negative values cause problems with different browsers or it is not a problem at all to use negative values.

johannes

But why don’t you use jpg format? Illustrator allow to export jpg.
I don’t know that format, probabely the browser can be have many problem with svg.
Please use jpg, you will not have problem!!!

thanks
johannes