1
Я все еще довольно новичок в кодировании, так что несите со мной ... Я читал, что разные браузеры отображают горизонтальные правила по-разному. Я не могу понять, что это правильно в Firefox или Chrome (только два, которые я проверил до сих пор). Вот то, что внешний вид моего HR-как в Firefox:Устранение неполадок <hr>
http://postimg.org/image/g2vn1cm3b/
Наибольшее правило, где она должна быть. Последние два столбца имеют неуклюжие правила.
А вот в Chrome:
http://postimg.org/image/wl98cvi5p/
Второй и третий столбцы в порядке, первый один перепутались.
Поскольку мой сайт нигде не живет, я собираюсь включить здесь свой HTML и CSS.
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* HTML5 display-role reset for older browsers */
ol, ul {
\t list-style: none;
}
html {
\t background-color:#96d5cd;
}
#container {
\t width:980px;
\t border:1px solid #1f5c54;
\t background-color:white;
\t margin:2em auto;
}
hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
}
#footer {
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t font-family:amaranth, trebuchet, verdana, sans-serif;
margin-left:14em;
}
#footer li {
display:inline;
}
#main {
position:relative;
background-color:#fec161;
height:700px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
}
#main #content {
margin-top:10px;
margin-left:10px;
margin-right:10px;
height:400px;
text-align:justify;
}
#nav {
\t text-decoration: none;
\t color: black;
\t text-transform: uppercase;
\t font-family: patua-one;
\t margin-top: 40px;
\t font-style: normal;
\t font-weight: 400;
background-color:#fec161;
width:920px;
height:40px;
margin-left:10px;
}
#nav li{
display:inline;
}
#nav li {
margin-left:0px;
}
#social {
float:right;
}
#social li {
margin-right:3.5px;
}
#social li{
display:inline;
}
a {
\t text-decoration: none;
\t color: black;
\t margin-top: 0px;
\t font-style: normal;
}
a:hover {
\t text-decoration:none;
\t color:#fff;
}
#feature {
padding-left:10px;
overflow:hidden;
width:960px;
}
#footer {
\t font-family:amaranth;
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t margin-top:0px;
}
#header {
\t font-family:patua-one;
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t margin-top:0px;
\t font-size:24px;
}
#header img {
\t float:left;
margin-left:10px;
margin-top:10px;
}
h1 {
\t font-size: 24px;
\t font-family: patua-one;
\t font-style: normal;
\t font-weight: 400;
\t text-transform: uppercase;
padding-top:10px;
}
#column1 {
float:left;
width:275px;
margin-left:10px;
margin-right:30px;
text-align:justify;
}
#column2 h2{
float:left;
width:275px;
margin-left:90px;
}
#column2 {
float:left;
width:275px;
margin-right:0px;
text-align:justify;
margin-left:20px;
}
#column3 {
float:right;
width:275px;
margin-right:10px;
text-align:justify;
}
#column3 h2 {
\t float:left;
\t width:275px;
\t margin-left:220px;
}
h2 {
\t font-weight: 400;
\t text-transform: uppercase;
\t line-height: 100%;
\t @import url(http://fonts.googleapis.com/css?family=Patua+One);
\t font-family: patua-one;
\t font-style: normal;
\t font-size:24px;
}
#columns {
\t margin-top:20px;
}
h3 {
font-family:amaranth;
}
div span.welcome {
\t font-size: 24px;
\t font-family: patua-one;
\t font-style: normal;
\t font-weight: 400;
\t text-transform: uppercase;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WELCOME :: Katie J Hunter :: Graphic Designer</title>
<link ref="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/images/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Patua+One">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/patua-one:n4:default;amaranth:n4:default.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
\t <div id="header">
<img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
<br />
<ul id="social">
\t <p><li><a href="https://www.facebook.com/pages/Katie-Hunter-Graphic-Designer/1532575640337137" target="_blank"><img src="images/socialmedia_facebook.png" alt="Facebook" /></a></li>
<li><a href="https://www.twitter.com/kinetickatie" target="_blank"><img src="images/socialmedia_twitter.png" alt="Twitter" /></a></li>
<li><a href="https://www.linkedin.com/in/katiejohunter" target="_blank"><img src="images/socialmedia_linkedin.png" alt="Linked In" /></a></li>
</p></ul>
<ul id="nav"><p>
<li><a href="index.html" target="_blank">Home</a></li> ::
<li><a href="about.html" target="_blank">About</a></li> ::
<li><a href="services.html" target="_blank">Services</a></li> ::
<li><a href="portfolio.html" target="_blank">Portfolio</a> ::
<li><a href="blog.html" target="_blank">Blog</a></li> ::
<li><a href="contact.html" target="_blank">Contact</a></li>
</p></ul>
\t </div><!-- end header -->
<div id="feature">
\t <span class="accentbar"><img src="images/FeatureBanner.jpg" alt="banner" class="banner" /></span><br>
</div><!-- end feature -->
<div id="main">
\t <div id="content">
<h1><span class="welcome">Welcome!</span></h1>
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odi o nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.</h3>
\t \t </div><!-- end content -->
<div id="columns">
<div id="column1">
<h2>Services</h2><br />
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
\t <h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
</div><!-- end column1 -->
<div id="column2">
<h2>Clients</h2><br />
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
\t <h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
</div><!-- end column2 -->
<div id="column3">
<h2>Blog</h2><br />
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
</div><!-- end column3 -->
\t </div><!-- end columns -->
</div><!-- end main -->
\t <div id="footer">
<span><p>© copyright 2015 katie j hunter • all rights reserved</p></span><br />
<ul id="nav2">
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
\t </ul>
\t </div>
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>Что я сделал не так? Пожалуйста, будьте добры, я по-прежнему очень новичок в этом и следую видеоуроку о том, как это сделать.
Существует
после служб, удалить, что для первого номера столбца. Удалите теги
под каждым титром и дайте hr 'clear: both' в CSS. – anpsmn