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%;}

Meer tonen

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>

Meer tonen

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

nieuwe game

Criminolz

[Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

Crime Club volledig herschreven vanaf nul

Malavita (nieuwe maffia game, van 0)

Herkent deze Notion-structuurscan echte problemen?

[Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

[Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

[TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

Plaatjes buiten het vak

Registratie

PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

Functioneel ontwerp

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

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