nicht angemeldet
Rotation einer Div-Box zu einer neuen Seite
0 0
Rotation einer Div-Box zu einer neuen Seite
Hallo zusammen,
mein Problem ist etwas schwierig zu beschreiben aber ich versuche es mal.
Ich habe also eine einfache HTML Seite die aus einer übergeordneten großen Div-Box besteht. In der übergeordneten Box befindet sich ein Hintergundbild.
Innerhalb dieser Box befinden sich 4 weitere Div-Boxen. Man kann sich das ganze vorstellen wie 4 nebeneinanderligende Quader. Nun liegt auf jedem der 4 Div-Boxen ein Link.
Ich möchte nun, dass wenn man auf den link der jeweiligen Div-Box klickt, sich diese um 90° dreht und quasi eine neue leere Div-Box angezeigt wird in welcher sich dann z.B. ein Text oder ein Formular oder so befindet und evtl. ebefalls wieder ein Link auf den man klicken kann, womit sich die Box wieder in den Ursprungszustand zurück dreht. Es ist schwer zu erklären. Wie gesagt, stellt euch vor ihr legt 4 Quader gleicher Länge nebeneinander und auf jeder Seite jedes Quaders steht etwas geschrieben. Nun dreht ihr einen der Quader um 90° und erhaltet dadurch einen Blick auf seine neue Seite. Genau dies soll per Klick auf den Link auf dem Quader passieren.
Hier mal mein derzeitger HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Praxisseite</title>
<meta name="author" content="XXX">
<meta name="date" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index">
<meta name="robots" content="follow">
<meta name="robots" content="noarchive">
<meta name="generator" content="Notepad++">
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<!-- Sprach- und Linkangabe für CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" language="JavaScript"></script>
</head>
<body>
<!-- BOX - Umschließt alle folgenden Boxen, enthält das Hintergrundbild und ist genau so groß wie das Hintergrundbild! -->
<div id="box">
<!-- BOX - Links "im CSS mit float:left" -->
<div id="left">
<p id="navi">
<a href="#" id="current"><b>TEXT 1</b></a></p>
<form>
</form>
</div>
<!-- BOX - Rechts "im CSS mit float:right" -->
<div id="right">
<p id="navi">
<a href="#" id="current"><b>TEXT 2</b></a></p>
</div>
<!-- BOX - Mitte "im CSS mit min-width:XXXpx" -->
<div id="middle">
<!-- BOX - Mitte - Linke Seite "im CSS mit float:left" -->
<div id="middleleft">
<p id="navi">
<a href="#" id="current"><b>TEXT 3</b></a></p>
</diV>
<!-- BOX - Mitte - Rechte Seite -->
<div id="middleright">
<p id="navi">
<a href="#" id="current"><b>TEXT 4</b></a></p>
</diV>
</diV>
</div>
</body>
</html>
Hier der CSS-Code dazu:
/* CSS Formatierungen für die Webseite*/
/* Formatierungen für den BODY-Bereich */
body {
color: black; /* Farbe der Schrift ist schwarz*/
font-size: 16px; /* Schriftgröße = 16 Pixel */
font-family: Calibri, Helvetica, Arial, 'Arial Black', sans-serif; /* Erlaubte Schriftarten */
min-width: 1000px;
margin-left: 10%;
margin-right: 10%;
margin-top:20px;
padding: 0;
}
/* Formatierungen für Überschriften H1 */
h1 {
color: black; /* Farbe der Schrift ist schwarz*/
font-family: 'Arial Black'; /* Erlaubte Schriftarten */
font-size: 30px; /* Schriftgröße = 30 Pixel */
padding: 0px; /* Innenabstand */
border: 0px; /* Angaben zum Rahmen "Farbe" + "Dicke" */
text-align: center;
vertical-align: baseline; /* Ausrichtung des Textes zur Mitte */
}
/* Formatierungen für Überschriften H2 */
h2 {
color: black; /* Farbe der Schrift ist schwarz*/
font-family: 'Arial Black'; /* Erlaubte Schriftarten */
font-size: 25px; /* Schriftgröße = 25 Pixel */
padding: 10px; /* Innenabstand */
border: 0px; /* Angaben zum Rahmen "Farbe" + "Dicke" */
background-color:#FFFFFF;
}
/* Formatierungen für Überschriften H3 */
h3 {
color: black; /* Farbe der Schrift ist schwarz*/
font-family: 'Arial Black'; /* Erlaubte Schriftarten */
font-size: 16px; /* Schriftgröße = 20 Pixel */
padding: 0; /* Innenabstand */
border: 0px; /* Angaben zum Rahmen "Farbe" + "Dicke" */
}
/* Formatierungen für Absätze "p" */
p {
color: #000000; /* Farbe der Schrift ist schwarz*/
font-family: Arial; /* Erlaubte Schriftarten */
font-size: 14px; /* Schriftgröße = 16 Pixel */
padding: 10px; /* Innenabstand */
white-space: normal; /* Normaler Textumbruch durch den Browser */
background-color:#FFFFFF;
text-align: center;
}
/* Formatierungen für den Blocksätze */
blockquote {
color: mediumblue; /* Farbe der Schrift ist mediumblau */
font-family: Calibri; /* Erlaubte Schriftarten */
font-size: 18px; /* Schriftgröße = 18 Pixel */
padding: 10px; /* Innenabstand */
background-color: #d3d3d3; /* Hintergrundfarbe */
}
/* Formatierungen für alle Bilder */
img {
border-width: 0px; /* Rahmenbreite = 0 */
height: auto; /* Höhe passt sich automatisch der Höhe des Bildes an */
width: auto; /* Breite passt sich automatisch der Breite des Bildes an */
}
/* Formatierungen für das Kontaktformular */
form {
}
/* Formatierungen für den Tabellenbereich "TH" */
th {
}
/* Formatierungen für den Tabellenbereich "TD" */
td {
}
#box {
width: 1280px;
height: 1024px;
border-width:0px;
border-color:seashell;
border-style:groove;
background-image: url(Bilder/hintergrund.jpg); /* Hintergrundbild */
background-repeat: no-repeat; /* Hintergrundbild soll nicht wiederholt werden */
}
#left {
float:left;
width:320px;
height:1024px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
#right {
float:right;
width:320px;
height:1024px;
border: 1px solid black;
}
#middle {
min-width:640px;
height:1024px;
}
#middleleft {
float:left;
min-width:320px;
height:1024px;
border: 1px solid black;
}
#middleright {
min-width:320px;
height:1024px;
border: 1px solid black;
}
/* Beginn Deklaration dynamische Navigationsleiste */
p#navi
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navi a
{
display: inline;
list-style-type: none;
}
#navi a { padding: 3px 10px; }
#navi a:link, #navi a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navi a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
/* Ende Deklaration dynamische Navigationsleiste */
-
-
Lieber dave,
meinst du so?
verdammt cool!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
-
-
Hi,
meiner Meinung nach überzeugt das erstere hinsichtlich 3D visuell besser.
Wobei ich den falschen Link gepostet hatte.
Damits im Firefox auch stimmt fehlten da noch 2 Angaben: http://jsfiddle.net/gbW5Y/3/~dave
-
Hi there,
Wobei ich den falschen Link gepostet hatte.
Damits im Firefox auch stimmt fehlten da noch 2 Angaben: http://jsfiddle.net/gbW5Y/3/Ah, jetzt seh' ich erst, was Felix meint. Ich hatte mich daran das erste Mal Anfang 2000 versucht; da waren die Browser natürlich noch Lichtjahre von so einer Möglichkeit entfernt...;)
-
-
-
-
-
Hallo zusammen,
Hallo.
mein Problem ist etwas schwierig zu beschreiben aber ich versuche es mal.
Ich versuche mal, das Problem zu verstehen, bevor ich antworten könnte.
Ich habe also eine einfache HTML Seite die aus einer übergeordneten großen Div-Box besteht. In der übergeordneten Box befindet sich ein Hintergundbild.
Innerhalb dieser Box befinden sich 4 weitere Div-Boxen. Man kann sich das ganze vorstellen wie 4 nebeneinanderligende Quader. Nun liegt auf jedem der 4 Div-Boxen ein Link.Soweit so gut.
Ich möchte nun, dass wenn man auf den link der jeweiligen Div-Box klickt, sich diese um 90° dreht
wohin dreht? Oder dreht sie sich auf der Stelle und fadet dann aus, um das dahinterliegende Div sichtbar zu machen?
und quasi eine neue leere Div-Box angezeigt wird in welcher sich dann z.B. ein Text oder ein Formular oder so befindet und evtl. ebefalls wieder ein Link auf den man klicken kann,
wohin führt dieser theoretische Link. Raus aus der Seite, extern, oder intern, auf eines der vier Ursprungsdivs...
womit sich die Box wieder in den Ursprungszustand zurück dreht. Es ist schwer zu erklären. Wie gesagt, stellt euch vor ihr legt 4 Quader gleicher Länge nebeneinander und auf jeder Seite jedes Quaders steht etwas geschrieben.
ergo 16 Links??? Weil du schreibst "jeder Seite". Oder meinst Du auf "einer Seite jedes Quaders"?
Nun dreht ihr einen der Quader um 90° und erhaltet dadurch einen Blick auf seine neue Seite.
neue Seite oder neues DIV?
Genau dies soll per Klick auf den Link auf dem Quader passieren.
Bis gleich