[CSS] - <li> mit "border" verschönern

borsTiHD · 15.12.2011, 16:01

Hallo Leute,

habe eine sehr nervende Frage.
Zunächst hoffe ich, ich kann hier auch Dinge zu CSS fragen, war mir nicht wirklich sicher ob das zu eurer Community gehört.

Jedenfalls lerne ich gerade Webdesign und sitze an einem Projekt dran.
Möchte damit nur sagen das ich noch nicht viel Ahnung habe...

Mein Problem ist folgender.
Ich nutze eine Sidebar zur Navigation.
Die enthaltenen Links sind alle als Liste (<ul> <li> ) eingetragen.
Mir kam dann die Idee mithilfe einer Umrandung oberhalb und unterhalb einen 3D Button zu simulieren.

Das ganze sieht auch schon recht schick aus.
Problem ist nur das der "Border" erst nach dem Punkt der Auflistung beginnt.
Ich hätte aber gerne das es so aussieht als würde die ganze Navi aus Buttons bestehen.

Da ich das ganze leider nicht gut erklären kann habe ich einmal ein Screenshot erstellt und diesen mit Photoshop bearbeitet.
Hoffe mal dadurch könnt ihr verstehen was ich damit meinte

Könnt ihr mir da weiterhelfen?
Mein Code ist folgender:

PHP-Code:

          <div class="content_sidebar_link">                

                <ul class="l_sidebar">

                        <li class="l_sidebar"><a href="index.php?navi=news">News</a></li>

                        <li class="l_sidebar"><a href="http://www....de">Forum</a></li>

                        <li class="l_sidebar"><a href="index.php?navi=kontakt">Kontakt</a></li>

                        <li class="l_sidebar"><a href="index.php?navi=4">PHP Übungen</a></li>

                            <ul class="l_sidebar">

                                <li class="l_sidebar"><a href="index.php?navi=4a">Grundlagen</a></li>

                                <li class="l_sidebar"><a href="index.php?navi=formular">Formular</a></li>

                                <li class="l_sidebar"><a href="index.php?navi=4b">Fortgeschritten</a></li>

                            </ul>

                        <li class="l_sidebar"><a href="index.php?navi=kneipentest">Kneipentest</a></li>

                </ul>

        </div><!-- end content_sidebar_link -->

Die CSS Datei sieht so aus:

PHP-Code:

  .content_sidebar_link {

background-image:url(images/content3.png); 

background-repeat:repeat;

border: 1px solid #778899;

width:178px;

float:left;

margin-top: -10px;

margin-left:10px;

padding-top:10px;

padding-bottom:10px;

}

 
li.l_sidebar { 

border-top:1px solid #ffffff;

border-bottom:1px solid #000000;

}

 
ul.l_sidebar {

padding-left: 25px;

}

 
.l_sidebar {

font-size:15px;

font-weight: normal;

text-align:left;

margin: 0px;}

Vielen Dank schon mal

Mit freundlichen Grüßen
borsTiHD

tr0y · 15.12.2011, 16:07

Das Disc-Icon ist außerhalb der Box, nutze eine eigene Background-Grafik als Punkt und verschiebe das Padding des Innenliegenden Textes.

borsTiHD · 15.12.2011, 16:20

Erstmal vielen Dank für deine Antwort

Könntest du mir das bitte etwas genauer erklären?
Meinst du einen eigenen Punkt mithilfe von "list-style-image: url(images/dot.png);".
Falls ja, das hab ich mal gemacht, aber die Konturen "umschließen" weiterhin nur den Text, der Punkt hat keinen Rand/Kontur

€dit:
Habs jetzt teilweise gelöst.
Nur so wie ich es geschafft habe, gibts keine Einrückung mehr für die zweite <ul> Auflistung :/

PHP-Code:

  li.l_sidebar {

list-style-image: url(images/dot.png);

list-style-position: inside;

border-top:1px solid #ffffff;

border-bottom:1px solid #000000;

padding-left: 25px;

}

 
ul.l_sidebar {

padding-left: 0;

}

 
.l_sidebar {

font-size:15px;

font-weight: normal;

text-align:left;

margin: 0px;}

tr0y · 16.12.2011, 01:14

Als "Sichtbild", List-styles arbeiten so:

(Bild) [ content ]

[ + ] sind die stoßkanten des Box-Elements, (Bild) ist das bild des Listen-Icons

Du brauchst:
[ (Bild) content ]

bekommt man hin, wenn man das list-icon ausblendet und ein Bild als Background ohne repeatings innerhalb der box darstellt, sollte natürlich transparent sein das ding:

HTML-Code:

<!DOCTYPE html>
<html>
   <head>
      <title>bla</title>
      <style>
         ul {
            list-style:none;
         }

         ul li {
            background-color:transparent;
            background-image:url(the/image/on/the/server.png); /* 16x16 */
            background-repeat:none;
            padding-left:21px; /* 16 ( image ) + 5 ( padding ) = 21 ( moved ) */
         }
      </style>
   </head>
   <body>
      <ul>
         <li>bla</li>
      </ul>
   <body>
</html>

Alle anderen alternativen laufen darauf hinaus das du Listen in Listen darstellst, wenn du dich wirklich auf das Disc-Icon festbeißen willst.

borsTiHD · 16.12.2011, 10:09

Ah ok, werd ich mal so ausprobieren

Vielen Dank

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] Firefox zeigt die Seite falsch an [CSS]	I-Spy	HTML, Usability und Barrierefreiheit	7	03.01.2006 11:51

15.12.2011, 16:01
borsTiHD Neuer Benutzer Registriert seit: 01.11.2011 Beiträge: 14 PHP-Kenntnisse: Anfänger	[CSS] - <li> mit "border" verschönern Hallo Leute, habe eine sehr nervende Frage. Zunächst hoffe ich, ich kann hier auch Dinge zu CSS fragen, war mir nicht wirklich sicher ob das zu eurer Community gehört. Jedenfalls lerne ich gerade Webdesign und sitze an einem Projekt dran. Möchte damit nur sagen das ich noch nicht viel Ahnung habe... Mein Problem ist folgender. Ich nutze eine Sidebar zur Navigation. Die enthaltenen Links sind alle als Liste (<ul> <li> ) eingetragen. Mir kam dann die Idee mithilfe einer Umrandung oberhalb und unterhalb einen 3D Button zu simulieren. Das ganze sieht auch schon recht schick aus. Problem ist nur das der "Border" erst nach dem Punkt der Auflistung beginnt. Ich hätte aber gerne das es so aussieht als würde die ganze Navi aus Buttons bestehen. Da ich das ganze leider nicht gut erklären kann habe ich einmal ein Screenshot erstellt und diesen mit Photoshop bearbeitet. Hoffe mal dadurch könnt ihr verstehen was ich damit meinte Könnt ihr mir da weiterhelfen? Mein Code ist folgender: PHP-Code: <div class="content_sidebar_link"> <ul class="l_sidebar"> <li class="l_sidebar"><a href="index.php?navi=news">News</a></li> <li class="l_sidebar"><a href="http://www....de">Forum</a></li> <li class="l_sidebar"><a href="index.php?navi=kontakt">Kontakt</a></li> <li class="l_sidebar"><a href="index.php?navi=4">PHP Übungen</a></li> <ul class="l_sidebar"> <li class="l_sidebar"><a href="index.php?navi=4a">Grundlagen</a></li> <li class="l_sidebar"><a href="index.php?navi=formular">Formular</a></li> <li class="l_sidebar"><a href="index.php?navi=4b">Fortgeschritten</a></li> </ul> <li class="l_sidebar"><a href="index.php?navi=kneipentest">Kneipentest</a></li> </ul> </div><!-- end content_sidebar_link --> Die CSS Datei sieht so aus: PHP-Code: `.content_sidebar_link { background-image:url(images/content3.png); background-repeat:repeat; border: 1px solid #778899; width:178px; float:left; margin-top: -10px; margin-left:10px; padding-top:10px; padding-bottom:10px; } li.l_sidebar { border-top:1px solid #ffffff; border-bottom:1px solid #000000; } ul.l_sidebar { padding-left: 25px; } .l_sidebar { font-size:15px; font-weight: normal; text-align:left; margin: 0px;}` Vielen Dank schon mal Mit freundlichen Grüßen borsTiHD Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.12.2011, 16:07
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Das Disc-Icon ist außerhalb der Box, nutze eine eigene Background-Grafik als Punkt und verschiebe das Padding des Innenliegenden Textes. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

15.12.2011, 16:20
borsTiHD Neuer Benutzer Registriert seit: 01.11.2011 Beiträge: 14 PHP-Kenntnisse: Anfänger	Erstmal vielen Dank für deine Antwort Könntest du mir das bitte etwas genauer erklären? Meinst du einen eigenen Punkt mithilfe von "list-style-image: url(images/dot.png);". Falls ja, das hab ich mal gemacht, aber die Konturen "umschließen" weiterhin nur den Text, der Punkt hat keinen Rand/Kontur €dit: Habs jetzt teilweise gelöst. Nur so wie ich es geschafft habe, gibts keine Einrückung mehr für die zweite <ul> Auflistung :/ PHP-Code: `li.l_sidebar { list-style-image: url(images/dot.png); list-style-position: inside; border-top:1px solid #ffffff; border-bottom:1px solid #000000; padding-left: 25px; } ul.l_sidebar { padding-left: 0; } .l_sidebar { font-size:15px; font-weight: normal; text-align:left; margin: 0px;}` Miniaturansicht angehängter Grafiken Geändert von borsTiHD (15.12.2011 um 16:42 Uhr).

16.12.2011, 01:14
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Als "Sichtbild", List-styles arbeiten so: (Bild) [ content ] [ + ] sind die stoßkanten des Box-Elements, (Bild) ist das bild des Listen-Icons Du brauchst: [ (Bild) content ] bekommt man hin, wenn man das list-icon ausblendet und ein Bild als Background ohne repeatings innerhalb der box darstellt, sollte natürlich transparent sein das ding: HTML-Code: <!DOCTYPE html> <html> <head> <title>bla</title> <style> ul { list-style:none; } ul li { background-color:transparent; background-image:url(the/image/on/the/server.png); /* 16x16 / background-repeat:none; padding-left:21px; / 16 ( image ) + 5 ( padding ) = 21 ( moved ) */ } </style> </head> <body> <ul> <li>bla</li> </ul> <body> </html> Alle anderen alternativen laufen darauf hinaus das du Listen in Listen darstellst, wenn du dich wirklich auf das Disc-Icon festbeißen willst. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

16.12.2011, 10:09
borsTiHD Neuer Benutzer Registriert seit: 01.11.2011 Beiträge: 14 PHP-Kenntnisse: Anfänger	Ah ok, werd ich mal so ausprobieren Vielen Dank