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

Het Grote Vibe Code Topic

Ictscripters Chat

PWYL source gezocht

Help testers nodig voor android app Urgent

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

Afspraken systeem met planbeperking

Developer Gezocht

Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

370 Nieuwe Domeinnamen April 2026

Snel een website nodig?

Sicarras.com - Moderne Mafia Text-Based RPG

Plaatjes buiten het vak

Participate now!

Datalek bij leverancier Canvas - Universiteit van Amsterdam

Data privacy in 2026: Hoe de naleving van GDPR verandert

Tech.eu - Europees Start-up, Financiering en Technologienieuws

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