- This topic is empty.
-
AuthorPosts
-
April 24, 2011 at 7:54 pm #49365
jesb
Participanthtml
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
website
About Me
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
My Services
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
My Tools
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Copyright © 2011 Productive Web Soutions | Privacy Policy
Home /
About Jesmond Borg /
Services /
Portfolio /
Blog /
Contact Me
css
/* CSS Reset */
* { margin: 0 auto; padding: 0;
outline: 0;
border:none;
list-style-type: none;
}
body {
background:url(images/bg.jpg) repeat-x;
font-family: Arial, Helvetica, sans-serif;
}
#container {
width: 960px;
margin: 0 auto;
}
#header {
position:relative;
width: 100%;
bottom: 6px;
}
#header h1 {
float:left;
width:365px;
height:115px;
margin-top: 35px;
}
#header h1 a {
height: 100%;
width: 100%;
}
#header ul li h6 {
font-size: 11px;
}
#nav {
clear: both;
height: 30px;
width: 100%;
}
#nav ul {
position: absolute;
right: 180px;
top: 20px;
}
#nav ul li {
display: inline;
float: left;
}
#nav ul li a {
color: white;
display: inline;
text-decoration: none;
font-size: 16px;
font-weight: normal;
font-family: calibri, georgia, garamond, arial;
text-transform: uppercase;
text-align: right;
float: left;
padding: 10px;
}
#nav li a span {
line-height: 28px;
height: 100%;
}
#nav li a:hover, #nav li {
color: #ffc000;
cursor: pointer;
text-decoration: none;
}
#featured {
padding: 10px;
height: 340px;
width: 940px;
border:1px dashed;
color: #ffe5c4;
background-color: #562e00;
}
#featured ul {
}
#featured ul li {
float: left;
display:block;
width: 630px;
}
#featured ul li a {
display: block;
height: 350px;
}
#featured ul li.ss1 img a {
background: url(/images/featured.jpg)
}
form#quote {
background: #ce9426;
padding: 20px;
float: right;
width: 260px;
height: 300px;
}
form#quote h2 {
font-family: Trebuchet, Arial, Helvetica, sans-serif;
color: black;
font-size: 12px;
}
form#quote input, form#quote textarea {
background: url(images/noise.jpg);
color: white;
font: 12px Arial, Helvetica, sans-serif;
margin: 1px 10px 8px 2px;
padding: 10px;
width: 240px;
line-height:3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 0 -6px #c4c4c4;
-moz-box-shadow:inset 0 0 6px #7a7a7a;
-webkit-box-shadow:inset 0 0 6px #7a7a7a;
box-shadow:inset 0 0 6px #7a7a7a;
resize: none;
}
form#quote textarea {
}
form#quote input.btn {
width: auto;
border: none;
padding: 1px;
margin-top: 0px;
}
#content {
font-size: 12px;
list-style: none;
}
#content .col {
float: right;
width: 258px;
background: url(./images/col-bg.jpg) repeat-x;
height: 193px;
border: 1px solid #CCC;
padding: 10px;
margin-right: 830px;
margin-top: -225px;
}
#content .col h2 {
font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #b47825;
text-decoration: none;
}
#content .col h2 span {
color: #2f2f2f;
}
#content .col img {
border: none;
padding: 2px;
float: right;
}
#content .col p {
line-height: 17px;
}
#content .col.noMargin {
margin-right: 510px;
}
#content .col.fr {
margin-right: 190px;
margin-top: -225px;
}
#twitter {
float:right;
position: absolute;
}
#facebook {
float:right;
position: relative;
margin-right: 184px;
margin-top: -597px;
}
textarea {
width: 200px;
max-width: 240px;
min-width: 240px;
height: 200px;
min-height: 45px;
max-height: 45px;
}
#footer {
clear: both;
background: url(images/footer.jpg);
height: 100px;
width: 100%;
margin-top: 40px;
}
#footerContainer {
margin: 0px auto 0;
width: 960px;
font-size: 12px;
color: #ddd;
padding-top: 20px;
position: relative;
}
#footerContainer p {
margin: 8px 0 8px;
}
#footerContainer a {
color: #ddd;
text-decoration: none;
}
#footerContainer a:hover {
text-decoration: underline;
}
form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #ffebd5;
border:1px solid #ddd;
color: black;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
form#newsletter input.btn {
width: auto;
border: none;
padding: 0;
margin-left: 3px;
}
April 25, 2011 at 2:06 pm #49314jesb
ParticipantAnybody have any idea?
April 25, 2011 at 2:40 pm #49315yashar
ParticipantHello,
footer is the last div and box on the bottom of the website, also the div id footer should be outside and container should be inside the div id footer and everything should be inside the container,as well as take out clear both from div footer, and check your html page and css page for any issues or mistakes.April 25, 2011 at 3:10 pm #49318jesb
ParticipantTaking out clear both; from footer eliminates my footer all together creating more problems pushing my footer content into the main background. And everything is in my main container div which is the main container of the css. Shouldn’t all my other divs stay within my container and not move when you zoom or zoom out the window?
April 25, 2011 at 3:23 pm #49322chrisburton
ParticipantThe last I checked, I think I saw the container div closed after the header. Could be wrong.
April 25, 2011 at 4:35 pm #49323jesb
ParticipantWell I managed to fix my nav and my columns from moving when you zoom in and out by changing my footer container to relative instead of absolute. But now my footer is keeping the same pixels of the container. I want my footer to extend across the screen just as my main background does. I tried the repeat-x like my background image but that’s not working.
Any ideas?
April 25, 2011 at 5:06 pm #49324jesb
ParticipantNevermind, figured it all out. I just have to get my head around some of the basic principles of html and css and I’ll avoid these issues.
Basically other div elements were not closed within my container which was being ignored and not staying in my container.
Consider this solved.
Thanks again guys. :)
April 25, 2011 at 5:21 pm #49326chrisburton
ParticipantRemember whenever you have issues that you can’t figure out, validating is a great resource for troubleshooting itself.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.