✔ Wie kriege ich hier noch einen weißen Rahmen drum?

D

Doubletaker

Mitglied
Ich verzweifle im Moment total und komme irgendwie nicht mehr weiter... Am liebsten würde ich um das Ganze noch einen weißen Rahmen in der Breite von 10 Pixeln drumherum packen, aber irgendwie bin ich damit überfordert. Denn ich habe auch zuvor noch nicht mit z-index gearbeitet, sondern immer mit Tabellen und da war das immer gaaaanz einfach...

HTML: 
<!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" dir="ltr" lang="en-US">

	<head profile="http://gmpg.org/xfn/11">

	<title>KÜNZLER KUNST</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
	<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
	<script type="text/javascript" src="supersized.js"></script>
	<script type="text/javascript">  
		$(function(){
			$.fn.supersized.options = { 
				startwidth: 640,  
				startheight: 480,
				vertical_center: 1,
				slideshow: 1,
				navigation: 1,
				transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
				pause_hover: 0,
				slide_counter: 1,
				slide_captions: 1,
				slide_interval: 3000  
			};
	        $('#supersize').supersized(); 
	    });
	</script>
	
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		a{
			color:#8FC2FF;
			text-decoration: none;
			outline: none;
		}
		a:hover{
			text-decoration: underline;
		}
		img{
			border:none;
		}
		body {
			overflow:hidden;/*Needed to eliminate scrollbars*/
			background:#000;
		}
		#content{
			margin:0px auto;
			height:100px;
			width:100%;
			bottom:45%;
			z-index: 3;
			position:absolute;
		}
		#footer{
			margin:0px auto;
			height:45px;
			width:100%;
			bottom:0%;
			z-index: 3;
			position:absolute;
		}
		#contentframe{
			overflow: hidden;
			height: 100%;
			text-align:left;
			z-index: 3;
		}
		#slidecaption{
			overflow: hidden;
			color:#FFF;
			font:14px "Helvetica Neue", Arial, sans-serif;
		}
		/*Supersize Plugin Styles*/
		#loading {
			position: absolute;
			top: 49.5%; 
			left: 49.5%;
			z-index: 3;
			width: 24px; 
			height: 24px;
			text-indent: -999em;
			background-image: url(images/progress.gif);
		}
		#supersize{
			position:fixed;
		}
		#supersize img, #supersize a{
			height:100%;
			width:100%;
			position:absolute;
			z-index: 0;
		}
		#supersize .prevslide, #supersize .prevslide img{
			z-index: 1;
		}
		#supersize .activeslide, #supersize .activeslide img{
			z-index: 2;
		}
		.opacity{
			background:#000000;
			filter:alpha(opacity=80);
			-moz-opacity:0.8;
			opacity:0.8; 
			-khtml-opacity:0.8;
		}
		
	</style>
</head>

<body>
<!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersize">
	<a href="#"><img src="images/supersize/01.jpg" title="TITEL ZUM BILD 1"/></a>
	<a href="#"><img src="images/supersize/02.jpg" title="TITEL ZUM BILD 2"/></a>
	<a href="#"><img src="images/supersize/03.jpg" title="TITEL ZUM BILD 3"/></a>
</div>

<!--Content area that hovers on top-->
<div id="content">
	<div id="contentframe">
<table width="100%" height="90" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="90" height="90" align="left"><div id="navigation"><a href="#" id="prevslide"><img src="images/back_dull.gif" width="90" height="90"/></a></div></td>
    <td>&nbsp;</td>
    <td width="213" height="90"><img src="images/logo.gif" alt="KÜNZLER KUNST" width="213" height="90" /></td>
    <td width="631" align="right" valign="bottom" class="opacity">
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="26"></td>
    <td><a href="biografie.htm"><img src="images/biografie.gif" width="85" height="14" /></a></td>
    <td width="13"></td>
    <td><a href="ausstellungen.htm"><img src="images/ausstellungen.gif" width="137" height="14" /></a></td>
    <td width="13"></td>
    <td><a href="galerie.htm"><img src="images/galerie.gif" width="67" height="14" /></a></td>
    <td width="13"></td>
    <td><a href="coaching.htm"><img src="images/coaching.gif" width="88" height="14" /></a></td>
    <td width="13"></td>
    <td><a href="events.htm"><img src="images/events.gif" width="60" height="14" /></a></td>
    <td width="13"></td>
    <td><a href="kontakt.htm"><img src="images/kontakt.gif" width="77" height="14" /></a></td>
    <td width="26"></td>
  </tr>
  <tr>
    <td height="13" colspan="13"></td>
  </tr>
</table>
</td>
    <td width="90" height="90"><div id="navigation"><a href="#" id="nextslide"><img src="images/forward_dull.gif" width="90" height="90"/></a></div></td>
  </tr>
</table>		
	</div>
</div>
	<div id="footer">
      <table width="100%" height="45" border="0" cellpadding="0" cellspacing="0" class="opacity">
        <tr>
          <td width="33%"><div id="slidecounter"><!--Slide counter--><span class="slidenumber"></span>/<span class="totalslides"></span></div></td>
          <td width="33%" align="center"><div id="slidecaption"><!--Slide captions displayed here--></div></td>
          <td width="33%">&nbsp;</td>
        </tr>
      </table>
    </div>
</div>
</body>
</html>

oder auch zum klicken.
 
Hi,

wenn du einen zusätzlichen Rahmen vorsehen willst, mußt du gemäß dem Box-Modell seine Stärke (2*10px) von der Boxenbreite und -höhe subtrahieren.

mfg Maik
 
Jo, weil sich nunmal "px" von "%" nicht subtrahieren lassen - hier verhält es sich halt genauso, wie in der Mathematik mit den Äpfel und Birnen.

Ansonsten hättest du die Möglichkeit, für das <body>-Element einen weißen Hintergrund einzurichten, und deine Elemente um 10px vom Fensterrand eingerückt zu positionieren.

mfg Maik
 
Eben... Aber die Prozente sind für alle Auflösungen von Vorteil... Ich schaffe es nur, dass ich auf den Seiten die weißen Balken hinkriege... Oben und unten schaffe ich es leider nicht...
 
Eine relative Breite und Höhe für eine DIV-Box erzielst du ebenso auf diese Weise:

CSS: 
#box {
position:absolute;
top:10px;
right:10px;
bottom:10px;
left:10px;
background:#ddd;
}

mfg Maik
 
Tatsächlich? Dann ist dir dabei ein Fehler unterlaufen.

Bei mir hat es gerade mit deinem gezeigten Code trotz der beiden Blöcke #content und #footer erwartungsgemäß einwandfrei funktioniert.

mfg Maik
 
Füge ich diese Box von dir einfach hinzu Ich habe heute Mittag einfach versucht an meinen vorhandenen Boxen so die Ränder zu schaffen...
 
Meine "Box" war nur ein grundsätzliches Beispiel bzgl. der relativen Breite und Höhe, die du mit den prozentualen Breiten- und Höhenangaben umgesetzt hast, und soll in deinem Code nicht eingefügt werden.

Ich hab das eben in deinem Code so realisiert:

CSS: 
		body {
			overflow:hidden;
			background:fff; /* erzeugt den weißen Rahmen */
		}
		#content{
			top:10px;
			right:10px;
			bottom:55px;
			left:10px;
			z-index: 3;
			position:absolute;
			background:#000;
		}
		#footer{
			height:45px;
			right:10px;
			bottom:10px;
			left:10px;
			z-index: 3;
			position:absolute;
			background:#000;
		}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück