Layout problemen

Remi1995 · 11 okt 2009

Hallo.

Ik ben bezig met een goede layout te maken in HTML, boven heb ik wat links staan, maar als ik op IE op revolutie: 1280x960 erop ga, dan wordt het niet goed weergegeven:

.

Maar als ik op 1680x1050 doe, dan wordt het wel goed weergegeven:

.

Terwijl er wel genoeg ruimte is voor de links, zelfs bij de revolutie 1280x960.

Hier de code:

HTML:

<html>
<head>
<style type="text/css">
<!--

body
{
scrollbar-arrow-color: #000000;
scrollbar-face-color: #FF8C00;
scrollbar-highlight-color: #0000FF;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #00FFFF;
scrollbar-darkshadow-color: #008080;
scrollbar-track-color: #000000;
}

-->
</style>
<script language='javascript'>function blink(elementid){ 	colorarray = Array(
			'#FFFFFF',
			'#EEEEEE',
			'#CDCDCD',
			'#8B8B8B',
			'#CDCDCD',
			'#EEEEEE',
			'#FFFFFF'
); i=0; 	
setInterval ("changecolor('"+elementid+"')",150);}function changecolor(x) { 	
var x= document.getElementById(x);	if (x != null){		x.style.color = colorarray[i];	
if (i==14){ i= 0;			colorarray = colorarray.reverse();
}	}	i++;}</script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<BODY onLoad="show_clock()" bgcolor="#000000" text="white" link="#FF8C00" alink="purple" vlink="#FF8C00" onLoad="show_clock()" >
<table cellspacing="0" border="0" cellpadding="0"
<tr valign="top">
<td width="200"><P><FONT size="-2"><script language="javascript" src="javascript/liveclock.js"></script></FONT></P></td>
<td width="1100"><FONT></div>
		
			<div id="nav">
				<ul>
				
					<!-- begin top navigation -->
					
					<li><a href="http://Test"target="_top"><FONT size="-1">Link1</FONT></a></li>
					<li><A href="http://Test"target="_top"><FONT size="-1">Lange link2</FONT></A></li>
					<li><a href="http://Test"target="_top"><FONT size="-1">Link3</FONT></a></li>
					<li><a href="http://Test"target="_top"><FONT size="-1">Link4</FONT></a></li>
					<li><a href="http://Test"target="_top"><FONT size="-1">Link5</FONT></a></li>
					<!-- end top navigation -->
					
				
			
				<!-- begin main content -->
			
			
		
		</div>
		
	</div></FONT></td>
<td width="500" valign="top" align="left">
<div id="warning"><FONT size="-1">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </FONT</div><script language="javascript">blink('warning');</script>
</td>
</tr>
</table>
</body>
</html>

Code:

html, * {
	margin:0 auto;
	padding:0;
}
body {
	background-image:url('images/bg-gradient.png');
	background-repeat:repeat-x;
	background-color:#23364E;
	margin:0 auto;
	padding:0;
	font-size:1.0em;
	font-family:"Trebuchet MS", Verdana, Arial;
}

/**
page elements
**/
a {
	color:#426692;
}
a:hover {
	color:#23364E;
}
h1 {
	font-size:3.0em;
	padding-left:30px;
}
h1 a {
	color:#C3A279;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
}
h1 a:hover {
	color:#C3A279;
	border-bottom:1px solid #C3A279;
}
h2 {
	color:#944267;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.65em;
	font-weight:normal;
	padding:0 0 0 10px;
}
h3 {
	padding:20px 10px 0px 10px;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-weight:normal;
	color:#283E59;
	font-size:1.1em;
}
ul, ol {
	margin:0 0 0 45px;
	padding:0;
}
p {
	font-family:"Trebuchet MS", Verdana, Arial;
	padding:5px 10px;
	line-height:1.6em;
}
code {
	display:block;
	background-color:#E0CFB8;
	border:1px solid #C9AC83;
	border-bottom:3px solid #C9AC83;
	border-right:3px solid #C9AC83;
	margin:10px;
	padding:10px;
}
form { 	
	width:90%;
	border:1px solid #cccccc;
	text-align:left;
	margin:0 0 0 10px;
	padding:0;
}
form p {
	border-bottom:1px solid #dddddd;
	margin:0 10px;
	padding:10px;
}
form p input, form p select , form p textarea {
	padding:5px;
	border:1px solid #dddddd;
	border-right:2px solid #cccccc;
	border-bottom:2px solid #cccccc;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.9em;
	
}
form p input.button {
	padding:5px;
	background-color:#304A6B;
	color:#ffffff;
	font-size:1.0em;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	border:2px solid #426693;
	border-right:2px solid #23364E;
	border-bottom:2px solid #23364E;
}
form p.lastformitem {
	border-bottom:none;
}
form span.required {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#ff0000;
	font-weight:bold;
	font-size:0.8em;
	padding:20px;
	margin-top:5px;
}
form p label span.required {
	padding:0;
	font-size:0.7em;
	color:#ff0000;
}
form p span {
	padding-left:10px;
	font-size:0.7em;
	color:#999999;
}
form p span a {
	color:#999999;
}

