This is the code associated with the assignment I am working on in my web development class. The W3C CSS Validator keeps giving me the following message: "64 Parse Error [:]". What is this and how do I fix it? Please help!
Here is my css:
* {
box-sizing: border-box;
}
body {
background-color: #ffffff;
color: #666666;
background-image: url(../images/background.jpg);
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #90c7e3;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 10px 10px 5px #888888;
margin-right: auto;
margin-left: auto;
}
header {
background-color: #000033;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
}
h1 {
background-image: url(../images/sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
line-height: 200%;
margin-bottom: 0;
}
nav {
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-left: 20px;
padding-bottom: 0;
padding: 5px;
font-weight: bold;
}
nav a {
text-decoration: none;
}
nav a:hover {
color: #ffffff;
}
nav a:link: {
color: #000033;
}
nav a:visited {
color: #344873;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
main {
background-color: #ffffff;
margin-left: 170px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 20px;
padding-right: 20px;
display: block;
}
h2 {
color: #3399cc;
font-family: Georgia, "Times New Roman", serif;
}
h3 {
color: #000033;
}
dt {
color: #000033;
font-weight: bold;
}
.resort {
color: #000033;
font-size: 1.2em;
}
#homehero {
background-image: url(../images/coast.jpg);
height: 300px;
background-size: 100% 100%;
margin-right: 0;
margin-left: 170px;
background-repeat: no-repeat;
}
#yurthero {
background-image: url(../images/yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 300px;
margin-left: 170px;
}
#trailhero {
background-image: url(../images/trail.jpg);
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
footer {
background-color: #ffffff;
margin-left: 170px;
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
}
header, nav, main, footer {
display: block;
}
It's because of nav a:link: {
Replace it with nav a:link {
Related
I'm only a year in to Web Design. I've been learning menus at Lynda.com and specifically have a problem creating a sub menu.
I've made the sub menu how I want it, however when I flick between the list items on my menu they change over too quickly.
See on the picture below:
http://s22.postimg.org/699f35hm9/macca_travel.png
If you look at the position of the cursor, it is still on the 'About' tab, but the 'Blog' hover has lit up and has been selected.
The two sections with sub menus are the 'Blog' tab and the 'Photos' tab. These two tabs don't cross over smoothly and I think it's because for whatever reason they're selecting too quickly.
I don't know why :)
Here is my CSS:
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
background: white;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: white;
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: white;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:#6593b5;
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background: black;
height: 2em;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding:0 2em;
line-height: 2em;
color: white;
font-family: telegraficoregular;
text-decoration: none;
}
li, ul {
position: relative;
margin: 0;
padding: 0;
}
ul.SubMenu {
float: none;
width: auto;
height: auto;
list-style: none;
background: black;
color: white;
position: absolute;
left: -9000em;
}
ul.SubMenu li{
float: none;
}
ul.SubMenu li a{
display:block;
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;
}
li:hover ul {
left: 0;
}
li:hover ul {
left: 0;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 80px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
a:hover {
color: orange;
height: 32px;
background: black;
}
ul.SubMenu li a:hover {
background: orange;
color: white;
}
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 160px;
background: black;
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 160px;
text-align: center;
}
Thanks Joe
Add the following to each section of your CSS:
ul.SubMenu {
margin-top: 2em;
}
nav ul li a {
float: left;
}
nav ul li {
display: block;
}
basically I wanted to try have the same rgba value in three different areas. I wanted my body, nav and footer all to have rgba(0,0,0,.8).
My body works but the nav and footer just show was solid black without the transparency...
I've tried changing the transparency slightly so they're different but that doesn't work either.
Are you only allowed to use it once?
Joe
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background:rgba(0,0,0,.9);
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: rgb(50,153,187);
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: #003366;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:rgb(233,233,233);
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background:rgba(0,0,0,.8);
width: auto;
height: 64px;
}
nav ul.TopMenu li {
float: left;
list-style: none;
width: 150px;
}
nav ul.TopMenu {
width: 600px;
margin: 0 auto;
}
nav ul.TopMenu li a {
display:block;
line-height: 64px;
padding:0 2em;
text-align: center;
font-family: telegraficoregular;
font-size: 1.2em;
text-decoration: none;
}
li {
position: relative;
}
nav ul.SubMenu{
float: none;
text-align: center;
border-bottom: 1px solid white;
position: absolute;
left: -9000em;
top: 64px;
height: auto;
max-height: 0;
-moz-transition: max-height 0.5s ease-in-out;
-webkit-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
overflow:hidden;
z-index:999;
}
nav ul.SubMenu li{
height: 32px;
font-family: telegraficoregular;
font-size: 1em;
padding: 0;
margin: 0;
border-bottom: 1px solid white;
}
nav ul.SubMenu li a{
display:block;
line-height: 32px;
padding: 0px;
margin: 0;
}
.TopMenu li:hover ul{
left: 0;
max-height: 20em;
}
ul.SubMenu li a{
background: rgba(0,0,0,.8);
border-bottom: 1px solid white;
}
ul.SubMenu li a:visited {
color: white;
}
ul.SubMenu li a:hover {
background: rgba(255,165,0,.8);
}
a:visited {
color: white;
}
a:hover {
color: orange;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 80px;
background: rgba(0,0,0,.7);
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 80px;
text-align: center;
}
So, it looks as though it's the overlap that is causing your problems (see comment above. I changed the background colours in the nav and footer and they show up just find.
It's the fact that you have two elements with 80% opacity overlapped, and the outcome looks black.
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
margin: 0;
padding: 0;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background:rgba(0,0,0,.9);
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: rgb(50,153,187);
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: #003366;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:rgb(233,233,233);
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background:rgba(255,0,0,.8);
width: auto;
height: 64px;
}
nav ul.TopMenu li {
float: left;
list-style: none;
width: 150px;
}
nav ul.TopMenu {
width: 600px;
margin: 0 auto;
}
nav ul.TopMenu li a {
display:block;
line-height: 64px;
padding:0 2em;
text-align: center;
font-family: telegraficoregular;
font-size: 1.2em;
text-decoration: none;
}
li {
position: relative;
}
nav ul.SubMenu{
float: none;
text-align: center;
border-bottom: 1px solid white;
position: absolute;
left: -9000em;
top: 64px;
height: auto;
max-height: 0;
-moz-transition: max-height 0.5s ease-in-out;
-webkit-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
overflow:hidden;
z-index:999;
}
nav ul.SubMenu li{
height: 32px;
font-family: telegraficoregular;
font-size: 1em;
padding: 0;
margin: 0;
border-bottom: 1px solid white;
}
nav ul.SubMenu li a{
display:block;
line-height: 32px;
padding: 0px;
margin: 0;
}
.TopMenu li:hover ul{
left: 0;
max-height: 20em;
}
ul.SubMenu li a{
background: rgba(0,0,0,.8);
border-bottom: 1px solid white;
}
ul.SubMenu li a:visited {
color: white;
}
ul.SubMenu li a:hover {
background: rgba(255,165,0,.8);
}
a:visited {
color: white;
}
a:hover {
color: orange;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 80px;
background: rgba(0,0,255,.5);
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 80px;
text-align: center;
}
<nav>
<ul>
<li>something</li>
<li>something else</li>
</ul>
</nav>
<footer class="Footer">
This is a footer
</footer>
I cant seem to figure out why the h1 tag is showing differently on mobile browsers.
The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.
Can anyone help please?
Thank you in advance.
I would advise against using position:relative; and negative top on all of your elements.
With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.
I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.
#font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
* {
margin-top: 0px;
margin-bottom: 0px;
}
html {
font-family: 'droid sans';
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
width: 940px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
}
h1 {
font-family: 'Constantia', helvetica;
position: absolute;
top: 20px;
}
header {
height: 140px;
position: relative;
margin-bottom: 40px;
}
nav {
width: 660px;
height: 30px;
background-color: #00788a;
position: absolute;
font-size: 1.2em;
bottom: 0;
right: 0;
}
nav li a {
color: #ffffff;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
padding-left: 0px;
}
nav ul li {
display: inline;
line-height: 30px;
vertical-align: middle;
color: #ffffff;
padding-left: 70px;
padding-right: 65px;
}
aside {
height: 600px;
width: 240px;
float: left;
background-color: #00788a;
color: #ffffff;
clear: both;
position: relative;
text-align: center;
margin-bottom: 30px;
}
article a {
color: #00788a;
}
.contain {
width: 940px;
}
footer {
height: 100px;
clear: both;
background-color: #00788a;
color: rgba(255,255,255,0.5);
position: relative;
font-size: 0.85em;
padding: 0 10px;
line-height: 1.5em;
margin-top: 40px;
}
footer li {
display: inline;
border-left: 2px solid rgba(255,255,255,0.5);
padding: 0 5px;
}
footer li:first-child {
border: none;
}
footer ul {
padding-left: 0;
text-align: center;
}
.foot_fade {
color: rgba(255,255,255,0.5);
}
.first_initial {
font-size: 110px;
color: #00788a;
font-weight: lighter;
}
.second_initial {
font-size: 101px;
color: #00788a;
font-weight: lighter;
position: relative;
top: -6px;
}
.rest_of_title {
font-size: 26px;
position: relative;
left: -73px;
top: 20px;
font-weight: lighter;
}
header a {
color: #000000;
}
.header_background {
float: right;
position: relative;
z-index: -1;
}
.topbar {
width: 940px;
height: 30px;
background-color: #00788a;
}
.call_now {
padding: 10px 50px 10px 50px;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.home_service {
padding: 10px 40px 10px 40px;
font-size: 1.45em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.service_list {
font-size: 1.25em;
line-height: 3em;
text-align: left;
padding-top: 35px;
padding-left: 20px;
text-shadow: 2px 2px 2px #2a2a2a;
}
.welcome {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
font-size: 0.9em;
line-height: 2em;
color: #2a2a2a;
position: relative;
/* top: -95px; */
text-align: justify;
}
.services {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
position: relative;
top: -95px;
}
.services a {
text-decoration: none;
position: absolute;
top: 151px;
left: 0;
width: 275px;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
padding: 10px 0 10px 10px;
}
.services div {
margin-bottom: 15px;
}
.services div:last-child {
margin-bottom: 0;
}
.savings_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire_pic {
position: absolute;
top: 0;
right: 0;
height: 190px;
width: 285px;
}
.protection_pic {
position: relative;
height: 190px;
width: 285px;
}
.insurance_pic {
position: absolute;
top: 205px;
right: 0;
height: 190px;
width: 285px;
}
.mortgage_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire {
width: 300px;
float: right;
margin: 0 0 10px 10px;
}
/*.shadow {
box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
margin: 3px 0;
}*/
.overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 54px;
color: #FFFFFF;
padding: 10px;
position: relative;
width: 265px;
}
.overlay a {
text-decoration: none;
color: #ffffff;
}
.overlay a:hover {
}
.left {
float: left;
}
.right {
float: right;
}
.regulation {
font-style: italic;
color: #9a9a9a;
font-size: 0.9em;
}
.smallprint {
width: 520px;
font-size: 0.9em;
text-align: center;
position: absolute;
right: 210px;
top: 30px;
}
.copyright {
width: 310px;
margin: 0 auto;
}
.scapa {
position: absolute;
bottom: 0;
right: 10px;
font-size: 0.9em;
}
<head>
<title>WCK&TMB</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
background-color: #FFC18F;
}
div#container {
width: 100%;
min-width: 1024px;
}
header {
height: 100px;
width: 100%;
background-color: #ff8400;
text-align: center;
}
header img {
clear: left;
float: left;
margin: 10px;
}
header a#purchase {
background: url("http://i.imgur.com/RJe8a1D.png") repeat-x;
width: 500px;
height: 25px;
margin: 30px;
padding: 5px;
border: 3px double #ccc;
text-align: center;
float: right;
font-family: Arial;
font-size: 20px;
text-decoration: none;
color: #ffffff;
}
section#main {
padding: 0px 0px 10px 0px;
text-align: center;
}
section#main div#head_announcements {
padding-top: 10px;
color: #000;
font-family: "Arial";
}
section#main div#head_announcements h2 {
font-size: 24px;
font-weight: lighter;
line-height: 26px;
}
section#main h2 a {
color: #FFFFFF;
text-decoration: none;
}
section#main h2 a:hover {
color: #000000;
}
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
}
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float:center;
}
section#main nav a.link:nth-of-type(1) {
float:center;
}
section#main nav a.link:hover {
color: #39F;
}
section#main nav a.link.active {
color: #39F;
}
section#main section#frames {
margin-top: 10px;
width: 100%;
}
section#main section#frames iframe {
border: 0px;
outline: 0px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
section#main section#frames iframe#frame1 {
width: 650px;
height: 450px;
background-color: black;
}
section#main section#frames iframe#frame2 {
width: 350px;
height: 450px;
}
footer {
padding: 10px 0px 10px 0px;
width: 100%;
text-align: center;
height: 110px;
}
</style>
</head>
URL: http://skyaccess.se/forum/misc.php?page=hdppvs
I can't seem to center the navigation bar text. Can someone please correct this?
Also, I'm trying to learn CSS so if anyone could show me a great site, I'd be very thankful. Considering paying $29/mo are some interaction website with points.
add float:left in your css:
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
float: left;
also add this css for create gaping between navigation: "padding-right: 40px;".
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float: center;
padding-right: 40px;
I am struggling mightily with the following CSS3 code:
*
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), color-stop(.7,#FFFFFF));
padding: 0px 6%;
}
#nav {
background: url(http://74.71.27.20/d499/content/images/nav_background.png);
}
ul#nav {
float: left;
}
ul#nav li {
display: inline;
width: 100%;
}
ul#nav li a {
display: inline;
float: left;
margin-right: 25px;
margin-left: 10px;
font-size: 16px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}
ul#nav li a:hover {
color: #fff;
}
ul#nav li.selected a {
color: #fff;
}
ul#nav li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url(http://74.71.27.20/d499/content/images/rss.png) left center no-repeat;
}
#container
{
float: left;
background: #FFFFFF;
overflow: hidden;
padding: 0 0 15px 10px;
}
#header
{
float: left;
width: 100%;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(http://74.71.27.20/d499/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(http://74.71.27.20/d499/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
float: left;
overflow: hidden;
padding: 0 0 15px 10px;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
footer {
float: left;
left: 0;
width: 100%;
background: #222;
}
footer div {
display: table;
margin: 0 auto;
padding: 44px 0;
width: 940px;
color: #777;
}
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
float: left;
margin: 22px 0 0 22px;
padding: 11px 22px;
background: url(http://74.71.27.20/d499/content/images/sidebar_section_background.png) repeat-x;
/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
ul#categories
{
siaply: inlinel
margin: 0 0 0 22px;
list-style: none;
}
#categories a:link, #categories a:visited
{
float: left;
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Begin: Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
I currently got my PC as a web host you can view the site with the CSS here:
http://74.71.27.20/d499
Any help would be appreciated.
My master page simply calls container then header and nav and categories and footer.
The best CSS advice I can give if you have div issues is to look into YUI it is JUST css, so don't think it is some crazy new technology but it can be a huge help.
Watch this introductory video about it: http://video.yahoo.com/watch/1373808/4732784
The above video is a little dated but gives a good idea and the web is full of the required resources.
Add a clear:both; as your first div is floated left.