34 replies [Last post]
keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

I use DW and no little HTML. I am learning to code with CSS though by hand. I am trying to figure out this whole new approach to designing with CSS and don't really know how?

I usually design my layout in photoshop as a mockup. But it seems that from what I have read people just create a load of divs add text then add the CSS to style the basic page?

Seems difficult? Is there a tutorial on best way/rules on designing layout and implementing it with CSS?

sorry if this doesn't make sense.

drhowarddrfine
Offline
Leader
Last seen: 10 years 36 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

First step in designing site with CSS?

You should still make your mockup using Photoshop. Then you create your html. Then you logically group the html elements toether into <div>s, if necessary. Then you can apply CSS attributes to the divs and their contents where necessary.

I say, if necessary, because too many times people put divs around things and there is no need to do so.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Can you give me an example of putting divs around things and there is no need to do so? Like what things?

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok here is a site I did and am trying to decipher how to begin arranging it. Can you give me a push in the right direction and I will attempt it.

Thank you

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

OK, here's the HTML I'd use.

<h1> tag, which will contain the logo

<ul> which will containt the navigation

<h2> - "steering you in the right direction since 1949"

<h3> "experience since 1949"

<p> containing the main text.

another <ul> containing the three links on the right

another <ul> containing the links at the bottom

a <p> containing the footer.

Get all this marked up in HTML only, don't worry about the CSS or images, and show us when it's done Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Thanks will do.

So you mean don't insert images yet then.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

Yes.

Don't slice up your layout in PS and try and cram it into a table. Style the HTML o resemble it.

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok, here it is. This is so different for me. Feels like drawing with my other hand.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test</title>
</head>

<body>
<h1>Logo</h1>
<ul>navigation</ul>
<h2>Steering you in the right direction since 1949</h2>
<h3>Experience since 1949</h3>
<p>Text goes here</p>
<ul>three links here</ul>
<ul>bottom links</ul>
<p>footer text</p>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

Looks good to me.

Get the content in there, and have a look at how it looks with no CSS. Then, begin styling Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Easy for you to say ha! ok, I will attempt it and show the code in a bit.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

It IS easy for me to say, but only because I've been helping people with CSS for so long. I've only been using it for the last coouple of years, but you've started in the right place, semantic html Laughing out loud

Get the content in and let uis know what your next step is going to be.

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Kind of weird since I already previously designed this and certain things are all image based such as the Steering you in the right direction since 1949 is part of that whole large middle graphic.

Should I use it as a graphic or make it text? Text can be editied in future if I need to be.

Here is where I am at. some issues are:

I don't know what to do now as the top nav has submenu. I don't know how to add them in html?

Also so much of this is image based I don't know if I should use iamges or try CSS like the very top gray image/gradient.
And gradients arount main nav bar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test</title>
</head>

<body>
<h1><IMG src="Welcome To Workmen's Auto_files/Logo.gif" alt="WAIC Logo" width="284" height="56"></h1>
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Products</li>
	<li>Customer Service</li>
	<li>Agent Login</li>
	<li>News</li>
	<li>Careers</li>
	<li>Contact Us</li>
</ul>
<h2>Steering you in the right direction since 1949</h2>
<h3>Experience since 1949</h3>
<p>Workmen&rsquo;s Auto Insurance Company has been steering 
  drivers in the right direction since 1949. Now in our 57th year of 
  business, the Company has an established tradition of customer 
  satisfaction, technological innovation, and financial security.</p>
<p>Workmen&rsquo;s Auto is headquartered in Los Angeles, 
  California and is licensed in 23 states and active in eleven states, 
  from Washington to Florida. Our main product is non-standard 
  automobile insurance distributed through independent agents &ndash; 
  insurance professionals in your community who can assist you in 
  selecting insurance coverages tailored to your individual needs &ndash; 
  and in California through selected brokers. We also offer homeowners 
  and renters products in California.</p>
<p>The Company is family-owned and operated by the Shammas family, one of Los Angeles&rsquo; 
   original pioneering families. We pride ourselves on this 
   entrepreneurial spirit as our dynamic management team guides us into the future.</p>

<ul>
	<li>Customer Login</li>
    <li>About Agent Login</li>
    <li>Employee Login</li>
	</ul>
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Products</li>
	<li>Customer Service</li>
	<li>Agent Login</li>
	<li>News</li>
	<li>Careers</li>
	<li>Contact Us</li>
</ul>
<p>©2006 WAIC, all rights reserved</p>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

OK, now that's in place, there are two areas of CSS you need to do a little research on.

The first is Image Replacement, basically it involves setting your images as background images and removing the text via CSS.

The second is Sons of Suckerfish, which is what you will use for your submenus. Trust me, there will be quite a bit of reading, and trial and error, but it's worth it in the long run.

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok I am researching the suckrfish site but have a question regarding this example:

<ul id="nav"> 
<li><a href="#">Percoidei</a> 
<ul> 
	<li><a href="#">Remoras</a></li> 
	<li><a href="#">Tilefishes</a></li> 
	<li><a href="#">Bluefishes</a></li> 
	<li><a href="#">Tigerfishes</a></li> 
</ul> 
</li> 
<li><a href="#">Anabantoidei</a> 
<ul> <li><a href="#">Climbing perches</a></li> 
	<li><a href="#">Labyrinthfishes</a></li> 
	<li><a href="#">Kissing gouramis</a></li> 
	<li><a href="#">Pike-heads</a></li> 
	<li><a href="#">Giant gouramis</a></li> 
	</ul> 
	</li> 
	<!-- etc. --> 
	</ul>

I can't tell which tag is dominant the ul or li? It seems that ul starts everything off but ends in </il>? Trying to understand how these tags are being used here and why?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

First step in designing site with CSS?

There's a ul nested within a top level ul. Everything inside a ul has to go in a list item (li) so if you place a ul inside another ul, it has to go between <li> </li> tags.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ah I see thanks.

Ok I am slowly getting the ul il nav thing. I updated my code here with top nav done. Need to finish the rest. Can someone explain to me image replacement and point in a good direction to learn it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css test</title>
<link href="1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1><IMG src="Welcome To Workmen's Auto_files/Logo.gif" alt="WAIC Logo" width="284" height="56"></h1>
<ul id="nav">
    <li><a href="#">Home</a>
	</li>
    <li><a href="#">About Us</a>
    <ul>
		<li><a href="#">President's Message</a></li> 
		<li><a href="#">financial Strength</a></li> 
		<li><a href="#">Management Team</a></li>
		</ul>
		</li>
		 
	<li><a href="#">Products</a>
	<ul>
		<li><a href="#">Auto</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Renters</a></li>
		<li><a href="#">Home Owners</a></li>
		</ul>
		</li>
		
	<li><a href="#">Customer Service</a>
	<ul>
		<li><a href="#">Make A Payment</a></li>
		<li><a href="#">Update A Policy</a></li>
		<li><a href="#">Find an Agent</a></li>
		</ul>
		</li>
		
	<li><a href="#">Agent Login</a></li>
	
	<li><a href="#">News</a></li>
	
	<li><a href="#">Careers</a></li>
	
	<li><a href="#">Contact Us</a></li>
	</ul>
				
<h2>Steering you in the right direction since 1949</h2>
<h3>Experience since 1949</h3>
<p>Workmen&rsquo;s Auto Insurance Company has been steering 
  drivers in the right direction since 1949. Now in our 57th year of 
  business, the Company has an established tradition of customer 
  satisfaction, technological innovation, and financial security.</p>
<p>Workmen&rsquo;s Auto is headquartered in Los Angeles, 
  California and is licensed in 23 states and active in eleven states, 
  from Washington to Florida. Our main product is non-standard 
  automobile insurance distributed through independent agents &ndash; 
  insurance professionals in your community who can assist you in 
  selecting insurance coverages tailored to your individual needs &ndash; 
  and in California through selected brokers. We also offer homeowners 
  and renters products in California.</p>
<p>The Company is family-owned and operated by the Shammas family, one of Los Angeles&rsquo; 
   original pioneering families. We pride ourselves on this 
   entrepreneurial spirit as our dynamic management team guides us into the future.</p>

<ul>
	<li>Customer Login</li>
    <li>About Agent Login</li>
    <li>Employee Login</li>
	</ul>
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Products</li>
	<li>Customer Service</li>
	<li>Agent Login</li>
	<li>News</li>
	<li>Careers</li>
	<li>Contact Us</li>
</ul>
<p>©2006 WAIC, all rights reserved</p>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Thanks I read on that site"you decide you want to replace, say, a header containing text with an equivalent image. "

But I don't understand exactly why you would want to do this?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

Search engines.

Google can't read images, it can read text inside a <h1> tag.

Same for screen readers.

<h1> site title here </h1>

is then replaced in web browsers by the logo.

Let us know how you get on.

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Hmmmm can we skip the image replacement part for now? I mean in straight html tables they don't use IR?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

Well, they could do.

<tr class="navigation">
<td> <a href="blah"> page 1 </a> </td>
<td> <a href="blah"> page 2 </a> </td>
<td> <a href="blah"> page 3 </a> </td>
</tr>

then use image replacement on that.

Are you having problems with imnage replacement? Can we see what you've got so far?

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

Big update!

Ok I have been working on it. Am I doig it? I think so. Issue at the moment is getting the right_nav bar to sit on top of the nav_bar

This is the page I am trying to replicate:
http://www.downtown-insurance.com/2006/

This is what I ahve done so far:
http://www.downtown-insurance.com/2006/CSS/1.htm

I am trying to get that graphic (nav_right.gif) on top of the nav_bar
but don't know how?

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

bump

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

I can't say I understand your element construction, there's a lot of divs at the top, but we'll sort that out later.

You see the items in <ul id="nav"> ?

Move that entire <ul> into

<div id="nav_bar">

This image:

http://www.downtown-insurance.com/2006/CSS/images/Nav_bar.gif

shoudl be applied as the background-image for each main list-item.

Let me know how you get on.

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok I believe I did the first part right regarding the UL areas.
http://www.downtown-insurance.com/2006/CSS/1.htm

But I don't understand what you mean or how to apply the Nav_bar.gif as a background-image for each main list-item. Or why? If the nar_bar is spread across can't I just insert the buttons/images on top?

Also instead of using ID's on the DIV's should of used classes?

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

ok made a lot of changes and alot of stuff it going awry.

Can someone please take a look at files and tell me what am I doing wrong. (lots I know).

this is how I am trying to make the CSS site look like this is only a reference for layout only.
http://www.downtown-insurance.com/2006/

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

position:absolute;

Why?

Why?

Your layout doesnt need ANY absolute positioning, ditch it right now Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok, I removed positioning for everything except the #side_nav.

So I take it positioning is a bad thing?

If I don't use positioning how do I get stuff in order?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

By using floats, margins and padding Wink

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Is there ever a time when positioning should be used?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

Yes, but for beginners to CSS, and for simple layouts, you shouldn' use it.

I'd like to clarify: absolute positioning does not equal positioning - positioning can be doen with many ways:

document flow
relative positioning
absolute positioning
fixed positioning

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok... but how do I move that gray/silver box up to where it should go without absolute positioning I used margins and padding and it just pushes everything away from it.

See attached pic.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

First step in designing site with CSS?

The big picture of the hands on the wheel should be a background of a <div>

This div can then contain the silver div.

Verschwindende wrote:
  • CSS doesn't make pies

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ah I get it now. This changes everything.
thanks

keano
keano's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 8 weeks ago
Los Angeles
Joined: 2006-05-19
Posts: 59
Points: 0

First step in designing site with CSS?

Ok made a few changes. Have a new problem with the #side_nav links.

These are supposed to go to the right of the text in the box. But when I nest it in there it pushed everything away. code right now for that is:


<div id="Main_Box">
  <div id="Box_text">
  <p>Workmen&rsquo;s Auto Insurance Company has been steering 
    drivers in the right direction since 1949. Now in our 57th year of 
    business, the Company has an established tradition of customer 
    satisfaction, technological innovation, and financial security.</p>
  <p>Workmen&rsquo;s Auto is headquartered in Los Angeles, 
    California and is licensed in 23 states and active in eleven states, 
    from Washington to Florida. Our main product is non-standard 
    automobile insurance distributed through independent agents &ndash; 
    insurance professionals in your community who can assist you in 
    selecting insurance coverages tailored to your individual needs &ndash; 
    and in California through selected brokers. We also offer homeowners 
    and renters products in California.</p>
  <p>The Company is family-owned and operated by the Shammas family, one of Los Angeles&rsquo; 
    original pioneering families. We pride ourselves on this 
    entrepreneurial spirit as our dynamic management team guides us into the future.</p></div>
</div>
  <div id="Box_Bottom"></div>
  <img src="images/Logo.gif" alt="WAIC Logo" width="244" height="25" id="logo" /></p>
  <h3>Experience since 1949</h3>
<ul id="side_nav">
    <li><a href="#">Customer Login</a></li>
    <li><a href="#">Agent Login</a></li>
    <li><a href="#">Employee Login</a></li>
  </ul>

CSS code is:

#Main_Box {
background-image:url(images/Text_header.gif);
width: 690px;
height:29px;
background-repeat:repeat-x;
margin-top: 30px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
border-left: 2px;
border-left-color: #CCCCCC;
border-left-style: solid;
border-right: 2px;
border-right-color: #CCCCCC;
border-right-style: solid;}

#side_nav {
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
float: right;}

#Box_text {padding-top: 25px;}

#Box_Bottom {
background-image:url(images/Box_Blu_bottom.jpg);
height:19px;
background-repeat:repeat-x;
width:690px;
margin:auto;
border-left: 2px;
border-left-color: #CCCCCC;
border-left-style: solid;
border-right: 2px;
border-right-color: #CCCCCC;
border-right-style: solid;}