- This topic is empty.
-
AuthorPosts
-
April 22, 2011 at 4:38 am #32444jesbParticipant
I’m really new with webdesign so it’s expected that I’m lost. I am nearing close to the end of my design, this of course doesn’t count debugging or anything like that. But I am now trying to put in my footer, but nothing is coming in. The only thing coming in is my text from the footer, and even that is not in the right place.
I made sure to do the clear: both; command in my footer. But it’s still not showing up. I tried adding the float:bottom option but that does nothing either.
The file name and file format is correct as well for my footer, checked it many times over.
Here is my html
div id="footer">
Copyright © 2010 company name | Privacy Policy
Home /
About /
Our Services /
Portfolio /
Blog /
Contact Us
p>
And than here is some of the css for this specific div.
#footer {
clear: both;
background: url(../images/footer.jpg);
height: 100px;
width: 100%;
margin-top: 40px;
float:bottom;
}
#footerContainer {
margin: 0px auto 0;
width: 960px;
font-size: 12px;
color: #ddd;
padding-top: 20px;
position: relative;
float:bottom;
}
#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: #fff;
border:1px solid #ddd;
color: #666;
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;
}
Any ideas on what the issue could be?
April 22, 2011 at 7:18 am #50080chrisburtonParticipantOne issue is your code isn’t semantic and pieces of it are certainly not correct. Float:bottom? Do you have a link?
April 22, 2011 at 8:01 am #50090jesbParticipantYeah I realize it isn’t, I intend to go through it all to see what is needed and what isn’t. But like I said I’m pretty new, and just pretty much trying a few things to see if I could get something to do something.
I don’t have any link, no.
April 22, 2011 at 8:13 am #50091chrisburtonParticipantI would take a few days to do a crash course with CSS and HTML. Video tutorials might also help so here is one…
https://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/
April 22, 2011 at 9:50 am #50092jesbParticipantI was actually following a tutorial from net tuts to build this site. And came this far, all I need is the footer, add in links and my site will be pretty much done. I need to know what the issue is with this code and why I cant get the footer in.
April 22, 2011 at 10:11 am #50046chrisburtonParticipantIf you got this from nettuts, why would you have improper CSS? Especially like a bottom float? Also, not sure if you forgot an opening tag when you copied or not but make sure to have that at the beginning of your div.
div id="footer">
HTML
You need to have an unordered list and list items before your anchor tags.
e.g.CSS
Get rid of the bottom float as it does not exist.float:bottom;
Add these prefixes to border-radius
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
I would really need a link to check for any visual errors beyond this.
April 22, 2011 at 10:42 am #50015jesbParticipantThe only reason I messed around with the code, when I did exactly what the tut said to do the footer still wasn’t there. I cant help but think that this has something to do with some other code that messed something else up.
April 22, 2011 at 4:38 pm #49982EclipseMemberFirst of all clean up the code:
HTML:
div id="footer"> change to
Home /
About /
Our Services /
Portfolio /
Blog /
Contact Us
p>
change to:
- Home /
- About /
- Our Services /
- Portfolio /
- Blog /
- Contact Us
Change to:
CSS:
#footer
Get rid of float:bottom;
#footerContainer
Get rid of float:bottom;
Fix the margin to: margin: 0 auto;
Now see if it works better!
April 22, 2011 at 7:14 pm #49873jesbParticipantNothing at all changed from making those changes, still looks the same.
April 23, 2011 at 12:50 am #49818jesbParticipantI’m in the process of going through all my code, just to clean up what I don’t need. Once I’m done doing that I’ll post all my html and css on here. Hopefully I can figure out the problem in the mean time and the issue resolves itself after some cleaning.
April 23, 2011 at 3:46 am #49821jesbParticipantWell I cant seem to figure out what the problem is. Here is all my code. Hope you guys can figure this one out.
HTML code
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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.
Now here is the 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;
background-image: -webkit gradient(
linear,
left top, left bottom,
from(#b37725), to (#e4ac27)
);
padding: 20px;
float: right;
width: 260px;
height: 300px;
}
form#quote h2 {
font: normal; "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
form#quote label {
color: #ffffff;
font-size: 12px;
font-family: arial, verdana, georgia;
float: left;
width: 100%;
padding:5px;
}
form#quote input, form#quote textarea {
background-color: #303030;
color: white;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 7px 8px;
padding: 10px;
width: 240px;
-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 {
height: 50px;
}
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:1px opacity: 0.5; dashed; #d8d8d8;
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;
margin: -508 60 50 1025;
}
#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: 140px;
}
#footerContainer {
margin: 0 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: #fff;
border:1px solid #ddd;
color: #666;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
April 23, 2011 at 3:41 pm #49707jesbParticipantO.k, so I managed to finally see the footer take place. Still having a problem with getting the image to appear though. I’ve tested it by using color instead and that comes up fine and I can clearly see a footer now, so that’s good. But still no image will appear that I saved.
I’m guessing this has something to do with this error.
Parse Error (images/footer.jpg);
I don’t know what the issue is with this. The error is kind of vague for a noob like me.
I’m going through the validator and cleaning it up like you suggest. But there some things I’m a little confused about that brings up errors.
I’m told that ul does not belong possibly because I have inline elements with block elements. But if a UL is a block element, and anchor tag is a inline element, than how do we make lists into links? I guess I’m confused on why I cant have lists with an a tag, putting a tags with lists seem to be a common thing on the web, so what exactly do they mean by the error.
Error: element ul not allowed here; possible cause is an inline element containing a block-level element
Also I get a lot of errors for webkit radius, shadow box, ect. Are these newer properties that come out as errors and should they be ignored?
You mentioned eliminating margins, but it’s those margins I used that allowed me to put my layout together where I want certain things. I tried many different properties and this seemed to of what worked. Taking out all these will surely mess it all up. But if there is an easier way of doing it perhaps I should.
Thanks to those who have helped.
April 23, 2011 at 6:54 pm #49605jesbParticipantThanks so much for all your help. :) Everything is working great, and fully validated other than 8 errors coming from css due to some stuff like webkit radius and box shadow that I assume is just not being recognized?
April 23, 2011 at 9:48 pm #49587jesbParticipantYeah that’s fine, as long as it doesn’t break up the look of my page in IE I don’t mind.
April 24, 2011 at 3:50 pm #49458jesbParticipantWell so much from being free and clear. It seems my navigation and 3 columns move as you minimize the page via the ctrl and -. It’s doesn’t stay within my container. What do you think would cause that to happen with the code that I provided?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.