Jump to content
Sign in to follow this  
mefisteoo

Powiększenie containera o 150 pikseli oraz wyrównanie loga WordPress

Recommended Posts

Witajcie,

Tworzę bloga i mam problem z menu  

 

 

Tam gdzie zaznaczyłem strzałkami. Chciałbym aby Główna STRONA CONTAINER był powiększony o 150px oraz aby menu było na całą szerokość containera oraz aby był środek menu wyśrodkowany. A i jak w css`ie zrobić tak aby po dodaniu loga samo się wyrównywało? Bo teraz mam idealnie przycięte  

 

Jestem początkujący w tych sprawach więc proszę o wyrozumiałość ☺️ Możecie w jakiś sposób mi pomóc? Jakie pliki zmienić? Z góry bardzo dziękuję  

 

Share this post


Link to post

Powiększenie containera strony nic nie da bo wtedy na mniejszych rozdzielczościach będzie się psuło. Pomóc może zmniejszenie paddingów dla odnośników w menu. Z kolei nie wiem po co Ci tyle odnośników. Menu powinno zawierać to co najważniejsze a w Twoim przypadku spokojnie można to grupować i tworzyć submenu wtedy nie będzie trzeba nic zmieniać. A logo jest takie a nie inne bo wrzucasz obrazek o szerokości ponad 900px więc wyśrodkowanie CSSem nic tutaj nie da. Przytnij go do odpowiednich wymiarów i wtedy można kombinować.

Share this post


Link to post

Aby powiększyć container należy wejść w edycję stylów i znaleźć plik style.css i znaleźć klasę .container i tam zmienić szerokość (width) (w linii: 52):

.container {
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Aby wyśrodkować menu zastosuję flex (bo aktualnie jest najłatwiejszy). W tym celu dopiszę w style.css:

.menu-primary-container{
	display: flex;
	justify-content: center;
}

oraz wyśrodkowujemy logo w poziomie (w linii: 135):

#logo img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

Myślę że pomogłem

Edited by Mativve
  • Like 1

Share this post


Link to post
2 godziny temu, Mativve napisał:

Aby powiększyć container należy wejść w edycję stylów i znaleźć plik style.css i znaleźć klasę .container i tam zmienić szerokość (width) (w linii: 52):


.container {
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Aby wyśrodkować menu zastosuję flex (bo aktualnie jest najłatwiejszy). W tym celu dopiszę w style.css:


.menu-primary-container{
	display: flex;
	justify-content: center;
}

oraz wyśrodkowujemy logo w poziomie (w linii: 135):


#logo img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

Myślę że pomogłem

  Siema w innych sprawach naprawdę mi pomogłeś tylko mam problem ze znaleźieniem DIVA menu:

Wklejam kod może uda Ci się znaleźć ☺️ 

================================================== */
.sf-menu,
.sf-menu * { margin: 0; padding: 0; list-style: none;}
.sf-menu li { position: relative }
.sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 10001; }
.sf-menu > li { float: left }
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul { display: block }
.sf-menu a { display: block; position: relative; }
.sf-menu ul ul { top: 0; left: 100%; }
.sf-menu { float: left }
.sf-menu ul { min-width: 160px; *width: 160px; }
.sf-menu a { zoom: 1 }
.sf-menu li { position: relative; white-space: nowrap; *white-space: normal; -webkit-transition: background .2s; transition: background .2s; }
.sf-menu li:hover,
.sf-menu li.sfHover { -webkit-transition: none; transition: none; }
.sf-menu .sf-mega { position: absolute; display: none; top: 100%; left: 0; z-index: 99; }
.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega { display: block }

/*styling*/
#site-navigation-wrap { background: #222; margin: 0; height: 55px; margin-bottom: 50px;}
#site-navigation .dropdown-menu li { display: block; float: left; height: 55px; line-height: 55px; }
#site-navigation .dropdown-menu a { color: #999; font-weight: 400; text-decoration: none; text-align: left; cursor: pointer; padding: 0 30px; }
#site-navigation .dropdown-menu > li > a:hover,
#site-navigation .dropdown-menu > li.sfHover > a,
#site-navigation .dropdown-menu > .current-menu-item > a,
#site-navigation .dropdown-menu > .current-menu-item > a:hover { background: #02aace; color: #fff; }

/*drop-down styles*/
#site-navigation .dropdown-menu ul { background: #000; background: rgba(0,0,0,0.90); font-size: 12px; }
#site-navigation .dropdown-menu ul a { display: block; height: auto; line-height: 1.7em; padding: 10px 20px; margin: 0px; border: 0px; text-transform: none; }
#site-navigation .dropdown-menu ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); line-height: 1.4em; height: auto; float: none; display: block; }
#site-navigation .dropdown-menu ul li > a:hover { color: #fff }
#site-navigation .dropdown-menu ul li:last-child { border: none; }

 

Share this post


Link to post

@mefisteoo

Cytuj

W tym celu dopiszę w style.css:

Musisz po prostu dopisać

Edited by Mativve

Share this post


Link to post

@mefisteooNie musisz wklejać całego kodu bo mam dostęp do niego przez zbadaj element. To po pierwsze a po drugie skopiuj to:

.menu-primary-container{
	display: flex;
	justify-content: center;
}

 

I wklej do tego pliku co wysłałeś

  • Like 1

Share this post


Link to post
Teraz, Mativve napisał:

@mefisteooNie musisz wklejać całego kodu bo mam dostęp do niego przez zbadaj element. To po pierwsze a po drugie skopiuj to:


.menu-primary-container{
	display: flex;
	justify-content: center;
}

 

I wklej do tego pliku co wysłałeś

Nie działa

Share this post


Link to post

Skoro u ciebie nie działa to wyczyść pamięć podręczną przeglądarki a następnie odśwież stronę.

  • Like 1

Share this post


Link to post
18 godzin temu, Mativve napisał:

Skoro u ciebie nie działa to wyczyść pamięć podręczną przeglądarki a następnie odśwież stronę.

Jesteś BOSKI!!!! Wszystko śmiga jak powinno ☺️

Prócz menu

A i jeszcze jedno jak powiększyć teraz posty bo jest bardzo duża przestrzeń między postami a widgetami

Edited by mefisteoo

Share this post


Link to post

@mefisteooHah dzięki. Się siedziało kiedyś 3h nad tym
Co do postów. w linii 65 masz układ lewego contentu zmieniłem z 640px na 75% (gdyż ja preferuję stosowanie % - łatwiej potem responsywność zrobić):
.left-content {
    float: left;
    width: 75%;
}

 

A z menu co jest nie tak ?

 

  • Like 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...