zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden navigation mit runden ecken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.02.2010, 15:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2010
Beiträge: 16
probot befindet sich auf einem aufstrebenden Ast
Standard navigation mit runden ecken

moin,

ich bin gerade am überlegen wie ich die angehängte grafik
am besten umsetze.

das design sollte genau so umgesetzt werden.


die problemkinder sind die rundungen.
soll ich da mit grafiken arbeiten, den links eine klasse zuweisen und
dann die individuelle "abgerundete grafik" reinladen? klappt das überhaupt?

bin für jede hilfe dankbar: ^^
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.02.2010, 19:42
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 157
Cocoon wird schon bald berühmt werden
Standard

Poste mal das HTML und CSS deiner Navigation. Dann kann dir gezeigt werden, wo anzuknüpfen ist.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.02.2010, 19:54
Programmierer
neuer user
 
Registriert seit: 21.05.2009
Beiträge: 26
FrankW. befindet sich auf einem aufstrebenden Ast
Standard

Mein Tipp wenn dein Hintergrund hinter der Navi nicht unregelmäßig ist:

Gestalte dir 4 "Ecken" (4 einzelne Grafiken, Empfehlung hat so seine Gründe im Bezug zum IE), gebe deinem Navi-Block (vermutlich ein ul?) ein "position: relative;" und erstelle 4 Klassen die jeweils eine deiner 4 Eckgrafiken verwenden, gebe diesen ein "position: absolute;" und weise ihnen top / bottom / left / right zu.
Dann haust du diese 4 Divs (oder was auch immer) in deinen Navi-Block -> und siehe da -> die 4 Ecken platzieren sich absolute von der relativen Navi.

Die Ecken solltest du so designen: Außenrum ist die Hintergrundfarbe und das Innere bleibt transparent.


Beispiel:
Code:
<div id="navi">
     <div class="topleft corner"></div>
     <div class="topright corner"></div>
     <div class="bottomleft corner"></div>
     <div class="bottomright corner"></div>
     <!-- restlicher Inhalt -->
</div>
Dann könnte die CSS dazu so aussehen:
Code:
div#navi
{
      width: 120px;
      background-color: #FFFFFF;
      position: relative;
}

div.corner
{
      height: 6px;
      width: 6px;
      position: absolute;
}

div.topleft
{
     top: 0px;
     left: 0px;
     background-image: url(../images/topleft.png);
}

div.topright
{
      top: 0px;
      right: 0px;
      background-image: url(../images/topright.png);
}

div.bottomleft
{
      bottom: 0px;
      left: 0px;
      background-image: url(../images/bottomleft.png);
}

div.bottomright
{
      bottom: 0px;
      right: 0px;
      background-image: url(../images/bottomright.png);
}
Vorteil: Du könntest diese Ecken auch auf anderen Elementen nutzen die den selben Hintergrund haben
Hab das da jetzt nur schnell hingeschrieben, hoffe es haben sich dabei keine Fehler eingeschlichen - sonst einfach nachfragen.
__________________
Webprojekte sind momentan in der Überarbeitung.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.02.2010, 22:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2010
Beiträge: 16
probot befindet sich auf einem aufstrebenden Ast
Standard

schonmal ty für die antworten.

es geht um das hover.
für den ersten hover-effekt benötige ich ja kein rechteck sondern eben diese
angepasste variante mit den rundungen bei link "sadf".

die darauffolgenden funktionieren mit dem rechteck, bis dann der
letzte link folgt.

dieser sollte dann auch so wie der erste link bei hover mit einer abgerundeten,
angepassten grafik daherkommen.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.02.2010, 12:14
Programmierer
neuer user
 
Registriert seit: 21.05.2009
Beiträge: 26
FrankW. befindet sich auf einem aufstrebenden Ast
Standard

Ob hover oder nicht, solange der z-index von den Ecken höher ist als das der Elemente in der Navi und der Navi selbst wird es darüber gelegt - somit egal ob ein hover oder nicht berührter Link an den Ecken hängt -> in beiden Fällen wird die Grafik darüber gelegt.

Probiers einfach mal aus
__________________
Webprojekte sind momentan in der Überarbeitung.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2010, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2010
Beiträge: 16
probot befindet sich auf einem aufstrebenden Ast
Standard

hey,

kk,
ich setz mich jetzt mal hin und teste das aus.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.02.2010, 13:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ein Menü gehört in eine ul. Leere Elemente werden nicht benötigt.

Für den oberen & unteren Abschluss gibst Du dem ersten & letzten li jeweils eine ID, dadurch hast Du alle Optionen für die Zuweisung Deiner Grafik mit den Rundungen, auch beim Hovern. Bei Menü-Breite in px reicht jeweils eine Grafik für oben & unten.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #8 (permalink)  
Alt 08.02.2010, 14:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2010
Beiträge: 16
probot befindet sich auf einem aufstrebenden Ast
Standard

@frankw.:
danke, hat jetzt geklappt! \o/

@heiko_rs:
würde gerne noch deine variante durchtesten.
bei hover verschluckt er mir aber die background-grafik
für die li#corner_top.

mmhh. z-index ist ja für mehrere divs ausgelegt. was für
möglichkeiten gibt es noch, oder wo liegt der fehler?

Code:
<div id="navi">
    <ul id="navigation">
        <li id="corner_top"><a href="#">Link 01</a></li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
        <li><a href="#">Link 04</a></li>
        <li id="corner_bottom"><a href="#">Link 05</a></li>
    </ul>
Code:
* {
	padding: 0px;
	margin: 0px;
}

ul#navigation{
	width: 150px;
	padding: 0;
	list-style: none;
	border: 1px solid black;
}			

ul#navigation li {
	margin: 0;
	padding-left: 0px;
	text-align: left;
}

ul#navigation li a {
	display: block;
	height: 22px;
	width: 150px;
	padding-top: 4px;
	padding-left: 0px;
	text-decoration: none;
	color: #000000;
}

ul#navigation li a:hover {
	background-color: #CC0000;
	color: #FFFFFF;
}

div#navi
{
      width: 150px;
      background-color: #FFFFFF;
      position: relative;
}

li#corner_top {
	background-image: url(pix/layout/corner_top.png);
	background-position: top center;
	background-repeat: no-repeat;
}

Geändert von probot (08.02.2010 um 14:30 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.02.2010, 15:08
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Die Grafiken immer a zuweisen, und beim Hovern austauschen. Und nie height für Elemente mit Text!
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.02.2010, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.02.2010
Beiträge: 16
probot befindet sich auf einem aufstrebenden Ast
Standard

@heiko_rs
klappt nun auch mit deiner variante!

vielen vielen dank für die antworten.
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
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 15:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


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