Css hover

Webdesign & Technik HTML & CSS
1

Hay Leute,

ich habe ein andres problem undzwar möchte ich gerne eine hover auf der page bauen

link http://www.dortmund.bplaced.net/str8nrg/ dies will aber nicht so wie ich es will…

ich möchte es so das der gesamte kasten ausgefüllt ist.

MFG

2

Hi gkc,

da ich gerade ein wenig Zeit hatte habe ich deine Seite mal mittels DIV aufgebaut. Mit Tabellen sollte man kein Seitenlayout aufbauen.
Das ganze ist jetzt flexibler und auch nicht so verschachtelt wie vorhin.

Hier ist der Quellcode ( inklusive CSS hover für die Navi ):

<!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>Testaufbau</title>

<style type="text/css">
	.no-css {
		position:absolute;
		display:none;
		padding:0;
		margin:0;
		width:0;
		height:0;
		line-height:0;
	}
	.clear {
		clear:both;
	}
	
	body {
		font:12px Arial, Helvetica, sans-serif;
		background-color:#333;
	}
	
	#ganz {
		position:relative;
		width:930px;
		padding:0;
		margin:0 auto;
		border:4px solid #fff;
	}
		#head {
			position:relative;
			height:250px;
			background-color:#0c0;
		}
		#navi {
			position:relative;
			border-top:1px solid #3C3733;
			border-bottom:1px solid #3C3733;
		}
			#navi ul {
				list-style:none;
				padding:0;
				margin:0;
			}
				#navi ul li {
					list-style:none;
					width:154.1px;
					padding:0;
					margin:0;
					float:left;
					text-align:center;
					border-right:1px solid #3C3733;
				}
				#navi ul li.last {border-right:none;}
					#navi ul li a {
						display:block;
						width:100%;
						padding:30px 0;
						margin:0;
						color:#FFF;						
						font-size:16px;
						font-weight:bold;
						text-decoration:none;						
						background-color:#645F59;
					}
					#navi ul li a:hover {
						background-color:#D80101;
					}
		#info {
			position:absolute;
			right:0;
			top:0;
			height:250px;
			width:250px;
			background-color:#c00;
			float:left;
		}
		#main {
			position:relative;
			min-height:300px;
			background-color:#fff;
		}
		* html #main { min-height:300px; } /* IE6 helper */
			#main-left {
				position:relative;
				min-height:300px;
				width:680px;
				background-color:#666;
				float:left;
			}
			#main-right {
				position:relative;
				min-height:300px;
				width:250px;
				background-color:#c00;
				float:left;
			}
</style>

</head>

<body>

	<!-- start: #ganz ++++++++++++++++++++++++++++++++++++++++++++++++++ -->
	<div id="ganz">
		
		<!-- start: #head ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<div id="head">
			<strong class="box-label">head: </strong>
		</div>
		<!-- start: #head ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			
			<hr class="no-css" />
			
		<!-- start: #navi ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<div id="navi">
			<ul>
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="Dancer">Dancer</a></li>
				<li><a href="#" title="Platzierungen">Platzierungen</a></li>
				<li><a href="#" title="Gästebuch">Gästebuch</a></li>
				<li><a href="#" title="Bilder">Bilder</a></li>
				<li class="last"><a href="#" title="Videos">Videos</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<!-- start: #navi ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			
			<hr class="no-css" />
		
		<!-- start: #info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<div id="info">
			<strong class="box-label">info: </strong>
		</div>
		<!-- start: #info ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			
			<hr class="no-css" />
			
		<!-- start: #main ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<div id="main">
		
			<!-- start: #main-left ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			<div id="main-left">
				<strong class="box-label">main-left: </strong>
			</div>
			<!-- start: #main-left ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			
			<!-- start: #main-right ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			<div id="main-right">
				<strong class="box-label">main-right: </strong>
			</div>
			<!-- start: #main-right ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			
			<div class="clear"></div>
		</div>
		<!-- start: #main ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

	</div>
	<!-- ende: #ganz +++++++++++++++++++++++++++++++++++++++++++++++++++ -->

</body>
</html>

Den Quellcode in eine Datei mit der Endung *.htm / *.html speichern und los geht’s :wink:

lg,
Codebox

3

Hay codebox,

Danke sehr…

mfg

4

:astonished: Woe bist du denn daraif gekommen, deine seite mit reinen tabellen zusammenzubasteln??

5

habe da ein wenig mit photoshop und dreamviewer rumgespielt… :stuck_out_tongue: