Avatar
tbartolen
Člen
Avatar
tbartolen:

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. května 12:03
Navštiv www.fb.com/skkelticz
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:

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. května 13:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:

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 19. května 15:09
Nahoru Odpovědět 19. května 15:08
Navštiv www.fb.com/skkelticz
Avatar
Tomáš Messing:

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. května 15:20
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na tbartolen
Honza Bittner:

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 19. května 15:35
Nahoru Odpovědět  +1 19. května 15:33
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na tbartolen
Tomáš123:

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 19. května 15:44
Nahoru Odpovědět  +1 19. května 15:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Tomáš Messing
Tomáš123:

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. května 15:56
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:

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. května 22:47
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš123
tbartolen:

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

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

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. května 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.