[CSS] Centreren/Uitrekken

dinsdag 20 oktober 2009 01:17

Acties:

0 Henk 'm!

Topicstarter

Probeer al een tijdje mijn script/css gecentreerd/uitrekkend te krijgen (op iedere resolutie vanaf 1024 * 768).
De bedoeling is dat het "window" uitrekt bij een grotere resolutie maar wel gecentreerd blijft.
Hier een voorbeeld van wat ik nu krijg te zien bij verschillende resoluties:

1600 * 1200
1280 * 1078
1024 * 768

CSS bestand:

code:

div.window, table.windowLogin {
    margin-left: 195px;
    width: 800px;
    background-color: #101010;
    border: solid #600000;
    border-left-color: #202020;
    border-right-color: #202020;
    border-width: 4px 2px 4px 2px;
    text-align: left;
}

Script:

code:

1
2
3

<div class="window">
<div class="mainTitle">123</div>
<div class="mainText">

Iemand een idee hoe ik dit probleem kan oplossen?

dinsdag 20 oktober 2009 01:22

Acties:

0 Henk 'm!

Wiethoofd

Broadcast TOM

Wat als je je middelste venster een margin-left:auto; en een margin-right:auto; meegeeft, dan zou deze in het midden moeten blijven staan.

Verder schetsen wat de bedoeling moet zijn of duidelijker beschrijven wat je wilt kan ook veel dubbele antwoorden en oplossingen of vragen voorkomen.

Volg me op Twitter/X & Bluesky

dinsdag 20 oktober 2009 01:24

Acties:

0 Henk 'm!

hellfighter87

max-width al geprobeert

?
max-width: 50% pakt altijd 50% van de scherm resolutie bijvoorbeeld

dinsdag 20 oktober 2009 01:25

Acties:

0 Henk 'm!

kaesve

wat dacht je van een relatieve waarde geven voor de breedte? dan kun je hem in het midden houden door hem absoluut te positioneren en wat te spelen met margin-left/right en left/right en nog meer relatieve waarden. zou niet al te moeilijk zijn.. alhoewel je dan niet een minimun resolutie hebt. dat zou je evt kunnen oplossen met javascript, al vind ik het vrij lelijk :0

dinsdag 20 oktober 2009 01:30

Acties:

0 Henk 'm!

Verwijderd

En zoiets?

code:

<body>
  <div id="container" style="width: 60%; margin: 0 auto;">
    Hier je content...
  </div>
</body>

Minimumresolutie kun je oplossen door onderaan een lege div te plaatsen met een vaste breedte. Geen nette oplossing, maar beter dan vieze JS

[ Voor 37% gewijzigd door Verwijderd op 20-10-2009 01:32 ]

dinsdag 20 oktober 2009 01:40

Acties:

0 Henk 'm!

sdevos13

Topicstarter

- wiethoofd:
margin-left: auto; en margin-right: auto; werkt niet. "window" moet uitrekken bij hogere resolutie, maar moet bijv op 20 pixels gecentreerd blijfen van links/rechts.

- hellfighter87:
max-width: 50%; gaat hem niet worden. want alleen de groote van het "window" moet uitrekken, en op deze manier wordt dat beperkt en is hij bij elke resolutie anders gecentreerd.

- kaesve:
snap niet helemaal wat je bedoelt, heb je misschien een klein voorbeeldje??

- tjetta:
dacht ik eerst ookaan. maar het totale script bestaat uit zo'n 106 php bestanden. om die nou allemaal op te gaan zetten

Bedankt voor de zeer snelle reactie's

[edit]
Hier (indien nodig) het volledige css bestand.

[ Voor 7% gewijzigd door sdevos13 op 20-10-2009 01:56 ]

dinsdag 20 oktober 2009 01:45

Acties:

0 Henk 'm!

Wiethoofd

Broadcast TOM

sdevos13 schreef op dinsdag 20 oktober 2009 @ 01:40:
- wiethoofd:
margin-left: auto; en margin-right: auto; werkt niet. "window" moet uitrekken bij hogere resolutie, maar moet bijv op 20 pixels gecentreerd blijfen van links/rechts.

Cascading Stylesheet:

window {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}

Heb je je ruimte links en rechts er bij

- hellfighter87:
max-width: 50%; gaat hem niet worden. want alleen de groote van het "window" moet uitrekken, en op deze manier wordt dat beperkt en is hij bij elke resolutie anders gecentreerd.

Het blijft op elke resolutie precies de helft van het venster

Volg me op Twitter/X & Bluesky

dinsdag 20 oktober 2009 01:48

Acties:

0 Henk 'm!

Verwijderd

sdevos13 schreef op dinsdag 20 oktober 2009 @ 01:40:
dacht ik eerst ookaan. maar het totale script bestaat uit zo'n 106 php bestanden. om die nou allemaal op te gaan zetten

Dan moet je echt eens gaan nadenken waar je mee bezig bent... De kracht van een scripttaal als PHP is juist de mogelijkheid om het 'Do-not-repeat-yourself' principe toe te passen. Alles wat op meerdere locaties terugkomt, op één locatie onderbrengen en verder includen.

Of ben jij ook zo iemand die pagina_1.php, pagina_2.php, pagina_3.php heeft ipv pagina.php?content_id=... ?

dinsdag 20 oktober 2009 01:55

Acties:

0 Henk 'm!

sdevos13

Topicstarter

- Wiethoofd:
margin-left: auto; margin-right: auto; doen opnieuw niks en padding-left: 20px; padding-right: 20px; zetten alleen de zijkant weg van het "window" zelf (brengt kleurverschil mee en verpest de layout

)
zal neg wel even met max-width: 50% aan de slag gaan;)

- tjetta:
includen is geen probleem, en ik haat page_1, 2, 3 enz. maar als het gewoon in de css kan aangepast worden ga ik liever niet 106 php bestanden aanpassen.

[edit]
Nog even naar max-width: 50%; gekeken, dit is 50% van het venster. Niet van de resolutie, dus of ik nou de resolutie 1024 * 768 heb of de resolutie 1600 * 1200, het venster blijft even groot en rechts daarvan ontstaat meer "lege" ruimte.

[ Voor 22% gewijzigd door sdevos13 op 20-10-2009 02:02 ]

dinsdag 20 oktober 2009 02:28

Acties:

0 Henk 'm!

sdevos13

Topicstarter

Heb op dit topic best iets interessants gevonden.

code:

#content {
    float: left;
    width: 518px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fff;
}

Nu alleen nog zorgen dat de kleuren overeenkomen en dat hij 100% gecentreed blijft op iedere resolutie.
Bedankt voor jullie hulp. Topic kan gesloten worden! Als het toch niet gaat lukken maak ik wel weer een nieuw topic aan

dinsdag 20 oktober 2009 09:25

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 20 oktober 2009 09:46

Acties:

0 Henk 'm!

Verwijderd

offtopic: Waar heb je die lay-out vandaan? Want dat is een exacte kopie van een mafia spel wat ik ooit weggegeven heb

dinsdag 20 oktober 2009 09:58

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

sdevos13 schreef op dinsdag 20 oktober 2009 @ 01:55:
includen is geen probleem, en ik haat page_1, 2, 3 enz. maar als het gewoon in de css kan aangepast worden ga ik liever niet 106 php bestanden aanpassen.

Ga je dan eens inlezen in templates. Als jij voor een basisaanpassing aan je layout alle 106 php files moet aanpassen heb je al iets fout gedaan.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 20 oktober 2009 11:27

Acties:

0 Henk 'm!

mcDavid

sdevos13 schreef op dinsdag 20 oktober 2009 @ 02:28:
Heb op dit topic best iets interessants gevonden.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
#content {
    float: left;
    width: 518px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #a9a9a9;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #a9a9a9;
    background-color: #fff;
}
Nu alleen nog zorgen dat de kleuren overeenkomen en dat hij 100% gecentreed blijft op iedere resolutie.
Bedankt voor jullie hulp. Topic kan gesloten worden! Als het toch niet gaat lukken maak ik wel weer een nieuw topic aan

Google eens op "shorthand css"

dinsdag 20 oktober 2009 11:32

Acties:

0 Henk 'm!

RaZ

Funky Cold Medina

Ik vind het op z'n minst een rare redenatie dat je een site wil maken op basis van de resolutie van het scherm, ipv het venster.

Want als ik dualscreen zit (2048x768) en m'n browser op 1024 breedte heb staan, krijg ik dus maar 50% te zien, en een horizontale scrollbalk... Lijkt me verre van wenselijk, en ik zou zulke sites links laten liggen.

Moraal: niet iedereen browsed full-screen

[ Voor 6% gewijzigd door RaZ op 20-10-2009 11:33 ]

Ey!! Macarena \o/

dinsdag 20 oktober 2009 15:10

Acties:

0 Henk 'm!

sdevos13

Topicstarter

Dit script heb ik ergens op een forum gezien. Momenteel ben ik functies aan het veranderen/verwijderen en toevoegen aan het script. Je kunt het nu online vinden op mijn site.

Pagina: 1

Reageer

Onderwerpen