SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two minor things need fixing please help

    hi guys

    I am proud to be placing my first ever css site up here. It is very simple, yet I have learnt a lot. Still ages to go but I'm getting there.

    This site

    http://www.mylifeisagarden.com/BnB/index.html

    Has two isses I want to fix. The menu (header) and the main content div move seperate to each other.

    I know that some of the mark-up is a bit funny but I'm doing my best.

    I think that content div needs to be inlcuded with those divs above it. Not sure.

    Secondly, the white background for div content does not extend to the bottom. I've tried setting height to 100%, or 1000px but the background colour goes when I do that.

    Thanks guys!
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    edit - I did have a container called header wrapper that I took out.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As for the space b etween the two items, you can just give #content either a top margin (that will move the white background along with the content down further) or you can increase the top padding you have set. Also you need to apply the clearfix to #page.

    As for teh 100% height. Percentage heights only apply to the parent. If the parent doesn't have a set height then what can it base the height off of .

    Set html,body{height:100%} Google some 100% height center demos. I have to go now.

    Also on #header, why do you center it via a huge left padding? Just set a width to it and margin:0 auto; it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan

    thanks for your help I'll take a look at your suggestions and post back.

    edit I've looked at what you suggest and I am still a little confused. I't not really clear what you are saying.

    My first problem is that when you view the site in a browser, the menu will not centre along with the div called #page (which you say needs a clear float, do you mean this <div style="clear: both;">&nbsp;</div>?)

    as for the height , I am not sure who the parent is in this statement

    """As for teh 100% height. Percentage heights only apply to the parent. If the parent doesn't have a set height then what can it base the height off of ."""

    Is #page the parent? Is body the parent? Must be something basic I am missing here.

    Cheers!

    I did goggle the stuff you requested.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sweet I get this part of it

    http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

    Thanks that makes sense.

    Now for the other issue. I think this will fix it.

    "Also on #header, why do you center it via a huge left padding? Just set a width to it and margin:0 auto; it. "

    Can someone show me an example of what the code will look like? I have a bg image that repeats. therefore I want to keep that but centre the logo and menu. do I need to wrap logo and menu in a container, and center that
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Mostly I think you're just over-thinking your layout -- particularly in regards to the number of div, and a few of your classes could use a trim too. For what you have there's little reason to have more than... eh, I'd say around THREE div total on the page... and one of those would be a 'image sandbag' for the header. The empty H1 is also problematic (since it defeats the point of HAVING a h1)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="keywords"
    	content="asphalt,potholes,canberra,road-work,car parks,driveways,speed bumps,trip hazzards"
    />
    
    <meta
    	name="description"
    	content="BnB Asphalt is a local Canberra business providing a range of asphalt solutions" 
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	BnB Asphalt Canberra
    </title>
    
    </head><body>
    
    <div id="headerSandbag"></div>
    
    <div id="pageWrapper">
    
    	<h1>
    		B+B Asphalt
    		<small>
    			<span> - </span>
    			Brown and Barret
    		</small>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="#"c lass="current">Home</a></li>
    		<li><a href="services.html">Services</a></li>
    		<li><a href="gallery.html">Gallery</a></li>
    		<li><a href="contact.html">Contact</a></li>
    	</ul>
    	
    	<div id="content">
    		<h2>Canberra's local asphalt experts</h2>	
    		<p>
    			We're your local asphalt experts, with over thirty years experience. Based in Canberra, our experience is your guarantee.
    		</p><p>
    			We take the smallest jobs right through to much larger jobs, including government contracts. Give us a call and we can provide you with a free quote (please genuine enquirers only).
    		</p><p>
    			Why not take a look at our gallery and see what we can do foy you. Or call us to discuss how we can help you.
    		</p>
    
    		<ul>
    			<li>Quality assured</li>
    			<li>Excellent rates</li>
    			<li>Professional attitude</li>
    			<li>Base preparation </li>
    			<li>Solutions based</li>
    			<li>Repairs, small drives ways, anything at all give us a call!</li>
    		</ul>
    		
    	<!-- #content --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Would be a good start towards simplifying it. Gimme a few minutes to slap together the CSS I'd use with that.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, I went a little overboard and made it a 100% min-height layout with a sticky footer 'inverse' of your header. Redid all the images to use less bandwidth and be more 'optimal' to the type of data... so it grew back a few div. (two to be precise, for the footer).

    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples, the directory:
    http://www.cutcodedown.com/for_others/unconformed/

    ... is wide open for access to the gooey bits and pieces. Valid XHTML 1.0 strict, would be valid CSS 2.1 if not for the use of the zoom property to fix legacy IE (with all the proprietary CSS3 extensions in use these days, who cares if zoom is 'invalid'), tested working in IE all the way back to 5.5, as well as the latest flavors each of Safari, Chrome, Opera and Firefox. (also tested FF 3.5, but that's because it's the only version where the web developer toolbar isn't neutered).

    Even with the addition of the footer the code didn't grow any thanks to removing all the unnecessary div and a few pointless classes, it's less CSS even with the addition of the 100% min-height layout, and I took it from 25k of images to 8k. The new images aren't a perfect match, just meant to show you how to go about it -- particularly the logo which got pre-composited down to no longer need transparency -- alpha transparent .png are universally rubbish, and they don't work all that great with image-replacement methods like the one I put in there.

    View the page with images off and with CSS off, to see why I made the decisions I did in the CSS and the markup.

    I also opened it up semi-fluid, though legacy IE (6 and lower) will get a fixed width, OH WELL. -- the max-width is pretty close to the min-width on small font/96dpi machines, but for large font/120dpi users it opens it up a bit more -- likewise the content text was swapped to %/em instead of px so it's not useless on the accessibility front. "font-size: 14px;" on BODY is basically completely defeating the entire point of using %/em elsewhere on the page -- since EVERYTHING else inherits from that. PX for fonts should be reserved for the handful of spots where you 'have to' -- like in a sticky footer (less important content anyways) where the height has to be fixed, or on menu buttons to control how they fit... for the content area? BAD design choice all-around.

    Hope this helps, any questions fire away.

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy wow

    Ok confession time - I kind of found some css and thought I could use the template to build a site in the hope it would help me learn. I quickly realised this was silly when I started to need to remove a nunch of crap.

    I get the %/em thing - I should have looked. First question (i intend on doing your awesome work justice by fully understanding everything you have done here).

    Why headerSandbag? IS there a reason it's called sandbag?

    What does a sticky footer mean? "with a sticky footer 'inverse' of your header"

    I assume I can remove the lines at the bottom easily (though I kind of like it I might keep it

    When I created the images for tiles, I saved in ps with 'saved for web' setting. Should have I further reduced these setting rather than just use the default (yes).

    Thanks for the css notes.

    I'm at work but will take a much closer look. Oh how I love this site (sitepoint)
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unconformed View Post
    Ok confession time - I kind of found some css and thought I could use the template to build a site in the hope it would help me learn. I quickly realised this was silly when I started to need to remove a nunch of crap.
    Happens to all of us at the start -- it's very easy to get ahead of yourself with 'copypasta' when often you have to bang the breaks, and take the time to understand things one at a time from the top down.

    Quote Originally Posted by unconformed View Post
    Why headerSandbag? IS there a reason it's called sandbag?
    "sandBag" is the generic term for an empty tag used for presentational purposes -- typically a DIV or SPAN since they have no semantic meaning; or more specifically do not semantically change the meaning of their content. In the CSS I use a 'negative bottom margin' equal to it's height, to 'ride up' the pageWrapper over it... this gives you the horizontal stripe across the top... inside pageWrapper this is erased by the full height white background, which is why I repeat it again on the h1. The H1 also uses a 'negative margin' to make the menu ride up over it. This is often easier than adding extra wrapping DIV to the markup and dealing with floats.

    Quote Originally Posted by unconformed View Post
    What does a sticky footer mean? "with a sticky footer 'inverse' of your header"
    Sticky footers come in two types -- fixed and min-height. This is a min-height one, it means if the screen is taller than the content, the footer stays at the bottom instead of riding up. a "fixed" sticky footer would stay on the screen even when the content is too tall. I dislike that type because it can often make users not realize the content continues past the footer. The "inverse of your header" just means I used the same background image, I just flipped it upside-down.

    header:
    http://www.cutcodedown.com/for_other...Background.png

    footer is 'inversed' -- flipped vertically:
    http://www.cutcodedown.com/for_other...Background.png

    It often helps to tie layouts together by doing things like that.

    Quote Originally Posted by unconformed View Post
    I assume I can remove the lines at the bottom easily (though I kind of like it I might keep it
    Pull #footerWrapper and everything inside it, likewise pull all references to #footer and #footerWrapper from the CSS... should do the trick.

    Quote Originally Posted by unconformed View Post
    When I created the images for tiles, I saved in ps with 'saved for web' setting. Should have I further reduced these setting rather than just use the default (yes).
    As I've said probably a dozen times on these forums, Adobe wouldn't know an optimized image file from the hole in it's DVD... I generally use OptiPNG or the save-time optimizer in Paint Shop Pro for my PNG's, and php's GD module for JPEGS as they seem to do the best.

    But the tool used to save the file is just a fraction of the equation -- it also helps to understand what image type works best for each type of data.

    Photographs for example are best in JPEG -- the detail of the image hides the 'artifacting' caused by JPEG's being "lossy" -- lossy means that every time you save you 'lose' a bit of data in exchange for compression. The simpler the image and the larger the areas of the same color, the more noticeable JPEG 'artifacts' can get -- likewise higher compression means more artifcacts -- which is why JPEG is poorly suited to line-art and simple graphics; like your background pink stripes, your background gradient, etc.

    PNG's are better for line-art, and massively bloated for photographs; and they're a bit more complex because they come in five major types --

    * 24 bit without transparency -- fat, bloated, slow, but NO LOSS. These are best used for "master" images that you work on and edit before saving to another format (like JPEG for photos)

    * 24 bit with 8 bit alpha channel (32 bit) -- everything wrong with 24 bit, featuring 33% more bloat. Your die-hard artsy fartsy types SWEAR by them, web developers who have the slightest clue what they are doing have been cursing them since they were introduced! They are RARELY necessary for the effects they are used for, and generally result in files significantly larger than need be. Legacy IE needs javascript assistance and/or special use of the proprietary 'filter' property to use them... so I just don't bother. IF I do need those effects, I do what's called "precompositing" to put them together -- I make the transparency I want, show it over the background I'm using, then screencap the final version and crop it to fit.

    Which is what I did with your logo:
    http://www.cutcodedown.com/for_other...ges/h1Logo.png

    Saving it as:

    * 8 bit palettized PNG - forces each 'pixel' to be 1 byte in size. No transparency, but is automatically a quarter the size of it's 24/32 bit counterparts. Because each pixel is stored as 8 bytes, you can only have 256 distinct colors in your image. For line-art or monochromatic images this is rarely an issue since even 32 bit images are typically 8 bits each of red, green and blue... if as color each piece of the spectrum is only 8 bits wide, the fraction used for a monochrome image easily fits into 8 bits or less. The 'pink on white' background is monochromatic, so PNG's 8 bit palette easily gets the job done... in fact, ALL of the images I redid for it are saved in this format.

    But there's also:

    * 8 bit palettized PNG with palette transparency - a single color is chosen to be transparent... 100% transparent... you either have see-through, or you don't. A lot of the PSD jockeys hate this format because anti-aliasing is a bit trickier... but there's a method called "close enough anti-aliasing" where you pre-composite over a solid color that's roughly equal to the 'nearest sum' of background color (100% gaussian blur often works good for this), then use that background color (or floodfill with a unused color like magenta) as the 100% transparent part. The anti-aliasing pixels around the edge will usually blend into the background 'close enough'.

    An example of 'close enough AA' can be seen on my ewiusb site, where the buttons and bottom of the EWI:
    http://www.ewiusb.com/theme/images/h1TopButtons.png
    http://www.ewiusb.com/theme/images/m...Background.png

    Have the handful of darker pixels around the edges, but on the page you don't notice them. Sneaky trick, and it works 90%+ of the time while giving you a smaller overall image.

    The final 'major' type is

    * 4 bit palettized PNG - this too can have palette transparency, or you can use all 16 colors. 4 bits == 0..15, hence the 16 colors you can use with it. Best reserved for line-art, this results in a very small file in most cases...

    Then there's GIF. GIF can do 4 or 8 bit, with palettized transparency just like PNG... No option for alpha, but it can also do animations... GIF is a very old format that doesn't compress things very well unless the total "raw" byte count is less than 32k... so for example 256x128 in 256 color (8 bit) or 256x256 in 16 color (4 bit). At those sizes or smaller GIF often gives you a smaller file than PNG -- BUT, at sizes larger than that PNG typically wins. This makes sense since when GIF was invented most computers couldn't handle more than 64k as a single variable. (and on many systems significantly less than that).

    Worst of all -- automated tools and 'trusting' your paint program to handle it itself (much like when it comes to HTML and CSS with "WYSIWYGS" or even many normal editors) just doesn't work well. You have to take the above as a loose guide, try a few different programs and different formats, until you find one that works 'best' for each image... or at least 'better' than the default....

    ... and again, Adobe's "save for web" has been, in my experience at least, totally useless rubbish in that regard -- but to keep it in perspective I say the same thing about Photoshop and most other Adobe tools so far as web design is concerned.... To paraphrase a dearly departed friend: "The only thing you can learn from Adobe is how NOT to build a website!"

  10. #10
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok please excuse me while I process all of this.

    Firstly, I am aware of some rules surrounding file extensions. I know .jpg is best for photes, gifs are best for images with no gradient etc. However the only was I knew to place a transparent image over a background was with the transparent .png. Apart form that, there is no way I would consider using a .png (until now, just had not really considered it).

    So I am getting that it’s not in fact best practice, leads to bloating (and therefore poor accessibility ) and is crappy.

    So I should create the image and place it over the desired background, saving it as a 8 bit palettized PNG.

    It may be my work, but your link

    http://www.cutcodedown.com/for_other...ges/h1Logo.png

    Shows a grey box. Is it my firewall at work (pun) here or is that what is supposed to display.

    Also, I am getting that I should look at other options to optimise images. I will have a play, but to be honest I like PSD and I’m used to it. I don’t want to start using GIMP!. It can be easy to save files in there if I am messing with things, however if it’s not doing the job correctly I need to take another look at it.

    “Pull #footerWrapper and everything inside it, likewise pull all references to #footer and #footerWrapper from the CSS... should do the trick.”

    Here you mean, get rid of it from the documents structure right?

    So I can pretty much copy this code into notepad++ and get my site working now? I will need to use them images.

    I’m really happy and I understand so much more – but I like wordpress and I’ve built a couple sites, I am keen to be finished with this site , go onto my wordpress site, then come back and just build a site from scratch (pure html and css) , then use bootstrap to build one, and apply to to the game I building (I have a backend developer but I’m doing frontend and project management, can’t wait to show you when it’s live. Yes I’ve got heaps to go but it’s more like a browser based game with no animation, so in theory I should be able to get something up, dev is doing javascipt.)

    Ontop of all of this, continue to learn Javascript @ codeacademy and just plugging away. Head splode. More questions soon.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unconformed View Post
    I’m really happy and I understand so much more – but I like wordpress and I’ve built a couple sites
    Just to warn you, the more you learn about HTML/CSS, the less and less you'll like wordpress... Then you'll learn PHP and start really hating it when you realize just how bad it's codebase is. The HTML it outputs is horrifically bad, and the PHP makes the HTML look GOOD.

    Wordpress, for and by people who don't understand HTML/CSS/PHP -- think about it.

    Quote Originally Posted by unconformed View Post
    Also, I am getting that I should look at other options to optimise images.
    Image optimization is a chore, but the dividends it pays in terms of bandwidth savings (and therein scalability and hosting costs) is well worth it. Every image ends up with different requirements -- so it's not as simple as "always use this format" or "always use this tool". Sucks, but that's why it's called work and not happy-happy-fun-time.

    Not sure why you'd be getting a grey image -- unless you were cut/pasting the TEXT from the link instead of the link itself. (since the one you pasted is showing 404).

    The directory is wide open anyhow, so you can pull up the images directly.

    Quote Originally Posted by unconformed View Post
    I will have a play, but to be honest I like PSD and I’m used to it.
    Now... don't get me wrong... Photoshop, Illustrator and the rest of Adobe's tools are GREAT for content generation... from a creativity standpoint even the latest Paint Shop Pro falls a wee bit short of it, and for working with 'real' images many of the alternatives like the GIMP are tinkertoys. I also dislike adobe tools just because ever since the "CS" versions started coming out it damned near hijacks the host OS as bad as the worst malware out there.

    It just fails miserably at saving images "optimized"... It's why usually it's best to flatten your PSD to one layer, cut/paste into something else to save -- or save a completely unoptimized/lossless PNG, and use a tool like OptiPNG, pngCrush or any of the rest to see just how small you can get as a PNG.

    Starting out, the google page optimization tool:
    http://code.google.com/speed/page-speed/download.html

    Can also help greatly -- though it doesn't do a great job of figuring out the best format.

  12. #12
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brain hurts less, cheers. I just had to finish off some print work so I probably am done for today and my BF3 clan needs me for a scrim. I'll finish off that site tomorrow. I can see what you mean by the png 24 trans, I wont use them anymore.

    Agree re the cs versions syste, rapeage.

    I think I am using wordpress as a tool to further my learning for now. I did a pretty big site for work and I know what you mean though. The HTML it outputs is not the nicest stuff.

    As far as a CMS framework for a beginner goes, it's pretty good. The ajax stuff inside and amount of widget are a plus. I've learnt a little bit about msql and databases just by setting up loacal host for it too so that's pretty cool.

    I was thinking beofre, you once said that design without contnet is decoration. sO I always try and get content first (I have a few unfished sites here for other mates while I wait for more stuff).

    Anyway the client for the wordpress site know what they want it to look like, and I have guided them a little in what they could use thier site for (using the bloging part to set featured artists). I am just saying I want to run this one like a little project. I did some research, and I have a brief, I'll do a site map and get Gnatt or other timeline going. I knind of knwo what I want to do visual wise, as we had a good chat. I just don;t want my visual ideas to be the starting point, when I really need to show this guys something visual to get him board from the start, if that makes sense. I mean, the theme has the markup done. I suppose I can lay it over the way I want the template to display (like screenshot it) and then set about marking it up.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  13. #13
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm working on this now.

    Omg I'm so stressedd about other projects. This is supposed to be an easy one for me. Iwas doing some stuff at work and realised how much I have to learn. I think I forget things easily, IDK. Perhaps not. Perhaps it's just that I really need to do a whole lot more training on updating templates in wordpress.

    Anyway, disabled styles , images. I can see what you have done there. Next step is to set the whole thing back up again. Are you saying I should re-render the logo and stripes? They look ok to me but I did not zoom in or anything (or pace an overly critical eye).
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  14. #14
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the H! addition, I did see this but was lazy about at the time, I thought I might place some content them neg margin it or something.
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  15. #15
    SitePoint Addict
    Join Date
    May 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so I made the updates

    http://www.mylifeisagarden.com/BnB/index.html

    I see what you mean re the logo. So I'll try re render that the way you said with my orginal copy.

    I still have so much to learn, I really need to start from scratch, or do more lessons, or more work. I feel my brain is at the point where I know enough but I am not applying it.

    Questions.

    How did you make the pink bg around container (when I turn off images?) I was going for a trans orange.

    I ofcourse, collected some code for my gallery. I placed it back into the style seet, and I've left a little note for you im my attemp to centre it.
    I think it needs (Edit - I just went and fixed it myself. I made a new class for the H2 all is well).

    I would like to further optimise the jpegs in gellery, think I should?

    I have so many more questions but I need to rest I've had a very long day of coding and learning and stuff with not much sleep (about 12hrs worth of it).
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •