DIV's/lay-out verspringt op groter scherm

Door Jasper Verelst op 15-10-2014 16:14 gewijzigd op 15-10-2014 16:16

1.972 views

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!


<!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>


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

Machiel K

15-10-2014 17:05

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

15-10-2014 18:47

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

15-10-2014 20:10

Als ik het goed heb, kun je door middel van onderstaand je "img" in het midden weer geven.

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

Machiel K

15-10-2014 20:26

Tadamtadam, zoiets bedoel je?

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

Frank Nietbelangrijk

15-10-2014 21:37 gewijzigd op 15-10-2014 21:42

zou het zo ook kunnen? http://codepen.io/anon/pen/FdDIb?editors=110


#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);
}


<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>

Jasper Verelst

16-10-2014 15:45

Het lijkt te lukken dankzij de hulp van jullie allen. Een dikke merci!

Reageren

Inloggen om te reageren