Trouble formatting and displaying

前端未结

关注

 1  740

I\'m still pretty new to coding so bear with me...I have read that different browsers display horizontal rules differently. I can\'t seem to get it right in Firefox or Chrome (o

相关标签:

1条回答

无人共我

2021-01-24 00:05

I have cleared float for the hr and removed the <br/>

@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 {
	list-style: none;
}

html {
	background-color:#96d5cd;
}


#container {
	width:980px;
	border:1px solid #1f5c54;
	background-color:white;
	margin:2em auto;
}

hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
}

#footer {
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	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 {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-family: patua-one;
	margin-top: 40px;
	font-style: normal;
	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 {
	text-decoration: none;
	color: black;
	margin-top: 0px;
	font-style: normal;
}

a:hover {
	text-decoration:none;
	color:#fff;
}

#feature {
padding-left:10px;
overflow:hidden;
width:960px;
}


#footer {
	font-family:amaranth;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
}

#header {
	font-family:patua-one;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
	font-size:24px;
}

#header img {
	float:left;
margin-left:10px;
margin-top:10px;
}

h1 {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	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 {
	float:left;
	width:275px;
	margin-left:220px;
}

h2 {
	font-weight: 400;
	text-transform: uppercase;
	line-height: 100%;
	@import url(http://fonts.googleapis.com/css?family=Patua+One);
	font-family: patua-one;
	font-style: normal;
	font-size:24px;
}

#columns {
	margin-top:20px;
}

h3 {
font-family:amaranth;
}

div span.welcome {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
}
hr {
  clear: both;
}

<!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">

	<div id="header">
    <img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
    
    <br />
    
    <ul id="social">
    	<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>
	</div><!-- end header -->
    
    <div id="feature">
    
    	<span class="accentbar"><img src="images/FeatureBanner.jpg" alt="banner" class="banner" /></span><br>
    
    </div><!-- end feature -->
    
    <div id="main">
    	<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>
		   </div><!-- end content -->
          <div id="columns">
            <div id="column1">
    <h2>Services</h2>
    <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 column1 -->

    <div id="column2">
     <h2>Clients</h2>
     <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 column2 -->

    <div id="column3">
     <h2>Blog</h2>
     <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 -->
    	</div><!-- end columns -->
    </div><!-- end main -->
    
    	<div id="footer">
        <span><p>© copyright 2015 katie j hunter • all rights reserved</p></span><br />
        <ul id="nav2">
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
    	</ul>
	</div>
       </div><!-- end footer -->

</div><!-- end container -->



</body>
</html>

0 讨论(0)