Plaatjes buiten het vak

A.Bijlsma

Beste leden,

Ik ben weer tegen een probleem aangelopen.

Als je naar de site http://www.shopgotyou.be/index.php gaat,
Dan zie je dat de plaatjes uit de vak gaan.

Hoe los ik het op?

Hier de css:

PHP

/* ## Algemeen  ## */
* {
    margin: 0;
    padding: 0;
}


html, body {
    height: 100%;
}


body {
    width: 100%;
    font: 11px 'Arial';
    background: #fff url('http://demo.shopgotyou.be/img/bg.png') repeat-x top left;
}


a img {
    border: 0;
}


.clear {
    clear: both;
}


/* ## Content ##  */
div#content {
    width: 950px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -234px; /* the bottom margin is the negative value of the footer's height */
}


    div#push {
        height: 234px;
    }


    div#top {
        width: 950px;
        clear: both;
        padding: 20px 0 0;
    }


        div#top h1 {
            width: 460px;
            height: 92px;
            float: left;
            background: url('http://demo.shopgotyou.be/img/logo.png') no-repeat top left;
            text-indent: -10000px;
        }


        div#top a.ad_468:link, div#top a.ad_468:active, div#top a.ad_468:visited {
            display: block;
            float: right;
            width: 468px;
            height: 60px;
            margin: 10px 0 0;
            background: url('http://demo.shopgotyou.be/img/ad_468.png') no-repeat top left;
        }




    div#menu {
        width: 950px;
        height: 45px;
        clear: both;
    }


        div#menu ul {
            float: left;
            list-style-type: none;
        }
            
            div#menu li {
                height: 45px;
                float: left;
            }
            
                div#menu li a:link, div#menu li a:active, div#menu li a:visited {
                    display: block;
                    height: 30px;
                    float: left;
                    font: bold 11px 'Arial';
                    color: #fff;
                    letter-spacing: 2px;
                    text-decoration: none;
                    padding: 15px 10px 0 10px;
                    margin: 0 6px;
                }
                
                div#menu li a:hover, div#menu li a.active:link, div#menu li a.active:active, div#menu li a.active:visited {
                    background: #2f2b60;
                }
        
        div#language {
            float: right;
        }
        
            div#language a:link, div#language a:active, div#language a:visited {
                width: 24px;
                height: 19px;
                display: block;
                float: left;
                text-indent: -10000px;
                margin: 14px 8px 0;
            }
            
            div#language a#nl:link, div#language a#nl:active, div#language a#nl:visited {
                background: url('http://demo.shopgotyou.be/img/flag_nl.png') no-repeat top left;
            }
            
            div#language a#nl:hover, div#language a#nla:link, div#language a#nla:active, div#language a#nla:visited  {
                background: url('http://demo.shopgotyou.be/img/flag_nl.png') no-repeat bottom left;
            }
            
            div#language a#be:link, div#language a#be:active, div#language a#be:visited {
                background: url('http://demo.shopgotyou.be/img/flag_be.png') no-repeat top left;
            }
            
            div#language a#be:hover, div#language a#bea:link, div#language a#bea:active, div#language a#bea:visited  {
                background: url('http://demo.shopgotyou.be/img/flag_be.png') no-repeat bottom left;
            }
            
            div#language a#eu:link, div#language a#eu:active, div#language a#eu:visited {
                background: url('http://demo.shopgotyou.be/img/flag_eu.png') no-repeat top left;
            }
            
            div#language a#eu:hover, div#language a#eua:link, div#language a#eua:active, div#language a#eua:visited {
                background: url('http://demo.shopgotyou.be/img/flag_eu.png') no-repeat bottom left;
            }
            
            div#language a#us:link, div#language a#us:active, div#language a#us:visited {
                background: url('http://demo.shopgotyou.be/img/flag_us.png') no-repeat top left;
            }
            
            div#language a#us:hover, div#language a#usa:link, div#language a#usa:active, div#language a#usa:visited {
                background: url('http://demo.shopgotyou.be/img/flag_us.png') no-repeat bottom left;
            }
        
    div#aanraders {
        width: 950px;
        height: 171px;
        padding: 20px 0 0;
    }


        div#aanraders h2 {
            width: 950px;
            padding: 0 0 10px;
            font: bold 15px 'Arial';
            color: #fff;
            letter-spacing: 2px;
        }
        
        div.aanraders_box {
            width: 316px;
            height: 102px;
            float: left;
        }
        
        div.aanraders_box_50 {
            width: 316px;
            height: 102px;
            margin: -8px 0 0;
            float: left;
        }
        
            div.aanraders_box_img {
                float: left;
            }
            
                div.aanraders_box_img img {
                    position: center;
                    z-index: 0;
                    border: 1px solid #0f0b4b;
                    margin: -22px 0 0 10px;
                }
                
                div.aanraders_box_img span.discount_20 {
                    display: block;
                    position: relative;
                    z-index: 1;
                    width: 32px;
                    height: 32px;
                    background: url('http://demo.shopgotyou.be/img/discount_20.png') no-repeat top left;
                }
                
                div.aanraders_box_img span.discount_50 {
                    display: block;
                    position: relative;
                    z-index: 1;
                    width: 46px;
                    height: 40px;
                    background: url('http://demo.shopgotyou.be/img/discount_50.png') no-repeat top left;
                }
                
                div.aanraders_box_img span.discount_10 {
                    display: block;
                    position: relative;
                    z-index: 1;
                    width: 32px;
                    height: 32px;
                    background: url('http://demo.shopgotyou.be/img/discount_10.png') no-repeat top left;
                }
        
            div.aanraders_box_text {
                float: left;
                font: 11px/18px 'Arial';
                color: #fff;
                letter-spacing: 2px;
                width: 160px;
                padding: 15px 0 0 20px;
            }
            
            div.aanraders_box_50 div.aanraders_box_text {
                padding: 23px 0 0 20px;
            }
            
                div.aanraders_box_text p {
                    padding: 0 0 10px;
                }
            
                div.aanraders_box_text p.price {
                    font: bold 18px 'Arial';
                    color: #fff;
                }
    
    div#content_mid {
        width: 950px;
        padding: 20px 0;
    }
    
        div#content_mid h2 {
            font: bold 16px 'Arial';
            color: #0d094a;
            padding: 0 0 5px;
        }
    
        div#content_mid p.textp {
            font: 11px/18px 'Arial';
            letter-spacing: 2px;
            padding: 0 0 30px;
            color: #0d094a;
        }
        
        div.content_box {
            width: 424px;
            float: left;
            margin: 0 20px 40px;
            background: url('http://demo.shopgotyou.be/img/content_box.png') repeat-y top left;
        }
        
            div.content_box_t {
                width: 424px;
                padding: 4px 0 0;
                background: url('http://demo.shopgotyou.be/img/content_box_t.png') no-repeat top left;
            }
        
            div.content_box_b {
                width: 424px;
                padding: 0 0 4px;
                background: url('http://demo.shopgotyou.be/img/content_box_b.png') no-repeat bottom right;
                clear:both;
            }
            
            div.content_box_img {
                float: left;
                padding: 5px 10px 0 5px;
            }
            
                div.content_box_img img {
                    position: relative;
                    z-index: 0;
                    border: 1px solid #cfcfcf;
                    margin: -22px 0 0 10px;
                }
                
                div.content_box_img span.discount_20 {
                    display: block;
                    position: relative;
                    z-index: 1;
                    width: 32px;
                    height: 32px;
                    background: url('http://demo.shopgotyou.be/img/discount_20.png') no-repeat top left;
                }
                
                div.content_box_img span.discount_50 {
                    display: block;
                    position: relative;
                    z-index: 1;
                    width: 46px;
                    height: 40px;
                    background: url('http://demo.shopgotyou.be/img/discount_50.png') no-repeat top left;
                }
                
                div.content_box_img span.discount_10 {
                    display: block;
                    position: relative;
                    z-index: 1;
                    width: 32px;
                    height: 32px;
                    background: url('http://demo.shopgotyou.be/img/discount_10.png') no-repeat top left;
                }


                div.content_box_img {
                    display: block;
                    position: relative;
                }
            
            div.content_box_text {
                width: 280px;
                float: left;
                padding: 10px 5px 5px 10px;
            }
            
                div.content_box_text span.price {
                    float: right;
                    padding: 5px 5px 0 0;
                    font: 11px 'Arial';
                    letter-spacing: 1px !important;
                    color: #0d094a;
                }
            
                div.content_box_text p {
                    font: 11px/18px 'Arial';
                    letter-spacing: 1px !important;
                    color: #0d094a;
                    padding: 0 0 18px;
                }
                
                    div.content_box_text p a:link, div.content_box_text p a:active, div.content_box_text p a:visited {
                        font: bold 11px 'Arial';
                        color: #0d094a;
                        text-decoration: none;
                    }
                    
                    div.content_box_text p a:hover {
                        text-decoration: underline;
                    }
                    
                    div.content_box_text p a.download:link, div.content_box_text p a.download:active, div.content_box_text p a.download:visited {
                        display: block;
                        width: 68px;
                        height: 20px;
                        float: right;
                        margin: 0 10px 0 0;
                        padding: 5px 0 0 25px;
                        background: url('http://demo.shopgotyou.be/img/a_download.png') no-repeat top left;
                    }
                    
                    div.content_box_text p a.moreinfo:link, div.content_box_text p a.moreinfo:active, div.content_box_text p a.moreinfo:visited {
                        display: block;
                        width: 133px;
                        height: 20px;
                        float: right;
                        padding: 5px 0 0 25px;
                        background: url('http://demo.shopgotyou.be/img/a_moreinfo.png') no-repeat top left;
                    }
                    
    
            
div#footer {
    width: 100%;
    height: 234px;
    background: url('http://demo.shopgotyou.be/img/footer.png') repeat-x top left;
}


    div#mid_footer {
        width: 996px;
        height: 152px;
        margin: 0 auto;
    }
    
        div.mid_footer_box {
            display: inline;
            width: 162px;
            height: 152px;
            float: left;
            margin: 0 85px;
        }
        
            div.mid_footer_box h2 {
                width: 162px;
                text-align: center;
                font: bold 15px 'Arial';
                color: #fff;
                text-transform: uppercase;
                padding: 18px 0 8px;
            }
            
            div.mid_footer_box form span {
                display: block;
                width: 162px;
                height: 23px;
                margin: 0 0 6px;
                background: url('http://demo.shopgotyou.be/img/footer_input.png') no-repeat top left;
            }
            
            
            div.mid_footer_box input {
                width: 132px;
                height: 23px;
                background: none;
                border: 0;
                font: 11px/22px 'Arial';
                letter-spacing: 1px;
                padding: 0 0 0 30px;
                text-align: left;
                color: #fff;
            }
            
                div.mid_footer_box input#username {
                    background: url('http://demo.shopgotyou.be/img/icon_username.png') no-repeat 10px 4px;
                }
            
                div.mid_footer_box input#password {
                    background: url('http://demo.shopgotyou.be/img/icon_password.png') no-repeat 10px 4px;
                }
            
                div.mid_footer_box input#email {
                    background: url('http://demo.shopgotyou.be/img/icon_email.png') no-repeat 9px 6px;
                }
            
                div.mid_footer_box input#keyword {
                    background: url('http://demo.shopgotyou.be/img/icon_keyword.png') no-repeat 10px 5px;
                }
            
                div.mid_footer_box input.submit {
                    background: url('http://demo.shopgotyou.be/img/icon_submit.png') no-repeat 10px 5px;
                }
    
    div#low_footer {
        width: 950px;
        height: 64px;
        padding: 18px 0 0;
        margin: 0 auto;
    }


        #low_footer p.l {
            float: left;
            font: 11px/18px 'Arial';
            letter-spacing: 3px;
            color: #0d094a;
        }
        
            #low_footer p.l span {
                color: #9997b5;
            }
            
                #low_footer p.l span a:link, #low_footer p.l span a:active, #low_footer p.l span a:visited {
                    color: #9997b5;
                    text-decoration: none;
                }
                
                #low_footer p.l span a:hover {
                    text-decoration: underline;
                }
        
        #low_footer p.r {
            font: 11px/18px 'Arial';
            float: right;
            letter-spacing: 2px;
        }
            
            #low_footer p.r img {
                vertical-align: middle;
            }


.w80 {width: 80%;}

Toon Meer

Alvast bedankt voor het helpen.

Fitim

Post ook is je index.php?

A.Bijlsma

Ik denk eerder index.tpl, ik zal hem even posten moment.(zit nu op iPod vandaar)

Nieuwe reactie samengevoegd met originele reactie op 19.12.10 10:09:56:

PHP

<div id="content_mid">
			<h2>{$header.index_title|escape|stripslashes}</h2>
			<p class="textp">
				{$header.index_header|escape|stripslashes}
			</p>
			
<div class="content-col floatleft">
  <h2><u>Latest added products</u></h2><br /><br />
  {if $last_products}
  	{foreach from=$last_products item=product}
          <div class="products-item">
						<div class="content_box">
				<div class="content_box_t">
				<div class="content_box_b">
					<div class="content_box_img">
						<img src="{$product.image_path}" alt="Preview" />
					</div>
					
					<div class="content_box_text">
						<span class="price">&euro; {$product.product_price}</span>
						<p>
                <strong>{$product.product_title|escape|stripslashes}</strong><br />
                {$product.product_description|escape|stripslashes|nl2br} <br />
						</p>
						
						<p>
							<a href="view_product.php?id={$product.product_id}" class="moreinfo">More information</a>
							<a href="#" onclick="{$product.download_path}" class="download">Download</a>
						</p>
					</div>
				
					<div class="clear"></div>
				</div>
				</div>
			</div>
						</div>
  	{/foreach}
  {/if}
</div>
			


<div class="content-col floatright">
{if $random_products}
	{foreach from=$random_products item=product}
          <div class="products-item">
						<div class="content_box">
				<div class="content_box_t">
				<div class="content_box_b">
					<div class="content_box_img">
						<img src="{$product.image_path}" alt="Preview" />
					</div>
					
					<div class="content_box_text">
						<span class="price">&euro; {$product.product_price}</span>
						<p>
                <strong>{$product.product_title|escape|stripslashes}</strong><br />
                {$product.product_description|escape|stripslashes|nl2br} <br />
						</p>
						
						<p>
							<a href="view_product.php?id={$product.product_id}" class="moreinfo">More information</a>
							<a href="#" onclick="{$product.download_path}" class="download">Download</a>
						</p>
					</div>
				
					<div class="clear"></div>
				</div>
				</div>
			</div>
						</div>
	{/foreach}
{/if}
</div>

Toon Meer

jgdonleach

Ik heb even gekeken, maar op de demo site staat alles goed.

A.Bijlsma

Wat voor browser gebruik jij?
Zie je niet dat er een stukje plaatje uit het vak gaat?

Cas

PHP

div.content_box_img {
                float: left;
                padding: 5px 10px 0 5px;
                margin-top: 10px;
            }

Ik kan eventueel tegen betaling alle foutjes fixen.

A.Bijlsma

Opgelost bedankt Cas!:slotje:

ICTscripters

Dé plek voor IT

Dé plek voor IT

Crimora.nl

RPG game gebouwd met AI

(Verkoop) Criminals

Het Grote Vibe Code Topic

Ictscripters Chat

Het oorspronkelijke Criminals Script

StraatBaas is back, maar hoe?!

PWYL source gezocht

306 Nieuwe Domeinnamen Juni 2026

4-letter domein: Togi.nl

359 Nieuwe Domeinnamen Mei 2026

Plaatjes buiten het vak

Participate now!

Quanscient ontvangt €10M om AI- en kwantum-native hardware engineering te bevorderen - Tech.eu

Datalek bij leverancier Canvas - Universiteit van Amsterdam

Data privacy in 2026: Hoe de naleving van GDPR verandert

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Gebruikers die dit topic bekijken