/**
common classes
**/
.clear {
	clear:both;
}
.bold {
	font-weight:bold;
}

/** 
page wrapper
**/
div#wrap {
	width:90%;
	margin:60px auto 0 auto;
	padding:0;
}
/** 
header logo 
**/
div#logo {
	width:35%;
	float:left;
	padding-left:20px;
}
/** 
top navigation
**/
div#nav {
	width:60%;
	float:left;
	padding:30px 0 0 0;
	margin:0;
}
div#nav ul {
	list-style:none;
	list-style-type:none;
	padding:0;
	margin:0 0 0 20px;
	position:relative;

}
div#nav ul li {
	display:inline;
}
div#nav ul li a {
	display:block;
	float:left;
	padding:12px 20px 0 20px;
	color:#ffffff;
	height:28px;
	font-family:"Trebuchet MS", Verdana, Arial;
	font-weight:normal;
	font-size:0.9em;
	text-decoration:none;
	margin:0 2px;
	background-color:#23364E;
	border-top:1px solid #4972A2;
	border-right:1px solid #131D2A;
}
div#nav ul li.selected a {
	background-image:url('images/bgselected.jpg');
	background-repeat:repeat-x;
	background-position:top left;
	color:#333333;
	margin:0 3px;
}
div#nav ul li a:hover {
	text-decoration:underline;
}
div#nav ul li.selected a:hover {
	text-decoration:none;
}
/**
page container
**/
div#page {
	background-color:#ffffff;
	border:5px solid #3F618C;
	border-top:none;
	padding:10px 0 20px 0;
}
/** 
main, left, content
**/
div#main-content {
	float:left;
	width:70%;
	border-right:1px solid #dddddd;
	padding-right:5px;
}
/**
sidebar, right, content
**/
div#main-sidebar {
	width:28%;
	float:left;
	padding-left:0px;
}
div.sidebar-box {
	margin:10px 5px;
	padding:3px;
}
div.sidebar-box p {
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.6em;
}
div.sidebar-box ul {
	padding:0;
	margin:0 0 0 10px;
	list-style:none;
}
div.sidebar-box ul li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
	line-height:1.4em;
	padding:5px 0;
}
div.sidebar-box ul li a {
	color:#5B2C29;
	font-size:1.0em;
	font-weight:bold;
}
div.sidebar-box h4 {
	color:#333333;
	font-weight:normal;
	letter-spacing:-1px;
	font-size:1.7em;
	margin:0 0 10px 0;
	padding:0;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}
div.brown-box {
	background-color:#C9A983;
	border:1px solid #B0844F;
	margin:10px 15px;
	color:#ffffff;
}
div.brown-box a {
	color:#ffffff;
	font-weight:bold;
}
/**
footer
**/
div.footer {
	background-image:url('images/footer-left.gif');
	background-repeat:no-repeat;
	background-position:top left;
	background-color:#3F618C;
	margin-top:30px;
}
div.footer-level-2 {
	background-image:url('images/footer-right.gif');
	background-repeat:no-repeat;
	background-position:top right;
}
div.footer p {
	text-align:left;
	padding:15px 0;
}
div.footer p a {
	padding:4px;
	color:#ffffff;
	font-family:"Trebuchet MS", Verdana, Arial;
	font-size:0.8em;
	text-decoration:none;
	margin:0 10px;
	background-color:#345074;
}
/**
page end - below footer
**/
div.page-end {
	background-color:#253952;
	border-top:1px solid #4F79B0;
	background-image:url('images/page-end-fade.jpg');
	background-repeat:repeat-x;
	padding:5px 0 10px 0;
}
div.page-end p {
	color:#ffffff;
	text-align:center;
	font-size:0.7em;
	font-family:"Trebuchet MS", Verdana, Arial;
}
div.page-end a {
	font-family:"Trebuchet MS", Verdana, Arial;
	color:#ffffff;
	font-weight:normal;
	border-bottom:1px solid #ffffff;
	text-decoration:none;
}
div.page-end a:hover {
	background-color:transparent;
}

Ik zou graag willen weten hoe ik dat kan oplossen.

Vriendelijke groeten, Remi1995

ErikBooy007 · 11 okt 2009

Kun je je stylesheet even posten, daar zit waarschijnlijk het probleem in.

Remi1995 · 11 okt 2009

ErikBooy007 zei:
Kun je je stylesheet even posten, daar zit waarschijnlijk het probleem in.

O, ja sorry, ik heb die van internet geplukt.

ErikBooy007 · 11 okt 2009

Ja, kan wel zijn

, maar kun je 'm even posten?

Woutertjuh88 · 11 okt 2009

Geef je je div's wel hoogtes en breedtes mee?

Remi1995 · 11 okt 2009

Woutertjuh88 zei:
Geef je je div's wel hoogtes en breedtes mee?

Volgens mij niet;

HTML:

<div id="nav">
				<ul>
				
					<!-- begin top navigation -->
					
					<li><a href="http://Test"target="_top"><FONT size="-1">Link1</FONT></a></li>
					<li><A href="http://Test"target="_top"><FONT size="-1">Lange link2</FONT></A></li>
					<li><a href="http://Test"target="_top"><FONT size="-1">Link3</FONT></a></li>
					<li><a href="http://Test"target="_top"><FONT size="-1">Link4</FONT></a></li>
					<li><a href="http://Test"target="_top"><FONT size="-1">Link5</FONT></a></li>
					<!-- end top navigation -->
					
				
			
				<!-- begin main content -->
			
			
		
		</div>

ErikBooy007 · 11 okt 2009

Post nou gewoon even die stylesheet...

Remi1995 · 11 okt 2009

ErikBooy007 zei:
Post nou gewoon even die stylesheet...

Code:

html, * {
	margin:0 auto;
	padding:0;
}
body {
	background-image:url('images/bg-gradient.png');
	background-repeat:repeat-x;
	background-color:#23364E;
	margin:0 auto;
	padding:0;
	font-size:1.0em;
	font-family:"Trebuchet MS", Verdana, Arial;
}

/**
page elements
**/
a {
	color:#426692;
}
a:hover {
	color:#23364E;
}
h1 {
	font-size:3.0em;
	padding-left:30px;
}
h1 a {
	color:#C3A279;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-decoration:none;
}
h1 a:hover {
	color:#C3A279;
	border-bottom:1px solid #C3A279;
}
h2 {
	color:#944267;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.65em;
	font-weight:normal;
	padding:0 0 0 10px;
}
h3 {
	padding:20px 10px 0px 10px;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-weight:normal;
	color:#283E59;
	font-size:1.1em;
}
ul, ol {
	margin:0 0 0 45px;
	padding:0;
}
p {
	font-family:"Trebuchet MS", Verdana, Arial;
	padding:5px 10px;
	line-height:1.6em;
}
code {
	display:block;
	background-color:#E0CFB8;
	border:1px solid #C9AC83;
	border-bottom:3px solid #C9AC83;
	border-right:3px solid #C9AC83;
	margin:10px;
	padding:10px;
}
form { 	
	width:90%;
	border:1px solid #cccccc;
	text-align:left;
	margin:0 0 0 10px;
	padding:0;
}
form p {
	border-bottom:1px solid #dddddd;
	margin:0 10px;
	padding:10px;
}
form p input, form p select , form p textarea {
	padding:5px;
	border:1px solid #dddddd;
	border-right:2px solid #cccccc;
	border-bottom:2px solid #cccccc;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.9em;
	
}
form p input.button {
	padding:5px;
	background-color:#304A6B;
	color:#ffffff;
	font-size:1.0em;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	border:2px solid #426693;
	border-right:2px solid #23364E;
	border-bottom:2px solid #23364E;
}
form p.lastformitem {
	border-bottom:none;
}
form span.required {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#ff0000;
	font-weight:bold;
	font-size:0.8em;
	padding:20px;
	margin-top:5px;
}
form p label span.required {
	padding:0;
	font-size:0.7em;
	color:#ff0000;
}
form p span {
	padding-left:10px;
	font-size:0.7em;
	color:#999999;
}
form p span a {
	color:#999999;
}

/**
common classes
**/
.clear {
	clear:both;
}
.bold {
	font-weight:bold;
}

