Navigation positionieren

Beti

Hallo,

ich bin ein absoluter Anfänger was Css angeht. Ich versuche nun schon seit gestern meine Hauptnavigation (main navigation) linksbündig genau unter die oberste Navigation zu bringen aber es klappt nicht. irgendwie ist alles ein wenig verschoben. Außerdem ragt der Hintergrund der Navigation zu weit nach links rein.

Des weiteren möchte ich die Boxen in der Sidebar schmaler machen finde aber nicht die dazugehörige Css.

Es wäre toll wenn mir jemand diesbezüglich weiterhelfen könnte.

http://die-testbar.de

Code

/* top menu */
#top-menu  { background: #FFFFFF; border-bottom: 1px solid #FFFFFF; }
#top-menu-content  { height: 25px; padding: 3px 0; }
#top-menu-content .sf-menu  { text-transform: uppercase; margin: 0 2px; }
#top-menu .sf-menu a  { display: block; text-decoration: none; padding: 7px 10px 8px; color: #5c5157; font-size: 10px; border-right: 1px solid #e9e3e6; }
#top-menu .sf-menu ul a  { border: none; }
#top-menu .sf-menu ul li  { border: 1px solid #FFFFFF; margin-top: -1px; }
#top-menu .sf-menu a:hover, #top-menu .sf-menu li:hover, #top-menu .sf-menu li.sfHover, #top-menu .sf-menu ul li  { color: #5c5157; background: #e9e3e6; }
#top-menu .sf-menu ul a:hover, #top-menu .sf-menu ul li.sfHover, #top-menu .sf-menu ul li:hover { color: #e9e3e6; background: #FFFFFF; }
#top-menu .sf-menu ul li.sfHover a.sf-with-ul { color: #5c5157; }
#top-menu .sf-menu li li a  { padding: 7px 10px; line-height: 1; height: auto; font-size: 12px; }
#top-menu .sf-menu .sf-with-ul  { padding-right: 15px; }
#top-menu .sf-sub-indicator  { background: url(dropdown.png) no-repeat; width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; }
#top-menu .sf-menu ul .sf-sub-indicator    { display: none; }
#top-menu .sf-menu li:hover ul, #top-menu .sf-menu li.sfHover ul { top: 2.4em; }
#top-menu ul.sf-menu li li:hover ul, #top-menu ul.sf-menu li li.sfHover ul, #top-menu ul.sf-menu li li li:hover ul, #top-menu ul.sf-menu li li li.sfHover ul { top: 0; }


/* main navigation */
#nav  { background: url(postbar.jpg) repeat-x bottom  #e9e3e6; width: 
770px; border-bottom: 1px solid #e9e3e6; }
#nav-content  { height: 32px; margin:0;
    padding:0;
    text-align:center; width: 770px; }
#nav .sf-menu  { float: right; line-height: 1.0; width: 770px; 
text-transform: uppercase; }
#nav .sf-menu a  { display: block; text-decoration: none; padding: 
10px 12px; color: #5c5157; font-size: 12px; text-align:center border: solid #e9e3e6; 
border-width: 0 1px; margin-right: -1px; }
#nav .sf-menu ul li  { border: 1px solid #FFFFFF; margin-top: -2px; }
#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu 
li.sfHover, #nav .sf-menu ul li  { background: url(content-bg.jpg) 
repeat-x top; color: #5c5157; }
#nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu 
ul li:hover { color: #bfacb6; background: #FFF; }
#nav .sf-menu ul li.sfHover a.sf-with-ul { color: #b8a3ae; }
#nav .sf-menu li li a  { padding: 7px 10px; line-height: 1; height: 
auto; font-size: 11px; border: none; }
#nav .sf-menu .sf-with-ul  { padding-right: 15px; }
#nav .sf-sub-indicator  { background: url(dropdown_dark.png) 
no-repeat; width: 5px; height: 5px; text-indent: -9999px; display: 
inline-block; position: relative; left: 7px; top: 0; vertical-align: 
middle; }
#nav .sf-menu ul .sf-sub-indicator    { display: none; }
#nav .quick-nav li  { padding-top: 5px; }

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

Code

#nav  { background: url(postbar.jpg) repeat-x bottom  #e9e3e6; width: 
770px; border-bottom: 1px solid #e9e3e6; }
#nav-content  { height: 32px; margin:0;
    padding:0;
    text-align:center; width: 770px; }
#nav .sf-menu  { float: right; line-height: 1.0; width: 770px; 
text-transform: uppercase; }

ändern in

Code

#nav {
    background: url("postbar.jpg") repeat-x scroll center bottom #E9E3E6;
    border-bottom: 1px solid #E9E3E6;
    margin: 0 auto;
    width: 960px;
}
#nav-content {
    height: 32px;
    margin: 0 auto;
    width: 960px;
}
#nav .sf-menu {
    float: left;
    line-height: 1;
    text-transform: uppercase;
    width: 960px;
}

Alles anzeigen

-------------------------------------

Code

#top-menu, #nav {
    min-width: 990px;
}

ändern in

Code

#top-menu, #nav {
    min-width: 960px;
}

------------------------
Boxen Sidebar

Code

.main-aside {
    float: right;
    position: relative;
    width: [COLOR="#FF0000"]300px[/COLOR];
}

Beti

Vielen lieben Dank Art of Pic. Das hat toll funktioniert. :)

Tutrix

schön :wink:

du hast aber einen Fehler in deiner css, deshalb ist dein Footer zerschossen

Code

#commentform textarea { display: block; font: 14px 'Lucida
Grande',Arial,Helvetica,sans-serif; width: 90%; margin-bottom: 5px; }

hier ist ein Zeilenumbruch, weshalb die css ab da nicht mehr vom Browser gelesen wird

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navigation positionieren

Jetzt mitmachen!