XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Frage zu einem Abstand, 2 Frage zu einem Bildwechsel (MouseOver) (http://xhtmlforum.de/showthread.php?t=64946)

moonsorrox 17.06.2011 20: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"> &copy;&nbsp;&nbsp; <a style="color:#7F7F7F;" href="#" onfocus="this.blur()">Resser
  Trailfräser 2011</a> &nbsp;&nbsp;by&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;R.R.I
</div>
</div>
</body>


moonsorrox 21.06.2011 07: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.

take_a_7 21.06.2011 18:00

Zitat:

Zitat von moonsorrox (Beitrag 496173)
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.?

max-width / max-height sollten dir helfen.
Zitat:

Zitat von moonsorrox (Beitrag 496173)
2 Frage dazu der Austausch der Bilder wird hier mit Javascript gemacht und dieses Bild habe ich in einer Tabelle.

Warum? Ich kann da keine tabellarischen Daten erkennen...
Zitat:

Zitat von moonsorrox (Beitrag 496173)
Kann ich das mit CSS auch hinkriegen..?

Natürlich. Google ist dein Freund...

gruß,
take

moonsorrox 22.06.2011 09:16

Zitat:

max-width / max-height sollten dir helfen.
damit habe ich nichts gebacken bekommen. Aber einen Anstoß gab es mir dennoch... ich habe es folgendermaßen gelöst

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:

Warum? Ich kann da keine tabellarischen Daten erkennen...
"nur" das Logo (Bild) ist in einer Tabelle, werde ich aber noch ändern

Zitat:

Natürlich. Google ist dein Freund...
Es ist ja nicht so das ich nicht danach gesucht habe, aber ich glaube mein Problem ist folgendes... ich habe dort *.png's drin und auch bei einem Attribut "hidden" scheint das andere Bild durch zumal es auch ein etwas anderes Format hat..

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

take_a_7 22.06.2011 17:42

Zitat:

Zitat von moonsorrox (Beitrag 496389)
damit habe ich nichts gebacken bekommen. Aber einen Anstoß gab es mir dennoch... ich habe es folgendermaßen gelöst

Code:

[...] viel Code [...]

Da ist mir viel zu viel position:fixed für diese Seitenstruktur. Die Anzahl der notwendigen Positionierungen beläuft sich bei dieser Seite auf 0.
Zitat:

Zitat von moonsorrox (Beitrag 496389)
Es ist ja nicht so das ich nicht danach gesucht habe, aber ich glaube mein Problem ist folgendes... ich habe dort *.png's drin und auch bei einem Attribut "hidden" scheint das andere Bild durch zumal es auch ein etwas anderes Format hat..

Ich kann dein Problem nicht nachvollziehen. Ein "hidden"-Attribut gibt es in HTML nicht und in CSS gibts keine Attribute. Du meinst wahrscheinlich visibility:hidden, ein damit versehenes Element kann aber nicht "durchscheinen", da es unsichtbar ist.
Zitat:

Zitat von moonsorrox (Beitrag 496389)
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.

In wie fern funktioniert es nicht? Was hast du schon unternommen, um es zum funktionieren zu bringen?

gruß,
take

moonsorrox 23.06.2011 07:38

Zitat:

Da ist mir viel zu viel position:fixed für diese Seitenstruktur. Die Anzahl der notwendigen Positionierungen beläuft sich bei dieser Seite auf 0.
OK, leider bin ich nicht der CSS Freak und wüsste nicht wie ich das anders lösen könnte, bin eigentlich zufrieden das es so ganz gut aussieht.
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:

visibility:hidden
ja klar du hast Recht, dass meinte ich natürlich...!
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.

take_a_7 23.06.2011 07:51

Zitat:

Zitat von moonsorrox (Beitrag 496475)
OK, leider bin ich nicht der CSS Freak und wüsste nicht wie ich das anders lösen könnte, bin eigentlich zufrieden das es so ganz gut aussieht.
Was wäre denn die Alternative dafür das dies zuviel position:fixed ist und ist dies jetzt hinderlich für die Seite.?

Ich hab es jetzt nicht ausgiebig getestet, aber fix Positionierte Elemente passen bei einer Viewportveränderung ihre Position nicht an. Alternativen wären floats oder inline-block.
Zitat:

Zitat von moonsorrox (Beitrag 496475)
Was bedeutet deine Aussage mit der notwendigen Positionierung "0" ?

Dass du auf deiner Seite 0x die Eigenschaft position benötigst.
Zitat:

Zitat von moonsorrox (Beitrag 496475)
ja klar du hast Recht, dass meinte ich natürlich...!
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.

Bei Ingos Version müssen die Bilder die gleichen Dimensionen haben, das stimmt.
Zitat:

Zitat von moonsorrox (Beitrag 496475)
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.

Denke ich auch. Es gibt auch Beispiele, die mit unterschiedlich großen Bildern funktionieren.

gruß,
take

moonsorrox 24.06.2011 09: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;
}



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:53 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023