logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-27-2012, 11:20 PM   #1
starguy
 
Join Date: Mar 2007
Location: Scottsville, Virginia
Posts: 11
Default Using CSS to layout header banner

I am trying to re-write my web site using current HTML and CSS. The old site is heavily laden with tables and nested tables. I've taken 2 online Dreamweaver CS5 classes through ed2go which is offered through my community college which covered a good deal of ground in 12 weeks. What I'm confused about is the header banner. I have essentially 4 components that would make up the banner.
  1. A gradient background image for the entire banner
  2. A left justified image that has the observatory info
  3. A right justified image of a nebula
  4. And a centered image of the title
The idea is to have the above styling and use a liquid layout that the page would expand to the size of the monitor being used to view the site. I'd have a minimum of no less than 1024 and the max would be 100%. The existing site does this very easily but is built using many tables. Not code efficient or up to current standards. I have uploaded a zipped file containing the images and attached a copy of what I'm trying to do. Unfortunately when this image is stretch to span the wider screen the aspect ratio gets all whacky.

I can accomplish what I want using a table but then again that's what I'm trying to eliminate. The code using a table is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table {
background-image: url(images/banner_background.png);
text-align: left;
}
body {
background-color: #000;
}
.center {
text-align: center;
background-image: url(images/banner_background.jpg);
}
.right {
background-image: url(images/banner_background.png);
margin: 1px;
padding: 0px;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="22%" scope="col"><img src="images/DRO_trans.png" width="325" height="200"></th>
<th width="59%" class="center" scope="col"><img src="images/glimpses-astral.png" width="450" height="120"></th>
<th width="19%" scope="col"><img src="images/Thor-3rd-300.jpg" width="300" height="198" alt="Thor's Helmet"></th>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</body>
</html>

Any assistance with doing this layout using CSS would be greatly appreciated.

Thanks,

Steve
Attached Images
File Type: jpg image.jpg (58.1 KB, 3 views)
starguy is offline   Reply With Quote
Old 10-27-2012, 11:39 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Give me a bit and I'll show you how to code that header.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-28-2012, 12:11 AM   #3
starguy
 
Join Date: Mar 2007
Location: Scottsville, Virginia
Posts: 11
Default

What I failed to mention is that I have a zipped file on my web site that have the images used to make the banner. They can be downloaded at http://www.astral-imaging.com/test_images.zip

Thanks,

Steve
starguy is offline   Reply With Quote
Old 10-28-2012, 01:30 AM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by starguy View Post
What I failed to mention is that I have a zipped file on my web site that have the images used to make the banner. They can be downloaded at http://www.astral-imaging.com/test_images.zip

Thanks,

Steve
Woops! I saw this too late

Anyways... I've made something, but it's not really perfect. For instance for the text I would if i were you looking for a real font simiiar to the one you've used now. Include them with @font-face and use CSS3 text-shadow for the effects.
I had to make the title image smaller, cause the original size gave me troubles when resizing the browser to 1000px width. It is still not perfect but like I said I would have used @font-face and CSS3 media queries to adjust the font-size smaller for the 1000px width devices, so that it would fit perfectly.

This is my result in full screen:
http://cssdeck.com/labs/full/fn5j9sur/0

And this the result with code:
http://cssdeck.com/labs/collab/fn5j9sur/0
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-28-2012, 02:39 AM   #5
starguy
 
Join Date: Mar 2007
Location: Scottsville, Virginia
Posts: 11
Default

It's way farther than I had gotten and using methods I haven't seen or heard of. So much to learn in so little time. I played with the code a bit and came up with the following:

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<link href="style-3.css" rel="stylesheet" type="text/css">
<div id="header">

    <div id="header-left">

        <img src="images/DRO.png" alt="" />
            
    </div>
    
    <h1>Glimpses of Our Universe</h1>
    
    <div id="header-right">
    
        <img src="images/Thor-3rd-300.jpg" alt="" />
        
    </div>
    
</div>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

I broke something as the title doesn't show up(h1). Is there a reason not to use the title image instead of the h1 tag? The css is as follows:

/* CSS Document */
html, body {
    width: 100%;

    height: 100:;     background-color: #000;
}

body { padding: 0 }

#header {
    width: 100%;
    min-width: 1000px;
    height: 200px;
    overflow: hidden;
    background-repeat: repeat-x;
    background-image: url(images/banner_background.png);
}

#header-left {
    width: 30%;
    float: left;
    }

h1 {
    float: left;
    text-indent: -9999em;
    width: 44%;
    height: 200px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
}

#header-right {
    width: 26%;
    float: right;
    }

#header-right img { float: right }
I don't understand what the text-indent: -9999em is doing. I haven't played with it yet but that stood out.

Your comment "I would have used @font-face and CSS3 media queries to adjust the font-size smaller for the 1000px width devices, so that it would fit perfectly." is new to me. What is @font-face and CSS3 media queries? I'll Google and see if I can find some good information on this but these are things we didn't cover in my intermediate class at all and I suspect are advanced methods?

I really appreciate your time and effort helping me on this. Seems I have a lot of research to do yet. I actually have the rest of the web site pretty well laid out short of making this work and creating the template once it all fits together. The images have been taken and the text is already on the old site so it will be mostly cut and paste with the style sheet taking care of the formatting.

Regards,

Steve

Last edited by gentleone; 10-28-2012 at 03:12 AM..
starguy is offline   Reply With Quote
Old 10-28-2012, 03:37 AM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Yes, you broke some bits here and there

You have the layout (divs and such) in between the <head>. It should be in between the <body> and there was one typo (no %) in the height of the html, body in the CSS.

This is the fixed code:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title>

<link href="style-3.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="header">

    <div id="header-left">

        <img src="images/DRO.png" alt="" /> 

    </div>

    <h1>Glimpses of Our Universe</h1>

    <div id="header-right">

        <img src="images/Thor-3rd-300.jpg" alt="" />

    </div>

</div>

</body>

</html>
The CSS:
Code:
/* CSS Document */
html, body {
    width: 100%;
    height: 100%;
    background-color: #000;
}
body { padding: 0 }

#header {
    width: 100%;
    min-width: 1000px;
    height: 200px;
    overflow: hidden;
    background-repeat: repeat-x; 
    background-image: url(images/banner_background.png); }

#header-left { 
    width: 30%;
    float: left;
}  

h1 {
    float: left;
    text-indent: -9999em;
    width: 44%;
    height: 200px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
}  

#header-right {
    width: 26%;
    float: right;
}

#header-right img { float: right }
Quote:
I don't understand what the text-indent: -9999em is doing.
We hide the 'real' h1 text with this. We throw it off screen with a negative text-indent.

@font-face are just real fonts for the web rhat you can load from your own server or you can use a service like Google Web Fonts. I prefer the first one and I look for fonts on http://www.fontsquirrel.com/.

CSS3 mediia queries is in short that you can change or declare new CSS declerations based on the screen width.. It's a technique used mainly in Responsive Web Design.

It is indeed advanced web design and it might be indeed a too much for you now, but it will be the next standard of how we build websites.
http://blog.teamtreehouse.com/beginn...ive-web-design

A gallery with websites build with the RWD technique (resize your browser window to see the CSS3 media queries in action)
http://mediaqueri.es/

But... just start with the basics... read as many articles and tutorials on the Internet as you can. Suck it in, play with it, experiment with it, make many mistakes... it doesn't matter as long as you learn from them.

Oh and don't watch YouTube tutorials as resource cause, 9 out of 10 so called teachers there suck big time.

Use sites like this instead:
http://net.tutsplus.com/articles/new...remium-course/
http://www.htmldog.com/
http://css-tricks.com/
__________________
www.gentlemedia.nl

Last edited by gentleone; 10-28-2012 at 03:52 AM.. Reason: added more info
gentleone is offline   Reply With Quote
Old 10-28-2012, 01:29 PM   #7
starguy
 
Join Date: Mar 2007
Location: Scottsville, Virginia
Posts: 11
Default

What I failed to mention is that I have a zipped file on my web site that have the images used to make the banner. They can be downloaded at http://www.astral-imaging.com/test_images.zip

Thanks,

Steve
starguy is offline   Reply With Quote
Old 10-28-2012, 02:05 PM   #8
starguy
 
Join Date: Mar 2007
Location: Scottsville, Virginia
Posts: 11
Default

The second post of the failed to mention was a fluke. But I do want to thank you for the time and effort. I went to your web site and look at some of your work. Indeed it to very much to my liking. I knew a long time ago when I created my first web site using FrontPage that I would eventually learn HTML and actually took a class at my local community college. That was a big help in basic code and a good start. I actually did most of my coding with Notepad but have to admit Dreamweaver makes it much easier to get a feel for what you are doing. The real test is previewing in the web browsers of course but DW usually gives a very close example.

Time became a factor as I was working 60+ hours a week as a HVAC tech and then ran the department for the last 2 working years. The knees went south and I was determined that I was going to do this right. That was 10 years ago. It wasn't till this past January when I had my first knee replaced that I decided after getting to a comfortable level, and off pain meds, I would settle down and take some classes. Those 2 DW classes through the community college were very good and an excellent online resource as it was instructor led and we had a discussion area to ask questions and get feedback. Of course you can only cover so much in 24 lessons, 2 each week for 6 weeks for each course. I've collected some good reference books as well:

Dreamweaver CS5: The Missing Manual latest edition
Head First: HTML and CSS
CSS: The Missing manual latest edition

And a few old Sitepoint books. I maybe going over the edge on this but I have the time but need to focus a bit more. This isn't to make a living. Heck it's for my personal web site and most likely a re-do on my church's site later.

I've been bone on bone with the knees for 15 years and the other knee will be replaced right after Thanksgiving. That slows you down a bit, especially with the pain killers and rehab. Once the recovery is along down the road it will be tackling this project full steam.

I'll be sure to reference the links you provided and delve more into the books I have. Using them as a reference is great but if what you are looking for is something your not familiar with then finding the proper term or process gets a bit harder. I guess I'll just need to read them like a novel, at least section by section as they appear to be relevant. I'll also continue to take on-line classes if the course build on what I have already taken.

Sorry about being long winded. That's part of being retired. You sometimes have too much time But I do appreciate the explanation and assistance.

-Steve
starguy is offline   Reply With Quote
Old 10-29-2012, 05:40 PM   #9
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Hi Steve, I'm sorry to hear that and I wish you all the best with getting well from your injury.

Re web design and such if you want to be a professional in our field, then it's each and every day 8 hours work and 4 hours research/study/experiment... well, at least for me the last 6 years in between my holidays.

I'm a self taught kind of guy and all I needed and wanted to know, I found on the Internet. I understand what you say with finding the right terms for your google phrases, but this gets easier and easier once you've passed the 'noob level'.

If you just want to do this for your own and your church site, but still want to do it right... just keep on asking here if you need some help or guidance and we'll get you through.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-01-2012, 03:18 AM   #10
starguy
 
Join Date: Mar 2007
Location: Scottsville, Virginia
Posts: 11
Default

No professional web designer here. As much time as I'm spending on this there's no-one that could afford me!

I've even looked at a DW extension called Flexi CSS Layouts and I've decided that all I'll learn with that is how to use the extension and still nothing on layout.

Thanks for the assistance. Seems after the recovery I'll take the Intermediate CSS class on-line.

-Steve
starguy is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:17 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com