/** 
page wrapper
**/
div#wrap {
	width:90%;
	margin:60px auto 0 auto;
	padding:0;
}
/** 
header logo 
**/
div#logo {
	width:35%;
	float:left;
	padding-left:20px;
}
/** 
top navigation
**/
div#nav {
	width:60%;
	float:left;
	padding:30px 0 0 0;
	margin:0;
}
div#nav ul {
	list-style:none;
	list-style-type:none;
	padding:0;
	margin:0 0 0 20px;
	position:relative;

}
div#nav ul li {
	display:inline;
}
div#nav ul li a {
	display:block;
	float:left;
	padding:12px 20px 0 20px;
	color:#ffffff;
	height:28px;
	font-family:"Trebuchet MS", Verdana, Arial;
	font-weight:normal;
	font-size:0.9em;
	text-decoration:none;
	margin:0 2px;
	background-color:#23364E;
	border-top:1px solid #4972A2;
	border-right:1px solid #131D2A;
}
div#nav ul li.selected a {
	background-image:url('images/bgselected.jpg');
	background-repeat:repeat-x;
	background-position:top left;
	color:#333333;
	margin:0 3px;
}
div#nav ul li a:hover {
	text-decoration:underline;
}
div#nav ul li.selected a:hover {
	text-decoration:none;
}
/**
page container
**/
div#page {
	background-color:#ffffff;
	border:5px solid #3F618C;
	border-top:none;
	padding:10px 0 20px 0;
}
/** 
main, left, content
**/
div#main-content {
	float:left;
	width:70%;
	border-right:1px solid #dddddd;
	padding-right:5px;
}
/**
sidebar, right, content
**/
div#main-sidebar {
	width:28%;
	float:left;
	padding-left:0px;
}
div.sidebar-box {
	margin:10px 5px;
	padding:3px;
}
div.sidebar-box p {
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.6em;
}
div.sidebar-box ul {
	padding:0;
	margin:0 0 0 10px;
	list-style:none;
}
div.sidebar-box ul li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
	line-height:1.4em;
	padding:5px 0;
}
div.sidebar-box ul li a {
	color:#5B2C29;
	font-size:1.0em;
	font-weight:bold;
}
div.sidebar-box h4 {
	color:#333333;
	font-weight:normal;
	letter-spacing:-1px;
	font-size:1.7em;
	margin:0 0 10px 0;
	padding:0;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}
div.brown-box {
	background-color:#C9A983;
	border:1px solid #B0844F;
	margin:10px 15px;
	color:#ffffff;
}
div.brown-box a {
	color:#ffffff;
	font-weight:bold;
}
/**
footer
**/
div.footer {
	background-image:url('images/footer-left.gif');
	background-repeat:no-repeat;
	background-position:top left;
	background-color:#3F618C;
	margin-top:30px;
}
div.footer-level-2 {
	background-image:url('images/footer-right.gif');
	background-repeat:no-repeat;
	background-position:top right;
}
div.footer p {
	text-align:left;
	padding:15px 0;
}
div.footer p a {
	padding:4px;
	color:#ffffff;
	font-family:"Trebuchet MS", Verdana, Arial;
	font-size:0.8em;
	text-decoration:none;
	margin:0 10px;
	background-color:#345074;
}
/**
page end - below footer
**/
div.page-end {
	background-color:#253952;
	border-top:1px solid #4F79B0;
	background-image:url('images/page-end-fade.jpg');
	background-repeat:repeat-x;
	padding:5px 0 10px 0;
}
div.page-end p {
	color:#ffffff;
	text-align:center;
	font-size:0.7em;
	font-family:"Trebuchet MS", Verdana, Arial;
}
div.page-end a {
	font-family:"Trebuchet MS", Verdana, Arial;
	color:#ffffff;
	font-weight:normal;
	border-bottom:1px solid #ffffff;
	text-decoration:none;
}
div.page-end a:hover {
	background-color:transparent;
}

Dit?

ErikBooy007 · 11 okt 2009

Allereerst, tabellen...

Waarom alle data in een tabel.

Daarnaast, waarom zo belachelijk breed. Je geeft je tabel een breedte van 1800px (200, 1100, 500) daarnaast smijt je te pas en te onpas met <div>'s, er zijn sluitende div-tags terwijl er nog geen div's zijn geopend, etc.

Ik denk dat je beter af bent (aangezien je toch nog niet zo ver bent), als je de pagina opnieuw opbouwt, met CSS, en zonder tabellen.

Want anders passen we hier de ene na de andere fout aan en zit je uiteindelijk nog met een slecht product.

Remi1995 · 11 okt 2009

ErikBooy007 zei:
Allereerst, tabellen... Waarom alle data in een tabel.

Daarnaast, waarom zo belachelijk breed. Je geeft je tabel een breedte van 1800px (200, 1100, 500) daarnaast smijt je te pas en te onpas met <div>'s, er zijn sluitende div-tags terwijl er nog geen div's zijn geopend, etc.

Ik denk dat je beter af bent (aangezien je toch nog niet zo ver bent), als je de pagina opnieuw opbouwt, met CSS, en zonder tabellen.

Want anders passen we hier de ene na de andere fout aan en zit je uiteindelijk nog met een slecht product.

OK, dank je, ik had het in een tabel gedaan omdat het anders onder elkaar kwam te staan.

Maar de conclusie is dat ik het is CSS moet maken.

Ok, Dank julllie wel.

Layout problemen

Remi1995

Gebruiker

ErikBooy007

Terugkerende gebruiker

Remi1995

Gebruiker

ErikBooy007

Terugkerende gebruiker

Woutertjuh88

Terugkerende gebruiker

Remi1995

Gebruiker

ErikBooy007

Terugkerende gebruiker

Remi1995

Gebruiker

ErikBooy007

Terugkerende gebruiker

Remi1995

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy