webpagina weergave

willem008 · 14 nov 2007

ik maak mijn website s met dreamweaver,dit doe ik op een laptop met een 17" beeldscherm.
als ik een website gemaakt heb en ik open hem in mijn browser en hij is naar mijn zin is zet in hem op mijn server, als ik mijn site open op mijn andere computer die heeft een 19" beeld scherm dan hou ik onder mijn tekst veel meer ruimte over.
nou is mijn vraag kan ik mijn site zo maken dat hij op elk beeldscherm met dezelfde verhouding over het scherm wordt weergegeven.

peter vazed · 14 nov 2007

Ja:
vaste maat voor de breedte aanhouden.
Alles bv in een container div zetten met bv width 1100px;

willem008 · 15 nov 2007

ja peter zou je dat voor mijn wat uitgebreider willen uitlegen vindt dit heel belangrijk
bij voorbaat dank

peter vazed · 15 nov 2007

Voorbeeldje.

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
  <head>
   	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Thursday, November 15, 2007 17:27:19 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  CONTENT="korte beschrijving van de pagina">
<meta name="keywords" CONTENT="trefwoorden, die, slaan, op, de, pagina">
<META NAME="publisher" CONTENT="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
      <style type="text/css" media="screen">

body
{
margin: 0;
		padding: 0;
		font-family: comic sans ms, verdana, arial, hevetica, sans-serif;
		text-align: center;
		color: #000;
	  background: #ffffcc;
}

.container{
width:900px;
border:solid 1px #ff0000;
margin-left:auto;
margin-right:auto;

}

.logo{
background: url(url van jouw logo) no-repeat;
width: 900px;
height: 200px;
color: purple;
}
.menu{
background-color: #CCFFFF;
width: 900px;
height: 20px;
color: purple;
word-spacing: 30px;
}
.vakeen{
background-color: darkblue;
width: 300px;
height: 200px;
color: white;
float:left;

}
.vaktwee{
background-color: darkgreen;
width: 300px;
height: 200px;
color: white;
float: left;

}
.nieuwsvak{
background-color: red;
width: 300px;
height: 200px;
color: white;
float: left;

}
.opvuller{
background-color: white;
float: bottom;
height: 300px;
width: 900px;
}
.copyright{
width: 900px;
height: 25px;
background-color: green;
color: white;
}
.schoon
{
clear:both;
}


      </style>
    </head>
    <body>
      test
      <div class="container">
        <div class="logo"><h1>Logo</h1></div>
        <div class="schoon"></div>
          <div class="menu"><i>Menu item Menu item etc</i></div>
          <div class="schoon"></div>
          <div class="vakeen">Vak een</div>
          <div class="nieuwsvak">Nieuwsvak</div>
          <div class="vaktwee">Vaktwee</div>
          <div class="schoon"></div>
          <div class="opvuller"></div>
          <div class="copyright" align="center"><b>Copyright</b></div>
        </div>
      </body>
    </html>

willem008 · 16 nov 2007

in ieder geval bedank ga proberen hier mee te werken maar ik snap er nog weinig van ,maar ik ga me er in verdiepen.

willem008 · 16 nov 2007

ben er even mee bezig geweest ga het al een beetje begrijpen,
zou je voor mij alleen zo container neer kunnen zetten zodat ik hem kan kopieren
ik wil hem dan in een extern stylesheet zetten

peter vazed · 16 nov 2007

willem008 · 16 nov 2007

sorry

peter vazed · 16 nov 2007

willem008 zei:
sorry

Je website adres, anders lukt het niet natuurlijk.
Voorbeeld:
http://www.j34.co.uk/mc/spares.htm
en css
http://www.j34.co.uk/mc/2c-hd-ft-fixed-layout.css

willem008 · 16 nov 2007

www.wlvdmeer-montage.nl

peter vazed · 17 nov 2007

Was even stoeien..
Het probleem was de absolute positionering.
Dan krijg je nooit een goede weergave.

Met een container en andere opties kun je wel iets netjes weergeven.

Code:

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
		<title>
			start pagina
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style.css" rel="stylesheet" type="text/css">
		
<style type="text/css" media="screen">


