-
1. Re: CSS background & border graphic confusion
Ben Pleysier May 3, 2013 9:50 PM (in response to onefiftymph)<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> html { background: #FAF1C6; height: 100%; } body { width: 800px; margin: auto; } .heading { background: url(http://mabelspralines.com/images/bannerv3.png); height: 90px; } .nav { background: url(http://mabelspralines.com/images/topbg.jpg) no-repeat; height: 65px; text-align: center; } .content-wrapper { background: url(http://mabelspralines.com/images/vertbg.jpg) repeat-y; overflow: hidden; position: relative; min-height: 300px; } .article { background: #FFF url(http://mabelspralines.com/images/subBGProd.png) no-repeat; width: 759px; left: 6px; padding: 15px; position: absolute; min-height: 250px; } .footer { background: url(http://mabelspralines.com/images/bottbg.jpg) no-repeat; height: 40px; padding: 15px; } </style> </head> <body> <div class="heading"></div> <div class="nav">Menu goes here</div> <div class="content-wrapper"> <div class="article"><h2>Article</h2></div> </div> <div class="footer">Footer</div> </body> </html> -
2. Re: CSS background & border graphic confusion
onefiftymph May 4, 2013 6:38 PM (in response to Ben Pleysier)Thanks Ben. This looks how it should've been done to start with. I'll keep this for a simple start to my next ground-up project.
Your answer requires me to completely rebuild the site, which is functioning ok except for a couple of tweaks I asked about. I messed with it some:
http://mabelspralines.com/_testtoss.html
http://mabelspralines.com/styles/global1.css
pulling your CSS from the .html into a new .css file and linking it to a new .html page, but right at the very beginning, stuff drops out - like the text below the bottom nav, which DW shows as being Class: TwoColFixLftHdr - but there is no "Text" category in that part of the style sheet.
So right away, I need to start sleuthing and experimenting. The problem is, why I wrote to start with, I don't know CSS and div construction well enough. I learn a little more each time when I get projects once or twice a year, but it doesn't come natural for me. I'm not left-brained at all so it's extremely frustrating trying to figure out what "." is missing or CSS characteristic that's throwing off the layout. I'm not a web designer who's compelled to be a CSS expert. Rebuilding with your answer would take me at least half/probably a full day to rebuild, tweak and troubleshoot all the CSS in the containers and panels and graphics on this site's pages.
But I appreciate your taking the time to try to help me.
-
3. Re: CSS background & border graphic confusion
Ben Pleysier May 4, 2013 9:21 PM (in response to onefiftymph)I try to keep things simple.
Take the footer for instance. At the moment you have
<div class="footer">
<ul class="list" id="ftnav">
<li class="list"><a href="index.html">home</a> |</li>
<li class="list"><a href="about.html">about</a> |</li>
<li class="list"><a href="products.html">products</a> |</li>
<li class="list"><a href="events.html">events</a> |</li>
<li class="list"><a href="testimonials.html">testimonials</a> |</li>
<li class="list"><a href="contact.html">contact </a></li>
</ul>
<p>© 2009 Mabel's Gourmet Pralines. All rights reserved. Site by SOF Designs</p>
</div>
The above should look like
<div class="footer">
<ul>
<li><a href="index.html">home</a> |</li>
<li><a href="about.html">about</a> |</li>
<li><a href="products.html">products</a> |</li>
<li><a href="events.html">events</a> |</li>
<li><a href="testimonials.html">testimonials</a> |</li>
<l><a href="contact.html">contact </a></li>
</ul>
<p>© 2009 Mabel's Gourmet Pralines. All rights reserved. Site by SOF Designs</p>
</div>
This reduces the number of keystrokes during development and makes it a lot easier to read. Also a CLASS does everything that an ID does with the exception of uniqueness. Hence I always use a CLASS except where an ID is required for exact identification. The latter is often used in JS and DOM manipulation.
The style rules for the proposed footer looks like
.footer {
background: url(http://mabelspralines.com/images/bottbg.jpg) no-repeat;
height: 40px;
padding: 15px;
}
.footer ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 0px;
list-style-type: none;
margin-left: 238px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.footer li {
display: inline;
}
When using images as in
<img src="http://mabelspralines.com/images/home1.jpg" alt="Home" width="82" height="25" border="0" id="home_bt" />
The red coloured part should be included in the CSS, again reducing keystrokes and making it easier to change the values. But why use (different) images for the menu buttons. If you cannot find a CSS alternative you can use the same image for the menu buttons and use text for the label. This has an added advantage in that your anchor elements are not empty which is frowned upon. Instead of using mouse events, use CSS to replace the image as in
a
a:hover
a:focus
At this stage I will not give you examples for a better functioning menu, I shall leave it up to you to find out. If you run into trouble, please come back here.
Have a look at what Nancy does with CSS menu's http://alt-web.com/DEMOS/demos.shtml
-
4. Re: CSS background & border graphic confusion
onefiftymph May 4, 2013 11:57 PM (in response to Ben Pleysier)thanks Ben. i took out the extra CSS I'd tried and put in your latest css but the copyright type at the bottom is still unformatted and out of position. I even typed your code letter by letter to try to understand it the first time, but that didn't help so I copy/pasted it. Obviously I'm missing something...
http://mabelspralines.com/_testtoss.html
http://mabelspralines.com/styles/global1.css
I also tried experimenting with Nancy's Solid-colored CSS List Menu, like you suggested, trying to get it to look like the small purple-on-yellow buttons the previous designer has on the site. After half an hour, it was all i could do just to get the font to Helvetica and take her default background color out. Nothing i do changes the font size or the container size to make the buttons smaller. This is typical of my experience with CSS - countless hours of torture I'm forced to deal with since its arrival. I actually enjoyed building sites back before CSS when I could be a designer rather than a coder. But I understand how helpful it is for people who use it day in/out and know it intimately <sigh>
thanks for helping me!
Larry
-
5. Re: CSS background & border graphic confusion
Nancy O. May 5, 2013 10:05 AM (in response to onefiftymph) -
6. Re: CSS background & border graphic confusion
onefiftymph May 5, 2013 10:50 AM (in response to Nancy O.)Wow great! Thanks for doing that Nancy - you make it look embarassingly easy as usual.
What's all this do?:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHR.... etc etc
Hope you're not affected by the fires over there.
-
7. Re: CSS background & border graphic confusion
Nancy O. May 5, 2013 11:01 AM (in response to onefiftymph)We had a lot of smoke and ash from the recent Camarillo Springs fires. But thankfully that's under control now. Today, it's chilly and damp ~ feels like it might rain soon.
Nancy O.
-
8. Re: CSS background & border graphic confusion
Nancy O. May 5, 2013 11:05 AM (in response to onefiftymph)The CSS background-gradient code contains SVG images for newer IE browsers and filters for older ones.
Nancy O.
-
9. Re: CSS background & border graphic confusion
onefiftymph May 5, 2013 11:12 AM (in response to Nancy O.)The weather change is sure a lucky break.
So, if I can mix together your tags http://mabelspralines.com/_test2.html with Ben's graphics fix http://mabelspralines.com/_testtoss.html, I should be close to an up-to-date base template for this site.
( body, .nav vs. nav, .footer vs. footer) Except for body, guess I can have both, its just a personal choice?
-
10. Re: CSS background & border graphic confusion
Nancy O. May 5, 2013 11:14 AM (in response to onefiftymph)If you use HTML5 doc type, you don't need classes for HTML5 tags.
body
header
footer
nav
section
article
aside
If you use HTML4 or XHTML doc types, you need to use div .classes or #IDs.
Nancy O.
-
11. Re: CSS background & border graphic confusion
onefiftymph May 5, 2013 6:03 PM (in response to Nancy O.)Thanks! Soon as I put this logo image line
<a href="index.html"><img src="images/logo.png" width="152" height="90" border="0" alt="Mabel's Pralines"/></a>
in the header, everything below shifts down an entire inch. Thats crazy, I don't get it...
-
12. Re: CSS background & border graphic confusion
Nancy O. May 5, 2013 6:20 PM (in response to onefiftymph)Use your graphics editor & incorporate that logo into your banner image which is in the <header> background. Problem solved.
Nancy O.
-
13. Re: CSS background & border graphic confusion
onefiftymph May 6, 2013 1:04 AM (in response to Nancy O.)k thanks!
-
14. Re: CSS background & border graphic confusion
osgood_ May 6, 2013 2:57 AM (in response to onefiftymph)onefiftymph wrote:
Thanks! Soon as I put this logo image line
<a href="index.html"><img src="images/logo.png" width="152" height="90" border="0" alt="Mabel's Pralines"/></a>
in the header, everything below shifts down an entire inch. Thats crazy, I don't get it...
That's because you have block level elements - h1 h2 and address off screen. I guess for search engine purposes? If you add display: none; (as below to the css) then you won't get that gap. Search engines will still read it though.
/**Move header text off screen**/
header h1, header h2, header address {
margin: 0;
padding: 0;
text-indent: -99999em;
display: none;
}
-
15. Re: CSS background & border graphic confusion
onefiftymph May 6, 2013 11:30 PM (in response to osgood_)thanks osgood. tried adding the display: none; tag but it didn't work for me. so I took out the h1, h2, address text Nancy put in there - http://mabelspralines.com/images/_headertext.png - didn't realize it was even there, shifting everything down. Getting rid of it solved the problem, not putting the logo into the banner image - but that was good to do anyway. I know it would be good for SEO to have that h1-h2 hidden up there, and I'm guessing it can done without messing up the layout. But I'm trying to keep it simple so I can understand things. The CSS buttons are brilliant though.
I'm having no luck mixing my most current attempt at a base template http://mabelspralines.com/_testtoss.html , http://mabelspralines.com/styles/global1.css with Ben's effort to answer my original questions - http://mabelspralines.com/_fromBen.html. The style sheet is a mix of Ben & Nancy's with a couple of things i tried.
What would the structure of the gold-bordered content frame be? A bunch of nested div's? I can't get the purple gradient back where it belongs. It kept shifting left, over top of the gold frame. Now I don't know where it went. The yellow at bottom -how to keep it and the footer text within the gold border? How to center the copyright text?
thanks anyone, for helping. im just trying to learn - i dont have to fix this for this client


