zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Css Trapezförmige Navigationbar

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.08.2018, 21:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2018
Beiträge: 3
Homerlator befindet sich auf einem aufstrebenden Ast
Frage Css Trapezförmige Navigationbar

Guten Tag,

ich bin ein blutiger Css-Anfänger, ich habe eine Navigationsbar designt. Es funktioniert soweit, aber bitte um verbesserungs Vorschläge was den code betrifft. Denn so wie ich es gelöst habe gibt es Probleme dabei einen Schatten einzufügen.

HTML-Code:
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <link rel='stylesheet'  href='style.css' type='text/css' media='all' />
     </head>

    <body>
    <div class="container-accent"></div>
    <div class="container"></div>
    <div class="placeholder"></div>
    </body>
</html>
Code:
:root{
    --navbar: #305769;
    --accent: #578A98;
    --background: #183B4C;
}

body{
    background-color: var(--background);
    margin: 0;
}

.placeholder{
    float: left;
    height: 3vh;
    width: 100vw;
    background: var(--navbar);
    border-bottom: 0.5vh solid var(--accent);
}

.container{
    position: absolute;
    border-top: 7vh solid var(--navbar);
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    height: 0;
    width: 50vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

.container-accent{
    content: '';
    position: absolute;
    top: 3.1vh;
    border-top: 4.3vh solid var(--accent);
    border-left: 4.3vh solid transparent;
    border-right: 4.3vh solid transparent;
    height: 0;
    width: 50.4vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
}
http://prntscr.com/km5tnl
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.08.2018, 19:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Du machst gewaltig was falsch. Du postest dein Problem im jeden Forum. Da wird dir irgendwann keiner mehr helfen weil man sowas nicht macht. Versuche in Zukunft dich auf ein Forum zu konzentrieren. Da das Thema hier noch nicht gesperrt ist kann man dir ja nur noch hier helfen. Ich habe dir schon im anderen Forum geschrieben. Mach doch mal ein paar Links in der navigation rein damit man das alles besser sieht und wobei hast du den probleme mit den Schatten ? Wie soll das den aussehen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.08.2018, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2018
Beiträge: 3
Homerlator befindet sich auf einem aufstrebenden Ast
Standard

Okay entschuldige, sowas kommt nicht mehr vor.

Also wenn ich ein Schatten einfügen will sieht das so aus: http://prntscr.com/kmupd0

Aber der Schatten soll natürlich sich an das Trapez anpassen und nur links, rechts und unten sein.

Mein Code (CSS):
Code:
:root{
    --navbar: #305769;
    --accent: #578A98;
    --background: #183B4C;
}

body{
    background-color: var(--background);
    margin: 0;
}

.placeholder{
    float: left;
    height: 3vh;
    width: 100vw;
    background: var(--navbar);
    border-bottom: 0.5vh solid var(--accent);
}

.container{
    position: absolute;
    border-top: 7vh solid var(--navbar);
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    height: 0;
    width: 50vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

.container-accent{
    content: '';
    position: absolute;
    top: 3.1vh;
    border-top: 4.3vh solid var(--accent);
    border-left: 4.3vh solid transparent;
    border-right: 4.3vh solid transparent;
    height: 0;
    width: 50.4vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
Ich hoffe es ist verständlich und du kannst mir helfen.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.08.2018, 23:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Achso jetzt weiß ich was du meinst. Ich glaube das wird schwer weil du ja da nur border hast. Ich kann das jetzt nicht erklären. Ich werde das mal versuchen,aber ob das klappt weiß ich nicht
Mit Zitat antworten
  #5 (permalink)  
Alt 25.08.2018, 23:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2018
Beiträge: 3
Homerlator befindet sich auf einem aufstrebenden Ast
Standard

Das meinte ich mit Verbesserungsvorschläge für den Code.
Ich hätte da noch eine Frage: Kann man die ganze Navbar als ein Div-container machen? Zurzeit sind es ja vier.
Mit Zitat antworten
  #6 (permalink)  
Alt 26.08.2018, 20:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Also um bei dir überall einen richtigen schatten zu machen wird man bestimmt noch mehr conntainer brauchen. Auf der schnelle finde ich da jetzt keine Lösung.
Alles in ein Container zu machen ,ohne schatten ,das geht mit etwas fummeln ja
https://codepen.io/basti1012/pen/RYawZv?editors=1100

Aber das mit schatten muß ich auch erstmal überlegen wie man das mit wennig container hinbekommen kann
Mit Zitat antworten
  #7 (permalink)  
Alt 26.08.2018, 22:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Naja wird ehr mehr container
mit bischen mehr zeit könnteman das bestimmt auch perfekt machen ,aber die fehlt mir jetzt.
Aber wie du siehst man könnte es auch mit border machen
https://codepen.io/basti1012/pen/NLNPXa
Mit Zitat antworten
  #8 (permalink)  
Alt 27.08.2018, 08:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.999
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Warum wird hier nicht (am besten wäre doch) ein SVG als Hintergrundbild verwendet?
Mit Zitat antworten
Antwort

Stichwörter
css, html, navigationsbar, navigationsmenü, trapez

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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:38 Uhr.