17.06.2011, 19:20
|
|||
|
|||
Frage zu einem Abstand, 2 Frage zu einem Bildwechsel (MouseOver)
Betrifft folgende Test-Webseite.
--= Resser Trailfräser =-- Die Bildschirme werden immer breiter und dieses Kreuz wird automatisch mit breiter.. kann ich dies mit CSS verhindern.? Habe da einige Versuche hinter mir aber mir gelingt es nicht. 2 Frage dazu der Austausch der Bilder wird hier mit Javascript gemacht und dieses Bild habe ich in einer Tabelle. Kann ich das mit CSS auch hinkriegen..? Code:
=======================================
1. Kalibrierung und Restauration
======================================= */
/* Reset - alle Abstände auf NULL */
* { margin: 0; padding: 0; }
/* Meine wichtigsten Farben
#5B5B5B = Dunkles Grau
#2C2C2C = sehr Dunkles Grau
/* Fräser Farben
#F8F8FF = Ghostwhite
#1d242a = DunkelGrau /* Background
#ff8c00 = DarkOrange
#ffa500 = Orange
#ff4500 = OrangeRot
#FA4426 = RT-Rot
/* =======================================
2. Allgemeine Styles
======================================= */
body {
background-color: #FA4426; /* RT-Rot */
margin:0px 0px 0px 0px;
color:#F8F8F8;
}
a{font-family:verdana,arial;color:#2C2C2C;text-decoration:none;font-size:8pt;}
a:visited{font-family:verdana,arial;color:#2C2C2C;text-decoration:none;font-size:8pt;}
a:hover{font-family:verdana,arial;color:#2C2C2C;text-decoration:none;font-weight:normal;font-size:8pt;}
a:active:{font-family:verdana,arial;color:#2C2C2C;text-decoration:none;font-size:8pt;}
/* =======================================
3. Styles für die Layoutbereiche
======================================= */
div#wrapper {
background-color: transparent;
margin: 0 auto;
}
div#obenL {
position:absolute;
top:0%;
left: 0%;
background-color: #1d242a;
width: 50%;
height:49%;
}
div#untenL {
position:absolute;
top: 50%;
left: 0%;
background-color: #1d242a;
width: 50%;
height:50%;
}
div#obenR {
position:absolute;
top: 0%;
left: 51%;
background-color: #1d242a;
width: 49%;
height:49%;
}
div#untenR {
position:absolute;
top: 50%;
left: 51%;
background-color: #1d242a;
width: 49%;
height:50%;
}
div#logo {
position:absolute;
top: 50%;
left: 50%;
margin-left: -15em;
margin-top: -11em;
}
div#adresse {
position:absolute;
width:40%;
height:3%;
right:2%;
bottom:1px;
text-align:right;
color:#7F7F7F;
font-size:8pt;
}
HTML-Code:
<body onload="MM_preloadImages('imgindex/index.jpg','imgindex/Bulle600.png')"> <div id="wrapper"> <div id="obenL"></div> <div id="obenR"></div> <div id="untenL"></div> <div id="untenR"></div> <div id="logo"> <table width="100%" height="100%" border="0"> <tr> <td align="center" valign="middle"> <map name="start_map" id="Startimg"> <area shape="poly" coords="3,174,18,110,68,56,136,17,183,4,315,2,373,21,429,50,463,85,496,135,495,218,470,265,410,314,357,339,315,349,183,350,120,330,58,291,14,237" href="home/home.html" alt="Resser Trailfraeser" onfocus="this.blur()" onMouseOver="MM_swapImage('Image','','imgindex/Bulle600.png',1)" onMouseOut="MM_swapImgRestore()" /> </map> <img src="imgindex/rt.png" alt="Resser Trailfräser" name="Image" width="500" height="356" border="0" usemap="#start_map" /> </td> </tr> </table> </div> <div id="adresse"> © <a style="color:#7F7F7F;" href="#" onfocus="this.blur()">Resser Trailfräser 2011</a> by | R.R.I </div> </div> </body> 
|
| Sponsored Links |
|
21.06.2011, 06:19
|
|||
|
|||
|
Kann mir keiner einen Tipp geben was zumindest den senkrechten Balken in der Stärke betrifft.
Der wird mit der Breite des Browsers auch immer breiter...!! Das wäre das wichtigste. Die MouseOver Geschichte geht ja mit Javascript.
|
| Sponsored Links |
|
21.06.2011, 17:00
|
|||
|
|||
|
Zitat:
Zitat:
Zitat:
gruß, take
|
|
22.06.2011, 08:16
|
|||
|
|||
|
Zitat:
Code:
div#obenL {
position: fixed;
top: 0%;
left: 0%;
background-color: #1d242a;
width: 50%;
height: 50%;
border-right: 10px solid #FA4426;
border-bottom: 10px solid #FA4426;
}
div#untenL {
position: fixed;
top: 50%;
left: 0%;
background-color: #1d242a;
width: 50%;
height: 50%;
border-top: 10px solid #FA4426;
border-right: 10px solid #FA4426;
}
div#obenR {
position: fixed;
top: 0%;
left: 50%;
background-color: #1d242a;
width: 50%;
height: 50%;
border-left: 10px solid #FA4426;
border-bottom: 10px solid #FA4426;
}
div#untenR {
position: fixed;
top: 50%;
left: 50%;
background-color: #1d242a;
width: 50%;
height: 50%;
border-top: 10px solid #FA4426;
border-left: 10px solid #FA4426;
}
Zitat:
Zitat:
Ich denke ich werde die Bilder wohl noch ändern müssen. Ich hatte das Beispiel mit dem SelfHTML Logo gefunden welches nur zur Hälfte sichtbar ist und nach überfahren mit der Maus erst sichtbar wird. Aber dieses Beispiel funktioniert nicht mit meinen Bildern
|
|
22.06.2011, 16:42
|
|||
|
|||
|
Zitat:
Zitat:
Zitat:
gruß, take
|
|
23.06.2011, 06:38
|
|||
|
|||
|
Zitat:
Was wäre denn die Alternative dafür das dies zuviel position:fixed ist und ist dies jetzt hinderlich für die Seite.? Was bedeutet deine Aussage mit der notwendigen Positionierung "0" ? Zitat:
Ich hatte wie gesagt den Lösungsansatz von Ingo.de benutzt, aber bei mir war immer das eine Bild darunter zusehen..! Ich dachte es liegt an den *.png's und an der Größe, aber ich werde mir dies nochmal genau ansehen, dazu fehlte mir bisher etwas die Zeit. Unternommen habe ich bisher weiter nichts sondern einfach nur den Code original so genommen und nur die Bildpfade angepasst und da es so nicht ging habe ich es erst einmal gelassen. Es gibt ja noch genug Seiten dafür und ich denke ich brauche nur ein wenig Einarbeitungszeit um es erst einmal zu verstehen und umzusetzen.
|
|
23.06.2011, 06:51
|
||||
|
||||
|
Zitat:
Zitat:
Zitat:
Zitat:
gruß, take
|
|
24.06.2011, 08:31
|
|||
|
|||
|
Um hier eine Rückmeldung zu geben (hilft ja evtl. auch anderen) habe ich folgenden Code ohne JS genutzt um den Bildwechsel per CSS zu gestalten.
Code:
#logo {
float: left;
position: absolute;
width: 500px;
height: 420px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -175px;
}
#logo a {
background: url(../imgindex/rt.png) no-repeat scroll 0 0 ;
display: block;
font: bold 12px Arial,Helvetica,sans-serif;
height: 356px;
width: 500px;
}
#logo a:hover {
background: url(../imgindex/bulle500.png) repeat scroll 0 0 ;
height: 420px;
margin-top: -25px;
}
#logo a .showcase {
display: none;
}
#logo a:hover .showcase {
background: none repeat scroll 0 0 transparent;
display: block;
position: absolute;
}
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS Mouseover Bildwechsel Problem | Kevin-Kai | CSS | 6 | 24.06.2010 19:29 |
Linear-Darstellung
