Chcę zrobić obramowanie całej strony,stworzyłem div-a,ale tło strony zasłania obramowanie,gdy wyłączę tło wtedy widać obramowanie.
0
0
Zbudowałem samochód, wlałem do niego paliwo, ale nie chce ruszyć.
tl;dr - wrzuć kod.
0
HTML
<!DOCTYPE html>
<html lang="pl">
<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 -->
<meta name="description" content="">
<meta name="author" content="Wojciech Gorzawski">
<link rel="icon" href="favicon.ico">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<title>LOVE-LAS</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
* { margin: 0; padding: 0; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
</head>
<body>
<img src="images/bg3.jpg" id="bg" alt="">
<div id="border">
<div class="p1">
<div class="container">
<div class="row">
<div class="col-lg-8 logo tekst " style="text-align:center;"><img src="images/logo.png" id="logo"></div>
<div class="col-lg-4 logo"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 tekst ">STOWARZYSZENIE MIŁOŚNIKÓW LASU<br>
I DZIKICH ZWIERZĄT</div>
<div class="col-lg-2"></div>
</div>
</div>
<div class="p2">
<!--
<div class="container">
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4 tekst2 center">ZNAJDZIESZ NAS TUTAJ</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9"></div>
<div class="col-lg-3 tekst2 center">∨</div>
</div>
</div>
-->
<div class="container">
<div class="row">
<div class="col-lg-9"></div>
<div class="col-lg-3"><img id="fb" src="images/fb.png" style="margin-top:75%;" > <img id="gmail" src="images/gmail.ico" style="margin-top:75%;" > </div>
<!-- <div class="col-lg-3 tekst2 left"><img src="images/gmail.ico" style="margin-top:66%;" id="gmail"></div>-->
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: 'Amatic SC', cursive;
margin: auto;
}
#border{
border: 10px solid #000;
margin-top: 2%;
margin-left: 2%;
margin-left: 2%;
/* margin-bottom: -10%;*/
z-index: 100;
}
.tekst{
font-size:86px;
color:#000;
}
.tekst2{
font-size: 60px;
color:#fff;
text-align: right;
}
#fb{
width: 30%;
height: 30%;
}
#gmail{
width: 95px;
height: 125px;
}
.left{
text-align: left;
}
#logo{
width: 70%;
height: 75%;
}
1
Nie, nie, nie - nikt na to nie będzie patrzył.
Wrzuć minimalny kod prezentujący problem.
0
no ale nie wiem w którym segmencie kodu jest problem.
0
Hm, no to nie wiem... usuwaj poszczególne linijki, dopóki problem występuje.
Tak.
To brzmi sensownie :P
0
Jak usunę linijkę z tłem to wtedy obramowanie jest,ale tło też mi jest potrzebne.
0
No to nie usuwaj akurat tej części? :|
Po prostu weźże skróć ten kod, sformatuj go porządnie, tak abyś mógł go pokazać swojej matce, a ona rozumiała, co się tam dzieje.
1
@S2YCHA twoje tlo to tag img, ktory w dodatku jest pierwszy w body wiec jak ma nie zaslaniac? On zaslania caly kontent. Podstaw pod obrazek zamiast swojego bg np. to http://wallpapercave.com/wp/UBeWVaL.png to sam zobaczysz.
Nie wiem co Ty chcesz tam stworzyc, ale moze po prostu zrob sobie:
body {
background: url("images/bg3.jpg") center center no-repeat;
background-size: contain /* lub cover */;
}
0
jest to samo,reszta kontentu jest widoczna (teksty logo i ikony).
1
position: fixed;
top: 0;
left: 0;
To jest twoj problem.