Probleempje met slicing

MJorritsma · 27 September 2010

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 · 27 September 2010

PHP

margin: 0px auto;

MJorritsma · 27 September 2010

Hebben we al.

R.Jipping · 27 September 2010

stuur het stukje is wat je in het midden wil

MJorritsma · 27 September 2010

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

R.Jipping · 27 September 2010

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

Jannick · 27 September 2010

@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 · 27 September 2010

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 · 28 September 2010

[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 · 28 September 2010

haha heb ik gesliced :p :cheer:

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

MJorritsma · 28 September 2010

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

Jordy.S · 28 September 2010

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 · 28 September 2010

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 · 28 September 2010

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

Jordy.S · 28 September 2010

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 · 28 September 2010

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 · 28 September 2010

dan moet je je design verkleinen. Naar 960px

MJorritsma · 28 September 2010

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 · 28 September 2010

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%

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

Probleempje met slicing

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

Gebruikers die dit topic bekijken