- This topic is empty.
-
AuthorPosts
-
November 18, 2010 at 4:12 am #30730maximus1979Member
Hello folks!
This is my first post, so I’d like to thank everyone and especially Chris for putting all of this together. Great resource for me so far, thanks a bunch.
Now, on to my little problem…
In Chris’ video “Converting a Photoshop Mockup (part 1 of 3)” he uses a simple technique to get the header / banner area going. In his video, he crops a small pic of the stripe and repeats it on X across the top, creating an elastic stripe and then adds the actual “banner”.
I’ve followed the steps 1 by 1 to the letter and everything is fine EXCEPT, when I add my banner, it is actually about 20px LOWER than the original stripe…
I tried adding a ‘padding’ of 20px across the top but it actually lowers the “banner” further, instead of the stripe…
I’m still fairly new to all of this so I’m quite confused as to why this is happening… I’m using the EXACT same code, same pics, dimensions… I’ve also tried loading it up on different browsers and that does nothing.
HTML
"http://www.w3.org/TR/xhtml1-transitional.dtd">
Testing 1 2 3
CSS
• {
margin: 0;
padding: 0;
}
body {
font-size: 65%;
font-family: Verdana, sans-serif;
background: url(images/body-bg.jpg) repeat-x top;
}
div#page-wrap {
width: 580px;
margin: 0 auto;
}
ul#nav {
height: 236px; width: 800px;
margin: 0 auto;
background: url(images/header-bg.jpg) no-repeat;
list-style: none;
}
ul#nav li a {
display: block;
width: 130px;
float: left;
margin-top: 185px;
color: black;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: red;Any ideas??
Thanks a lot in advance for any help you guys will provide!
Max
November 18, 2010 at 4:22 am #74754TheDocMemberThe best way we can provide you with help is if you can provide a link to the problem.
If you can’t do that, then you can post the HTML and CSS in question. Just be sure to wrap the code in < pre > and < code > tags (minus the spaces) for easy readability and to make sure none of the code gets stripped out when you make your post!
November 18, 2010 at 4:24 am #74755maximus1979Membersorry i added the css AFTER my original post…
You can also check here for another example, of the same problem, when i try to recreate the same design with a different set of pics, etc.
Thanks
November 18, 2010 at 10:15 am #74765maximus1979MemberIs this enough info?
November 18, 2010 at 11:01 am #74769PoppollMemberReplace the first line in style.css
• {
with: *{November 18, 2010 at 11:07 am #74804maximus1979Memberok, changed the bullet to an asterix with no effect… :(
Edit: It actually worked when i view the URL, but on my local machine I still have the same problem… ?
Confused…
November 18, 2010 at 11:18 am #74805November 18, 2010 at 11:20 am #74807maximus1979MemberSee, I got that result the first time I opened the URL, now it’s back to this
You seem to have put the css directly into the html file, is that correct?
Cache cleared, no changes…
November 18, 2010 at 11:58 am #74661November 18, 2010 at 1:53 pm #74542maximus1979MemberThanks Poppoll, I appreciate the effort you’re making to help me. I understand that you put the css inside the HTML file, and modified some of the code.
There are a couple of things to consider though:
1- This is a work in progress, and the changes you made also affected other parts of the site (footer for example) and will affect other content as I progress on this website.
2- I’m learning as I go along, so although I very much appreciate your help, you “fixed” the problem and did not provide an explanation why and how this will affect future content. So next time I’m working on a site, I will likely run into the same problem.
I’m not on here looking for someone to do the work FOR me, I’m hoping someone can clarify WHY/HOW my project is not cohesive even though I basically followed along and did EXACTLY as Chris did, yet it works fine for Chris in the tutorial (downloaded the finished product and his code is a perfect match to mine)… ??
November 18, 2010 at 3:04 pm #74522PoppollMemberMaxi
The errors came from the code you added afterwards.
In the first css i did not hadp,li {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 0.8em;
}change to:
p,li a{
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 0.8em;
}In the html this is not valid:
change to
You have:
Change to
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.