| Autor | Zpráva | ||
|---|---|---|---|
| robbie Profil |
Ahoj, poradí někdo prosím, proč se mi udělá v zobrazení pro mobilní zařízení takovýto bílý pruh nahoře ve stránce?
Děkuji moc a přkládám ukázku stránky a kodu: www: img.djpw.cz/xif.jpeg kod: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Test template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
div.eq{visibility:hidden;} /*citat endora pryc */
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
span.icon-bar{background-color: white;}
html {
background: url(images/rocks.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: Coffee; /* deklarace fontu */
src: url("../font/coffee.ttf"); /* propojení na umístění souboru */
}
li a {text-decoration:none;
color: white;
font-family: Coffee;
font-size:20px;}
li a:hover { background-color:black;
}
.navbar-toggle{background-color:black;}
.icon-bar{ color:black;}
@font-face {
font-family: Tutano; /* deklarace fontu */
src: url("font/tutano_cc_v2.ttf"); /* propojení na umístění souboru */
}
</style>
</head>
<body >
<div class="container-fluid">
<div class="row">
<div class="col-md-12 ">
<!-- NAV-->
<nav class="navbar ">
<div class="container-fluid " >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" ></span>
<span class="icon-bar" ></span>
<span class="icon-bar" ></span>
</button>
<a class="navbar-brand" href="#"> <img src="images/vimeo2.png" alt="vimeo" style="margin-top:-10px;"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" style="background-color:green; border-radius:10px;"><a href="#">Join<span class="sr-only">(current)</span></a></li>
<li><a href="#">On Demand</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">Watch</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="background-color:black; border-radius:0px;"><a style="color:white;"href="#">Login</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<p style="color:white; font-size:19px; text-align:center;position:relative; top:380px;"">Edit and share your home made videos on smart phones.</p>
<p style=" text-align:center; position:relative; top:390px;" > <button type="button" class="btn btn-danger " style="border-radius:20px;"><i class="fa fa-apple" aria-hidden="true"> Download here</i> </button></p>
</div> <!-- /.end col - md , Jumbotron-->
</div> <!-- /.end row-->
</div> <!-- /.end container fluid-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> |
||
| Tomáš123 Profil |
#2 · Zasláno: 27. 12. 2016, 14:09:17
robbie:
Z dostupných materiálov neviem určiť príčinu. Dodaj prosím živú ukážku, kde je problém pozorovateľný. „ div.eq{visibility:hidden;} /*citat endora pryc */“
Nie je niekde v podmienkach používania zakázané odstraňovať reklamy hostingu? |
||
| robbie Profil |
Tomáš123:
tady je živá ukázka: testuj.8u.cz ...jinak moc děkuji za pomoc, už si s tím nevím rady, možná přehlížím už z rutiny chybu. |
||
| Keeehi Profil |
Bootstrap ti nastavuje bílou barvu pozadí. Buď si to přebij
body {
background-color: transparent;
}nebo v souboru scaffolding.less vymaž 32. řádek. A nebo si body roztáhni na celou výšku prohlížeče a nastav to obrázkové pozadí body a ne html. |
||
| Tomáš123 Profil |
robbie:
Popisovaný problém spôsobuje relatívne poziciovanie. Relatívne poziciovaný prvok totiž po odsunutí stále zaberá svoje pôvodné miesto. Všetky prvky spolu zaberajú to biele miesto, ktorého výška ti prekáža. Určite je treba ešte v skorej fazi vývoja stránky upustiť z tvorby rozloženia, layoutu, pomocou relatívnej pozície. Uváž nasledujúcu štruktúru: <body> <!-- background-image: url(...) -->
<nav> <!-- background-color: white -->
... <!-- to čo sa má zobraziť v bielom pruhu -->
</nav>
<content>
... <!-- to čo sa má zobraziť ako obsah stránky -->
</content>
</body>Na odsadenie tlačidla do vertikálneho stredu obrázku použi margin alebo využi tabuľkové hodnoty vlastnosti display.
Ten zvyšok bieleho miesta, ktoré ti ostane po zmenení štruktúry je neporiadne skrytý citát hostingu. |
||
| robbie Profil |
#6 · Zasláno: 27. 12. 2016, 19:13:00
Přebil jsem tu bílou barvu nahoře
body {
background-color: transparent;
}když testuji responsivitu v Mozile nebo Chromu v Nástrojícj pro vývojáře, je vše v pořádku, ale když stránku zobrazím v mobilním zařízení, tak se na výšku pod pozadím udělá bílý pruh-pozadí nezabírá celou výšku screenu. Proč se v testovacím prostředí vše jeví OK, ale v realitě na chytrem telefonu to zlobí. Máte prosím nějaký nápad, nikde už sem nic nenašel, žádný návod. Proč to pozadí tak zlobí?? Děkuji |
||
|
Časová prodleva: 7 let
|
|||
0