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

Meer tonen

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

Externe testers gezocht — Saphaxis AI Chat Organizer 0.1.59

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)

SEO Expired Domains for Sale | .COM, .ORG, .NET & Australian Domains | From $30

293 Nieuwe Domeinnamen Oktober 2026

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

Probleempje met slicing

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