DIV's/lay-out verspringt op groter scherm

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jasper Verelst

Jasper Verelst

15/10/2014 16:14:49
Quote Anchor link
Beste lezer

Ik ben een beginnend webdesigner en kamp momenteel met het volgende probleem waarop ik maar geen oplossing vind:

Ik maakte een website van zo'n 8 pagina's op mijn notebook met behulp van DIV's en andere gepositioneerde blocks en elementen. Wanneer ik de website upload naar de server en het resultaat bekijk op een groter scherm (breedbeeld), dan staan sommige elementen nog wel op hun plaats, maar heel wat elementen jammer genoeg niet meer.

Hieronder vind je de HTML en CSS van de index-pagina. Hier bijvoorbeeld staat het logo op mijn laptop in het midden van de pagina, maar op de laptop van mijn vriendin die een breedbeeldscherm heeft, niet meer.

Kan er iemand mij inzicht verschaffen?
Mss een klein beetje algemene uitleg over hoe het probleem ook in de toekomst aan te pakken of te vermijden?
Alvast bedankt!


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<link href="Stylesheet_index.css" rel="stylesheet" type="text/css">

<title>3D-architectuur_index</title>
</head>
<body>

  <div class="divlogo">
  <img src="Afbeeldingen/Logo3Dindex.jpg" alt="logo_3darchitectuur" width="600" height="350">
  </div>


<div>
<a href="HTML/3D-architectuur_Home.htm"  id="welkomstlink1">
ENTER SITE
</a>
</div>

<div>
<a href="HTML/3D-architectuur_Home.htm" id="welkomstlink2">
ENTER SITE
</a>
</div>


<div id="copyright">
&copy;&nbsp;3D - architectuur<br>
ir. architect Bart Baeken
</div>

<div id="linkJPopsdesign">
(website created by <a href="https://www.linkedin.com/profile/view?trk=tab_pro&locale=en_US&id=13219065" id="linkJPops" target="_blank">Jasper Verelst)</a>
</div>

</body>
</html>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
body {
background-size:100%;
width:100%;
height:100%;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
overflow:hidden; /* Al hetgeen de div overschrijdt kan je verbergen met hidden, is manier om scrolls weg te werken, je kan dus ook overflow:scroll zetten */

}


/*
#bodyindexpage:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
    }
    */

.divlogo {
overflow:hidden;
position:absolute; /* hier absoluut is tov de BODY, absolute kan ook tegenover een ander parent element waarin het in staat*/
width:100%;
height:100%; /* heel de DIV is nu hier heel de body */
top:25%;
left:20%;
margin-left:auto; /* margin is tov de box, niet de body*/
margin-right:auto;
bordercolor:;
border-width:;
border-style:;
border-radius:;
box-shadow:;
align:;
text-align:;
vertical align:;
line-height:px; /*is voor vertical align in box*/
}

/*

Deze hoeven niet
box-sizing:border-box;
border-box:5px solid;
background-color:#;
float:;

*/

/*

#divlogo:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

*/

#welkomstlink1:link {
position:absolute;
top:70%;
left:30%;
text-decoration:none;
z-index:1;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;


}


#welkomstlink2:link {
position:absolute;
top:70%;
left:62%;
text-decoration:none;
z-index:1;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;

}

/* Pas nodig wanneer de box niet meer de link is en wanneer de link apart moet worden behandeld

#welkomstlink:hover {
text-decoration:none;
color:black;
font-family:Arial;
-webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
font-family:"Helvetiva Neue Light", Calibri Light, Futura Bk;

}

*/

#welkomstlink1:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
    }

    
#welkomstlink2:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
    }

    
#welkomstlink1:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}

#welkomstlink2:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}

#welkomstlink1:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}


#welkomstlink2:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}


#copyright {
font-size:;
position:absolute;
top:86%;
left:42%;
z-index:;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;

}

#linkJPopsdesign {
position:absolute;
top:96%;
left:39%;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}

#linkJPops:link {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}

#linkJPops:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
    text-decoration:none;
    }

    
#linkJPops:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}

#linkJPops:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}



