Antworten auf deine Fragen:
Neues Thema erstellen

Kapsel mit CSS erstellen

gegenwind

gegenwind

liebt Pizza.

Hallo ich möchte gerne sowas hier:

in css umsetzen.
Diese Dinger sollen Hintergrund sein für eine Navi.
Was klar ist, ich brauche links so ne Halbkugel und rechts auch ne Halbkugel und in der Mitte muss es ja einfach flexibel bleiben, damit man nicht abhänig von der Länge des Schriftzuges ist.
Gibts da eine Seite dafür oder ein Beispiel oder so?
Wie stelle ich das in css am klügsten an?
Danke schonmal...
 

Tattoomaus78

Tattoomaus78

nemesis-artgroup.de

AW: Kapsel mit CSS erstellen

funktioniert prima nach dem Schema -> ...eigene Grafik erstellen...code ein bisken anpassen...feddich
 
M

MainAngler

Excel (SVERWEIS...)

AW: Kapsel mit CSS erstellen

Du brauchst nicht unbedingt eine Halbkugel dafür.;)
Es genügt auch, wenn du die Eckgrafiken in der Farbe machst die dein Hintergrund hat, also nicht die Farbe der Buttons sondern die Farbe auf denen die Buttons liegen.;)
Gehst dann her und machst einen Div-Container mit einer Farbe und nutzt die Eckgrafiken eben um es wie eine Kapsel aussehen zu lassen.

Gut, ob das jetzt bei Buttons sinnvoll ist.....

Schau dir auch mal folgendes an:
 
gegenwind

gegenwind

liebt Pizza.

AW: Kapsel mit CSS erstellen

Wo sind die Beiträge von gestern hin :eek:
Da war doch gestern noch ein Eintrag von sokie???
Habe ich geträumt :D ?
Vielen Dank für die Antworten - perfekt !

Die Nifty Lösung ist doch eig. recht bescheuert? Javascript UND Css, da sind zwei Bilder schneller gemacht...
 
Zuletzt bearbeitet:
gegenwind

gegenwind

liebt Pizza.

AW: Kapsel mit CSS erstellen

Boa, ist das ne Qual.
Geht das net viel leichter -,-
Gibts keine Befehle like
leftsideofdiv: url=linkes-teil-bild.jpg
rightsideofdiv: url=rechter-teil-bild.jpg

Das ist alles so umständlich...
 
T

Top_Gun

Aktives Mitglied

AW: Kapsel mit CSS erstellen

Also, so eine einfache "Kapsel" die in der Länge variabel ist, ist total einfach. Und du hast doch sogar schon fast genannt wie es geht. Arbeite mit mehreren Divs, wirst du wohl hinbekommen. Wozu brauchst du da noch Hilfe?

Oder möchtest du, dass die komplette Kapsel auch noch einen Hovereffekt bekommt? Dann brauchst du entweder JS oder du bist in der Länge nicht variabel. Ist aber alles kein Hexenwerk und man findet alleine in diesem Forum viel darüber wie es funktioniert...
 
gegenwind

gegenwind

liebt Pizza.

AW: Kapsel mit CSS erstellen

Schön wärs...
ich habs nach diesem Schema hier gemacht:
...klappt überhaupt nicht bei mir -,-
Ich versuche jämmerlich eine Kapsel mittels CSS zu erstellen...
so siehts aus:
PHP: 
}
.subnaviLEFT {
   background:url("../hp_gp/hp_gp_ro/hp_rc_left.png") left no-repeat;
   margin:0;
   padding:0;
   height: 20px;
}    
.subnaviRIGHT {
   background:url("../hp_gp/hp_gp_rc/hp_rc_right.png") right no-repeat;
   margin:0;
   padding:0;
   height: 20px;
}   
.subnaviMIDDLE {
   background: #feba00
   height: 20px;
   width: 100px;
   margin:0;
   padding:0;
}
Im HTML Code sieht es dann wie folgt aus
PHP: 
	       <div class="subnaviRIGHT">
			<div class="subnaviLEFT">
				<div class="subnaviMIDDLE">
					<p>Linktext</p>
				</div>
			</div>
		</div>
Könnte mir jemand unter die Arme greifen?
 
Zuletzt bearbeitet:
Lobster1956

Lobster1956

ein Hamburger in der Lüneburger Heide

Kreativ-Flatrate-User
AW: Kapsel mit CSS erstellen

nur für eine solche Kapsel ist dein weg aber etwas overdressed..
du brauchst ja keine anpassung in der Höhe
bei der oben geposteten Lösung kommst du mit einem einzigen Bild aus
(bei hover Nutzung sind es nur zwei)
einfach in den a tag noch ein b tag einfügen (der b tag kriegt den linken abstand als margin, und den rechten als padding)
der linke teil der Kapsel ist dann der Hintergrund des a tags
und der rechte teil ist der Hintergrund des b Tags rechts positioniert
fertig (dein Bild sollte natürlich breiter als die breiteste Kapsel sein)
wenn hover benötigt wird as gleich mit der zweiten Grafik nochmal
René :)
 
T

Top_Gun

Aktives Mitglied

AW: Kapsel mit CSS erstellen

Wenn du die divs MIDDLE und RIGHT tauscht und den divs LEFT und RIGHT die gleiche width wie MIDDLE gibst, dann sollte deine Methode aber auch klappen...
 
gegenwind

gegenwind

liebt Pizza.

AW: Kapsel mit CSS erstellen

Not really,
da kommt Dünschiss bei raus:
PHP: 
}
.subnaviLEFT {
   background:url("../hp_gp/hp_gp_ro/hp_rc_left.png") left no-repeat;
   margin:0;
   padding:0;
   width:10px;
   height: 23px;
}    
.subnaviRIGHT {
   background:url("../hp_gp/hp_gp_rc/hp_rc_right.png") right no-repeat;
   margin:0;
   padding:0;
   width:10px;
   height:23px;
}   
.subnaviMIDDLE {
   background: #feba00;
   height:23px;
   width:10px;
   margin:0;
   padding:0;
}
PHP: 
           <div class="subnaviMIDDLE">
            <div class="subnaviLEFT">
              <div class="subnaviRIGHT">
                  <p>Linktext</p>
                </div>
            </div>
        </div>
Das wir uns verstehen:
Links soll ne halbe Pizza hin und ganz rechts. In der Mitte der zwei Halbkreisen soll sich ein variabler Div befinden, der die Länge des Wortes animmt, das drin steht.
 
Lobster1956

Lobster1956

ein Hamburger in der Lüneburger Heide

Kreativ-Flatrate-User
AW: Kapsel mit CSS erstellen

kannst es natürlich auch entsprechend mit divs erstellen, aber hier mal als Liste mit Links
Code: 
<html>
  <head>
    <title>test</title>
    <style type="text/css">
<!--
* {margin:0; padding:0;}
.navi li {display:inline;}
.navi a, .navi a b {padding:20px 0;color:white; font-weight:normal; font-size: 1em; text-decoration:none;line-height:50px; background:white url(Kapsel.gif) left no-repeat;}
.navi a b {margin-left:25px; padding-right:25px; background:white url(Kapsel.gif) right no-repeat;}
.navi a:hover, .navi a:hover b {background-image: url(Kapsel-hover.gif);color:black;}
-->
    </style>
  </head>
  <body>
    <ul class="navi">
      <li><a href="#"><b>Dies ist ein ganz langer Linktext, der, wie man sieht, wirklich sehr sehr breit ist</b></a>
      <li><a href="#"><b>Link</b></a>
    </ul>
  </body>
</html>
als Bilder hierfür einfach (natürlich entsprechend benennen):


ich hoffe es hilft
René
 
Zuletzt bearbeitet:
Lobster1956

Lobster1956

ein Hamburger in der Lüneburger Heide

Kreativ-Flatrate-User
AW: Kapsel mit CSS erstellen

und wenn es unbedingt mit divs sein soll, dann müßte eigentlich folgendes den richtigen weg weisen - ist aber ungetestet und bei genauerem Nachdenken wird es auch Scwierigkeiten machen... spätestens wenn du die kapsel mit einem hovereffekt belegen möchtest...
Code: 
[COLOR=#000000][COLOR=#0000BB]
[/COLOR][COLOR=#007700][/COLOR][COLOR=#007700]<[/COLOR][COLOR=#0000BB]div [/COLOR][COLOR=#007700]class=[/COLOR][COLOR=#DD0000]"subnaviLEFT"[/COLOR][COLOR=#007700]> 
   <[/COLOR][COLOR=#0000BB]div [/COLOR][COLOR=#007700]class=[/COLOR][COLOR=#DD0000]"subnaviRIGHT"[/COLOR][COLOR=#007700]>
[/COLOR][/COLOR][COLOR=#000000][COLOR=#007700]      <[/COLOR][COLOR=#0000BB]div [/COLOR][COLOR=#007700]class=[/COLOR][COLOR=#DD0000]"subnaviMIDDLE"[/COLOR][COLOR=#007700]> [/COLOR][/COLOR]
[COLOR=#000000][COLOR=#007700]          <[/COLOR][COLOR=#0000BB]p[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000BB]Linktext[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000BB]p[/COLOR][COLOR=#007700]> 
      </[/COLOR][COLOR=#0000BB]div[/COLOR][COLOR=#007700]> 
   </[/COLOR][COLOR=#0000BB]div[/COLOR][COLOR=#007700]> 
</[/COLOR][COLOR=#0000BB]div[/COLOR][COLOR=#007700]>
[/COLOR][/COLOR]
und CSS
Code: 
[COLOR=#000000][COLOR=#007700].[/COLOR][COLOR=#0000BB]subnaviLEFT [/COLOR][COLOR=#007700]{ display:inline;
   [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB] transparent url[/COLOR][COLOR=#007700]([/COLOR][COLOR=#DD0000]"../hp_gp/hp_gp_ro/hp_rc_left.png"[/COLOR][COLOR=#007700]) [/COLOR][COLOR=#0000BB]left no[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]repeat[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#007700]
}     
.[/COLOR][COLOR=#0000BB]subnaviRIGHT [/COLOR][COLOR=#007700]{ display:inline;
   [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][/COLOR][COLOR=#000000][COLOR=#0000BB]transparent [/COLOR][/COLOR][COLOR=#000000][COLOR=#007700][/COLOR][COLOR=#0000BB]url[/COLOR][COLOR=#007700]([/COLOR][COLOR=#DD0000]"../hp_gp/hp_gp_rc/hp_rc_right.png"[/COLOR][COLOR=#007700]) [/COLOR][COLOR=#0000BB]right no[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]repeat[/COLOR][COLOR=#007700]; [/COLOR][COLOR=#007700]
}    
.[/COLOR][COLOR=#0000BB]subnaviMIDDLE [/COLOR][COLOR=#007700]{ display:inline;
   [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#FF8000]#feba00;  [/COLOR][COLOR=#007700][/COLOR][COLOR=#007700]
   [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]0[/COLOR][COLOR=#007700] 10px; [/COLOR][/COLOR][COLOR=#000000][COLOR=#0000BB]line-height[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]23px[/COLOR][COLOR=#007700];[/COLOR][/COLOR][COLOR=#000000][COLOR=#007700][/COLOR][COLOR=#007700]
} [/COLOR][/COLOR]
[COLOR=#000000][COLOR=#007700].[/COLOR][COLOR=#0000BB]subnaviMIDDLE p [/COLOR][COLOR=#007700]{ display:inline;[/COLOR][/COLOR][COLOR=#000000][COLOR=#FF8000][/COLOR][COLOR=#0000BB][/COLOR][COLOR=#007700][/COLOR][/COLOR]}
René
PS: ich würde den Weg meines vorigen Postings gehen ... vielfach erprobt ;)
 
T

Top_Gun

Aktives Mitglied

AW: Kapsel mit CSS erstellen

@René wenn das mittlere Div in also über den äußeren Divs liegt, dann verdeckt dessen Hintergrund die beiden anderen Hintergründe und somit bekommen wir nur ein Rechteck und keine Kapsel...

@redro stimmt das war Dünschiss, die width gehört da gar nicht hin, nur in das erste Div. Du musst aber dem Div, welches den Linktext beinhaltet lediglich noch einen Abstand mitgeben, sonst steht die Schrift vorne und hinten in den Halbkugeln mit drin... und ne line-height, damit der Text vertikal zentriert steht (ist nicht schön aber funktionell)... versuch es mal so:
Code: 
.subnaviMIDDLE {
   background: #feba00;
   height:23px;
   margin:0;
   padding:0;
   width:100px;
}
.subnaviLEFT {
   background:url("../hp_gp/hp_gp_rc/hp_rc_left.png") left no-repeat;
   margin:0;
   padding:0;
   height:23px;
}    
.subnaviRIGHT {
   background:url("../hp_gp/hp_gp_rc/hp_rc_right.png") right no-repeat;
   margin:0;
   padding:0 20px;
   line-height:23px;
   height:23px;
}
HTML: 
<div class="subnaviMIDDLE">
   <div class="subnaviLEFT">
     <div class="subnaviRIGHT">
       <p>Linktext</p>
     </div>
   </div>
 </div>
Getestet und funktioniert in FF3 und IE6...
 
Zuletzt bearbeitet:
Lobster1956

Lobster1956

ein Hamburger in der Lüneburger Heide

Kreativ-Flatrate-User
AW: Kapsel mit CSS erstellen

@TopGun
deshalb hatte ich dem mittleren DIV jeweils ein linkes und rechtes margin gegeben, damit es nich die rundungen abdeckt

warum hast du eine feste weite für dein MIDDLE part, das soll sich doch dem Text anpassen

aber wie schon gesagt ich setzte immer die andere Lösung ein
1.) weil navigationen in Listen semantisch korrekt aufgehoben sind
2.) weil :hover Bowserübergreifend nur innerhalb von a Tags sauber läuft
3.) weil ich halt schon vorher weiß das es funktioniert (und ein wenig faul ist man ja auch)
René :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 97 (Mitglieder: 0, Gäste: 97)
Robots: 804

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben