PoPSiCLe, у меня есть сайт, который работает, и мой полный HTML-код:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
/* fix for HDX displays like the Kindle Fire HDX */
@media
(-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
(min-resolution:172dpi) and (min-width:1600px)
{
html { font-size:200%; }
}
body {
min-width:55em; /* for pre CSS3 capable browsers */
font:normal 85%/150% arial,helvetica,sans-serif;
color:#FFF;
background:#333;
}
.heightWrapper {
background:#600;
}
#wrapper {
margin:0 auto;
max-width: 879px;
text-align:center;
border: 1px solid #CCC;
}
h1 {
padding-left:2em;
font-size:100%; /* prevent FF reverse inheritance bug */
}
h1 a {
position:relative; /* so we can absolute position span over this */
display:block;
padding:40px 0;
/* 40px top + 40px bottom + 64px line-height == image height */
text-decoration:none;
font:bold 60px/64px arial,helvetica,sans-serif;
color:#FFF;
}
h1 span {
position:absolute;
top:0;
left:-26px;
width:877px;
height:170px;
background:url(/images/header.jpg) center left no-repeat;
}
.advert {
padding: 2em 1em 2em 1em;
font-size: 1.6em;
line-height: 1.25em;
text-align:center;
}
h2 {
padding: 1em 0 1em 0;
font:bold 175%/145% arial,helvetica,sans-serif;
}
#contentWrapper {
width:100%;
background: #000;
}
#toppics {
clear:both; /* make sure this is past both columns */
padding:2em 0 1em;
margin:0 2em;
border-top:2px solid #400;
}
#toppics ul {
list-style:none;
padding-bottom:1em;
}
#toppics li {
display:inline;
vertical-align:top;
}
#toppics a {
width:300px;
padding:1em;
display:inline-block;
vertical-align:top;
text-decoration:none;
color:#FFF;
-webkit-border-radius:1em;
border-radius:1em;
-webkit-transition:background 0.3s;
transition:background 0.3s;
}
#toppics a:active,
#toppics a:focus,
#toppics a:hover {
background:#800;
}
#toppics img {
display:block;
margin:0 auto 0.5em;
max-width:100%;
}
.click {
margin: 0 auto;
margin-top: 1em;
margin-bottom: 1.5em;
max-width: 25em;
background: #CC0000;
font-family: Noto Sans;
text-align: center;
font-size: 36px;
font-weight: 700;
line-height: 100%;
padding: .75em 0 .75em 0;
-webkit-box-shadow:
0 0 2px 2px #CCC,
0 0 .75em 0.1em #CCC;
box-shadow:
0 0 2px 2px #CCC,
0 0 .75em 0.1em #CCC;
-webkit-border-radius:
.5em;
border-radius:
.5em;
}
a.click:link {
max-width: 22em;
color: #FFF;
text-decoration: underline;
}
#footer {
padding:1em;
text-align:center;
}
@media (max-width:50em) {
body {
min-width:192px; /* CSS3 possible, so let it go narrower */
}
#contentWrapper {
float:none;
width:auto;
}
#content {
margin:0;
padding:1em 0.5em 0;
}
h2 {
padding-bottom:0.66em;
}
#toppics {
padding:1em 0 0;
margin:0 0.5em;
}
#toppics a {
padding:0.5em;
}
}
@media (max-width:660px) {
h1 {
text-align:center;
padding:0;
}
h1 a {
padding:0.33em 0.167em;
font:bold 300%/150% arial,helvetica,sans-serif;
}
h1 span {
display:none;
}
}
@media (max-width:340px) {
#toppics a {
width:auto;
margin:0 auto;
-webkit-box-sizing:padding-box;
box-sizing:padding-box;
}
}
Код (разметка): И полный стиль:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen3.css" media="screen,projection,tv" > <title> Title Of The Site Will Go Here </title> </head><body> <div id="wrapper"> <h1> <a href="/"> Site Title <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="toppics"> <div class="advert"> Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="click"> <a href="*/*"> Click Here Now To See More Of What We Have For Sale </a> </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <ul> <li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li><li> <a href="*.html"> <img src="/images/1A.jpg" alt="/"> </a> </li> </ul> <div class="advert"> Some Plain Text Describing Why You Should Buy From Us </div> <div class="click"> <a href="*/*"> Click Here Now To See More Of What We Have For Sale </a> </div> </div></div> </div> </body> </html>
Код (разметка): Если вы случайно посмотрите на сайт, если вы спуститесь к БОЛЬШОЙ красной кнопке и наведете курсор мыши на текст, вы увидите проблему, о которой я говорю.
Я планирую использовать этот простой дизайн для небольшого побочного бизнеса, который начинает моя жена, и я просто не могу понять, что делаю неправильно.
karjen, спасибо за ваше предложение.
Я попробовал это, и, похоже, это не решило проблему, если только я не делаю что-то ужасно неправильно.
большое спасибо за вашу помощь . . .
![Обучение составлению семантического ядра Key Collector (28 поток) [февраль 2017]](/assets/images/icons/forum0.png){kind=icon}
![[Чеузов Кирилл] - Сам себе](/assets/images/icons/forum7.png){kind=icon}