Alvast hartelijk dank op voorhand voor het bekijken van mijn bericht.

Groetjes

Jasper
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 15/10/2014 16:16:19 door - Ariën -
 
PHP hulp

PHP hulp

24/11/2024 11:13:50
 
Machiel K

Machiel K

15/10/2014 17:05:09
Quote Anchor link
Het is nogal lastig om nu te zien wat je eigenlijk wilt, hoe de posities van de divjes zijn. Zou je dit kunnen scheten in paint bijvoorbeeld? Dat maakt het ons makkelijker om je te helpen.

Je position: absolute is inderdaad goed, daarmee positioneer je elementen. Alleen positioneert hij nu vanaf je hele browser pagina. Vandaar dat, zeker de percentages ervoor zorgen dat de lay-out er op een groter scherm anders uit zal zien.

Wat je het beste kan doen, is een container div maken en deze de eigenschap position: relative meegeven. Dan zorg je dat alles gepositioneerd zal worden binnen deze container. De container moet je uiteraard dan wel een breedte en hoogte meegeven.

Het schetsje zou fijn zijn. Dan kunnen we je écht verder op weg helpen.
 
Jasper Verelst

Jasper Verelst

15/10/2014 18:47:25
Quote Anchor link
Ik heb de pagina online gezet, kan je zo ook verder? De pagina vind je hier:

www.3darchitectuur.be

Alles zou dus ongeveer in het midden van het venster moeten staan.


Bedoel je verder om één overkoepelende container DIV te maken en alle elementen van de pagina daarnaar absoluut te positioneren?

Geef ik die container een width van 100%?

Groetjes en bedankt alvast!
 
P R

P R

15/10/2014 20:10:52
Quote Anchor link
Als ik het goed heb, kun je door middel van onderstaand je "img" in het midden weer geven.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<img src="image-sample.jpg" alt="image" class="center" />
 
Machiel K

Machiel K

15/10/2014 20:26:42
Quote Anchor link
Tadamtadam, zoiets bedoel je?

http://codepen.io/anon/pen/dtcxb
 
Frank Nietbelangrijk

Frank Nietbelangrijk

15/10/2014 21:37:35
Quote Anchor link
zou het zo ook kunnen? http://codepen.io/anon/pen/FdDIb?editors=110

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#container
{
  width:600px;
  margin:0 auto;
  margin-top:50px;
  
  /* for testing */
  background-color:blue;
  padding:20px;
}

.enter
{
  float:left;
  width:100px;
  margin:20px 100px;
  text-align:center;

  /* for testing */
  background-color:red;
}

.enter a {
  display:block;
  font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
  text-decoration:none;
  color:#979595;
}
.enter:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.clear {
  clear:both;
}

#copyright {
  font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
  color:#979595;
  text-align:center;

  /* for testing */
  background-color:purple;
}

#copyright div {
  margin:0 auto;
  margin-top:40px;
  width:234px;

  /* for testing */
  background-color:red;
}

#copyright div a {
  font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
  color:#979595;
  text-decoration:none;
}

#copyright div:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="container">

  <img src="http://www.3darchitectuur.be/Afbeeldingen/Logo3Dindex.jpg" alt="logo_3darchitectuur" width="600" height="350">

  <div class="enter">
    <a href="HTML/3D-architectuur_Home.htm">ENTER SITE</a>
  </div>

  <div class="enter">
    <a href="HTML/3D-architectuur_Home.htm">ENTER SITE</a>
  </div>

  <div class="clear">

  <div id="copyright">
    &copy;&nbsp;3D - architectuur<br>
    ir. architect Bart Baeken<br>

    <div>
        <a href="https://www.linkedin.com/profile/view?trk=tab_pro&locale=en_US&id=13219065" target="_blank">
            (website created by Jasper Verelst)
        </a>
    </div>
  </div>

</div>
Gewijzigd op 15/10/2014 21:42:45 door Frank Nietbelangrijk
 
Jasper Verelst

Jasper Verelst

16/10/2014 15:45:59
Quote Anchor link
Het lijkt te lukken dankzij de hulp van jullie allen. Een dikke merci!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.