Wie kriege ich hier noch einen weißen Rahmen drum? @ tutorials.de: Tutorials, Forum & Hilfe

Doubletaker · 03.04.10 19:51

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-Code:

<!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.

Maik · 03.04.10 20:03

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

Doubletaker · 03.04.10 21:45

Ok, aber auch nachdem ich das gelesen habe, komme ich nicht wirklich weiter...

Maik · 03.04.10 21:48

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

Doubletaker · 03.04.10 22:22

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...

Maik · 03.04.10 22:27

Eine relative Breite und Höhe für eine DIV-Box erzielst du ebenso auf diese Weise:

Code css:

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

mfg Maik

Doubletaker · 03.04.10 22:30

Damit habe ich mich als Erstes versucht... Es sind ja mehrere Boxen, daher hat es leider so auch nicht funktioniert...

Maik · 03.04.10 22:35

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

Doubletaker · 03.04.10 22:38

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...

Maik · 03.04.10 22:43

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:

Code 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

Doubletaker · 03.04.10 22:45

Wenn du hier guckst, dann siehst du, dass der Rahmen zwar vorhanden ist, aber nicht über den Hintergrundbildern liegt. Ich habe es etwas kompliziert ausgedrückt, aber du siehst direkt, was ich meine... :P

Maik · 03.04.10 22:47

Guck du dir lieber meinen CSS-Code im Browser an, der deine Frage beantwortet, wie du in deinem Seitenkonzept den umlaufenden Rahmen realisiert bekommst

mfg Maik

Doubletaker · 03.04.10 22:52

Hehe... Dein Code sieht dann so aus...

Maik · 03.04.10 23:04

Sieht im Ansatz doch richtig gut aus

Dann nimmst du eben den schwarzen Hintergrund wieder raus, und wiederholst die Übung für den dritten DIV-Block.

Du wirst dich ja wohl noch im Quellcode deiner eigenen Seite zurechtfinden. Wie unbeholfen kann man eigentlich sein?

mfg Maik

Doubletaker · 03.04.10 23:08

Warum denn nicht gleich so Ich weiß nur noch nicht wie ich die Hintergrundbilder angepasst kriege... Vielen Dank schon Mal für deinen Support!! Hast du denn da eine Idee für mich

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Wie kriege ich sowas hier hin ****

habe ein Video und will einen Rahmen drum machen

Wie baue ich einen weißen Stab?

Picture Popup - aber ohne weißen Rahmen

Wo kriege ich einen Editor und Tutorials her?

E-Mail:

Abonnieren Abbestellen