Probleempje met slicing

MJorritsma

Beste,

Er is een probleempje met de slicing van mijn website. Ik wil dat de layout in het midden van het scherm komt zodat iedereen (ook mensen met 1024 px beeldscherm) het kan zien. Nu is het een vaste afstand vanaf de zijkant:

http://tinyurl.com/34jzabw

Graag hulp hiervoor.

BVD

R.Jipping

PHP

margin: 0px auto;

MJorritsma

Hebben we al.

R.Jipping

stuur het stukje is wat je in het midden wil

MJorritsma

http://mjorritsma.nl/E0001/index.png
(het moet zo worden: http://mjorritsma.nl/E0001/index.html )

R.Jipping

Eigenlijk bedoelde ik het stukje css. Zie prive bericht voor mogelijke oplossing;)

Jannick

@RiiCky Waarom niet hier delen? Nogal vreemd; het idee van een forum gaat hierbij nogal verloren.

Xreativ, ken je Firebug? Zo ja, heb je het daar al eens mee geprobeerd? Gaat sneller dan steeds bestand aanpassen etc. Dan bewerk je het live vanuit je browser (mits je Firefox gebruikt).

MJorritsma

Dit is de style:

PHP

body 
    {
        width: 947px;
        background: #ffffff url('images/achtergrond.png') repeat;
        margin: 0px auto;
        width: 100%;
    }
    
div#header
        { 
            background-image: url('images/header.png'); 
            background-repeat: no-repeat; 
            width: 772px; 
            height: 278px; 
        margin-top: 0px;
        margin-left: 342px;
        position:absolute;
        z-index: -1;
        }
        
div#good
        { 
            background-image: url('images/hehe.png'); 
            background-repeat: repeat-x; 
            width: 938px; 
            height: 550px; 
        margin-top: 0px;
        margin-left: 342px;
        position:absolute;
        z-index: -1;
        }
    
div#naam
    {
        color: #ffffff;
        font-family: Shruti;
        font-size: 200px; 
        padding-left: 165px;
            width: 30px;
        padding-top: 50px;
    }
    
div#achter
    {
        color: #ffffff;
        font-family: Shruti;
        font-size: 100px; 
        margin-top: -243px;
        padding-left: 410px;
        position:absolute;
    }
    
div#slogan
    {
        color: #ffffff;
        font-family: Verdana;
        font-size: 20px; 
        margin-top: -155px;
        padding-left: 739px;
        width: 500px;
        position:absolute;
    }
    
div#boven
        { 
            background-image: url('images/balk.png'); 
            background-repeat: repeat-x; 
            height: 8px;
        margin-top: -134px;
        }
    
div#voorbeelden
    {
        background-color:#ffffff; 
        background-repeat: repeat-x; 
        height: 205px;
        min-width: 100%;
        width: 100%;
        margin-top: -3px;
    }
    
div#voorbeeld1
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -198px;
        margin-left: 171px;
    }


div#voorbeeld2
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 276px;
    }
    
div#voorbeeld3
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 381px;
    }


div#voorbeeld4
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 486px;
    }
    
div#voorbeeld5
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 591px;
    }
    
div#voorbeeld6
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 696px;
    }
    
div#voorbeeld7
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 801px;
    }
    
div#voorbeeld8
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 906px;
    }
    
div#voorbeeld9
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 1011px;
    }
    
div#voorbeeld10
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: 8px;
        margin-left: 171px;
    }
    
div#voorbeeld11
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 276px;
    }
    
div#voorbeeld12
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 381px;
    }


div#voorbeeld13
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 486px;
    }
    
div#voorbeeld14
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 591px;
    }
    
div#voorbeeld15
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 696px;
    }


div#voorbeeld16
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 801px;
    }
    
div#voorbeeld17
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 906px;
    }
    
div#voorbeeld18
    {
        background-image: url('images/voorbeeld.png'); 
        background-repeat: no-repeat; 
        height: 82px;
        width: 86px;
        border-style:solid;
        border-width:5px;
        border-color:#0078ff;
        margin-top: -92px;
        margin-left: 1011px;
    }
    
div#onder
    { 
        background-image: url('images/balk.png'); 
        background-repeat: repeat-x; 
        height: 5px;
        margin-top: 6px;
    }


div#footerbasis
    {
        color: #77adff;
        margin-left: 176px;
        margin-top: -11px;
    }
    
div#footer
    {
        color: #ffffff;
        font-family: Verdana;
        font-size: 9px; 
        line-height: 15px;
        margin-left: 180px;
        margin-top: 1px;
    }
    
div#email
    {
        color: #77adff;
        font-family: Verdana;
        font-size: 9px; 
        font-weight:bold;
    }

Toon Meer

Axl_H

[offtopic]Weer een nice work van je:D[/offtopic]

Ik zie met de resolutie: 1280 x 1024 het perfect, voor de lagere: misschien dit: padding: -8px -8px 0px 0px
dit moet in de style tag van de body

sander

haha heb ik gesliced :p :cheer:

ik zag het probleem zelf ook niet bij 1280 x 1024...

MJorritsma

Maar, moet je dan niet naar de zijkant scrollen om de pagina goed te zien?

Jordy.S

Ik denk het niet als ze zeggen dat ze het prima zien;)

ik zie het niet prima bij mij is het naar links uitgeleind mijn resolutie:

1680x1050

MJorritsma

Klopt, dat heb ik zelf ook.
Maar ik heb mijn resolutie naar 1024 gezet en dan past het niet volledig in het scherm (iets te breed) terwijl de breedte van mijn design gewoon 1000px is.

jgdonleach

Ik heb ook resolutie 1024px, maar ik zie hem goed. Welke browser gebruik je dan?

Jordy.S

Eventjes getest.

En ik denk als je IE gebruikt dat er een bug erin zit.

want heb effe getest in in Firefox deed hij het ook prima :$

MJorritsma

Jullie snappen denk ik het probleem niet.
Als je 1024 hebt moet je naar rechts scrollen omdat niet alles op de pagina past, dat wil ik niet.

Luc

dan moet je je design verkleinen. Naar 960px

MJorritsma

Niet nodig.
Ik heb altijd mijn designs op 1000px gedesigned, en tot nu toe is het altijd mogelijk geweest voor mensen met een 1024 beeldscherm om mijn sites goed te zien.

Maar wie heeft nou een oplossing voor dit probleem?

W0utR

Steek alles gewoon in 1 div, geef hem de breedte van je design en daarop: margin-left: auto;
margin-right: auto;

oh, en je body moet natuurlijk een breedte hebben van 100%

ICTscripters

Dé plek voor IT

Dé plek voor IT

Beta-testers gezocht voor Crypto-oefenplatform

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

Developer Gezocht

Op zoek naar de legends

[FREE] WeFact Hosting module

Help testers nodig voor android app Urgent

Versio vervanger

Afspraken systeem met planbeperking

350 Nieuwe Domeinnamen Januari 2026

321 Nieuwe Domeinnamen December 2025

Meerdere mafia game template te koop

Probleempje met slicing

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

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

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