zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden button mit h3, h4 und bild als rollover?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.08.2007, 18:28
667 667 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.03.2006
Beiträge: 75
667 befindet sich auf einem aufstrebenden Ast
Standard button mit h3, h4 und bild als rollover?

ich möchte einen button gestalten, der eine h3 und h4, text und image enthält
layout wie in den beigefügten dateien, beim hover sollte der ganze button sich ändern (bild dunkler, text andere farbe)

<div id="jung">
<img src="medias/jung_hell.jpg" alt="Jungunternehmer">
<h3>Jungunternehmer</h3>
<h4>Unternehmensgründung</h4>
<p>und alle wichtigen Maßnahmen! <a href="#">Weiterlesen ...</a></p>
</div><!-- Ende jung -->

als liste umzusetzen ist auch möglich, jedoch habe ich da ja keine h3, ... dabei (suchmaschine)

gibt es da eine lösung?
Angehängte Grafiken
Dateityp: jpg normal.jpg (9,1 KB, 5x aufgerufen)
Dateityp: jpg hover.jpg (8,5 KB, 3x aufgerufen)
__________________
http://www.whitestone.at
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.08.2007, 18:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Daumen hoch

Zitat:
Zitat von 667 Beitrag anzeigen
ich möchte einen button gestalten,
Das ist kein Button, sondern ein Link

Zitat:
der eine h3 und h4,
Überschriften in einem Link (oder einem Button) sind "unlogisch".

Zitat:
text und image enthält
Das Bild wäre als Hintergrundgrafik besser augehoben.

Zitat:
<div id="jung">
Ein DIV ist weder ein Button noch ein Link.
Und diese Struktur entspricht nicht dem, was im Bild zusehen ist.

Zitat:
als liste umzusetzen ist auch möglich,
Eine Liste wäre sinnvoll, um die einzelnen Links zusammen zu fassen, nicht für die Links selber.

Zitat:
jedoch habe ich da ja keine h3, ... dabei (suchmaschine)
Diesen Satz verstehe ich nicht.

Zitat:
gibt es da eine lösung?
Wenn du mitarbeitest...

Code:
<ul id="dieListe">
   <li>
      <a href="..." id="jung">
         <strong>Jungunternehmer</strong>
         <em>Unternehmensgründung</em>
         <span>und alle wichtigen Maßnahmen!</span> 
      </a>
   </li>
</ul>
Code:
#dieListe a {
   display: block;
   width: 100px;
   padding-left: 20px; /* Platz für HG-Bild */
}
#dieListe a * {
   display: block;
}
#dieliste a#jung {
   background: white url(medias/jung_hell.jpg) no-repeat top left;
}
#dieListe a:hover {
   /* Wie man eine Hintergrundfarbe setzt weißt du hoffentlich */
}
Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.08.2007, 19:11
667 667 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.03.2006
Beiträge: 75
667 befindet sich auf einem aufstrebenden Ast
Standard

danke für die rasche antwort

das html sollte eigentlich veranschaulichen, wie ich die "abfolge" des quelltextes sein sollte,
button ist vielleicht auch der falsche begriff

mir war schon klar, dass ich das ganze als liste leichter umsetzen kann

oder eben als eigenen <div>, wo ich einzeln die links vergeben kann (link vom bild, von der h3 und h4, ...)
nur beim hover verändert sich dann auch nur die h3, wenn ich über sie fahre und nicht der ganze <div>
__________________
http://www.whitestone.at
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
verlinkter Button als Bild stekke CSS 24 03.03.2010 10:51
Bild über Bild rafa CSS 2 24.01.2010 19:46
horizontale Navigation mit rollover Bild c3ox CSS 3 28.11.2009 01:06
Bild als submit button paracelsus CSS 21 16.09.2007 20:35
css rollover - bild 'flackert' playaz CSS 3 02.05.2007 10:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:09 Uhr.