zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe, ich kann nicht mehr ;-) (CSS und runde Ecken ;-))

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.11.2008, 04:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2006
Beiträge: 13
Timmi befindet sich auf einem aufstrebenden Ast
Standard Hilfe, ich kann nicht mehr ;-) (CSS und runde Ecken ;-))

CSS RUNDE ECKEN IN INLINE-ELEMENTEN UNMÖGLICH?

Hallo zusammen,
ich kämpfe seit guten 5 Stunden mit einem Problem, ich möchte gerne auf einer meine Projekte die Partnerlinks verschönern und habe mir dafür folgendes Layout vorgestellt:



Ich konnte das fürs Erste auch mit 2 Grafiken die ich per span-Element eingebunden habe lösen, in Safari wurden die Links auch sofort so wie oben abgebildet dargestellt, allerdings fing meine Odyssee an:
1. im aktuellen Firefox ist das a-Element um 2 Pixel verschoben, die scheint am unterschiedlichen Rendering der Schrift zu liegen.
2. im Safari taucht das Problem auf wenn ich die Schriftart um 1 Pixel verkleinere, da es in a- sowie in span-Elementen keine “height” Angabe gibt, kann ich die größe des a-Elements nicht an die Grafiken anpassen die bei 21 Pixel liegt.

Ich kann das ganze jetzt auch nicht in ein Block-Element packen da dieses eine Widht-Angabe benötigt und ich diese nicht so gerne für jedes Element vergeben möchte.

Ich habe nun folgende Zeilen zusammen gebracht funktioniert im Safari & Firefox auch allerdings zeigt der IE nur eine eckige Box mit den Links.

HTML:
HTML-Code:
<span class="abox_left">&nbsp;</span><span class="abox">
							<a href="'.$v['url'].'" target="'.$v['target'].'" title="'.$v['title'].'">'.$v['text'].'</a>
					  </span><span class="abox_right">&nbsp;</span>
CSS:
HTML-Code:
.abox {
	background: url('../images/abox.png') repeat-x;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:3px;
	padding-right:3px;
}

.abox_left {
	background: url('../images/abox_left.png') no-repeat;
	padding-top:3px;
	padding-bottom:3px;
}

.abox_right {
	background: url('../images/abox_right.png') no-repeat;
	padding-top:3px;
	padding-bottom:3px;
}
Ich hoffe es wird deutlich was ich gerne hätte, eventuell hat ja jmd. die Idee für mich ich wäre super dankbar.

Viele Grüße,
Tim
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.11.2008, 08:11
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

Zitat:
Zitat von Timmi Beitrag anzeigen
Ich kann das ganze jetzt auch nicht in ein Block-Element packen da dieses eine Widht-Angabe benötigt und ich diese nicht so gerne für jedes Element vergeben möchte.
wer hat dir denn den Unsinn erzählt?
width für Blockelemente vergebe ich nur da, wo es notwendig ist.
Warum sollte ich mein CSS unnötig aufblähen?

Informier dich doch mal hier, wie man ein vernünftiges grafisches Menü baut.

Das deine Menügrafiken verschieden breit sind macht nix, da jede normal ne eigene id bekommt und so leicht individuell per CSS angesprochen werden kann.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (02.11.2008 um 08:16 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.11.2008, 12:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2006
Beiträge: 13
Timmi befindet sich auf einem aufstrebenden Ast
Standard

Es, klappt so auch nicht, ich bekomme es einfach nicht hin 2 Grafiken einzubinden, hab dem a jetzt ein Background gegeben mit der linken ecke
die rechte Ecke will er jetzt aber einfach nicht einblenden außerdem ist der Linktext eher oben als in der Mitte das sieht mal mega übel aus Wie würdest du das denn lösen oder hat hier jmd. ein Beispiel? Ich hab im Netz auch nichts gefunden was bei mir passen könnte

Viele Grüße und schönen Dank,
Tim
Mit Zitat antworten
  #4 (permalink)  
Alt 02.11.2008, 12:20
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

hast du das Beispiel aus der FAQ denn verstanden.
Schau dir mal den ganzen Artikel an, d.h. über alle Arten von Menüs und bau die mal alle nach.
Wenn bei dir der Linktext nicht in der Grafik ist, sondern im Quelltext steht und die Grafik nur den Hintergrund zum Linktext bildet, gib a etwas padding-top , das hilft oft.

Um die Technik des grafischen Menüs in der FAQ zu verstehen, mußt du natürlich erstmal Image Replacement nach Gilder/Levin kapiert haben.

Aber hier noch mal exklusiv für dich ein Tut für ein grafisches Menü:
Erstellung eines einfachen, horizontalen, grafischen Menüs:

Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
Normalzustand ist oben in der Grafik, der Hoverzustand darunter.


Doctype ist "strict" um immer im Standardmodus zu sein.
Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

XHTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafisches Menü</title>
</head>
<body>
<ul>
    <li id="navi01"><strong><span></span>Startseite</strong></li>
    <li id="navi02"><a href="#"><span></span>Kontakt</a></li>
    <li id="navi03"><a href="#"><span></span>Galerie</a></li>
</ul>
</body>
</html>
Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:
Code:
* {
    padding:0;
    margin:0;
}
ul  {
    width:400px;
    margin:2em auto;
}

 li  {
    float:left;
    width:120px;
    list-style-type:none;
}
<a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):
Code:
 a,
 strong  {
      position:relative;
      overflow:hidden;
      display:block;
      width:100%;
      height:40px;
}
Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:
Code:
#navi01 a span  {
    position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(startseite.jpg) no-repeat 0 0;
}
 #navi01 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(startseite.jpg) no-repeat 0 -40px;
}
 #navi02 a span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(kontakt.jpg) no-repeat 0 0;
}
#navi02 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(kontakt.jpg) no-repeat 0 -40px;
}
#navi03 a span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(galerie.jpg) no-repeat 0 0;
}
#navi03 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(galerie.jpg) no-repeat 0 -40px;
}
Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:
Code:
#navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span  {
    background-position:0 -40px;
}
Mmh..., und damit ist auch der IE einverstanden??
Nicht ganz:
Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
Das wird ihm per CC wieder beigebracht.
Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen
und springt nicht zurück auf die "Normal-Position".
Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber.
Code:
<!--[if lte IE 7]>
  <style type="text/css">
   ul a span  {
    cursor:pointer;
}
 a:hover  {
    background-position:0 0;
}
  </style>
<![endif]-->
Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte.
Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor
auf das betroffene Menü angewendet wird.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 02.11.2008, 12:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2006
Beiträge: 13
Timmi befindet sich auf einem aufstrebenden Ast
Standard

Hallo erstmal vielen Dank für deine Hilfe,

ein einfaches Menü mit Listelementen bekomme ich ja hin auch das
das Bild beim überfahren des Links verändert wird nur muss ich ja
2 Bilder auf einmal anzeigen(linke & rechte Ecke) das bekomme
ich einfach nicht zum laufen eine Seite darzustellen ist kein Problem
aber beide klappen irgendwie einfach nicht. Ich möchte jetzt ja nicht
für jeden Link eine Grafik machen die die volle breite des Links abdeckt
damit wäre das Problem zwar gelöst aber würde bei jedem neuen Link
erneut arbeit machen.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.11.2008, 12:45
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

ach so, dann mußt du dich wohl mit der Schiebetürentechnik auseinandersetzen.

Das Arbeitsweise in der FAQ ist aber eine bewährte und gerne angewendete Technik.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 02.11.2008, 12:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2006
Beiträge: 13
Timmi befindet sich auf einem aufstrebenden Ast
Standard

Ich glaub ich hab etwas gefunden was passt, ich muss nur noch rausfinden ob es das ist Ich melde mich falls es so klappt gleich nochmal
Mit Zitat antworten
  #8 (permalink)  
Alt 02.11.2008, 13:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2006
Beiträge: 13
Timmi befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

ich habe fast eine Lösung:

HTML-Code:
#footer_links li {
	list-style-type:none;
	float: left;
	background: #575555 url('../images/abox_right.png') right no-repeat;
	margin-right:5px;
}

#footer_links a {
	background: #464242 url('../images/abox_left.png') left no-repeat;
	padding:3px 3px 3px 7px;
	display:block;
	text-align: center;
	margin-right:5px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
}
allerdings fehlen mir bei meinen beiden ecken Grafiken genau 2 pixel in der Breite und in der Länge, setze ich das padding allerdings hoch wird das a-Element zu groß und verzieht mir die Boxen. Ich glaube ich probiere nochmal den a-Background durch eine Hintergrundgrafik zu ersetzen.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.11.2008, 14:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2006
Beiträge: 13
Timmi befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

also es klappt ich habe abox_right.png jetzt 500 Breite gegeben und alles schaut aus wie ich es mir gewünscht habe, schade das das 10 Stunden gedauert hat aber hab ja was dabei gelernt*g*
Mit Zitat antworten
Sponsored Links
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
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! Web4Live CSS 2 13.07.2011 17:01
IE - runde Ecken mit Transparenz ohne Grafiken? freshUser CSS 19 17.03.2011 21:55
Hilfe bei gesamten CSS Layout mexxat CSS 0 22.08.2007 14:40
css hilfe victorwooten CSS 1 19.11.2006 14:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:08 Uhr.