Div centreren

Status
Niet open voor verdere reacties.
M

motower

Gebruiker
Lid geworden
10 aug 2004
Berichten
472
Hallo, ik heb twee vragen waar ik niet uit kom, ook niet door het op internet op te zoeken, dus misschien dat er hier iemand is die het antwoord weet.

- ik wil graag een div centreren in een andere div. Dat lukt wel met een vaste breedte van bijvoorbeeld 1000p. en dan links en rechts de margin op auto zetten, maar ..... het geheel is responsive en ik wil dan de binnenste div een maximale breedte geven, zodat het niet al te breed wordt als je op een heel breed scherm bekijkt.
Voorbeeld http://mo-vormgeving.nl/Webdesign.html

- nogmaals een div centreren in een responsive pagina ..... hij blijft altijd links of rechts staan, wat ik ook probeer, maar ik zou 'm natuurlijk graag in het midden willen
Voorbeeld http://mo-vormgeving.nl/index2015.html
Ik had het idee dat het hier ergens veranderd moet worden, maar ook bij center gaat ie niet naar het midden :(

slideFade: "display: block; opacity: 1; top: 0; position: absolute; left: 0; overflow: hidden; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out;",
 
Laatst bewerkt:
Hoi motower. Wat gaat bij 1e linkje niet goed?

2e linkje wat ik zou doen:
.fluid = float left weghalen
.Photo = margin-left en right op auto zetten en een max-width van 1100px
Dan is div netjes in midden.

Wat bedoel je met laatste zin?
 
Hoi Damnsharp,

Bedankt voor je antwoord!

- Bij het eerste linkje http://mo-vormgeving.nl/Webdesign.html gaat het niet goed op het moment dat ik een maximale breedte aangeef, dan blijft ie links hangen en niet mooi in het midden

- Bij mijn tweede probleem (fading) heb ik ook al van alles geprobeerd, maar blijft ie ook links hangen. Als ik een gewone foto plaats (http://mo-vormgeving.nl/index-standaard.html), dan is ie wel mooi in het midden, dus zelf denk ik dat het dan aan de css van de 'fader' moet liggen dat ie niet in het midden komt. Maar zoals je al begrepen hebt is dit niet mijn sterkste kant ;)

Ik heb twee fading-versies ....
1. http://mo-vormgeving.nl/index2015.html
2. http://mo-vormgeving.nl/index2015-Slider.html
 
Hoi, heb je mijn ideetjes nog geprobeerd?

Ik krijg overigens nu 404 errors.
 
Ho... niet gek worden ;-) Schieten we niets mee op :)

op .fluid heb je weer een float: left; -> waarom? Die gooit het toch naar links...
 
Probeer eens volgende:

Code: 
.fluid {
    clear: both;
    display: block;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}
 
Geen idee, dat maakt Dreamweaver zelf aan, hihi.

Hmmmmm, nu lopen die andere div's niet meer door ....
 
Aanpassen met de Editor van Dreamweaver en style (CSS)?
 
Ja ik heb gedaan wat je zei, maar dan lopen die boven- en onderkant niet meer helemaal van links naar rechts, omdat er nu een max width staat. Als ik die weghaal dan lopen de balken door, maar springt de image weer naar links!

Heb net dees gemaakt .... met een gewone image en daar gaat het goed,

http://mo-vormgeving.nl/index-mid.html

dus het moet aan het script liggen denk ik dan. Maar ik heb hier gekeken en kan niets vinden :(
http://malsup.github.io/jquery.cycle2.js
 
Laatst bewerkt:
Ik zie het. Omdat header en footer ook een class .fluid hebben. Een nieuwe class aanmaken met andere waarden en toepassen op header/footer zou je kunnen doen.

Of redelijk onderaan CSS toevoegen:
Code: 
header.fluid {
    max-width: none !important;
}

en ook voor footer.

Maar wordt wat minder mooi denk ik in de code.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan