Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 80% výuky zdarma!
https://www.itnetwork.cz/csharp
Avatar
nosekt
Člen
Avatar
nosekt:20.5.2014 13:46

Zdravim, za boha nemůžu přijít na to, jak udělat, aby byl odkaz se třídou .button vertikálně vycentrovaný v headeru. Dále se mi také nedaří udělat kód responzivní.. Prosím o radu

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
    <title>Tomas Nosek webdesign</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>




<body>

<header>
<nav>
  <div class="logo"></div>
  <ul>
  <li><a href="">About</a></li>
  <li><a href="">Products</a></li>
  <li><a href="">Team</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Contact</a></li>
  </ul>
</nav>


 <a href="" class="button">Kdo jsme?</a>


</header>


</body>


</html>

CSS:

body {
        margin : 0px;
}

html, body {

        height: 100%;
        width: 100%;
}

header{
background: url(header.jpg) no-repeat center;
background-size: cover;
width: 100%;
height: 700px;
text-align: center;
}

nav{
  width: auto;
  height: 80px;
}

.logo{
display: block;
float:left;
background: url(logo.png) no-repeat;
height: 64px;
width: 64px;
margin: 70px 130px auto;

}

nav ul{
margin: 0px auto;
margin-right: 100px;
list-style-type: none;
}

nav ul li {
float: right;
padding: 0px 20px;
margin: 0 5px;
margin-right: 50px;
font-size: 17px;
height: 73px;
line-height: 13em;

}

nav a {
color: #C3C2C4;
text-decoration: none;
font-family: Open Sans;
}

nav a:hover{
color: white;
}

.nadpis{
margin: auto;
color: white;
font-family: Open Sans;
text-align: center;
padding-top: 250px;
}


.button {
  font-family: Open Sans;
        font-size: 18px;
  color: white;
        text-align: center;
  border: 2px solid white;
        border-radius: 20px;
        height: 40px;
        width: 200px;
        margin: 0px auto;
        padding-top: 10px;
  display: block;
  }

   a{
  text-decoration: none;
  }
 
Odpovědět
20.5.2014 13:46
Avatar
raito
Člen
Avatar
raito:22.5.2014 15:24

Nezkoušel jsem tvůj kód ale já obecně centrování vertikálně řeším idealně třeba paddingem. Například: div o výšce 100px bude obsahovat div, který má výšku 20px, takže padding bude 40px.

Co se responsive týče: nastuduj si twitter bootstrap. I když se ti nelíbí a nechceš ho třebas používat: responsivita je tam imho dokonale vyřešená a hlavně perfektně popsaná v dokumentaci se všemi interaktivními ukázkami: www.getbootstrap.com. Já jsem se responsive docela dlouho učil, experimentoval jsem a napsal serm si vlastní "engine" abych pak zjistil, že jsem vlastně ten bootstrap vymejšlel znova a že to funguje na úplně stejnym principu.

Nahoru Odpovědět
22.5.2014 15:24
Asi sem usnul. Co se dělo posledních... 5 let?
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Michal Žůrek - misaz:22.5.2014 20:01

musíš mít element s nastaveným

display: tablle;

v tom musíš mít další element

display:table-cell;

a v tom button. teď nevím přesně jestli buttonu nebo té table-cell se nastavuje vertical-aligment.

 
Nahoru Odpovědět
22.5.2014 20:01
Avatar
chodnik74
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
chodnik74:1.6.2014 11:44

Přesně jak píšeš, akorát máš překlep.

Na obal, ve kterém budu centrovat nastavím

display: table;

a potom na vnitřním elementu nastavím:

display: table-cell;
vertical-align: middle;

Pokud ti nedělá problém angličtina, pak zde máš popsaných 6 metod na vertikální zarovnání: http://www.vanseodesign.com/…l-centering/

 
Nahoru Odpovědět
1.6.2014 11:44
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.