• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Border...

Naja . Also die Seite soll so aussehen wie ich schonn angefangen habe :
Oben das Logo darunter das Menü ums Menü unten und rechts einen Border etc.
ALso so wie es vorher schon war habe ich es gelassen ...
Und jetzt will ich das das Bild wieder übers Menü kommt aber ich weiß nicht wie ...
ALso so sieht es zurZeit aus : http://bdg-coding.tk/
Das Logo soll übers menü ... Aber wie ?
 
Naja . Also die Seite soll so aussehen wie ich schonn angefangen habe :
Zum Vergrößern anklicken....

Nein, das geht nicht. Du musst dich jetzt, hier und an dieser Stelle festlegen, ob dein Layout:
  1. Immer mit fester Breiter, sagen wir mal 940 Bildpunkte oder mit flexibler Breite erscheinen soll.
  2. Du willst einen Kopfbereich mit Logo.
  3. Danach soll links ein Menü erscheinen, wieviele Spalten werden es, welche Breite sollen die Spalten haben. Wie breit soll das Menü sein.
  4. Willst du einen Fussbereich.
  5. Sollen die Spalten immer bis zum Fensterende reichen.
  6. Willst du das sich alles flexibel anpasst oder sollen bestimmte Bereiche sich nicht in der Breite oder Höhe verändern, das würde das Einblenden von Scrollleisten zur Folge haben.
Das waren nur einige der vielen Fragen, die man stellen könnte. Vielleicht merkst du jetzt, das deine Frage so im Moment nicht beantwortet werden kann, weil wir nicht wissen was du willst. Das ist aber notwendig, weil an dieser Stelle unterschiedliche CSS-Attribute zum tragen kommen.
Deine Frage kann also gar nicht beantwortet werden.
 
Okey ! Wenn mir sonst keiner helfen will !
Nein die Breite soll nicht Fest sein ... Ja ich will ein Kopfbereich mit Logo ... Ist ds mit den wie viele Links nicht egal ? Wahrscheinlich 7 ... Das mit der Breite kann ich in Pixeln nicht sagen aber ich habe das Menü schon in der breite gecodet wie sie sein soll ... Fußbereich brauche ich eigentlich nicht ... Das mit dem "bis zum Festerende" verstehe ich nicht ... Scroolleiste will ich nicht : also flexibel
 
BDG schrieb:
Das Logo soll übers menü ... Aber wie ?
Zum Vergrößern anklicken....

Ergänze:
Code: 
.bild { display: block; }

Dadurch wird aus dem img-Element ein Blockelement, welches nicht mehr vom Menü "umflossen" werden kann.

Und ergänze BITTE einen Doctype. Der ist wichtig für eine korrekte Darstellung und die Grundlage von allem was Du irgendwie umsetzen willst.
 
Hier hast du den HTML Code, auch schon korrigiert für dein Menü und mit Doctype:

HTML: 
<!DOCTYPE HTML>
<html>
    <head>    
        <meta charset="utf-8">    
        <title>BDG's Website
        </title>    
        <meta name="description" content="Beschreibung der Seite">    
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>  
        <div id="header"">    
            <img class="bild" src="bdgSoft2.png">
        </div>
        <div id=left>    
            <ul>        
                <li><a href="index.html" id ="bt1" class="button">Home</a></li>        
                <li><a href="index.html" id ="bt2" class="button">News</a></li>        
                <li><a href="index.html" id ="bt3" class="button">Tutorials</a></li>        
                <li><a href="index.html" id ="bt4" class="button">Downloads</a></li>        
                <li><a href="index.html" id ="bt5" class="button">Anderes</a></li>        
                <li><a href="index.html" id ="bt6" class="button">Kontakt</a></li>    
            </ul>
        </div>        
        <div id=right>    
        </div>    
        <div id=middle>       
            <p>Hier kommt der Content rein 
            </p>      
        </div>
    </body>
</html>
Die IDs und Class im Menü sind jetzt eigentlich überflüssig, aber ich habe sie mal dringelassen.

Sowie der berichtigte CSS-Code:
Code: 
html, body {
    background-color: #fff;
    font-family: Arial;
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: -moz-linear-gradient(top,  #6A96FF,  #12266D);  //für Mozilla Firefox
    background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
    background: linear-gradient(top, #6A96FF, #12266D);
    background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A96FF', endColorstr='#12266D');
    /*   background: -moz-linear-gradient(top, #00CCCC, #00FF99);    */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#6A96FF, endColorstr=#12266D)";
     min-height: 100%;    
}
#left {
    float: left;
    width: 200px;
}
#right {
    float: right;
}
#middle {
    min-width: 600px;
    padding: 10px;
}
/* Menue */
#left ul {
    list-style: none;
    border-right-width: 0.2em;
    border-right-style: solid;
    border-bottom-width: 0.2em;
    border-bottom-style: solid;
}
#left ul li {
    display: block;
    white-space: nowrap;
    background-color: #ccc;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-linear-gradient(top, #eee, #ccc);
    background-image: -moz-linear-gradient(top, #eee, #ccc);
    background-image: -ms-linear-gradient(top, #eee, #ccc);
    background-image: -o-linear-gradient(top, #eee, #ccc);
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    border: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: bold 1em/2em Arial, Helvetica;
    text-align: center;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
#left ul li a {
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
#left ul li:hover {
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
    background-image: -moz-linear-gradient(top, #fafafa, #ddd);
    background-image: -ms-linear-gradient(top, #fafafa, #ddd);
    background-image: -o-linear-gradient(top, #fafafa, #ddd);
    background-image: linear-gradient(top, #fafafa, #ddd);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
#left ul li:active {
    -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
}
#left ul li:focus {
    outline: 0;
    background: #fafafa;
}
#left ul li:before {
    background: #ccc;
    background: rgba(0,0,0,.1);
    float: left;
    width: 1em;
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em 0 -1em;
    padding: 0 .2em;
    -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    -moz-border-radius: .15em 0 0 .15em;
    -webkit-border-radius: .15em 0 0 .15em;
    border-radius: .15em 0 0 .15em;
    pointer-events: none;
}
/* Menue Ende */
 
Danke ! Aber ein Problem sehe ich da noch . Die Buttons sind total weit vom linken Rand entfernt ... Woran liegt dass ?
 
Das liegt am vorgegebenen Margin im Selektor #left ul
Wenn du dort margin:0; angibst sind die Abstände auf 0-Wert gesetzt.
 
Da ist doch aber garnichts vorgegeben :

#left ul { list-style: none; border-right-width: 0.2em; border-right-style: solid; border-bottom-width: 0.2em; border-bottom-style: solid; }
 
Das stimmt, das da bei dir nichts ist, deshalb muss du es ja einfügen. Jedes Element hat von Haus aus gewisse Eigenschaften mitbekommen. sonst könnte man ja gar nichts darstellen im Browser. Diese Voreinstellungen stehen meist in einem Default.CSS Dokument, welches immer geladen wird.
Man kann das sogar nach seinen Wünschen anpassen für dann alle Webseiten.

Da ja nun das Element UL keine Einstellungen im Margin über dein CSS erfährt, bekommt es halt die Einstellungen des Browsers verpasst und da ist eben ein Margin vorgegeben. Jetzt müssen wir nur diese Einstellung überschreiben durch unser CSS und schon flutscht das Menü nach links als wenn nie was gewesen wäre.

Im Zweifel einfach mal ausprobieren mit einem leerem HTML-Dokument und UL und LI und schauen wie es aussieht. Danach ein CSS Dokument hinzufügen und das Margin-Left auf Null setzen.
 
ALso ich habe trotzdem mal "margin: 0;" angegeben aber da verändert sich nichts ...
Zum Vergrößern anklicken....

Wo, also an welcher Stelle im CSS. Kannst du mal Bitte immer wenn du etwas veränderst, genau schildern wo du etwas veränderst hast oder den Code-Abschnitt der Änderung hier reinstellen.

Wie zum Beispiel so:
Vorher:
Code: 
#left {
    float: left;
    width: 200px;
}
Nachher
Code: 
#left {
    float: left;
    width: 200px;[INDENT]border: 3234px solid black;
[/INDENT]
}
Fehlerbeschreibung: Warum erscheint kein Rahmen, alles nur Schwarz, bla bla...

Du hilfst damit Nachfragen zu minimieren, wir sind halt auch nur Menschen und keine Hellseher.
 
Wustersoss schrieb:
Das liegt am vorgegebenen Margin im Selektor #left ul
Wenn du dort margin:0; angibst sind die Abstände auf 0-Wert gesetzt.
Zum Vergrößern anklicken....
ALso ich habe trotzdem mal "margin: 0;" angegeben aber da verändert sich nichts ...
Zum Vergrößern anklicken....
Wo, also an welcher Stelle im CSS. Kannst du mal Bitte immer wenn du etwas veränderst, genau schildern wo du etwas veränderst hast oder den Code-Abschnitt der Änderung hier reinstellen.
Zum Vergrößern anklicken....

Ich habe es natürlich in #left ul eingefügt, genau wie du gesagt hast.

Code: 
#left ul {
    list-style: none;
    border-right-width: 0.2em;
    border-right-style: solid;
    border-bottom-width: 0.2em;
    border-bottom-style: solid;
    margin:0;
}
 
Und wo kann ich die Breite der Buttons verändern ? Die sind voll lang nach rechts und links ...

EDIT: Achso Oke habs herausgefunden :D VIelen dank !
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben