✔ Darstellunsproblem

Status
Nicht offen für weitere Antworten.
R

_root

Erfahrenes Mitglied
Problem:
Der rechte Balken soll so wie der auf der linken Seite "passend" dargestellt werden.

Bild:
http://my-root.org/images/help.jpg

Die CSS Datei:
Code: 
/* CSS Document */
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
body{
	background-repeat:repeat;
  	font-family:Arial, Helvetica, sans-serif;
  	font-size:10px;
  	color:#3D3D3D;
}
#main{
  	width:700px;
  	height:400px;
 	background-color:#FFFFFF;
  	border: 1px solid #A6A6A6;
  	margin: 50px auto;
 	padding:0px 0 0 0px;
}
#left{
	height:400px;
	width:10px;
	background-color:#CCCCCC;
	float:left;
}
#header{
	width:680px;
	height:60px;
	border-bottom:1px solid #a6a6a6;
	float:left;
}
#logo{
	width:211px;
	height:60px;
	background-image:url(layout/header/Bilder/header_01.gif);
	background-repeat:no-repeat;
	float:left;
}
#button1{
	width:90px;
	height:60px;
	background-image:url(layout/header/Bilder/header_02.gif);
	background-repeat:no-repeat;
	float:left;
}
#button2{
	width:99px;
	height:60px;
	background-image:url(layout/header/Bilder/header_03.gif);
	background-repeat:no-repeat;
	float:left;
}
#button3{
	width:99px;
	height:60px;
	background-image:url(layout/header/Bilder/header_04.gif);
	background-repeat:no-repeat;
	float:left;
}
#button4{
	width:100px;
	height:60px;
	background-image:url(layout/header/Bilder/header_05.gif);
	background-repeat:no-repeat;
	float:left;
}
#button5{
	width:81px;
	height:60px;
	background-image:url(layout/header/Bilder/header_06.gif);
	background-repeat:no-repeat;
	float:left;
}
#maincontainer{
	width:680px;
	height:340px;
	float:left;
}
#right{
	height:400px;
	width:10px;
	background-color:#CCCCCC;
	float:left;
}

Die Index
HTML: 
<html>
<head>
<title>test v1</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
	<div id="main">
		<div id="left"></div>
			<div id="header">
				<div id="logo"></div>
				<div id="button1"><a href="?mod=home"><img src="layout/header/Bilder/header_02.gif" width="90" height="60" border="0"></a></div>
				<div id="button2"><a href="?mod=aboutme"><img src="layout/header/Bilder/header_03.gif" width="99" height="60" border="0"></a></div>
				<div id="button3"><a href="?mod=links"><img src="layout/header/Bilder/header_04.gif" width="99" height="60" border="0"></a></div>
				<div id="button4"><a href="?mod=guestbook"><img src="layout/header/Bilder/header_05.gif" width="100" height="60" border="0"></a></div>
				<div id="button5"><a href="?mod=login"><img src="layout/header/Bilder/header_06.gif" width="81" height="60" border="0"></a></div>
			</div>
		<div id="maincontainer"></div>
		<div id="right"></div>
	</div>
</body>
</html>

Vielleicht kann mir ja wer helfen. Danke schonmal =)

MfG aCid
 
Hier mein Lösungsvorschlag:

Code: 
#right{
	height:400px;
	width:10px;
	background-color:#CCCCCC;
	float:right;
         margin-top:-61px; /* = header-height: 60px + border-bottom: 1px */
}
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test v1</title>
<link href="style.css" rel="stylesheet" type="text/css">

<style type="text/css">
/* CSS Document */
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
body{
	background-repeat:repeat;
  	font-family:Arial, Helvetica, sans-serif;
  	font-size:10px;
  	color:#3D3D3D;
}
#main{
  	width:700px;
  	height:400px;
 	background-color:#FFFFFF;
  	border: 1px solid #A6A6A6;
  	margin: 50px auto;
 	padding:0px 0 0 0px;
}
#left{
	height:400px;
	width:10px;
	background-color:#CCCCCC;
	float:left;
}
#header{
	width:680px;
	height:60px;
	border-bottom:1px solid #a6a6a6;
	float:left;
}
#logo{
	width:211px;
	height:60px;
	background-image:url(layout/header/Bilder/header_01.gif);
	background-repeat:no-repeat;
	float:left;
}
#button1{
	width:90px;
	height:60px;
	background-image:url(layout/header/Bilder/header_02.gif);
	background-repeat:no-repeat;
	float:left;
}
#button2{
	width:99px;
	height:60px;
	background-image:url(layout/header/Bilder/header_03.gif);
	background-repeat:no-repeat;
	float:left;
}
#button3{
	width:99px;
	height:60px;
	background-image:url(layout/header/Bilder/header_04.gif);
	background-repeat:no-repeat;
	float:left;
}
#button4{
	width:100px;
	height:60px;
	background-image:url(layout/header/Bilder/header_05.gif);
	background-repeat:no-repeat;
	float:left;
}
#button5{
	width:81px;
	height:60px;
	background-image:url(layout/header/Bilder/header_06.gif);
	background-repeat:no-repeat;
	float:left;
}
#maincontainer{
	width:680px;
	height:340px;
	float:left;
}
#right{
	height:400px;
	width:10px;
	background-color:#CCCCCC;
	float:right;
         margin-top:-61px; /* = header-height: 60px + border-bottom: 1px */
}
</style>
</head>

<body>
	<div id="main">
		<div id="left"></div>
			<div id="header">
				<div id="logo"></div>
				<div id="button1"><a href="?mod=home"><img src="layout/header/Bilder/header_02.gif" width="90" height="60" border="0"></a></div>
				<div id="button2"><a href="?mod=aboutme"><img src="layout/header/Bilder/header_03.gif" width="99" height="60" border="0"></a></div>
				<div id="button3"><a href="?mod=links"><img src="layout/header/Bilder/header_04.gif" width="99" height="60" border="0"></a></div>
				<div id="button4"><a href="?mod=guestbook"><img src="layout/header/Bilder/header_05.gif" width="100" height="60" border="0"></a></div>
				<div id="button5"><a href="?mod=login"><img src="layout/header/Bilder/header_06.gif" width="81" height="60" border="0"></a></div>
			</div>
		<div id="maincontainer"></div>
		<div id="right"></div>
	</div>
</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

[ editpost ] Damit der IE das Boxmodell korrekt interpretiert, ist eine Doctype-Angabe für das Dokument erforderlich.
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück