Plaatjes buiten het vak

A.Bijlsma · 19 December 2010

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 · 19 December 2010

Post ook is je index.php?

A.Bijlsma · 19 December 2010

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 · 19 December 2010

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

A.Bijlsma · 19 December 2010

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

Cas · 19 December 2010

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 · 19 December 2010

Opgelost bedankt Cas!:slotje:

DNS update Directadmin

Graag advies voor mijn website

Ik wil op afstand studeren, kennen jullie Tech?

PC probleem

Let op Vimexx klanten

wie kan mij helpen met Security aanscherpen voor nmijn website

Ik ben op zoek naar een goede hosting

App bouwer gezocht

Dating software

250 Nieuwe domeinnamen April 2024

Xenforo buckaroo plugin

Plaatjes buiten het vak

Participate now!

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Het Belang van Standaardisatie

De Revolutionaire Rol van IT in Alzheimeronderzoek

Functioneel ontwerp

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

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

Delen