login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Positionering formulier en afbeelding bij verschillende schermgroottes

Offline jehaaan123 - 22/06/2011 22:27 (laatste wijziging 22/06/2011 23:50)
Avatar van jehaaan123Nieuw lid Hallo,

Ik ben redelijk nieuw in webdesign. Mijn probleem betreft volgende site: http://www.deblay.be/wedstrijd999

Ik heb een pagina met links een tabel met formulier en rechts een afbeelding. De bedoeling is dat deze beiden steeds, met een bepaalde marge tussen, mooi naast elkaar komen, en dit gecentreerd op de pagina. Hierbij wil ik vermijden dat bij aangepaste resolutie/schermgrootte de afbeelding voor of achter het formulier komt. Liever ook geen scrollbar --> afbeelding moet zich automatisch aanpassen.

Volgende code heb ik al, maar doet niet echt wat ik verwacht ....

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrapper {
  2.       margin:0 auto; 
  3.       position:relative;
  4. }
  5.  
  6. #formulier {
  7.       top: 300px;
  8.       left: 150px;
  9.       position: absolute;
  10.       z-index:1000;
  11. }
  12.  
  13. #foto {
  14.       top: 20px;
  15.       right: 150px;
  16.       position: absolute;
  17.       z-index:1;
  18. }


Kan iemand me tips geven?

Thx

Jehaaan

Edit Kevin: Je bbcodes stonden niet goed 

5 antwoorden

Gesponsorde links
Offline Kevin - 23/06/2011 00:01
Avatar van Kevin Crew Ajax/REST Je zou een 2 kolommenstructuur kunnen maken binnen je wrapper?

Voorbeeld:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrapper {
  2. width: 1024px;
  3. }
  4.  
  5. #formulier {
  6. position: relative;
  7. width: 400px;
  8. float: left;
  9. }
  10. #foto {
  11. position: relative;
  12. width: 600px;
  13. float: right;
  14. }
Offline keverineke - 23/06/2011 12:37
Avatar van keverineke Lid Je kan met divs werken, en deze verticaal en horizontaal cetreren...
Offline jehaaan123 - 02/07/2011 21:49 (laatste wijziging 04/07/2011 07:42)
Avatar van jehaaan123 Nieuw lid Onderstaande code was al een stap in de goeie richting, maar geeft toch nog een probleem in IE7 (Vista): de afbeelding http://www.deblay.be/wedstrijd/printscreen.jpg komt niet naast het formulier maar schuift helemaal omlaag waardoor je moet scrollen. Mss wordt deze CSS-code niet ondersteund in IE7? Kan dit opgelost worden?

Nogmaals bedankt! (Ook aan Kevin om mijn post opnieuw te openen!)

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #formulier {
  2.       width:46%;
  3.       height:100%;
  4.       float:left;
  5.       margin-top: 7%;
  6.       margin-left: 3%;
  7.       margin-right: 1%;
  8. } 
  9.  
  10. #foto {
  11.       width:46%;
  12.       height:100%;
  13.       float:right;
  14.       margin-top: 5%;
  15.       margin-right: 3%;
  16.       margin-left: 1%;
  17. }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="foto.png" alt="weegschaal" style="width:100%; height:auto;" />
Offline WouterJ - 04/07/2011 07:52
Avatar van WouterJ HTML gevorderde IE7 gaat denk ik in de war met die inline style die je hebt (dit moet je ook nooit doen!!)

Je zegt daar namelijk width: 100%; maar in je master stylesheet zeg je width 46%. Haal die inline style gewoon eens helemaal weg. En je hebt nergens id="foto" bij het plaatje. Zo weet de browser niet dat je me #foto die afbeelding bedoelt.
Offline jehaaan123 - 04/07/2011 14:09
Avatar van jehaaan123 Nieuw lid Hey Waldio,

Bedankt voor de reactie. Ik begrijp niet echt wat je bedoelt met 'inline' (tenzij je wrapper bedoelt, die stak er eerst in, maar die is er terug uit gehaald ...)

id = "foto" --> ok (had voor publicatie hier 'rechts' voor de duidelijkheid veranderd in 'foto').

css code - Bekijk de code zonder highlighting - Klap code in 
  1. /* CSS Document */
  2.  
  3. #links {
  4.       width:46%;
  5.       height:100%;
  6.       float:left;
  7.       margin-top: 7%;
  8.       margin-left: 3%;
  9.       margin-right: 1%;
  10. } 
  11.  
  12. #rechts {
  13.       width:46%;
  14.       height:100%;
  15.       float:right;
  16.       margin-top: 5%;
  17.       margin-right: 3%;
  18.       margin-left: 1%;
  19. }
  20.  
  21. #intro {
  22.       margin-left: 0.6%;
  23.       height:25%;
  24.       margin-top: 0%;
  25.       left: 53px;
  26.       font-size:x-large;
  27. } 
  28.  
  29. #wedstrijd {
  30.       margin-left: 0.6%;
  31.       height:25%;
  32.       margin-top: 0%;
  33.       left: 53px;
  34.       font-size:medium;
  35.       /*line-height: 0.4;*/
  36. }
  37.  
  38. #formulier {
  39.       height:50%;
  40.       margin-top: 0%;
  41.       left: 53px;
  42.       font-size:medium;
  43. }
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.177s