✔ hoverbox intergrieren

Schnatterinchen · 4. Juli 2008

Hi, Wollt ma fragen ob es ein woran es liegen könnte, dass die hoverbox eine Internetseite so stark beeinträchtigt oder gar zerstört. Gibt es Alternativen von Bildergalerein die sich besser integrieren lassen?

Grüße

P.S. Sorry für die falsche NAchricht

Wollt gerade nen File einbinden von den beiden Seiten (mit und ohne hoverbox), die noch keine Webseiten sind; geht das oder brauch man dazu Webspace?

Maik · 4. Juli 2008

Hi,

Schnatterinchen hat gesagt.:
file:///C:/Users/michael%20pauka/Documents/Projekt/Webseite1/index.html

und was soll uns das nun sagen? :suspekt:

mfg Maik

Loomis · 4. Juli 2008

Du könntest einfach den Quelltext posten.

Maik · 4. Juli 2008

... oder besser einfach den Link zur Seite nennen, damit man sich das direkt anschauen und ein konkretes Bild von der gegebenen Situation machen kann.

mfg Maik

Schnatterinchen · 4. Juli 2008

na ja, ich hab zwar ne URL auf der htm. Seite, aber wen ich die als Link hier einfüge erscheint nix ---> ist ja noch keine Webseite.

hier der hmtl code der richtigen seite mit css:

Code:

body {
	margin: 20px;
	padding: 0;
	background: #FFFFFF url(images/img1.gif);
	font: normal small Arial, Helvetica, sans-serif;
	color: black;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: black;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a {
	color: black;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
}

/* Header */

#header {
	width: 590px;
	height: 110px;
	margin: 0 auto;
	padding: 35px 0 0 0;
	background: #FFEE8F url(images/img2.gif) repeat-x;
	border: 5px solid #FFFFFF;
	border-bottom: none;
}

#header h1 {
	text-align: center;
	font-size: 3em;
}

#header h2 {
	text-align: center;
	font-size: 1.4em;
}


/* Menu */

#menu {
	width: 590px;
	height: 36px;
	margin: 0 auto;
	padding: 0;
	background: #4E4E4E;
	border: 5px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;;
}


#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li{
	display: inline;
}

#menu a {
   float: left;
	width: 110px;
	height: 26px;
	padding-top: 10px;
	text-decoration: none;
	text-align: center;
	color: #CCCCCC;
}

 #menu a:hover, #menu .active a {
	background: #000000;
	color: #FFFFFF;
}

/* Splash */

#splash {
	width: 590px;
	margin: 0 auto;
	background: #FFFFFF;
	border-left: 5px solid #FFFFFF;
	border-right: 5px solid #FFFFFF;
}

/* Content */

#content {
	width: 590px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 5px solid #FFFFFF;
}

#content .title {
	padding: 10px 20px;
	background: #FFEE8E url(images/img4.gif) repeat-x;
	font-size: 1em;
}

#content .story {
	padding: 20px;
	border: 2px solid #FFEE8E;
}

/* Footer */

#footer {
	width: 550px;
	margin: 0 auto;
	padding: 10px 20px;
	background: #4E4E4E;
	border: 5px solid #FFFFFF;
	border-top: none;
}

#footer p {
	margin: 0;
	padding: 0 0 0 350px;
	text-align: center;
	font-size: x-small;
	color: #CCCCCC;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>no</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
	<h1>NO</h1>
	<h2>official Homepage</h2>
</div>
<div id="menu">
	<ul>
		<li><a href="#">Homepage</a></li>
		<li><a href="#">About me</a></li>
		<li class="active"><a href="#">Pictures</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div id="splash"><img src="http://www.tutorials.de/forum/images/img3.jpg" alt="" width="590" height="225" /></div>
<div id="content">
	<h2 class="title">Welcome to my Homepage!</h2>
	<div class="story">
		blabla
	</div>
</div>
<div id="footer">
	<p>Copyright 2008 by NoName</p>
</div>
</body>
</html>

html der nicht korrekten site mit der hoverbox.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>no</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
<div id="header">
	<h1>NoName</h1>
	<h2>official Homepage</h2>
</div>
<div id="menu">
	<ul>
		<li><a href="#">Homepage</a></li>
		<li><a href="#">About me</a></li>
		<li class="active"><a href="#">Pictures</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div id="splash"><img src="http://www.tutorials.de/forum/images/img3.jpg" alt="" width="590" height="225" /></div>
<div id="content">
	<h2 class="title">Welcome to my Homepage!</h2>
	<div class="story">
		<ul class="hoverbox">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo06.jpg" alt="description" /><img src="img/photo06.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo07.jpg" alt="description" /><img src="img/photo07.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo16.jpg" alt="description" /><img src="img/photo16.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo17.jpg" alt="description" /><img src="img/photo17.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo18.jpg" alt="description" /><img src="img/photo18.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo19.jpg" alt="description" /><img src="img/photo19.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo20.jpg" alt="description" /><img src="img/photo20.jpg" alt="description" class="preview" /></a>
</li>
</ul>
	</div>
</div>
<div id="footer">
	<p>Copyright 2008 by NoNAme</p>
</div>
</body>
</html>

Loomis · 4. Juli 2008

hoverbox.css auch noch bitte.

Schnatterinchen · 4. Juli 2008

hoverbox.css :

Code:

 *
{
	border: 0;
	margin: 0;
	padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
	text-decoration: none;
}

body
{
	background: #fff;
	color: #777;
	margin: 0 auto;
	padding: 50px;
	position: relative;
	width: 620px;
}

h1
{
	background: inherit;
	border-bottom: 1px dashed #ccc;
	color: #933;
	font: 17px Georgia, serif;
	margin: 0 0 10px;
	padding: 0 0 5px;
	text-align: center;
}

p
{
	clear: both;
	font: 10px Verdana, sans-serif;
	padding: 10px 0;
	text-align: center;
}

p a
{
	background: inherit;
	color: #777;
}

p a:hover
{
	background: inherit;
	color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

und noch ein Stylesheet ie_fixes.see für die Seite, an dem liegt denk ich net ---->das is denn alles

Code:

/* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
	position: relative;
}

.hoverbox a:hover
{
	display: block;
	font-size: 100%;
	z-index: 1;
}

.hoverbox a:hover .preview
{
	top: -38px;
	left: -50px;
}

.hoverbox li
{
	position: static;
}

Maik · 4. Juli 2008

Da dieses Problem hier im CSS-Forum immer wieder angesprochen wird, habe ich im Frühjahr dieses Jahres in den Webmaster FAQ den Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? veröffentlicht, der auch in deiner Bildergalerie den "Nagel auf dem Kopf trifft".

Da du die Listeneinträge li floaten lässt, muss diese Floatumgebung zum Schluß mittels der clear-Eigenschaft auch wieder aufgehoben, und so im Dokument der normale Textfluss hergestellt werden, damit die Box #content den Inhalt in der vollen Höhe umschliesst, und von ihm nicht am unteren Elementrand "überlappt" wird.

Die Lösung lautet in deinem Fall also:

Code:

<ul class="hoverbox clearfix"> ... </ul>

Code:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

mfg Maik

Schnatterinchen · 4. Juli 2008

jaaaa hat geklappt, ganz großen Dank° Den Rest hab ich selbst hinbekommen - Jetzt sttimmt wieder alles.

✔ hoverbox intergrieren

Schnatterinchen

Grünschnabel

Maik

Loomis

Mitglied Bunt

Maik

Schnatterinchen

Grünschnabel

Loomis

Mitglied Bunt

Schnatterinchen

Grünschnabel

Maik

Schnatterinchen

Grünschnabel

Neue Beiträge