ilch Forum » Allgemein » HTML, PHP, SQL,... » Menüpunkt Trennlinie

Geschlossen
  1. #1
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    Hallo,
    ich bin gerade dabei ein Theme in HTML/CSS umzusetzen.
    Nun möchte ich gerne bei dem Menüpunkt ein Image als Trennlinie einbauen.

    Wie setze ich das am besten um?

    Vielen Dank

    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    kommt drauf an wie du die Menüpunkte gemacht hast
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    Sowie hier auf der Seite mit "Startseite, Dokumentation etc."

    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Pion Hall Of Fame
    Registriert seit
    25.07.2007
    Beiträge
    870
    Beitragswertungen
    51 Beitragspunkte
    Das kannst du immer gut mit Tools wie zb Firebug nachschauen.

    Hier ist ein Hindergrundbild an die "<li>" - Knoten gelegt:

    background: url("./img/navi_dots.png") 0 14px no-repeat;
    }
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    blakedj06 gelöschter User
    Also wenn dann gleich ordentlich css


    li:first-child{
    border-left:1px dotted #ddd;
    }

    li{
    border-right:1px dotted #ddd;
    }

    Abstand usw. mit padding oder margin


    Zuletzt modifiziert von blakedj06 am 01.04.2014 - 21:38:28
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Dann solltest du aus deinem Code mal den doppelten Teil rausholen. zunge
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    528
    Beitragswertungen
    7 Beitragspunkte
    HTML:
    <div>Hello World!</div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
    <div id="wrapper">
      	<div class="leiste_top"></div>
    <!--menu-->
            <div id="topbar">
           		<div class="leiste_top"></div>
            	<div id="topbar_container">
            		<div class="navbar">
    						<!--menupunkte-->
                    		<ul>Home</ul>
                            <ul>Verein</ul>
                            <ul>Herren</ul>
                            <ul>Damen</ul>
                            <ul>Nachwuchs</ul>
                            <ul>Sponsoren</ul>
                     </div>
                    <div class="socialmedia">
                    	<div class="fb_icon"></div>
                      	<div class="twitter_icon"></div>
                    </div>
                 </div>
            </div>
    <!--kopfzeile mit logo-->
    	<div id="kopfzeile">
        	<div class="logo"></div>
        </div>
    <!--kopfzeile mit logo-->
    	<div id="content" style="clear:left">
        		<div id="content_left">
                		<div class="maintext">Hier stehen die News.</div>
                </div>
                <div id="content_right">adasdasd</div>
        </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    </body>
    
    </html>


    CSS:
    @charset "utf-8";
    /*------------------------------------*\
        $RESET
    \*------------------------------------*/
    /* A more considered reset; more of a restart... As per: csswizardry.com/2011/10/reset-restarted */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
    a, abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strong, sub, sup, tt, var,
    b, u, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
    }
    article, aside, details, figcaption, figure, footer,
    header, hgroup, menu, nav, section {
        display: block;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    strong, b, mark {
        font-weight: bold;
        font-style: inherit;
    }
    em, i, cite, q, address, dfn, var {
        font-style: italic;
        font-weight: inherit;
    }
    abbr[title], dfn[title] {
        cursor: help;
        border-bottom: 1px dotted;
    }
    ins {
        border-bottom: 1px solid;
    }
    a, u, ins {
        text-decoration: none;
    }
    del, s {
        text-decoration: line-through;
    }
    pre, code, samp, kbd {
        font-family: monospace;
    }
    small {
        font-size: 0.75em;
    }
    img {
        border: none;
        font-style: italic;
    }
    input,
    select, option, optgroup,
    textarea {
        font: inherit;
    }
    
    
    
    /*------------------------------------*\
        $MAIN
    \*------------------------------------*/
    body {
    	background: url('images/background.jpg') no-repeat fixed;
    	color: #fff;
    	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    	font-size: 12px;
    	-webkit-background-size: cover;  
        -moz-background-size: cover;  
        -o-background-size: cover;  
        background-size: cover;  
        margin: 0 auto;
    }
    
    #wrapper {
    	width: 100%;
    	height: auto;
    }
    
    .leiste_top {
    	width: 100%;
    	height: 5px;
    	background-color: #df0023;
    	position: fixed;
    }
    
    #kopfzeile {
    	width: 960px;
    	height: auto;
    	margin: 0 auto;
    }
    
    .logo {
    	background: url('images/logo.png') no-repeat;
    	width: 161px;
    	height: 87px;
    	margin-top: 40px;
    	margin-bottom: 40px;
    	float: left;
    }
    
    #content {
    	width: 940px;
    	height: auto;
    	background: #fff;
    	opacity: 0.25;
    	padding: 10px;
    	margin: 0 auto;
    }
    
    
    /*------------------------------------*\
        $Menu
    \*------------------------------------*/
    #topbar {
    	background: url(images/menu_bg.png);
    	width: 100%;
    	height: 40px;
    	margin: 0 auto;
    	float: left;
    	position: fixed;
    }
    
    #topbar_container {
    	width: 960px;
    	height: 40px;
    	margin: 0 auto;
    	line-height: 40px;
    }
    
    .navbar {
    	width: auto;
    	height: 40px;
    	float: left;
    	display: block; 
    	margin-left: -20px;
    }
    
    ul {
    	float: left;
    	font-size: 13px;
    	display: block;
    	font-weight: bold;
    	padding-left: 20px;
    	padding-right: 20px;
     
    }
    
    
    /*------------------------------------*\
        $SocialMedia
    \*------------------------------------*/
    .socialmedia {
    	width: auto;
    	height: 40px;
    	float: right;
    	display: block; 
    }
    .fb_icon {
    	background: url('images/icons/facebook.png') no-repeat; 
    }
    
    
    /*------------------------------------*\
        $Content
    \*------------------------------------*/
    #content {
    	width: 940px;
    	height: auto;
    	background: #fff;
    	opacity: 1;
    	padding: 10px;
    	margin: 0 auto;
    }
    
    #content_left {
    	width: 700px;
    	height: auto;
    	float: left;
    }
    
    #content_right {
    	width: 200px; 
    	height: auto;
    	padding-left: 20px;
    	float: left;
    }
    
    .maintext {
    	color: #000;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }



    und jetzt möchte ich keine Punkte als Trennung sondern ein Bild einfügen.
    Außerdem hab ich es mal wider mit clear:both vermasselt, denn beim content läuft der background nicht mit... verletzt


    Zuletzt modifiziert von ekie am 01.04.2014 - 21:20:10

    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    blakedj06 gelöschter User
    @dasti ja sorry ^^

    border-right beim first-child ist natürlich unnötig.
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Ein einfaches clear im Parent funktioniert halt logischerweise nicht, stattdessen folgenden clearfix hack in deine CSS-Datei einfuegen:

    /**
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    contenteditable attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that are clearfixed.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .cf:before,
    .cf:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    
    .cf:after {
        clear: both;
    }
    
    /**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    .cf {
        *zoom: 1;
    }


    Und nun folgendes:
    <div id="content" style="clear:left">

    mit folgendem:
    <div id="content" class="cf">
    ersetzen.

    Und wie ich sehe floatest du .logo auch, wieso auch immer kann ich so nicht erkennen. Dort natuerlich dem Parent dann auch die Klasse cf geben.

    Am einfachsten ist es, wenn du das alles mal komplett, also mit Bildern und allem irgendwo hochlaedst. Ich hab jetzt so mal versucht darin rumzupfuschen, aber das ist maximal nervig ohne Bilder, etc.

    Außerdem waere es einfacher fuer solche Dinge jsfiddle.net zu nutzen.

    jsfiddle.net/PWZH5/
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten