Diskuze: Zarovnání menu na střed

Petr Novotný

Člen

Petr Novotný:3.2.2017 10:42

Ahoj, potřebuji poradit, jak mám zarovnat menu na střed, ale aby bylo zarovnané na všech monitorech stejně. Zkoušel jsem to přes margin, ale takto to je jen na notebookové monitory. A ideálně, aby byl rozestup mezi tlačítky aspoň 15px.

HTML Kód

<!DOCTYPE html>
<html>
<head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta charset="utf-8">
</head>
<body>

<div id="mainpage">

<div class="buttons">

<a href="index.html" class="home">Domů</a>
<a href="#" class="page1">Stránka 1</a>
<a href="#" class="page2">Stránka 2</a>
<a href="#" class="page3">Stránka 3</a>
<a href="#" class="page4">Stránka 4</a>
<a href="#" class="page5">Stránka 5</a>
</div>
</div>

</body>
</html>

CSS Kód

#mainpage{
        width: 1300px;
        height: 736px;
        margin-left: auto;
}

.buttons .home{
        margin: 0px 20px 0px 0px;
        display: inline-block;
        float: left;
        font-size: 32px;
        color: black;
        text-decoration: none;
        position: static;
}

.buttons .page1{
        margin: 0px 20px 0px 0px;
        display: inline-block;
        float: left;
        font-size: 32px;
        color: black;
        text-decoration: none;
        position: static;
}

.buttons .page2{
margin: 0px 20px 0px 0px;
        display: inline-block;
        float: left;
        font-size: 32px;
        color: black;
        text-decoration: none;
        position: static;
}

.buttons .page3{
        margin: 0px 20px 0px 0px;
        display: inline-block;
        float: left;
        font-size: 32px;
        color: black;
        text-decoration: none;
        position: static;
}

.buttons .page4{
        margin: 0px 20px 0px 0px;
        display: inline-block;
        float: left;
        font-size: 32px;
        color: black;
        text-decoration: none;
        position: static;
}

.buttons .page5{
        margin: 0px 20px 0px 0px;
        display: inline-block;
        float: left;
        font-size: 32px;
        color: black;
        text-decoration: none;
        position: static;
}

Děkuji

Odpovědět

3.2.2017 10:42

Aleš Lulák

Člen

Aleš Lulák:3.2.2017 10:58

Ahoj,

je zbytečnost používat float:left, jednak se to blbě zarovnává a jednak stejně používáš display: inline-block. Po smazání všech floatů, stačí nastavit

.buttons {
  text-align: center;
}

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

3.2.2017 10:58

"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall

Patrik Paleček

Člen

Patrik Paleček:8.8.2019 10:21

Ahoj, mám stejný problém, poradíte i v mých stylech? Já tam display: inline nemám.

body {
font-family: Verdana;
font-size: 14px;
background: url('obrazky/menu.png') #615F5C;
margin: 73px 0 0 0;
width: 100%;

}
h1 {
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}

h2, h3, h4, h5, h6 {
text-align: center;
color: white;
font-weight: normal;
font-family: Arial;
font-size: 1.7em;
}
.centrovanyobrazek {
text-align: center;
}
article {
background: url('obrazky/pozadi.png') #fab300;
padding: 40px 0px;
}
article header {
width: 250px;
float: left;
position: static;
background: none;

}
article section {
padding: 20px;
width: 666px;
float: left;
background: white;
border: 2px groove #4D4B4B;
}
.vlevo {
float:left;
}
.cistic {
clear: both;
}
header {
height: 73px;
position: fixed;
top: 0px;
background: url('obrazky/menu.png') #615F5C;
width: 100%;
}
#logo {
background: url('obrazky/logo.png') no-repeat;
width: 250px;
height: 60px;
float: left;
margin: 7px 0px 0px 20px;
}
#logo h1 {
margin: 14px 0px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;

}
nav ul li {
float: left;
padding: 0px 25px;
margin: 0 1px;
font-size: 17px;
height: 73px;
line-height: 4.3em;

}
nav a {
color: white;
text-decoration: none;
}
nav ul li:hover, .aktivni {
background: #ffbb00;
}
footer {
height: 100%;
color: white;
margin: auto;
text-align: center;

}
footer a {
color: #ffbb00;
text-decoration: none;

}
#centrovac {
margin: 0px auto;
width: 960px;
}
.odsazenizleva {
margin: 0px 0px 0px 50px;
}
.stred {
margin: auto;
}

Nahoru Odpovědět

8.8.2019 10:21

Peter Mlich

Člen

Peter Mlich:8.8.2019 12:53

Css bez html kodu nedava smysl. Celkem marny pokus o vyreseni problemu.

text-align: center;
Zarovnava text na stred, display: inline (text), inline-block (obrazek).
Sada odkazu na jednom radku je jako dlouhy text, takze to lze pouzit.

#centrovac {
margin: 0px auto;
width: 960px;
}
Tohle funguje tak, ze vnejsi blok ma nejakou sirku, vnitrni ma mensi sirku a margin-left a -right se dopocita jako (wa-wb)/2.

margin: auto;
To je dost problematicke.
Pro left-right musis mit opet nastane with vnejsiho a vnitrniho bloku.
Pro top-right zase height. Pokud nemas, height byva dynamicka, obe stejne, marnig-top bottom by to ignorovalo

No, a ted dej html kod a rekni, ktere radky css se ignoruji nebo aspon nazvy definic(#centrovac, ..., .stred). Co my jako mame z toho vycist?

Nahoru Odpovědět

8.8.2019 12:53

Peter Mlich

Člen

Peter Mlich:8.8.2019 13:12

Jo, a jeste ne tu moznost vystredit pomoci zaporneho marginu.

position:relative; width: 500px;
+------
|.....+--
|.....|
|.....| position:absolute: width:300px; left:50%; /* coz je left=300/2=150px */ margin:-150px;

Posunes to na stred, 50% a pak marninem zpet o polovicni delku sirky toho uvnitr. V podstate je to podobne jako u margin:0 auto.

Editováno 8.8.2019 13:12

Nahoru Odpovědět

8.8.2019 13:12

Patrik Paleček

Člen

Patrik Paleček:9.8.2019 12:28

Promiň, učím se čtvrtý den, takže zatím toho moc nevím. Posílám i HTML kód stránky.
Děkuji za snahu mi pomoci.

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>Palcovo portfolio</title>
    </head>

    <body>
    <header>
    <div id="logo"><div class="odsazenizleva"><h1>Palecmaker</h1></div></div>
    <nav>
    <div id="centrovac">
        <ul>
            <li class="aktivni"><a href="#">Domů</a></li>
            <li><a href="#">O mně</a></li>
            <li><a href="#">Dovednosti</a></li>
            <li><a href="#">Reference</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
        </div>
    </nav>
    </header>
        <article>
                <div id="centrovac">
            <header>
                <h1>O mně</h1>
            </header>

            <section>
                 <p>Vítejte na mém prvním webu, HTML je pro mě nová neznámá.</p>
        <p class="centrovanyobrazek"><img src="obrazky/avatar.png" alt="Avatar" /> </p>

        <p>Vystudoval jsem střední průmyslovou školu v Jičíně, obor informační technologie.</p>
        <p>Rád čtu a někdy (hlavně v létě) i sportuju. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie metus sed erat lobortis, sed posuere metus convallis. Integer eget elit euismod, rhoncus leo ut, malesuada sem. Sed velit lacus, vestibulum eu risus placerat, tincidunt ultricies dui. Cras at congue dui. Donec et tristique purus, eget rutrum orci. Nam eget blandit turpis. Proin sed dapibus sem. Sed lectus nunc, ultricies a erat eu, semper cursus velit. Donec commodo lorem sit amet porta egestas. Donec in tortor et erat sodales suscipit. Aliquam porttitor metus mi, sit amet bibendum lectus mattis non. Curabitur accumsan nunc ac consequat aliquam. Mauris eget mauris ornare, accumsan dui eget, dapibus elit.

Nulla non nulla risus. Suspendisse placerat, diam id blandit vulputate, lectus lacus consectetur sapien, a sollicitudin est urna ac neque. Quisque arcu nibh, bibendum sit amet ultricies vel, eleifend at quam. Donec erat risus, tincidunt nec feugiat porttitor, viverra ac mi. In nec ultricies massa, quis fermentum arcu. Mauris eget ultricies elit. Donec pretium orci in tortor vulputate, at condimentum sapien dapibus. Proin interdum a orci eu tincidunt.

Ut eget eros urna. Nunc a sagittis lectus. Vestibulum vulputate, ante ac viverra maximus, risus dui fringilla tortor, varius iaculis dolor lacus sed ante. Nullam in ullamcorper ipsum. Pellentesque diam sapien, maximus ac scelerisque id, suscipit commodo urna. Vivamus tempus, augue at volutpat eleifend, sem nulla venenatis nunc, sit amet venenatis mi est quis eros. Etiam lacinia diam id ante laoreet sodales ut in tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer suscipit euismod nulla nec sodales. Suspendisse potenti.

Ut pharetra vehicula varius. Aliquam a blandit felis. Sed efficitur enim at felis convallis, eget tincidunt augue aliquam. Cras tristique faucibus turpis. Integer venenatis elit sit amet viverra finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac pellentesque justo, vitae eleifend tellus. Sed ultrices elementum metus. Etiam pulvinar tortor non pretium finibus. Etiam mattis tempor augue ut efficitur. Duis laoreet sapien vel ex gravida convallis. Duis ornare quam vulputate fermentum posuere.

Curabitur in nisi aliquam, egestas neque quis, vestibulum massa. Vivamus feugiat enim vitae massa gravida mollis vitae posuere purus. Ut sagittis pellentesque turpis, eu rhoncus tortor porta vel. Curabitur molestie massa eu massa tincidunt maximus. Sed eget auctor felis, quis vulputate ipsum. Donec ultricies ante non vulputate dictum. Proin id lacus nec nisi commodo finibus. Morbi non lorem sit amet massa ullamcorper ultrices sit amet et turpis. Donec posuere sapien et lacus tristique, mollis placerat metus varius. Sed sed nibh dignissim, elementum neque et, ornare magna. Praesent a scelerisque nisl. Nunc at diam vel turpis malesuada euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie metus sed erat lobortis, sed posuere metus convallis. Integer eget elit euismod, rhoncus leo ut, malesuada sem. Sed velit lacus, vestibulum eu risus placerat, tincidunt ultricies dui. Cras at congue dui. Donec et tristique purus, eget rutrum orci. Nam eget blandit turpis. Proin sed dapibus sem. Sed lectus nunc, ultricies a erat eu, semper cursus velit. Donec commodo lorem sit amet porta egestas. Donec in tortor et erat sodales suscipit. Aliquam porttitor metus mi, sit amet bibendum lectus mattis non. Curabitur accumsan nunc ac consequat aliquam. Mauris eget mauris ornare, accumsan dui eget, dapibus elit.

Nulla non nulla risus. Suspendisse placerat, diam id blandit vulputate, lectus lacus consectetur sapien, a sollicitudin est urna ac neque. Quisque arcu nibh, bibendum sit amet ultricies vel, eleifend at quam. Donec erat risus, tincidunt nec feugiat porttitor, viverra ac mi. In nec ultricies massa, quis fermentum arcu. Mauris eget ultricies elit. Donec pretium orci in tortor vulputate, at condimentum sapien dapibus. Proin interdum a orci eu tincidunt.

Ut eget eros urna. Nunc a sagittis lectus. Vestibulum vulputate, ante ac viverra maximus, risus dui fringilla tortor, varius iaculis dolor lacus sed ante. Nullam in ullamcorper ipsum. Pellentesque diam sapien, maximus ac scelerisque id, suscipit commodo urna. Vivamus tempus, augue at volutpat eleifend, sem nulla venenatis nunc, sit amet venenatis mi est quis eros. Etiam lacinia diam id ante laoreet sodales ut in tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer suscipit euismod nulla nec sodales. Suspendisse potenti.

Ut pharetra vehicula varius. Aliquam a blandit felis. Sed efficitur enim at felis convallis, eget tincidunt augue aliquam. Cras tristique faucibus turpis. Integer venenatis elit sit amet viverra finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac pellentesque justo, vitae eleifend tellus. Sed ultrices elementum metus. Etiam pulvinar tortor non pretium finibus. Etiam mattis tempor augue ut efficitur. Duis laoreet sapien vel ex gravida convallis. Duis ornare quam vulputate fermentum posuere.

Curabitur in nisi aliquam, egestas neque quis, vestibulum massa. Vivamus feugiat enim vitae massa gravida mollis vitae posuere purus. Ut sagittis pellentesque turpis, eu rhoncus tortor porta vel. Curabitur molestie massa eu massa tincidunt maximus. Sed eget auctor felis, quis vulputate ipsum. Donec ultricies ante non vulputate dictum. Proin id lacus nec nisi commodo finibus. Morbi non lorem sit amet massa ullamcorper ultrices sit amet et turpis. Donec posuere sapien et lacus tristique, mollis placerat metus varius. Sed sed nibh dignissim, elementum neque et, ornare magna. Praesent a scelerisque nisl. Nunc at diam vel turpis malesuada euismod.</p>
        <p>O mých dovednostech se můžete dočíst <a href="dovednosti.html">zde</a>.</p>
        <p>Kontaktovat mě můžete <a href="kontakt.html">zde</a>.</p>
        <h2><a href="tabulka.html">Tabulka produktů zde.</a></h2>
            </section>
            <div class="cistic"></div>
            </div>
        </article>

        <footer>
            Vytvořil &copy; Patrik Paleček 2019 pro <a href="www.seznam.cz">SEZNAM.CZ</a>
        </footer>

    </body>

</html>

Nahoru Odpovědět

9.8.2019 12:28

Peter Mlich

Člen

Peter Mlich:9.8.2019 12:47

Hele, v tom pripade bych ti doporucoval prepsat to do bootstrapu.
https://getbootstrap.com/
https://getbootstrap.com/…ntroduction/#… - v sablone upravit linky pro tve adresare
https://getbootstrap.com/…onents/navs/ - a pak se da zkopirovat primo hotovy kod
https://getbootstrap.com/…ties/colors/ - nejake dodatecne upravy se daji pak resit jen pridanim class
https://getbootstrap.com/…/typography/

Nahoru Odpovědět

9.8.2019 12:47

Peter Mlich

Člen

Peter Mlich:9.8.2019 13:08

https://validator.w3.org/nu/#…

kdyz tam vlozis html a spustis test, tak vypise chyby. Napriklad, ze id muze byt jen jedenkrat na 1 strance
s tou H1 pinda totez, doporucuje pouzivat pouze 1x H1 a to z duvodu nevizualniho zpracovani kodu

A s tim centrovanim tomu stale nerozumim, co by se melo kde jak centrovat? Mozna pridej jeste screeny, jak ti to zobrazuje prohlizec a jak by to melo byt spravne. Nebo, aspon nejake voditko, jmena tagu, classy, idecka.
https://jsfiddle.net/cm7natjf/
Menu tak nejak na stredu je. Vlevo od nej je jakesi logo, tak to zabira cast sirku. A podobne i to menu ve sloupci.
Kdybych to delal ja, tak celou stranku uzavru do neceho jako bootstrap-container.

<body>
    <div class="container">
        <header>......
    </div>
</body>
<style>
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
</style>

To css znamena, ze se sirka bude skokove menit mezi 4 velikostmi nebo 100%. nejsirsi bude 1140px.

Nahoru Odpovědět

9.8.2019 13:08

Patrik Paleček

Člen

Patrik Paleček:12.8.2019 8:13

Ahoj, to se mi líbí, to si tam nechám, ale stále nějak tápu nad tím menu, pokud odeberu obrázek a ten nápis u loga (Palecmaker), tak stejně je to menu více vpravo a není na středu. Bootstrap neznám, jak říkám, dělám to pár dní, zkusím se s tím nějak poprat, děkuji za snahu, vážím si toho.

Nahoru Odpovědět

12.8.2019 8:13

Peter Mlich

Člen

Peter Mlich:12.8.2019 12:31

Zluta oblast horniho menu neni stejne zleva jako cerny ramecek textu? Sis, to ale musis napsat Jak na to mame prijit, co je v tvem menu spatne.
Ja bych zacal obalenim cele stranky do todo divu, co to bude centrovat.

<style>
.layout {
margin: 0px auto;
width: 960px;
}
</style>

Pak se mrkni na marginy a paddingy.

<style>
#logo {
    width: 250px;
    height: 60px;
    margin: 7px 0px 0px 20px; --- margin-right:20px;
    }
#logo h1 {
    margin: 14px 0px 0px 10px; --- margin-right:10px;
    }
</style>

A doporucuje se pro ul li marginy i paddingy vynulovat.

<style>
nav ul, nav li {margin:0; padding:0}
</style>

Editováno 12.8.2019 12:32

Nahoru Odpovědět

12.8.2019 12:31

Peter Mlich

Člen

Peter Mlich:12.8.2019 12:34

A jestli ti tam zustava 1px, tak to mas zadane v li jako margin.
Upravy, co jsem tam proved jsou s temi minusky. Nektere jsou mozna zbytecne, to si pak pores.
https://jsfiddle.net/fx6b4pz7/
Jo, a zakazal jsem nahore to logo, div.

Editováno 12.8.2019 12:37

Nahoru Odpovědět

12.8.2019 12:34

Patrik Paleček

Člen

Patrik Paleček:12.8.2019 16:16

Ahoj, již jsem začal využívat knihovny, které jsi mi tu doporučil. Takže tvořím od začátku. Jen bych se chtěl zeptat, zda-li mohu knihovny bootstrapu nějak editovat, potřeboval bych si v jejich stylech například pohrát s různými jimi předdefinovanými classami - zvětšit buňky, změnit pozadí. Asi by to eventuálně šlo definovat přímo na ty hlavní atributy (a, li, ul), ne? Ale když bych definoval například to "a" (myslím tím odkaz, abychom si rozuměli, snad to nepíšu úplně blbě), tak se mi udělají všechny na té stránce a to nechci. Napadá Tě něco? Šlo by asi tvořit kontejnery, ale to by bylo hodně zdlouhavé všechno takhle osazovat, že?

Nahoru Odpovědět

12.8.2019 16:16

Jurajs

Člen

Jurajs:12.8.2019 19:58

No podle mě, by ses měl začít učit webové stránky bez FW(bootstrap atp) ....Pak si nebudeš umět udělat web bez FW...První bych se naučil pořádně html a css (responsive) a pak bych pro urychlení práce použil FW (Bootstrap)....
Nevím každý, to má jinak...Nechci se tady hádat je to jen můj názor...Ale jak chceš, uvidíš sám

Nahoru Odpovědět

12.8.2019 19:58

Peter Mlich

Člen

Peter Mlich:13.8.2019 8:00

Jurajs - Ja bych se naopak ucil podle prikladu bootstrapu. Spis kvuli tomu, aby se naucil pouzivat minimalni a prehledny html kod. Cili, copy, paste z dokumentace.

Patrik Paleček - Tech cest je nekolik. S oblibou pouzivam to, ze do stranky dam bootstrap.min, ale ve slozce po rozbaleni je bootstrap.css bez minifikace. V tom si muzes prohlednout, jake styly pouzivaji, pripadne zkopirovat. Coz delam nekdy taky, ze si vykopiruji jen par stylu pro maly program.
No, a kdyz chci editovat, tak si pridam vlastni css za bootstrap. Mysleno takto

<link .. bootstrap>
<link .. mujstyl.css>

Proste BT needituji, pridavam novy s upravami.Teoreticky by melo jit vsechno prepsat. Pouzivam k tomu idecko, ale mozna by sel pouzit i html tag. Rozdelim layout na id bloky hlavicka, obsah, paticka a jine a pres ide a jejich class si to prepisu. Nekdy je treba improvizovat, zkopirovat si jejich kod, smazat vse, co menit nechces. Maji tam importanty nebo nezvykle konstrukce.
Ja na tvem miste bych menil prozatim jen takove malickosti, jako barvicky. Zkus se zeptat na neco konkretniho. Treba na velikosti ma BT spoustu class pro sirku i vysku. Jen je problem to obcas najit. Ale, pokud jsi to uz nekdy videl a tipnes si, co do vyhledavaciho policka napsat, tak to vyhledavani se tam da pouzit.
https://getbootstrap.com/…tent/tables/#…
https://getbootstrap.com/…nts/buttons/#…
https://getbootstrap.com/…nents/forms/#…
https://getbootstrap.com/…layout/grid/#… - col bez niceno je pro vsechna zarizeni, sm, dm, lg pro vetsi displeje, takze se da col pouzit na cokoliv. Ale je to resene pres % tak to neni moc k nicemu
https://getbootstrap.com/…/typography/#…
https://getbootstrap.com/…-for-layout/#…
https://getbootstrap.com/…/typography/#…
https://getbootstrap.com/…ties/sizing/
https://getbootstrap.com/…ies/spacing/

Editováno 13.8.2019 8:03

Nahoru Odpovědět

13.8.2019 8:00

Nejčastěji vyhledáváné

Diskuze: Zarovnání menu na střed