ebsite centreren in DW CS %

csshunter · 7 apr 2011

@grumbkow:

CSSHunter, dit is niet helemaal correct. De ApDivs hebben een Absolute Positie ten opzichte van de parent wat nu een relatieve div is. Heb dit op mijn localhost net allemaal getest en bij mij werkt het gewoon.

Ja, ik zat een beetje scheef...

Maar wat in de pagina van Jeroen nog scheef zit, is de breedte van de container. Die is maar 780px breed, terwijl de inhoud (bv. het logo) veel breder is.

Zie deze: test-apDiv1.htm

Als de container net zo breed wordt gemaakt als de maximale breedte van de inhoud, gaat het wel goed. Dan kan ook de {left: ..px;} gemist worden (maar dat hoeft niet persé, als de container nog wat groter wordt gemaakt; maar daar zie ik het nut niet van in).

Zie deze: test-apDiv2.htm

Met vriendelijke groet,
CSShunter

grumbkow · 7 apr 2011

csshunter zei:
@grumbkow:

Ja, ik zat een beetje scheef...

Maar wat in de pagina van Jeroen nog scheef zit, is de breedte van de container. Die is maar 780px breed, terwijl de inhoud (bv. het logo) veel breder is.

Zie deze: test-apDiv1.htm

Als de container net zo breed wordt gemaakt als de maximale breedte van de inhoud, gaat het wel goed. Dan kan ook de {left: ..px;} gemist worden (maar dat hoeft niet persé, als de container nog wat groter wordt gemaakt; maar daar zie ik het nut niet van in).

Zie deze: test-apDiv2.htm

Met vriendelijke groet,
CSShunter

Ah kijk, ik ging er klakkeloos van uit dat de 780px correct waren.
Zo helpen we elkaar allemaal =)

uaejeroen · 8 apr 2011

U heeft gelijk, ik wil de site breedte 780 px, uiteraad wordt het logo ook zogroot, mijn excuses ik zal vandaag verder gaat met de code die hier gegeven is

Vr groet jeroen

uaejeroen · 8 apr 2011

Weer mislukt

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"></style>
<link href="stylesheet/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head>
<style type="text/css">
#container { 
	position: relative;
    width: 780px;
    margin: 0 auto;
	border: 1px solid green;
}
 
#apDiv1 {
	position:absolute;
	top:4px;
	z-index:1;
	border: 1px solid red;
	overflow: hidden;
	}
 
#apDiv2 {
	position:absolute;
	top:122px;
	width:200px;
	height:465px;
	z-index:2;
	border: 1px solid blue;
	}
 
#apDiv3 {
	position:absolute;
	left:936px;
	top:121px;
	width:165px;
	height:465px;
	z-index:3;
	border: 1px solid fuchsia;
	}
</style>


<body>
<div class="container"> 
<div id="apDiv1"><a href="index.php"><img src="afbeeldingen/logo_energynet.gif" width="1099" height="112" alt="Home" /></a></div>
<div id="apDiv2">
  <p><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=algemene_informatie">Algemene informatie</a><br />
    <a href="index.php?p=tarieven">Tarieven</a><br />
    <a href="index.php?p=pakketen">Pakketten</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=service">Service en onderhoud</a><br />
    <a href="index.php?p=energyservice">EnergyService</a><br />
    <a href="index.php?p=product">Productadvies</a><br />
    <a href="index.php?p=besparingtips">Besparingstips</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=vraagentwoord">Vraag en antwoord</a><br />
    <a href="index.php?p=mail">Per e-mail</a><br />
    <a href="index.php?p=chat">Via chat</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=gegevens">Uw gegevens</a><br />
    <a href="index.php?p=nota">Nota en verbruik</a><br />
    <a href="index.php?p=meterstanden">Meterstanden doorgeven</a><br />
  <a href="index.php?p=verhuizing_doorgeven">Verhuizing doorgeven</a></p>
</div>
<div id="apDiv3">
  <p><img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=verhuizing_doorgeven">Verhuizen, wat nu?</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=besparingtips">Besparingstips</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=klantenservice">Klantenservice</a></p>
  <p>&nbsp;</p>
  <form id="form1" name="form1" method="post" action="">
    <label for="e-mail"></label>
    e-mailadres   :<br />
    <label for="e-mail2"></label>
    <input type="text" name="e-mail" id="e-mail2" />
    <br />
    wachtwoord: <br />
    <label for="wachtwoord"></label>
    <input type="text" name="wachtwoord" id="wachtwoord" />
<br />
  <em>Controleer uw gegevens</em>
  </form>
</div>
<div id="apDiv4">

<?php
if (isset($_GET['p'])) {
$includebstandtemp = $_GET['p'];
if (is_file($_GET['p'] . '.html')) {
$includebstand = ''.$includebstandtemp.'.html';
}
}
else {
$includebstand = '';
}
if (!empty($includebstand)) {
include($includebstand);
}
?>

<?php if (!isset($_GET['p'])) { ?>
<h1>Welkomstvenster</h1>
<p>Welkom bij de Online HelpDesk van EnergyNet<br />
  U vraagt, wij antwoorden<br />
  Op deze Online HelpDesk kunt u vragen  stellen omtrent de tarieven en de pakketten die wij aanbieden.<br />
  Beheer uw eigen gegevens<br />
  Wilt u op de hoogte blijven van uw  verbruik, uw nota inzien, een verhuizing of de meterstanden doorgeven? Dat kan  met uw eigen e-mailadres en wachtwoord. Als u nieuw bent, vult u eenmalig een  registratieformulier in.</p>
<?php } ?>

</div>
</div>
</body>
</html>

ik heb een 17 inch beeldscherm zou dat uit mogen maken?
moet ik nu mijn css ook aanpassen?

Code:

@charset "utf-8";

.text {
	text-align: center;
	font-style: normal;
}
.text {
	text-align: center;
}
.text {
	text-align: left;
}
.Title {
	text-align: left;
}
.tekst {
	text-align: left;
}
a:link {
	color: #90F;
}
a:visited {
	color: #666;
}
a:hover {
	font-style: italic;
	color: #22FF22;
    }
a:focus {
	font-style: italic;
	color: #22FF22;
    }
.e-mail {
	color: #696969;
}

#apDiv2 {background: #ffffff;}
#apDiv2 {
 position:absolute;
 left:32px;
 top:117px;
 width:206px;
 height:468px;
 z-index:2;
}
#apDiv2 {
	position:absolute;
	left:22px;
	top:124px;
	width:206px;
	height:468px;
	z-index:2;
}


#apDiv3 {background: #ffffff;}
#apDiv3 {
 position:absolute;
 left:885px;
 top:117px;
 width:241px;
 height:400px;
 z-index:3;
}
#apDiv3 {
	position:absolute;
	left:875px;
	top:122px;
	width:241px;
	height:400px;
	z-index:3;
	color: #F00;
}


#apDiv4 {background: #ffffff;} #apDiv4 {
 position:absolute;
 left:238px;
 top:114px;
 width:645px;
 height:471px;
 z-index:4;
}
#apDiv4 {
	position:absolute;
	left:240px;
	top:115px;
	width:645px;
	height:471px;
	z-index:4;
}


#apDiv1 {
 position:absolute;
 left:32px;
 top:4px;
 width:1095px;
 height:111px;
 z-index:1;
}
#apDiv1 {
 position:absolute;
 left:32px;
 top:4px;
 width:1095px;
 height:111px;
 z-index:1;
}

.Waarschuwing {
}
.Waarschuwing {
}

#Waarschuwing {
	font-family: "Arial Black", Gadget, sans-serif;
}
#Waarschuwing {
	font-family: "Arial Black", Gadget, sans-serif;
}

.background {
	background-image: url(/afbeeldingen/groen-wit.gif);
	background-repeat: repeat;
}
#apDiv3 #form1 {
	color: #F0F;
}
#apDiv3 #form1 {
	color: #90F;
}

#apDiv1 {
	position:absolute;
	left:30px;
	top:-5px;
	width:1071px;
	height:116px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	left:31px;
	top:114px;
	width:258px;
	height:468px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:935px;
	top:115px;
	width:200px;
	height:468px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:232px;
	top:124px;
	width:702px;
	height:465px;
	z-index:4;
}
#apDiv9 {
	position:absolute;
	left:11px;
	top:-17px;
	width:780px;
	height:641px;
	z-index:5;
}
body {
	margin-left: auto;
	margin-right: auto;
	background-image: url(../afbeeldingen/groen-wit.gif);
	background-repeat: repeat;
	width: auto;
	background-position: center center;
	height: auto;
}

#container {
	position: relative;
}
div.box
{
background-color: #424242;  /* de achtergrond kleur */
width: 780px;  /* de breedte van de pagina */
margin-left: auto;  /* Zorgt er samen met onderstaande regel voor dat de tekst in het midden komt */
margin-right: auto;
padding: 5px 10px; /* geeft aan hoever onder de bovenste rand, en de zijkant rand de tekst moet beginen */
border-width:3px; /* onderstaande 3 regels zijn voor de border */
border-style:solid; 
border-color: #FFFFFF;
}

En hierna heb ik nog een vele moeilijkere vraag, dat de groote aanpast als men het scherm verkleint...

ik hoop niet dat ik mijn css moet veranderen want daar ben ik ook een paar weken zoet mee geweest

uaejeroen · 8 apr 2011

gewijzigd

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"></style>
<link href="stylesheet/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head>
<style type="text/css">
#container { 
	position: relative;
    width: 780px;
    margin: 0 auto;
	border: 1px solid green;
}
 
#apDiv1 {
	position:absolute;
	top:4px;
	z-index:1;
	border: 1px solid red;
	overflow: hidden;
	}
 
#apDiv2 {
	position:absolute;
	top:122px;
	width:200px;
	height:465px;
	z-index:2;
	border: 1px solid blue;
	}
 
#apDiv3 {
	position:absolute;
	left:615px;
	top:120px;
	width:165px;
	height:465px;
	z-index:3;
	border: 1px solid fuchsia;
	}
</style>


<body>
<div class="container"> 
<div id="apDiv1"><a href="index.php"><img src="afbeeldingen/logo_energynet.gif" width="766" height="113" alt="Home" /></a></div>
<div id="apDiv2">
  <p><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=algemene_informatie">Algemene informatie</a><br />
    <a href="index.php?p=tarieven">Tarieven</a><br />
    <a href="index.php?p=pakketen">Pakketten</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=service">Service en onderhoud</a><br />
    <a href="index.php?p=energyservice">EnergyService</a><br />
    <a href="index.php?p=product">Productadvies</a><br />
    <a href="index.php?p=besparingtips">Besparingstips</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=vraagentwoord">Vraag en antwoord</a><br />
    <a href="index.php?p=mail">Per e-mail</a><br />
    <a href="index.php?p=chat">Via chat</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=gegevens">Uw gegevens</a><br />
    <a href="index.php?p=nota">Nota en verbruik</a><br />
    <a href="index.php?p=meterstanden">Meterstanden doorgeven</a><br />
  <a href="index.php?p=verhuizing_doorgeven">Verhuizing doorgeven</a></p>
</div>
<div id="apDiv3">
  <p><img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=verhuizing_doorgeven">Verhuizen, wat nu?</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=besparingtips">Besparingstips</a><br />
    <img src="afbeeldingen/vink.gif" width="15" height="16" /><a href="index.php?p=klantenservice">Klantenservice</a></p>
  <p>&nbsp;</p>
  <form id="form1" name="form1" method="post" action="">
    <label for="e-mail"></label>
    e-mailadres   :<br />
    <label for="e-mail2"></label>
    <input type="text" name="e-mail" id="e-mail2" />
    <br />
    wachtwoord: <br />
    <label for="wachtwoord"></label>
    <input type="text" name="wachtwoord" id="wachtwoord" />
<br />
  <em>Controleer uw gegevens</em>
  </form>
</div>
<div id="apDiv4">

<?php
if (isset($_GET['p'])) {
$includebstandtemp = $_GET['p'];
if (is_file($_GET['p'] . '.html')) {
$includebstand = ''.$includebstandtemp.'.html';
}
}
else {
$includebstand = '';
}
if (!empty($includebstand)) {
include($includebstand);
}
?>

<?php if (!isset($_GET['p'])) { ?>
<h1>Welkomstvenster</h1>
<p>Welkom bij de Online HelpDesk van EnergyNet<br />
  U vraagt, wij antwoorden<br />
  Op deze Online HelpDesk kunt u vragen  stellen omtrent de tarieven en de pakketten die wij aanbieden.<br />
  Beheer uw eigen gegevens<br />
  Wilt u op de hoogte blijven van uw  verbruik, uw nota inzien, een verhuizing of de meterstanden doorgeven? Dat kan  met uw eigen e-mailadres en wachtwoord. Als u nieuw bent, vult u eenmalig een  registratieformulier in.</p>
<?php } ?>

</div>
</div>
</body>
</html>

Code:

@charset "utf-8";

.text {
	text-align: center;
	font-style: normal;
}
.text {
	text-align: center;
}
.text {
	text-align: left;
}
.Title {
	text-align: left;
}
.tekst {
	text-align: left;
}
a:link {
	color: #90F;
}
a:visited {
	color: #666;
}
a:hover {
	font-style: italic;
	color: #22FF22;
    }
a:focus {
	font-style: italic;
	color: #22FF22;
    }
.e-mail {
	color: #696969;
}

#apDiv2 {background: #ffffff;}
#apDiv2 {
	position:absolute;
	left:12px;
	top:117px;
	width:206px;
	height:468px;
	z-index:2;
}


#apDiv3 {background: #ffffff;}
#apDiv3 {
 position:absolute;
 left:885px;
 top:117px;
 width:241px;
 height:400px;
 z-index:3;
}


#apDiv4 {background: #ffffff;} #apDiv4 {
	position:absolute;
	left:215px;
	top:122px;
	width:400px;
	height:465px;
	z-index:4;
}

.Waarschuwing {
}
.Waarschuwing {
}

#Waarschuwing {
	font-family: "Arial Black", Gadget, sans-serif;
}
#Waarschuwing {
	font-family: "Arial Black", Gadget, sans-serif;
}

.background {
	background-image: url(/afbeeldingen/groen-wit.gif);
	background-repeat: repeat;
}
#apDiv3 #form1 {
	color: #F0F;
}
#apDiv3 #form1 {
	color: #90F;
}


body {
	margin-left: auto;
	margin-right: auto;
	background-image: url(../afbeeldingen/groen-wit.gif);
	background-repeat: repeat;
	width: auto;
	background-position: center bottom;
	height: auto;
}

maar hij zet hem niet in het midden, ik heb dubbele code gewijzigd

ebsite centreren in DW CS %

csshunter

Meubilair

grumbkow

Gebruiker

uaejeroen

Terugkerende gebruiker

uaejeroen

Terugkerende gebruiker

uaejeroen

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy