FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
tbartolen
Člen
Avatar
tbartolen:19.5.2016 12:03

Zdar, chtěl bych mít odkaz roztažený přes celý background image. Měl jsem to udělané pomocí divu Vata, ale po tom co jsem zadal parrent divu

padding-top:20%

abych nafejkoval výšku divu, tak se mi ta vata pokazila a už netvoří odkaz přes celý obsah obrázku...nevíte, jak to napravit? Děkuju:
css

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
        margin-left: 10%;
}

.container {
        margin-left: 20%;
        margin-right: 5%;

}

.firstR {
        width: 30%;
        float: left;
        border: 1px solid black;
        background: url("pokus.jpg");
        background-size: 100%auto;
        position: relative;
        margin-bottom: 3.3%;
        height:;
        padding-top: 20%;
        }
.first {
        width: 30%;
        float: left;
        border: 1px solid black;
        background: url("pokus.jpg");
        background-size: 100%auto;
        position: relative;
        margin-left: 3.3%;
        margin-bottom: 3.3%;
        padding-top: 20%;
}

.wrapper {
        width: 80%;
        margin-right: 10%;
        margin-left: 10%;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
img {
        height: auto;
        width: auto;
}

body {
        background-image: ("C:\Users\ragulin\Disk Google\Tvorba stránek\Example\pokus.jpg");
}
a.vata {
        display:block;

        width: 100%;
        height: 100%;
        text-decoration: none;
        border: 1px solid red;

}

html

<!Doctype HTML>
<html lang="cs">
<head>
        <meta charset="UTF-8">
        <title>Basic Layout</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- jQuery library -->
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
                <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <!--Upravy CSS-->
                <link rel="stylesheet" type="text/css" href="C:\Users\ragulin\Disk Google\Tvorba stránek\Example\style.css">
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <!--<ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>-->
    </div>
  </div>
</nav>

<div class="wrapper">
<!--first row-->
<div class=firstR>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<div class=first>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<div class=first>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<!--second row-->
<div class="firstR img-responsive center-block">
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<div class="first">
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<div class=first>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<!--third row-->
<div class=firstR>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<div class=first>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<div class=first>
<a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a>
</div>
<!-- end for now-->
</div>

</body>
Odpovědět
19.5.2016 12:03
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:19.5.2016 13:20

Ten padding by si mohol presunúť ku odkazu...

Prípadne to ide riešiť aj cez absolútne poziciovaný pseudoelement :after. Obalu treba nastaviť relatívnu pozíciu a odkaz roztiahnuť pomocou:

a.vata {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
Nahoru Odpovědět
19.5.2016 13:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:19.5.2016 15:08

Jak otakhle?

.first {
        width: 30%;
        float: left;
        border: 1px solid black;
        background: url("pokus.jpg");
        background-size: 100%auto;
        position: relative;
        margin-left: 3.3%;
        margin-bottom: 3.3%;
        padding-top: 20%;
}
a.vata {

        left: 0;
        right: 0;
        top:0;
        bottom:0;

        text-decoration: none;
        border: 1px solid red;

}

Tak to nefunguje...:)

Editováno
Nahoru Odpovědět
19.5.2016 15:08
Navštiv www.fb.com/skkelticz
Avatar

Člen
Avatar
:19.5.2016 15:20

Na roztažení používej cover, protože procenta ti při zmenšení stránky nechávají mezeru.

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

<div class=firstR>
Chybí ti tam ""

 
Nahoru Odpovědět
19.5.2016 15:20
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na tbartolen
Honza Bittner:19.5.2016 15:33

Udělal jsem to za minutku, takže to nemusí být nejvyladěnější, ale já bych to řešil takto http://codepen.io/HoBi/pen/oxrYxx. :-)

Snad jsem pochopil co jsi chtěl dělat. ;)

Editováno
Nahoru Odpovědět
19.5.2016 15:33
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:19.5.2016 15:43

Postup som popísal vo vetetách... Kód mal iba objasniť ako prebehne roztiahnutie.

a.vata {
        /* to čo si tam mal pôvodne */
}
a.vata:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
}

http://kod.djpw.cz/payb

Editováno
Nahoru Odpovědět
19.5.2016 15:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na
Tomáš123:19.5.2016 15:56

HTML atribúty nemusia byť obalené úvodzovkami (ani apostrofmi): https://www.w3.org/…sgmltut.html#…:

In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58). We recommend using quotation marks even when it is possible to eliminate them.

Nahoru Odpovědět
19.5.2016 15:56
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:20.5.2016 22:47

to jako, že po tom co udělám CSS div, tak se mi udělá ještě jeden div pomocí after...nebo jak to funguje?
...a funguje...:-)

Nahoru Odpovědět
20.5.2016 22:47
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:20.5.2016 22:55

tak ne, nefunguje. Tvoří to totiž link z celý stránky...

Nahoru Odpovědět
20.5.2016 22:55
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:20.5.2016 23:55

V tej ukážke to funguje správne. Zrejme si zabudol nastaviť relatívnu pozíciu.

Pseudoelement :after sa roztiahne po vonkajšie hrany najbližšieho prvku s nestatickou pozíciou. Ber to ako obyčajný objekt nezapísaný v HTML kóde.

Nahoru Odpovědět
20.5.2016 23:55
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
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 10 zpráv z 10.