login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Divs - resolutie juist uitlijnen (Opgelost)

Offline rredspike1 - 22/08/2008 12:52
Avatar van rredspike1Lid Hoe kan je per resolutie de divs goed blijven uitlijnen

ik had een aantal divs gemaakt op een resolutie van 1440 x 900
maar nu verander ik de resolutie naar 1024 x 768 en nu geeft de browser de divs niet goed weer... wat te doen?

14 antwoorden

Gesponsorde links
Offline Abbas - 22/08/2008 12:53
Avatar van Abbas Gouden medaille

Crew .NET		 Met procentuele breedte werken. Zo verandert de grootte van de div dynamisch mee met de schermresolutie. 
Offline kickasgamer - 22/08/2008 12:59
Avatar van kickasgamer PHP ver gevorderde ja het doen zoals titjes zegt, of een standaard container rond alle divs gooien met hoogte bv 768 en breedte 1024 dan is die altijd goed voor die resolutie
Offline rredspike1 - 22/08/2008 13:07 (laatste wijziging 22/08/2008 13:31)
Avatar van rredspike1 Lid
titjes schreef:
Met procentuele breedte werken. Zo verandert de grootte van de div dynamisch mee met de schermresolutie. 


Kan je een voorbeeld geven?
Heb zelf dit, kan iemand mij helpen hierbij?
bedankt
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#login {
  2. position: absolute;
  3. margin-left: 1.5%;
  4. margin-top: -10px;
  5. width: 500px;
  6. height: 33px;
  7. font-family: tahoma;
  8. font-size: 10px;
  9. font-weight: bold;
  10. color: #ffffff;
  11. z-index: 1;
  12. }
Offline Abbas - 22/08/2008 13:33
Avatar van Abbas Gouden medaille

Crew .NET
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#login {
  2. position: absolute;
  3. margin-left: 1.5%;
  4. margin-top: -10px;
  5. width: 75%;
  6. height: 33px;
  7. font-family: tahoma;
  8. font-size: 10px;
  9. font-weight: bold;
  10. color: #ffffff;
  11. z-index: 1;
  12. }

Kijk naar de regel van de "width". Ik ben geen CSS-expert maar ik weet dat het in ieder geval werkt als je de breedte meegeeft in de div-tag zelf dus normaal moet het zo ook werken. Zo is het als je het rechtstreeks meegeeft (simpel voorgesteld):
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div width="75%" id="blaat" />
Offline rredspike1 - 22/08/2008 13:46 (laatste wijziging 22/08/2008 14:02)
Avatar van rredspike1 Lid Maar als ik dat doe met 75% dan krijg ik een scrollbalk onderin..dat is niet de bedoeling..

Dan kan ik wel gaan zeggen van:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. overflow-x: hidden;
  3. }

maar ja eigenlijk hoort dat niet zo ... iemand een idee?
Offline Abbas - 22/08/2008 13:52
Avatar van Abbas Gouden medaille

Crew .NET		 Dan gebruik je:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. overflow: hidden;

In de tag:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div width="75%" id="blaat" overflow="hidden" />

Maar pas op als je dit gebruikt. Als iemand je pagina bekijkt met en lagere resolutie kan hij niet alle content zien misschien en kan hij er ook niet naar scrollen.
Offline rredspike1 - 22/08/2008 14:05
Avatar van rredspike1 Lid Dat heb ik gedaan, maar stel dat ik de resolutie zet op 800 x 600 (wat misschien sporadisch voorkomt, dat iemand dat doet).

Dan behoud ik een scrollbalk van 75% scroll.
Zet ik;

overflow-x: hidden;

erin dan heb ik helemaal geen scrollbalk meer ....en kan ik niet meer bij de login komen...hahaha heel vaag allemaal

---------------------

Waarom moet dat 75% zijn eigenlijk
Offline Abbas - 22/08/2008 15:01 (laatste wijziging 22/08/2008 15:02)
Avatar van Abbas Gouden medaille

Crew .NET
Citaat:
Maar als ik dat doe met 75% dan krijg ik een scrollbalk onderin..dat is niet de bedoeling..
Je wil dus geen scrollbalk.
Citaat:
erin dan heb ik helemaal geen scrollbalk meer ....
Nu wil je hem dus wel?!?! 
Citaat:
Waarom moet dat 75% zijn eigenlijk
Moet niet perse 75 zijn, dat kies je zelf. Die 75 was maar een voorbeeld! 
Offline kickasgamer - 22/08/2008 15:40
Avatar van kickasgamer PHP ver gevorderde ja maximaal is 100% (die gebruik je voor je container) en dan alle andere div's stel je zo in dat de totale breedte 100% is 
Offline rredspike1 - 23/08/2008 01:05 (laatste wijziging 23/08/2008 02:47)
Avatar van rredspike1 Lid Weet je wat ik maak de site gewoon in 2 resoluties!

1024 x 768
1280 x 1024

--------------- @ titjes ---------------
Ik wil eigenlijk geen scrollbalk, maar dat alles netjes op de site past.
ik zei van wel, maar ik wil het niet... dit kwam omdat ik op 2 gedachtens hinkte...

----------------------------------------

Hoe bedoel je met container 100%?

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#container {
  2. position: relative;
  3. width: 100%;
  4. height: 100px;
  5. }


maar wat pakt die dan 100%?
de plaatjes of de resolutie?

titjes schreef:
CODETAGS gebruiken!!!
Offline Abbas - 23/08/2008 02:48
Avatar van Abbas Gouden medaille

Crew .NET
Citaat:
maar wat pakt die dan 100%?
de plaatjes of de resolutie?
De resolutie. Als je bijvoorbeeld 50% gebruikt op een resolutie van 1024 pixels breed, zal de div 512 pixels breed zijn.
Offline rredspike1 - 23/08/2008 03:34
Avatar van rredspike1 Lid en pakt die het dan centraal of links uitgelijnd?
Offline JBke - 23/08/2008 08:20
Avatar van JBke PHP gevorderde maak eerst een grote div, je kan eventueel een scriptje maken dat de resolutie van het scherm opvraagt:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. // <![CDATA[
  3.     if ((screen.width>=1024) && (screen.height>=768)) {
  4.         window.location="highres.html";
  5.     } else {
  6.         window.location="lowres.html";
  7.     }
  8. // ]]>
  9. </script>


Dan kan je je eerste div, oftewel je base_container ook bvb met jquery of javascript percentueel aanpassen. De child divjes maak je relative en in % zodat deze ten opzichte van de base_container mee zullen verkleinen indien die verkleind of vergroot.

Wat je ook kan doen is een andere css inladen naargelang de resolutie.

Oplossing: je kan het vis css of via een beetje te scripten.
Offline rredspike1 - 25/08/2008 01:17
Avatar van rredspike1 Lid bedankt!

Zal eens wat gaan proberen
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.199s