mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 13:19 Benutzername: Passwort: Auto-Login

Thema: (css) images classes nebeneinander? vom 02.04.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> (css) images classes nebeneinander?
Seite: 1, 2  Weiter
Autor Nachricht
Account gelöscht
Threadersteller


Ort: -
Alter: -
Verfasst Do 02.04.2009 13:38
Titel

(css) images classes nebeneinander?

 Antworten mit Zitat Zum Seitenanfang
Hallo zusammen,
hab da ma wieder son echt bescheuertes Problem. Brauch nen Hovereffeckt ohne Java und hab das ganze folgendermaßen gelöst:

HTML:

Code:
<a href="#" class="home home"></a>
<a href="#" class="wer wer"></a>
<a href="#" class="was was"></a>
<a href="#" class="impressum impressum"></a>


CSS:

Code:
.home
{ width: 90px;
height: 29px;
display: block; }

.home
{ background: url(images/home.jpg) no-repeat; }

.home:hover
{ background-position: 0 -29px; }



.wer
{ width: 137px;
height: 29px;
display: block; }

.wer
{ background: url(images/wer.jpg) no-repeat; }

.wer:hover
{ background-position: 0 -29px; }



.was
{ width: 171px;
height: 29px;
display: block; }

.was
{ background: url(images/was.jpg) no-repeat; }

.was:hover
{ background-position: 0 -29px; }



.impressum
{ width: 124px;
height: 29px;
display: block; }

.impressum
{ background: url(images/impressum.jpg) no-repeat; }

.impressum:hover
{ background-position: 0 -29px; }


Jetzt hab ich nur das Problem das die Images alle untereinander und nicht nebeneinander stehen. Wie krieg ich das am besten hin?

Schonmal danke =)
 
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Do 02.04.2009 13:44
Titel

Antworten mit Zitat Zum Seitenanfang
<a href="#" class="home home"></a>

wieso schreibst du jede klasse 2mal da rein? * Ööhm... ja? * verstehe ich nicht

und ansonsten kannst du die teile mit float:left; nebeneinander anzeigen lassen, oder falls es dein vorhaben erlaubt display:inline anstadt block

Zuletzt bearbeitet von nel am Do 02.04.2009 13:44, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 02.04.2009 13:52
Titel

Antworten mit Zitat Zum Seitenanfang
Sleeper hat geschrieben:
oder falls es dein vorhaben erlaubt display:inline anstadt block


Code:
 .foo {display:inline-block;}


wäre aber besser geeignet.
für den IE6 kommt dann eine andere Lösung in Frage.

Code:

* html .foo {
  display:block;
  float:left;
}


sollte eigentl funktionieren
den Float solltest du für den IE6 dann natürlich wieder löschen.
  View user's profile Private Nachricht senden
Account gelöscht
Threadersteller


Ort: -
Alter: -
Verfasst Do 02.04.2009 14:04
Titel

Antworten mit Zitat Zum Seitenanfang
sobald ich irgendwas mit inline mache zeigt der mir das ganze Element garnicht mehr an <-- Schuld!

PS:
kann mir irgendwie nicht helfen aber kann es sein Sleepder das du dein Quelltext für deine navi von
http://www.ndesign-studio.com/ geklaut hast??? *ha ha*

Original
Code:
#header_nav {
   float:right;
   margin-right: 7px;
   background: url(images/headernav-divider.gif) no-repeat right top;
   font-size: 90%;

   padding: 1px 5px 0px 0px;
}
#nav {
   list-style:none;
   margin:28px 0px 0px;

   padding:0px;
   clear:both;
   float:right;
   line-height:0px;
}
#nav li{
   margin-left:5px;
   float:left;
}
#nav li a{
   height: 25px;
   display:block;
   float:left;
   text-decoration:none;
   text-indent: -900em;
}
#nav #nav-home a{
   width: 63px;
   background: url(images/nav-blog.gif) no-repeat left top;
}
#nav #nav-home a:hover{
   background: url(images/nav-blog.gif) no-repeat left bottom;
}
#nav #nav-about a{
   width: 65px;
   background: url(images/nav-about.gif) no-repeat left top;
}
#nav #nav-about a:hover{
   background: url(images/nav-about.gif) no-repeat left bottom;
}
#nav #nav-resources a{
   width: 91px;
   background: url(images/nav-resources.gif) no-repeat left top;
}
#nav #nav-resources a:hover{
   background: url(images/nav-resources.gif) no-repeat left bottom;
}
#nav #nav-portfolio a{
   width: 86px;
   background: url(images/nav-portfolio.gif) no-repeat left top;
}
#nav #nav-portfolio a:hover{
   background: url(images/nav-portfolio.gif) no-repeat left bottom;
}
#nav #nav-icons a{
   width: 64px;
   background: url(images/nav-icons.gif) no-repeat left top;
}
#nav #nav-icons a:hover{
   background: url(images/nav-icons.gif) no-repeat left bottom;
}
#nav #nav-forum a:hover{
   background: url(images/nav-forum.gif) no-repeat left bottom;
}



GEKLAUT:
Code:
#nav {
   width: 972px;
   height: 52px;
   margin: 173px 0 0 15px;
   list-style:none;
   padding:0px;
   line-height:0px;
}
#nav li{
   float:left;
}
#nav li a{
   height: 52px;
   display:block;
   float:left;
   text-decoration:none;
   text-indent: -900em;
}
#nav #nav-home a{
   width: 125px;
   background: url(images/startseite.gif) no-repeat left top;
}
#nav #nav-home a:hover{
   background: url(images/startseite_active.gif) no-repeat left bottom;
}
#nav #nav-home a.active{
   background: url(images/startseite_active.gif) no-repeat left bottom;
}
#nav #nav-galerie a{
   width: 125px;
   background: url(images/galerie.gif) no-repeat left top;
}
#nav #nav-galerie a:hover{
   background: url(images/galerie_active.gif) no-repeat left bottom;
}
#nav #nav-tutorials a{
   width: 128px;
   background: url(images/tutorials.gif) no-repeat left top;
}
#nav #nav-tutorials a:hover{
   background: url(images/tutorials_active.gif) no-repeat left bottom;
}
#nav #nav-about a{
   width: 126px;
   background: url(images/about.gif) no-repeat left top;
}
#nav #nav-about a:hover{
   background: url(images/about_active.gif) no-repeat left bottom;
}
#nav #nav-links a{
   width: 126px;
   background: url(images/links.gif) no-repeat left top;
}
#nav #nav-links a:hover{
   background: url(images/links_active.gif) no-repeat left bottom;
}

#nav #nav-gb a{
   width: 131px;
   background: url(images/gb.gif) no-repeat left top;
}
#nav #nav-gb a:hover{
   background: url(images/gb_active.gif) no-repeat left bottom;
}
#nav #nav-gb a.active{
   background: url(images/gb_active.gif) no-repeat left bottom;
}[/
code]

* Mal bisschen die Nase pudern... *

Zuletzt bearbeitet von am Do 02.04.2009 14:10, insgesamt 2-mal bearbeitet
 
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 02.04.2009 14:05
Titel

Antworten mit Zitat Zum Seitenanfang
zeig mal bitte das HTML Markup und dein geändertes CSS
  View user's profile Private Nachricht senden
Account gelöscht
Threadersteller


Ort: -
Alter: -
Verfasst Do 02.04.2009 14:12
Titel

Antworten mit Zitat Zum Seitenanfang
hab jetzt nicht viel geändert, weil wie gesagt mit inline alles weg ist

Code:
<div id="navi">
<a href="#" class="home"></a>
<a href="#" class="wer"></a>
<a href="#" class="was"></a>
<a href="#" class="impressum"></a>
</div>


Code:
#navi
{ height: 29px;
background: #ff8800;
float: left; }

.home
{ width: 90px;
height: 29px;
display: block; }

.home
{ background: url(images/home.jpg) no-repeat; }

.home:hover
{ background-position: 0 -29px; }



.wer
{ width: 137px;
height: 29px;
display: block; }

.wer
{ background: url(images/wer.jpg) no-repeat; }

.wer:hover
{ background-position: 0 -29px; }



.was
{ width: 171px;
height: 29px;
display: block; }

.was
{ background: url(images/was.jpg) no-repeat; }

.was:hover
{ background-position: 0 -29px; }



.impressum
{ width: 124px;
height: 29px;
display: block; }

.impressum
{ background: url(images/impressum.jpg) no-repeat; }

.impressum:hover
{ background-position: 0 -29px; }
 
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Do 02.04.2009 15:17
Titel

Antworten mit Zitat Zum Seitenanfang
Tobinho hat geschrieben:
sobald ich irgendwas mit inline mache zeigt der mir das ganze Element garnicht mehr an <-- Schuld!

PS:
kann mir irgendwie nicht helfen aber kann es sein Sleepder das du dein Quelltext für deine navi von
http://www.ndesign-studio.com/ geklaut hast??? *ha ha*


vergleich es mal ganz genau dann wirst du die unterschiede schon erkennen * Ich geb auf... *
  View user's profile Private Nachricht senden
Account gelöscht
Threadersteller


Ort: -
Alter: -
Verfasst Do 02.04.2009 15:18
Titel

Antworten mit Zitat Zum Seitenanfang
Sleeper hat geschrieben:
Tobinho hat geschrieben:
sobald ich irgendwas mit inline mache zeigt der mir das ganze Element garnicht mehr an <-- Schuld!

PS:
kann mir irgendwie nicht helfen aber kann es sein Sleepder das du dein Quelltext für deine navi von
http://www.ndesign-studio.com/ geklaut hast??? *ha ha*


vergleich es mal ganz genau dann wirst du die unterschiede schon erkennen * Ich geb auf... *


habsch? * Ööhm... ja? *
zahlen ändern, yeah!
lächerlich

Zuletzt bearbeitet von am Do 02.04.2009 15:18, insgesamt 1-mal bearbeitet
 
 
Ähnliche Themen [html/css] 2 classes auf einen link ?
Dummy Images
Dropdown-Menu mit Images
Images preloaden in FlashMX
Image Slider für Background Images
Images/Wallpaper von stylischen Frauen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB