I am having some trouble with a site that I have to make for school. I've been troubling with it for a few days now. The problem is that my CSS styling is not showing up. Everything validates on my HTML page, and everything on the CSS page validates with the exception of my background image and a hlsa error. The image name is "background" and I am getting this error:
18 header Value Error : background-image Parse Error ("Module3/background.jpeg")
29 h1 Value Error : color 0 is not a color value : hlsa(0,0%,0%,0.2)
My stylesheet:
body
.gradient
{background-color:#666666;
background-image: linear-gradient(to bottom, #ffffff, #666666);
font-family: Arial, Helvetica, sans-serif;
Margin:0px
;
}
#container { background-color: white;
width:960px;
padding:20px;
margin-left:auto;
margin-right:auto;
box-shadow:5px 5px 5px #1e1e1e;
border-radius:15px}
header {background-image: ("Module3/background.jpeg");
background-repeat: No-repeat;
height:150px;
border:1px;
border-color: black;
border-radius:15px;
}
h1 {font-family:Impact, sans-serif;
font-size:4em;
padding-left:15px;
color: hlsa(0,0%,0%,0.2);}
h2 { font-family: Impact, Sans-serif;
font-size: 2em;
color: black;}
.photo {float:right;}
footer {border-style: solid;
border-top: thick;
font-size:.8em;
font-style: italic; }
And my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My name</title>
<LINK href="Module3/assignment3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="w3-container">
<!--My required class information
-->
<h1>My Name</h1>
<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
<li>my goals</li>
<li>Graduate from my school</li>
</ul>
<h2>Hobbies/Interests</h2>
<ul>
<li>Reading</li>
<li>Volunteering</li>
</ul>
<h2>Favorite Web Sites</h2>
<ul>
<li>Wikipedia</li>
<li>The Shakespearean Insulter</li>
</ul>
<footer>
<p> © me</p>
</footer>
</div>
</body>
</html>
To use the background-image selector, you must put the value in a url(). Example:
background-image: url("Module3/background.jpeg");
Make sure the image is being pointed to correctly also.
Keep you code clean and well formatted. Open developer tools and inspect broken properties. If you are not sure that you can write properties without making mistakes, use emmet or similar utilities.
body,
.gradient {
background-color: #666;
background-image: linear-gradient(to bottom, #fff, #666);
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#container {
background-color: white;
width: 960px;
padding: 20px;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 5px #1e1e1e;
border-radius: 15px;
}
header {
background-image: url("Module3/background.jpeg"); /* Be sure that path is exist */
background-repeat: no-repeat;
height: 150px;
border: 1px;
border-color: black;
border-radius: 15px;
}
h1 {
font-family: Impact, sans-serif;
font-size: 4em;
padding-left: 15px;
color: hsla(0, 0%, 0%, 0.2);
}
h2 {
font-family: Impact, Sans-serif;
font-size: 2em;
color: black;
}
.photo {
float:right;
}
footer {
border-style: solid;
border-top: thick;
font-size:.8em;
font-style: italic;
}
<div class="w3-container">
<!--My required class information-->
<h1>My Name</h1>
<h2>Education Goals</h2>
<img src="Module3/Sarah.jpeg" alt="Sarah" height="282" width="200">
<ul>
<li>my goals</li>
<li>Graduate from my school</li>
</ul>
<h2>Hobbies/Interests</h2>
<ul>
<li>Reading</li>
<li>Volunteering</li>
</ul>
<h2>Favorite Web Sites</h2>
<ul>
<li>Wikipedia</li>
<li>The Shakespearean Insulter</li>
</ul>
<footer>
<p> © me</p>
</footer>
</div>
Related
My CSS page makes my entire body section disappear. Everything in the header appears like it should, but literally anything I put in the body will not show up.
If I take out the CSS page, it comes in just fine. But once I put the CSS page back, the body disappears. I tried just p, h*, div, p nested in div. Everything is closed properly; the debugger can't find anything wrong with the code.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
position: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
The postion: absolute in your header is doing this.
It's allowing the body to go behind the header, so the body still there, but is behind the green background color.
Replacing the position: absolute for the desired height can do the job as I saw.
html {
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
font-size: 16px;
color: #000000;
}
/* links */
a {
color:#000000;
font-weight: bold;
}
a:visited {
color:#000000;
font-weight: bold;
}
a:hover {
color:#98ff98;
font-weight: bold;
}
a:active {
color:#000000;
font-weight: bold;
}
/* header */
header {
background-color: #98ff98;
font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
border-bottom: 1px solid #98ff98;
width: 100%;
top: 0;
padding: 0;
height: 200px;
/*position: absolute;*/
}
body {
display: absolute;
}
#name {
float: right;
margin-right: 20px;
}
.name {
text-transform: uppercase;
font-family: "Staatliches", "Arial Black", sans-serif;
}
#nav {
text-align: center;
padding: 0 20px;
/* removed margin: 30px auto; b/c it looked weird */
}
li {
display: inline-block;
border: 1px solid #c8cfc8;
border-radius: 55px;
padding: 10px 10px;
background-color: #c8cfc8;
}
/* body? */
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>website</title>
<link href="resources/css/index.css" type="text/css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#400;700&family=Source+Sans+Pro:wght#400;700&family=Staatliches&display=swap" rel="stylesheet">
</head>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<body>
<p>test</p>
<h1>test</h1>
<div>test</div>
<div>
<p>also test</p>
</div>
</body>
</html>
Simple answer here. The text is behind the header, so we just need to shift the text downwards. We can do this by adding a margin to the top of the text.
All you have to do is add the following margin-top:
body {
background-color: #c8cfc8;
color: #000000;
font-family: "Source Sans Pro", "Staatliches," Arial, sans-serif;
margin-top: 150px;
}
As Isabelle said, your header is now sitting in front of the body. However, another thing to note is that your header element should be inside the body. The body element should contain all the other elements. Create a div element with an id like content to use as the "body" of the page and set some padding to the top of it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="nav">
<ul>
<li class="link">Home</li>
<li class="link">Contact</li>
<li class="link">About</li>
</ul>
</div>
<div id="name">
<h1 class="name">Username</h1>
<h4 class="minibio">tag line/one sentence bio</h4>
</div>
</header>
<div id="content">
<p>test</p>
<h1>test</h1>
<div>test</div>
</div>
</body>
</html>
And add some padding
#content {
padding-top: 200px;
}
I received some feedback about a past assignment warning me about my images being blurry. But I can't figure out how to fix it. The assignment gives very clear descriptions of what to do but I did everything it asked.
I have to do the following for the images:
Add a new selector id named yurthero. In CSS code declarations to configure 300px height and to display the coast.jpg background image to fill the space(use background-size: 100% 100%;) without repeating.
How can I stop my image from being blurry? It seems to me that the stretching forces it to blur.
Attached below is the html5, the css3, and the image I am using.
/* pacific.css for assignment #3 by Caleb Latimer */
body{
background-color: #FFFFFF;
color : #666666;
font-family: Verdana;
background-image: url(background.jpg);
}
h1{
background-color: #000033;
color : #FFFFFF;
font-family: Georgia;
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
background-position: right;
}
nav{
font-weight: bold;
background-color: #90C7E3;
padding: 5px 5px 5px 5px;
}
h2{
color: #3399CC;
font-family: Georgia;
}
dt{
color: #000033;
font-weight: bold;
}
.resort{
color: #000033;
font-size: 1.2em;
}
footer{
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px 10px 10px 10px;
}
#wrapper{
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #828282;
}
h3{
color: #000033;
}
main{
padding-left: 20px;
padding-right: 20px;
display:block;
}
#homehero{
background-size: 100% 100%;
height: 300px;
background-image: url(coast.jpg);
background-repeat: no-repeat;
}
#yurthero{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
nav a{
text-decoration: none;
}
<!-- Chapter 4 Homework by Caleb Latimer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<link rel="stylesheet" href="pacific.css" /> <!-- Uses the pacific.css stylesheet inside of folder -->
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations <!-- Doesn't lead anywhere no requirements given -->
</nav>
<div id ="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p>
<span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span> <br />
12010 Pacific Trails Road <br />
Zephyr, CA 95555<br /><br />
888-555-5555<br />
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort <br />
Caleb#Latimer.com
</footer>
</div>
</body>
</html>
Well it turns out I was given the wrong pictures for the assignment. With the correct pictures they turn out as intended. Always check size, height and width dimensions on images.
I want to remove the blue color above main and below main. I debug for several days, but just do not know how to fix this bug. Please help.
I attached my Page and my desire page.
body {
background-color:#FFFFFF;
background-image: url(background.jpg);
color: #666666;
font-family: Verdana, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
header {
background-color: #000033;
color: #FFFFFF;
font-family: Georgia, serif;
}
h1 {
line-height: 200%;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav {
font-weight:bold;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-left: 20px;
}
nav a {
text-decoration: none;
}
nav a:link {
color: #000033;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #FFFFFF;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
margin-top: 1px;
margin-bottom: 1px;
}
h2 {
color: #3399CC;
font-family: Georgia, serif;
}
h3 {
color: #000033;
}
dt {
color: #000033;
font-weight: bold;
}
.resort {
color: #000033;
font-size: 1.2em;
}
footer {
font-size: 0.70em;
font-style: italic;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper {
background-color: #90C7E3;
margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px black;
}
#homehero {
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left:170px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
header, nav, main, footer {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort :: Yurts</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="yurthero"></div>
<main>
<h2>The Yurts at Pacific Trails</h2>
<dl>
<dt>What is a yurt?</dt>
<dd>Our luxuy yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor
and a roof dome that can be opened.</dd>
<dt>How are the yurts furnished?</dt>
<dd>Each yurt is furnished with a queen-size bed with down quilt and gas-fire stove. The luxury camping experience
also includes elecricity and a sink with hot and cold running water. Shower and restroom facilities are located
in the lodge.</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to
dress for changing weather with layers of clothing.</dd>
</dl>
</main>
<footer>
<small><i>Copyright © 2016 Pacific Trails Resort</i></small><br>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset = "utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with
panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br><br>
888-555-5555<br>
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
</footer>
</div>
</body>
</html>
Your code is for two separate pages. Without having a working fiddle I would just recommend setting the margin bottom to 0px for the image and margin top 0 for the div with the white background.
You could also the the margin top for the div with the white background to minus (example: margin-top:-20px;). A quick and simple solution is to set margin-top to -30px in ur css for main and that will get you the desired effect.
https://jsfiddle.net/26f8ntwm/
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
**margin-top: -30px;**
margin-bottom: 1px;
padding-top:0px;
}
Your wrapper element has a blue background (#90C7E3), and since nav and footer don't have a background (i.e. their background is transparent), and they are inside #wrapper, that wrapper background color is visible in nav and footer:
#wrapper {
background-color: #90C7E3;
etc.
Solution: Just erase the first line from this rule, or give backgrounds to nav and footer.
This has got me stumped. I have done it before when it worked, and now it won't.
The light background that is behind the navagation bar should also be behind the body of the page. The footer should not be in it. There will be more content to go on the page but where the heading is Welcome to The Herb Place should have the light background the same as the nav bar. Even when I have written <div id="content-scroll"> in the html the div part comes up red and doesn't even recognise it.
body {
background-attachment: fixed;
background-image: url("../photos/background.jpg");
background-position: center center;
background-repeat: repeat;
background-size: 100%;
font-family: "open Sans", sans-serif;
font-size-size: medium;
font-style: normal;
line-height: 1.6em;
margin: 1px auto auto;
text-align: left;
max-width: 1024px;
}
#navigation li {
list-style: none;
display: block;
float: left;
margin: 1em;
}
#navigation li a {
display: block;
text-decoration: none;
color: #006600;
font-size: 1.6em;
font-family: Lucida Console;
font-style: italic;
margin: 0.5em;
}
#navigation li a:hover {
margin-top: 2px;
color: yellow;
}
.rectangle {
height: 62px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
z-index: 300; /* the stack order: foreground */
margin: 1em 0;
background-image: url("../photos/background2.jpg");
}
#content-scroll {
background-image: url("../photos/background2.jpg");
max-width: 1024px;
background-position: center center;
background-size: 100%;
}
h1 {
color: #669933;
font-family: kristen ITC;
padding: 20px;
text-align: center center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Herb Place</title>
<link href="html/herb.css" rel="stylesheet">
</head>
<body>
<header>
<img id="logo" src="photos/logo.jpg" alt="My logo">
<!-- the body -->
<div class="rectangle">
<!-- the navigation links -->
<ul id="navigation">
<li> HOME</li>
<li> ABOUT US</li>
<li> STORE</li>
<li> TIPS & HINTS</li>
<li> CONTACT US</li>
</ul>
</div>
</header
<div id="content-scroll">
<h1> Welcome to The Herb Place</h1>
</div>
<div id="footer">
This website has been created as part of an assignment in an approval course of study for Curtin University and contains copyright<br>
material not created by the author. All copyright material used remains copyright of the respective owners and has been used here<br>
pursuant to Section 40 of the Copyright Act 1968 (Commonwealth of Australia). No part of this work may be reproduced without<br>
consent if the original copyright owners.
</div>
</body>
</html>
I know that this should be a simple fix, but I just can't seem to figure out how to place my nav to sit directly on top of the h4 that is positioned on the bottom of the page. I want to have this feature continue throughout my site and don't want to move forward until I can resolve this issue. Any Help is very much appreciated.
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper=">
<div id="name">
<h1>Nathan Langer</h1>
</div>
<div id="content"></div>
<div id="footer">
<nav>
<ul>
<li><strong>home</strong><img class="logos" src="images/homelogo.png" width="45"height="35"></li>
<li><strong>resume</strong><img class="logos" src="images/resume logo.png" width="36"height="37"></li>
<li><strong>portfolio</strong><img class="logos" src="images/portfolio logo.png" width="45"height="35"></li>
<li><strong>what i do</strong><img class="logos" src="images/camera logo.png" width="60"height="37"></li>
</ul>
</nav>
<h4>for professional video and media production</h4>
</div>
</div> <!-- close for wrapper -->
</body>
</html>
CSS
body {
background: url(images/test.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrapper {
margin: auto}
#name {
text-align: center;
margin-top: -65px;
font-size: 40px;
color: white;
font-family: 'Dr Sugiyama', cursive;
text-shadow: 0 1px 0 #333,
0 2px 0 #333,
0 3px 0 #333,
0 4px 0 #333,
0 5px 0 #333,
0 5px 4px #989898;
}
#footer {
width:100%;
height:93px;
position:absolute;
bottom:0;
left:0;
right:0;
}
nav{position: relative;text-align: center;}
nav ul {list-style: none; }
li {
display: inline;
border: 2px solid rgb(256,256,256);
font-family:'Ubuntu', sans-serif;
border-top-left-radius:1em;
border-top-right-radius:1em;
background-color: #A3A3A3 ;
padding: 13px;
margin: 10px;
}
img.logos{vertical-align: -11px; padding-left: 3px;}
nav li a:hover {text-decoration:none ;}
nav li a:visited {color: rgb(256,256,256);}
nav li a:link {text-decoration:none; color: white;}
h4 {
text-decoration:none ;
text-align: center;
background-color: #A3A3A3;
color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/* resume page */
/* end resume page */
/* portfolio page */
#warning {
text-align: center;
color: white;
font-size: 35px;
padding-top: 100px;
}
Check if this works: http://jsfiddle.net/IronFeast/n85Cd/2/
Changed the h4 to div.production, removed the height of the footer and added position:relative
Try adding "clear:both" to the main nav designation:
nav{position: relative;text-align: center; clear:both}