A:link      { text-decoration: none; background-color: #b1b1b1;padding: 4px 6px 4px 6px;color: #0000a0;font-size: 14pt; font-style: normal;  }
A:visited   { text-decoration: none; background-color: #c0c0c0;padding: 4px 6px 4px 6px;color: #990000;font-size: 14pt; font-style: normal; }
A:active    { text-decoration: none; background-color: #808080;padding: 4px 6px 4px 6px;color: #0000FF;font-size: 14pt; font-style: normal; }
A:hover     { text-decoration: underline; background-color: #6c6c6c;padding: 4px 6px 4px 6pxcolor: #FF0000; font-size: 14pt; font-style: normal;}

p { padding:10px; }
.klgrs {background-color: #b1b1b1;padding: 4px 6px 4px 6px;}
.klgl {background-color: #eaebb8; padding: 1px 1px 1px 1px;}
.kl {font-family: verdana, tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal;color:#0000a0;}
.tomat {font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; font-size: 15px; font-weight: bold;color:#0000a0;}
.logo {font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; font-size: 30px; font-weight: bold;color:#008040; float:left;width:540px;height:80px; text-align:center;}
.prijs
{font-family: verdana, tahoma, Arial, Helvetica;
 font-size: 12px;
 font-style: normal;
color:#000000;
}
.info 
{
border: dotted 3px #000000;
background-color: #f2f2f2;
font-family:verdana, tahoma, arial ;
font-size: 12px;
padding: 10px 10px 10px 10px;
text-align:left;
}
body {     
font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; 
font-size: 11pt; font-style: normal; line-height: normal; 
font-weight: normal; color: #000000; text-decoration: none;
margin:0px;
padding:0px;
background-image:url(si_images/start-strps.jpg);
background-repeat:repeat;
background-color: #c0c0c0;
text-align: center;
color: #000000;
}
.menu
{
width:150px;
float:left;
border:2px solid #a69379;
padding-left:10px;
text-align:left;
}
.content
{
width:600px;
padding:10px;
float:right;
text-align:left;
border:2px solid #a69379;
}
.container
{
width:850px;
height:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
border:2px solid #a69379;
background-image:url(si_images/background1.gif);
}
.kop
{
width:850px;
border:2px solid #ff8040;
text-align:left;
}
.imleft
{
float:left;
margin:17px;
}
.imrgt
{
float:right;
margin:17px;
}
.mc{
width:845px;
height:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
border:2px solid #00ff00;
}
</style>
		
	</head>
	
	<body bgcolor="#000000">
		<div class="container">
			<!-- container b -->
			<div class="kop">
				<!-- kop b -->
				<div id="Layer2" style=" width:81px; height:80px; z-index:2;  background-image: url(http://www.wlvdmeer-montage.nl/14%5B1%5D.gif);  border: 1px none #000000;float:left">
				</div>
				<div class="logo">
					Wl vd Meer  * Montage
				</div>
				
				
				
				<div id="Layer3" style=" width:219px; height:133px; z-index:3;  background-image: url(http://www.wlvdmeer-montage.nl/W.L.v.d%5B1%5D.jpg); border: 1px none #000000;float:left">
				</div>
				 
				<div id="Layer6" style=" width:113px; height:29px; z-index:6;  background-color: #000000; layer-background-color: #000000; border: 1px none #000000;float;left;margin-left:100px;">
					<font color="#FFFFFF">
						Grensloos
					</font>
				</div>
				<!-- kop e -->
			</div>
			
			<div class="mc">
				<div class="menu">
					<!-- menu b -->
					<p>
					<a href="scherming.html" target="_self">Scherming:</a>
					<p>
					<a href="beluchting.html" target="_self">Beluchting:</a>
					 
					<p>
					<a href="hijsverwarming.html" target="_self">Hijsverwarming:</a>
					<p>
					<a href="materiaal.html" target="_self">Materiaal:</a>
					<p>
					<a href="service.html" target="_self">Service:</a>
					<p>
					<a href="contact.html">Contact:</a>
					<br>
					
					<!-- menu e -->
				</div>
				<div class="content">
					<div class="imleft">
						<img src="http://www.wlvdmeer-montage.nl/screening1.jpg" width="142" height="120" alt="pl">
					</div>
					<div class="imrgt">
						<img src="http://www.wlvdmeer-montage.nl/screening4.jpg" width="155" height="119" alt="pl">
					</div>
					
					<div class="imrgt">
						<img src="http://www.wlvdmeer-montage.nl/kas.jpg" width="151" height="119" alt="pl">
					</div>
				</div><br>

					<div class="content">									<span class="klgl">
						Wl vd Meer voor diversen montage werkzaamheden zoals:
					</span><br>
<br>

					
					
					 
					
				* Montage scherm en verduisterings-installaties.<br>

					
				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>
		 
					
				* Montage scherm en verduisterings-installaties.<br>

					
				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>		 
					
				* Montage scherm en verduisterings-installaties.<br>

					
				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>		 
					
			
				<div class="info">	
	* Montage scherm en verduisterings-installaties.<br>

				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>
			
</div>				
				
				<!-- content e --></div>
				
				
				<!-- content cm -->
			</div>
			
			
			
			<!-- container e -->
		</div>
	</body>
</html>

Er zitten borders om de diverse elementen,
dit is in ontwerpmode erg handig.
Kun je als het goed is verwijderen.
Pagina laten controleren bij:
http://validator.w3.org/

willem008 · 18 nov 2007

peter vazed zei:

Was even stoeien..
Het probleem was de absolute positionering.
Dan krijg je nooit een goede weergave.

Met een container en andere opties kun je wel iets netjes weergeven.

Code:

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
		<title>
			start pagina
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style.css" rel="stylesheet" type="text/css">
		
<style type="text/css" media="screen">


A:link      { text-decoration: none; background-color: #b1b1b1;padding: 4px 6px 4px 6px;color: #0000a0;font-size: 14pt; font-style: normal;  }
A:visited   { text-decoration: none; background-color: #c0c0c0;padding: 4px 6px 4px 6px;color: #990000;font-size: 14pt; font-style: normal; }
A:active    { text-decoration: none; background-color: #808080;padding: 4px 6px 4px 6px;color: #0000FF;font-size: 14pt; font-style: normal; }
A:hover     { text-decoration: underline; background-color: #6c6c6c;padding: 4px 6px 4px 6pxcolor: #FF0000; font-size: 14pt; font-style: normal;}

p { padding:10px; }
.klgrs {background-color: #b1b1b1;padding: 4px 6px 4px 6px;}
.klgl {background-color: #eaebb8; padding: 1px 1px 1px 1px;}
.kl {font-family: verdana, tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal;color:#0000a0;}
.tomat {font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; font-size: 15px; font-weight: bold;color:#0000a0;}
.logo {font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; font-size: 30px; font-weight: bold;color:#008040; float:left;width:540px;height:80px; text-align:center;}
.prijs
{font-family: verdana, tahoma, Arial, Helvetica;
 font-size: 12px;
 font-style: normal;
color:#000000;
}
.info 
{
border: dotted 3px #000000;
background-color: #f2f2f2;
font-family:verdana, tahoma, arial ;
font-size: 12px;
padding: 10px 10px 10px 10px;
text-align:left;
}
body {     
font-family: verdana, tahoma, Arial, Helvetica, "sans-serif"; 
font-size: 11pt; font-style: normal; line-height: normal; 
font-weight: normal; color: #000000; text-decoration: none;
margin:0px;
padding:0px;
background-image:url(si_images/start-strps.jpg);
background-repeat:repeat;
background-color: #c0c0c0;
text-align: center;
color: #000000;
}
.menu
{
width:150px;
float:left;
border:2px solid #a69379;
padding-left:10px;
text-align:left;
}
.content
{
width:600px;
padding:10px;
float:right;
text-align:left;
border:2px solid #a69379;
}
.container
{
width:850px;
height:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
border:2px solid #a69379;
background-image:url(si_images/background1.gif);
}
.kop
{
width:850px;
border:2px solid #ff8040;
text-align:left;
}
.imleft
{
float:left;
margin:17px;
}
.imrgt
{
float:right;
margin:17px;
}
.mc{
width:845px;
height:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
border:2px solid #00ff00;
}
</style>
		
	</head>
	
	<body bgcolor="#000000">
		<div class="container">
			<!-- container b -->
			<div class="kop">
				<!-- kop b -->
				<div id="Layer2" style=" width:81px; height:80px; z-index:2;  background-image: url(http://www.wlvdmeer-montage.nl/14%5B1%5D.gif);  border: 1px none #000000;float:left">
				</div>
				<div class="logo">
					Wl vd Meer  * Montage
				</div>
				
				
				
				<div id="Layer3" style=" width:219px; height:133px; z-index:3;  background-image: url(http://www.wlvdmeer-montage.nl/W.L.v.d%5B1%5D.jpg); border: 1px none #000000;float:left">
				</div>
				 
				<div id="Layer6" style=" width:113px; height:29px; z-index:6;  background-color: #000000; layer-background-color: #000000; border: 1px none #000000;float;left;margin-left:100px;">
					<font color="#FFFFFF">
						Grensloos
					</font>
				</div>
				<!-- kop e -->
			</div>
			
			<div class="mc">
				<div class="menu">
					<!-- menu b -->
					<p>
					<a href="scherming.html" target="_self">Scherming:</a>
					<p>
					<a href="beluchting.html" target="_self">Beluchting:</a>
					 
					<p>
					<a href="hijsverwarming.html" target="_self">Hijsverwarming:</a>
					<p>
					<a href="materiaal.html" target="_self">Materiaal:</a>
					<p>
					<a href="service.html" target="_self">Service:</a>
					<p>
					<a href="contact.html">Contact:</a>
					<br>
					
					<!-- menu e -->
				</div>
				<div class="content">
					<div class="imleft">
						<img src="http://www.wlvdmeer-montage.nl/screening1.jpg" width="142" height="120" alt="pl">
					</div>
					<div class="imrgt">
						<img src="http://www.wlvdmeer-montage.nl/screening4.jpg" width="155" height="119" alt="pl">
					</div>
					
					<div class="imrgt">
						<img src="http://www.wlvdmeer-montage.nl/kas.jpg" width="151" height="119" alt="pl">
					</div>
				</div><br>

					<div class="content">									<span class="klgl">
						Wl vd Meer voor diversen montage werkzaamheden zoals:
					</span><br>
<br>

					
					
					 
					
				* Montage scherm en verduisterings-installaties.<br>

					
				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>
		 
					
				* Montage scherm en verduisterings-installaties.<br>

					
				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>		 
					
				* Montage scherm en verduisterings-installaties.<br>

					
				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>		 
					
			
				<div class="info">	
	* Montage scherm en verduisterings-installaties.<br>

				*  Montage alle beluchtings systemen.<br>

					 * Montage hijsverwarming.<br>

					
					*  Alle overige montage werkzaamheden<br>
			
</div>				
				
				<!-- content e --></div>
				
				
				<!-- content cm -->
			</div>
			
			
			
			<!-- container e -->
		</div>
	</body>
</html>

Er zitten borders om de diverse elementen,
dit is in ontwerpmode erg handig.
Kun je als het goed is verwijderen.
Pagina laten controleren bij:
http://validator.w3.org/

willem008 · 18 nov 2007

he bedankt ga er mee aan het werk , je hoort nog van mijn

willem008 · 20 nov 2007

ben er mee aan de slag gegaan ,gaat goed alleen ik krijg die omlijning niet weg waar ziten die onder

peter vazed · 20 nov 2007

Randen zitten in de head:

.menu
{
width:150px;
float:left;
border:2px solid #a69379;
padding-left:10px;
text-align:left;
}

die regel mag je dus deleten

willem008 · 20 nov 2007

ok ze zijn weg bedankt

willem008 · 21 nov 2007

nou ik heb even elleen mijn start pagina op het net gezet, wordt op de vast computer thuis goed weergeven (17" beeldscherm) alleen het woord gensloos is groter en de teksten zijn iets veschillend ten op zichten van de foto''s , op zowel de laptop als de vaste computer hebben internet exploder 7 dus daar kan het niet aan leggen,

als ik de site open bij mij ouders op een 15" beeld scherm staat een foto er helemaal onder daar hebben ze niet exploder 7 zou dat het pribleem zijn?

webpagina weergave

willem008

Gebruiker

peter vazed

Meubilair

willem008

Gebruiker

peter vazed

Meubilair

willem008

Gebruiker

willem008

Gebruiker

peter vazed

Meubilair

willem008

Gebruiker

peter vazed

Meubilair

willem008

Gebruiker

peter vazed

Meubilair

willem008

Gebruiker

willem008

Gebruiker

willem008

Gebruiker

peter vazed

Meubilair

willem008

Gebruiker

willem008

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy