-1
У меня проблема. Я изучаю HTML + CSS. Я написал код, как это:Версия для печати всегда отображать рамку на сайте html/css
HTM файл:
#leftblock
{
width: 150px;
height: 100%;
position: fixed;
background-color: brown;
border: 1px solid black;
}
#rightblock
{
background-color: #A54739;
height: 700px;
width: 500px;
left: 159px;
position: absolute;
border: 1px solid black;
}
#rightblock #subrightblock
{
height: 660px;
margin: 20px;
background-color:bisque;
font-size: 10px;
}
#menu
{
text-align: center;
padding-top: 20px;
}
#menu ul
{
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid black;
width: 110px;
}
#menu ul li
{
border-top: 1px solid black;
}
#menu ul li:hover
{
background-color: #025780;
}
#menu ul li:first-child
{
border-top: none;
}
a
{
text-decoration: none;
}
#menu ul li a
{
text-decoration: none;
display:block;
padding: 5px;
color: #000;
font-size:15px;
border:1px solid #FFF;
text-align:center;
}
#menu li
{
display: block;
margin: 0px;
background-color: crimson;
list-style: none;
}
#submenu
{
text-align: center;
}
#submenu ul
{
display: inline-block;
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
width: 110px;
}
#submenu ul li a
{
text-decoration: none;
display:block;
padding: 5px;
color: #000;
font-size:10px;
text-align:center;
}
p {font-family: fantasy}
p {text-indent: 20px}
#spistresci
{
box-sizing: content-box;
width: 960px;
background-color: #025780;
margin: 10px;
border: 10px solid crimson;
padding: 10px;
}
p:first-letter
{
font-size: 200%;
color: #528011;
}
h1
{
color: blueviolet;
letter-spacing: 10px;
}
h2
{
color: aqua
}
h3
{
color: darkgoldenrod
}
h4
{
color: darkred
}
h5
{
color: gray
}
h6
{
color: darkseagreen
}
p {text-indent: 20px}
h1,h2,h3,h4,h5,h6
{
text-align: center;
}
table{
border: 2px black;
border-collapse: separate;
}
td {
border-style: groove;
background-color: burlywood;
}
span {
background-color: teal;
}
th {
background-color: red;
border-style: solid;
text-transform: uppercase;
}
ol li ol li ol {
list-style-type: lower-greek;
}
img.left {
width: 100px;
height: 100px;
text-align: left;
float: left;
}
img.right {
width: 100px;
height: 100px;
text-align: right;
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie 1</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="wydruk.css" type="text/css" media="print" />
</head>
<body>
<div id="leftblock">
<div id="menu">
<ul>
<li><a href="index.html">Strona Główna</a> </li>
<li><a href="cw1.html">Ćwiczenie 1 </a> </li>
<li><a href="cw2.html">Ćwiczenie 2 </a> </li>
<li><a href="cw3.html">Ćwiczenie 3 </a> </li>
<li><a href="cw4.html">Ćwiczenie 4 </a> </li>
</ul>
</div>
<div id="submenu">
<ul>
<li><a href="index.html">Strona Główna</a> </li>
<li><a href="index.html">Ćwiczenie 1 </a> </li>
<li><a href="index.html">Ćwiczenie 2 </a> </li>
<li><a href="index.html">Ćwiczenie 3 </a> </li>
<li><a href="index.html">Ćwiczenie 4 </a> </li>
</ul>
</div>
</div>
<div id="rightblock">
<div id="subrightblock">
<h1>Formatowanie tekstu</h1>
<h2>Formatowanie tekstu</h2>
<h3>Formatowanie tekstu</h3>
<h4>Formatowanie tekstu</h4>
<h5>Formatowanie tekstu</h5>
<h6>Formatowanie tekstu</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus lorem in felis sodales, sit amet sodales risus sagittis. Aenean vitae malesuada erat.
Cras interdum nunc sit amet nunc cursus, quis convallis ligula tristique. Cras at gravida turpis. Nunc viverra neque in arcu ultrices semper. Vivamus in posuere velit.
Maecenas lobortis tempor elit, non sagittis quam fringilla quis. Cras id hendrerit metus. Quisque sit amet scelerisque neque. Sed euismod vestibulum nisi, vel scelerisque urna aliquam in.
</p>
</div>
</div>
</body>
</html>wydruk.css
#leftblock
{
display: none;
}
#rightblock
{
text-align: left;
}
#rightblock #subrightblock
{
}
#menu
{
display: none;
}
body
{
border: none;
}
#menu ul
{
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid black;
width: 110px;
}
#menu ul li
{
border-top: 1px solid black;
}
#menu ul li:hover
{
background-color: #025780;
}
#menu ul li:first-child
{
border-top: none;
}
a
{
text-decoration: none;
}
#menu ul li a
{
text-decoration: none;
display:block;
padding: 5px;
color: #000;
font-size:15px;
border:1px solid #FFF;
text-align:center;
}
#menu li
{
display: block;
margin: 0px;
background-color: crimson;
list-style: none;
}
#submenu
{
text-align: center;
}
#submenu ul
{
display: inline-block;
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
width: 110px;
}
#submenu ul li a
{
text-decoration: none;
display:block;
padding: 5px;
color: #000;
font-size:10px;
text-align:center;
}
p:first-letter
{
font-size: 200%;
color: #528011;
}
h1
{
color: blueviolet;
letter-spacing: 10px;
}
h2
{
color: aqua
}
h3
{
color: darkgoldenrod
}
h4
{
color: darkred
}
h5
{
color: gray
}
h6
{
color: darkseagreen
}
h1,h2,h3,h4,h5,h6
{
text-align: center;
color: black;
}
table{
border: 2px black;
border-collapse: separate;
}
td {
border-style: groove;
background-color: burlywood;
}
span {
background-color: teal;
}
th {
background-color: red;
border-style: solid;
text-transform: uppercase;
}
ol li ol li ol {
list-style-type: lower-greek;
}
img.left {
width: 100px;
height: 100px;
text-align: left;
float: left;
}
img.right {
width: 100px;
height: 100px;
text-align: right;
float: right;
}Проблема заключается в том, что каждый раз, когда Я смотрю на обзор печати, я всегда получаю текст с рамкой на правой стороне бумаги формата А4. Проблема в том, что у меня нет границы где-либо еще в wydruk.css, поэтому я не знаю, почему эта граница создается. Может ли кто-нибудь помочь?
Можете ли вы показать пример изображения, где граница находится? Я предполагаю, что английский может или не может быть вашим первым языком, поэтому мне немного сложно следить за тем, где находится «обзор печати». – Colin