Menü/Navigationsposition

Question

Guten Tag Leute. Ich bin ein wenig neu in der Programmierwelt und habe ein
Problem mit meinem Navigationsbereich der neuen Website. Ich benutze Zoho Sites als meinen Site Builder und sie haben Unmengen von "eingebauten" CSS. Was ich versuche zu erreichen, ist, dass mein Menü/Navigation die Breite des "oberen Bereichs" der Seite unterhalb des Logos aufweist. Ich möchte auch die Logogröße vergrößern, aber wenn ich das versuche, schrumpft das Menü mehr und mehr. Gegenwärtig befinden sich das Logo und das Menü nebeneinander. Sie können sehen, wo ich jetzt hier bin: http://realtimehockey2015.zohosites.com/ Ich denke, der Code, den Zoho verwendet, ist, was wirklich verwirrend für mich ist. Ich bin sicher, für die meisten von euch ist das eine einfache Lösung, aber ich kann es einfach nicht herausfinden. Ich spiele jetzt seit ein paar Tagen mit dem Code und kann es einfach nicht herausfinden. Da das gesamte CSS hier die Grenze von 30.000 Zeichen überschreitet, werde ich nur das CSS veröffentlichen, das sich mit dem oberen Bereich und der Navigation beschäftigt. Jede und jede Hilfe würde sehr geschätzt werden.

CSS Code 

    .themeTopArea { 
    background - color: $NavigationBGColor[#ffffff]; 
    padding: 5 px 0; 
    box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - webkit - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - moz - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - o - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); 
} 

.themeBrandingContainer { 
    display: table; 
    border: 0 solid; 
    width: 100 % ; 
} 
.tableRow { 
    display: table - row; 
} 
.tableCell { 
    display: table - cell 
} 
.themeLogoOuterContainer { 
    width: 350 px; 
    height: 50 px; 
    vertical - align: middle; 
} 
.themeLogoArea { 
    padding - right: 5 px; 
    height: 50 px; 
    width: 350 px; 

} 
.themeSitenameCaptionOuterContainer { 
    vertical - align: middle; 
    height: 100 % ; 
    width: 45 % ; 
} 
.themeSitenameCaptionInnerContainer { 
    height: 100 % ; 
    vertical - align: middle; 
} 
.themeSitenameCaptionContainer { 
    vertical - align: middle; 
    height: 100 % ; 
} 
.themeSitename { 
    font - family: $SiteNameFontFamily['Lobster Two', Georgia, serif]; 
    font - size: $SiteNameFontSize[48 px]; 
    color: $SiteNameTextColor[#1b2929]; 
    word-wrap: break-word; 
    line-height: 1; 
    } 
    .themeCaptionArea { 
    text-align: center; 
    padding: 25px 0; 
    } 
    .themeCaption { 
    font-family:$CaptionFontFamily['Overlock', Verdana, sans-serif]; 
    font-size:$CaptionFontSize[18px]; 
    color:$CaptionTextColor[# 393939]; 
    letter - spacing: 3 px; 
    text - transform: uppercase; 
} 

.themeNavigationAreaContainer { 
    vertical - align: bottom; 
    height: 100 % ; 
    width: 100 % ; 
} 
.themeNavigationArea { 
    float: left; 
}# 
navigation ul { 
    list - style: none; 
    margin: 0; 
    padding: 0; 
}# 
navigation li { 
    display: block; 
    float: left; 
    padding: 0; 
    padding - left: 10 px; 
    margin: 0; 
}# 
navigation li a { 
    display: block; 
    padding - right: 20 px; 
    color: $NavigationAColor[#ff6600]; 
    font - size: $NavigationFontSize[14 px]; 
    font - family: paladins; 
    font - weight: 500; 
    float: left; 
    text - decoration: none; 
    cursor: pointer; 
    line - height: 2.6; 
    background - image: $NavigationBGImage[url(images/navigationSeprator.png)]; 
    background - repeat: $NavigationBGRepeat[no - repeat]; 
    background - position: $NavigationBGPosition[right center]; 
}# 
navigation li: hover a, #navigation li.selected a, #navigation li.active a { 
    color: rgb(8, 8, 8, 0.8); 
    background - color: $NavigationBGSelectedColor[transparent]; 
    background - image: $NavigationBGSelectedImage[url(images/navigationSeprator.png)]; 
    background - repeat: $NavigationBGSelectedRepeat[no - repeat]; 
    background - position: $NavigationBGSelectedPosition[right center]; 
}# 
navigation li: last - child a { 
    background - image: $NavigationBGSelectedImage[none]; 
}# 
navigation li a span { 
    float: left; 
}# 
navigation li.navArrow a em, #navigation li: hover.navArrow a em, #navigation li.selected.navArrow a em, #navigation li.selected.navArrow a em { 
    background: url(images/navArrow.png) no - repeat 0 0; 
    display: block; 
    float: left; 
    height: 8 px; 
    width: 10 px; 
    margin: 18 px 0 0 10 px; 
}# 
navigation li: hover.navArrow a em, #navigation li.selected.navArrow a em, #navigation li.active.navArrow a em { 
    background: url(images/navArrowHover.png) no - repeat 0 0; 
} 

    HTML Code 

    <div class="themeSocialandSearchContainer"> 
    <div class="themeWidth"> [search start] 
     <div class="themeSearchContainer"> [searchform start] 
      <div class="themeSearchBox"> ${searchinput} ${searchbutton}</div> 
      [searchform end] </div> 
     [search end] [socialicon start] 
     <div class="themeSocialIconContainer"> 
      <div class="themeSocialiconArea">${socialicon}</div> 
     </div> 
     [socialicon end] 
     <div class="clearDiv"></div> 
    </div> 
</div> 
<div class="themeTopArea"> 
    <div class="themeWidth"> 
     <div class="themeBrandingArea"> 
      <div class="themeBrandingContainer"> 
       <div class="tableRow"> [logo start] 
        <div class="tableCell themeLogoOuterContainer"> 
         <div class="themeLogoArea">${logo 500x61}</div> 
        </div> 
        [logo end] 
        <div class="tableCell themeSitenameCaptionOuterContainer"> 
         <div class="themeBrandingContainer  themeSitenameCaptionInnerContainer"> 
          <div class="tableRow themeSitenameCaptionOuterContainer"> 
           <div class="tableCell themeSitenameCaptionContainer"> [sitename start] 
            <div class="themeSitename" data-zs- container="sitename">${sitename}</div> 
            [sitename end] </div> 

           <div class="tableCell themeNavigationAreaContainer">[navigation start] 
            <div class="themeNavigationArea"> 
             <div id="navigation">${navigation}</div> 
            </div> 
            [navigation end] </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="themeWidth"> 
    <div class="themeCaptionArea">[caption start] 
     <div class="themeCaption" data-zs-container="caption">${caption}</div> 
     [caption end]</div> 
    [banner start] 
    <div class="themeBanner">${banner 1000x460}</div> 
    [banner end] 
    <div class="themeContentContainer">[content start] 
     <div class="themeContentArea floatLeft" data-zs-container="content"> 
      [breadcrumb start] 
      <div class="themeBreadcrumb">${breadcrumb &ndash;}</div> 
      [breadcrumb end] ${content} </div> 
     [content end] [sidebar start] 
     <div class="themeSidebarArea floatLeft" data-zs-container="sidebar"> 
      <div class="themeSidebarAreaInner">${sidebar equalHeight}</div> 
     </div> 
     [sidebar end] 
     <div class="clearDiv"></div> 
    </div> 
</div> 
[footer start] 
<div class="themeFooterArea"> 
    <div class="themeWidth">${footer}</div> 
</div> 
</div> 
[footer end] [slideshow start] 
<div class="zs-slideshow-right-arrow"></div> 
<div class="zs-slideshow-left-arrow"></div> 

Answer 1

Als Erweiterung auf die Antwort von @ksav gegeben, die das Logo und das Menü auf ihren eigenen Reihen durch die Tablecell-Klasse von sowohl die themeLogoOuterContainer und themeSitenameCaptionOuterContainer, können Sie die Menüpunkte gleichmäßig verteilen auch das Entfernen legt über die Breite des Seitenkörpers mit diesem CSS:

.themeSitenameCaptionOuterContainer { 
    width: 100%; 
} 

.themeNavigationAreaContainer { 
    width: 100%; 
} 

.themeNavigationArea { 
    width: 100%; 
} 

#navigation { 
    display: table; 
    width: 100%; 
} 

#nav-top { 
    display: table-row; 
} 

#nav-top > li { 
    display: table-cell; 
    width: calc(100%/6 - 10px); /* 100% divided by 6 menu items, each with 10px padding-left */ 
} 

auch, wenn Sie Ihr logo größer sein möchten, können Sie es auf diese CSS geben:

#zpLogo { 
    height: auto; 
    width: 200%; /* however large you want */ 
} 

aber Sie möchten vielleicht ein Bild mit besserer Auflösung hochladen.

Answer 2

Wechsel:

<div class="tableCell themeLogoOuterContainer"> 
    <div class="tableCell themeNavigationAreaContainer"> 

zu:

<div class="themeLogoOuterContainer"> 
    <div class="themeNavigationAreaContainer"> 

Die tablecell Klasse ist es, diese divs eine CSS-Regel von display: table-cell geben.