zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Frage zu einem Abstand, 2 Frage zu einem Bildwechsel (MouseOver)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2011, 20:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2011
Beiträge: 11
moonsorrox befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2011, 07:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2011
Beiträge: 11
moonsorrox befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2011, 18:00
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von moonsorrox Beitrag anzeigen
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 anzeigen
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 anzeigen
Kann ich das mit CSS auch hinkriegen..?
Natürlich. Google ist dein Freund...

gruß,
take
Mit Zitat antworten
  #4 (permalink)  
Alt 22.06.2011, 09:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2011
Beiträge: 11
moonsorrox befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 22.06.2011, 17:42
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von moonsorrox Beitrag anzeigen
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 anzeigen
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 anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 23.06.2011, 07:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2011
Beiträge: 11
moonsorrox befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.06.2011, 07:51
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von moonsorrox Beitrag anzeigen
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 anzeigen
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 anzeigen
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 anzeigen
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
Mit Zitat antworten
  #8 (permalink)  
Alt 24.06.2011, 09:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2011
Beiträge: 11
moonsorrox befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Mouseover Bildwechsel Problem Kevin-Kai CSS 6 24.06.2010 20:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:56 Uhr.