14 replies [Last post]
digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Hi,

Can someone point me in the correct direction please, resources/code?

Thanks
Mike

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

While you're still at the

While you're still at the very general level of inquiry, Google is your friend.

Study and try out some of the examples. Then, we can discuss the more specific questions you might have.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Hi,Thanks, I spent all

Hi,

Thanks, I spent all yesterday searching around and found a solution however I'm having some troubles with floating an image right

The page can be found here - http://digital006.com/v3/index2.html

digital006

Left Menu

HTML 4.01 Strict, CSS

body { margin:0px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:white; } h1{ color:#3a3a3a; margin-left:25px; margin-top:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal; } .menu { color:#3a3a3a; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin-left:25px; }

.menu2{
color:#efefef;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
}

p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a{
color:#efefef;
text-decoration:none;
}

a:hover{
color:#3a3a3a;
text-decoration:underline;
}

img.floatRight {
position: relative;
float: right;
margin: 0px;
}

img.floatLeft {
position:relative;
float:left;
margin: 0px;
}

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#efefef;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}

#Content {
margin:0px 50px 50px 500px;
padding:10px;
}

#Menu {
position:absolute;
top:0px;
left:0px;
width:450px;
height:100%;
padding:0px;
background-color:#3a3a3a;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:450px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:450px;}

The image should be at the top of the page with the text to the left of it. Hope someone can help.

Regards,
Mike

EDIT: The HTML code isn't showing correctly but the divs are.

//mod edit: Use <code></code> tags to delimit html code.
--gary/kk5st

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The float element must

The float element must precede the static element in source order. Or, float both.

.menu2 {main2.css (line 24)
  color:#EFEFEF;
  float:left;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-weight:normal;
  }

Your markup could stand to be a bit more semantic. A menu is a list. The digital006 image would be the more appropriate h1.

If you use semantic markup and good document structure, the css part will be much simpler to implement.

In non-trivial table layouts, it is not possible to use good structure or semantic markup. You'll need to relearn that part of html.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Thank you very much for your

Thank you very much for your help.

I'm reading up on good semantics in HTML, most of which I've managed to avoid unfortunately. Can you suggest any good sources to read up on? So far I've got this: http://brainstormsandraves.com/articles/semantics/structure/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

That looks like a decent

That looks like a decent enough primer. I know it'll be frustrating, having to relearn what you thought you knew, but any of us who've been using html for more than a few years has been through it.

As you work, keep these distinctions in mind:

  1. Semantics is about marking/tagging the parts of the document to indicate what the part is.
  2. Structure is about how the pieces fit together. With semantic values, this is what html is about.
  3. Well formedness is simply the validity of the syntax. Did you do all the little housekeeping bits. This is what would cause a compile error if you made a mistake in your "hello world" program. Browsers, unlike compilers, are fault tolerant. They try to render anyway. The rub is that different browsers may try to make the mistakes work in different ways.[1] The W3 validator is your friend.

As you relearn html, work with the styles turned off. Your page should make sense. It may not be pretty, but the structure and meaning of each bit should be obvious, using only the UA's default rendering.

The rest is detail.

cheers,

gary

[1] The upcoming html5 will try to codify just how UAs should handle errors. That will be a Good Thing™.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Looking through it all, the

Looking through it all, the semantics is a pretty easy concept to grasp. One thing that is annoying the hell out of me is that everything I've been taught is utter balls and that there are better ways of doing things.

Is it still ok to use classes though? Looking through my design it would be hard to not use them.

Thank you very much for your help and understanding.

Mike

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Don't be too hard on the way

Don't be too hard on the way you were taught. For the first eight years or so of the internet, tables and presentation elements/attributes were the only means of prettifying a page. It wasn't 'til ≈'03 that css was widely supported. Even then, there were x-browser issues due to IE's buggy, non-compliant behavior. It took a long time for developers to find hacks and work-arounds for that PoS. In the meantime, the vast majority of developers were locked into the table paradigm either due to not wanting to "start over", they were maintaining legacy sites or they were dependent on tools such as Dream Weaver.

Classes? Of course. They are one of the more valuable selector hooks for both css and javascript. Spend a lot of time studying selectors.

IE still has poor support of child, sibling and attribute selectors, but the others (and don't forget the cascade bits) are all in everyday use.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

haha yeah I was being too

haha yeah I was being too harsh but it had been a bad day.

I'll take a look at the selectors link you gave me. Thank you very much for you help. This site has given me so much information!

Mike

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Ah I'm stuck again. I

Ah I'm stuck again.

I cleaned the code up a bit. Still not sure about using li for the menu. The menu looks fine in FF and IE7, but renders badly in IE6 (doens't even render when viewing the about page!). The content in IE7 has an issue with the padding/margin of the content. It's just screwed up in IE6. I'm thinking I may need to start from scratch.

As usual it validates againts the correct schema.

Code below is for my about page. The site can be seen at digital006.com/v3/ only use home and about the rest aren't skinned yet.

digital006 Web Design


What is digital006


It is a company focusing on web and graphics design with integration of Content Management Systems.


Who is digital006


digital006 was setup in the beggining of 2007 and is run by Michael Bell an ex-student of the University of Gloucestershire. My CV can be found here.


Why digital006


A mixture of an online mo*spam*r and sentimental value.



body { margin:0px; padding:0px; font-family:verdana, arial, helvetica, sans-serif; color:#333; background-color:white; } h1{ color:#3a3a3a; margin-left:25px; margin-top:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal; line-height:30px; } h2{ color:#3a3a3a; margin-left:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:20px; }

.menu {
color:#3a3a3a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin-left:25px;
}

.menu2{
color:#efefef;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
}

p{
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 10px;
padding:0px;
}

/*#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}*/

a{
color:#efefef;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

img.floatRight {
position: relative;
float: right;
margin: 0px;
}

img.floatLeft {
position:relative;
float:left;
margin: 0px;
}

#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#efefef;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}

#Content {
margin:0px 0px 0px 400px;
padding:0px;
float:left;
}

#Menu {
position:absolute;
top:0px;
left:0px;
width:400px;
height:100%;
padding:0px;
background-color:#3a3a3a;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:400px;}

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I haven't looked at too much

I haven't looked at too much of your code, but as Gary said, a menu is a list. It should be treated as such. You seem like the type of person to pull a lot out of reading an article online, so I recommend http://www.alistapart.com/articles/taminglists/. A List Apart is probably my favorite site aside from CSS Creator. That article will teach you how to make a horizontal menu using an unordered list. In your case, you probably won't even need the article since your list is vertical, but it will still be a good read for you.

Starting from scratch has helped me, especially when I was first learning CSS. I read about it, got ambitious and jumped in too soon. Starting over helped greatly after I acquired new knowledge.

It's really personal preference, but I don't like to see capital letters in IDs and classes. It just seems more standard to stay lowercase.

Check out my post about conditional styles too. http://csscreator.com/node/28011

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Aequitas wrote:I haven't

Aequitas wrote:
I haven't looked at too much of your code, but as Gary said, a menu is a list. It should be treated as such. You seem like the type of person to pull a lot out of reading an article online, so I recommend http://www.alistapart.com/articles/taminglists/. A List Apart is probably my favorite site aside from CSS Creator. That article will teach you how to make a horizontal menu using an unordered list. In your case, you probably won't even need the article since your list is vertical, but it will still be a good read for you.

Starting from scratch has helped me, especially when I was first learning CSS. I read about it, got ambitious and jumped in too soon. Starting over helped greatly after I acquired new knowledge.

It's really personal preference, but I don't like to see capital letters in IDs and classes. It just seems more standard to stay lowercase.

Check out my post about conditional styles too. http://csscreator.com/node/28011

Thank you, the list apart article was a good read but it's going to be a difficult habit to kick.

Your post on compatability is good, is it possible to apply conditional formatting directly to the CSS file rather having it in the HTML code? I'd like to keep the HTML as simple as possible.

I'm going to redesign the whole page I think. Mixing fluid widths and fixed widths should be somehting trivial but like most things with CSS and HTML it's not.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Unfortunately the

Unfortunately the conditional hacks must be put in your HTML.

I agree that the list is a difficult habit to kick, for a long time I used paragraphs with anchors for my nav, but realistically, once you get the concept down pat, it is much more versatile. Allowing the styling of the list items and the anchors means you have more possibilities. That's not to say that it would be impossible to do with just an anchor, but I find it easier to have multiple tags to style.

I've not done it except in practice, and not in quite some time, but if I recall correctly it's not all that difficult to do a fixed column and a fluid column. I will fiddle a bit and see if I can come up with an example for you.

digital006.com
Offline
Regular
Last seen: 13 years 31 weeks ago
Joined: 2007-10-31
Posts: 13
Points: 0

Thank you very much. At the

Thank you very much.

At the end of it all I guess it does make more sense to use lists as its easier to style plus with the addition of classes it makes it quite useful.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Some time ago I remade

Some time ago I remade http://gamblingandthelaw.com/ with CSS. I created it so that it was fluid in the center with a left column that was fixed at whatever width it is ( I think it's 128px or so. ). Unfortunately, I cannot locate the code that I made, but if I recall correctly, all I did was define the column as 128px and then I set a margin-left on my container ( middle, fluid column ) of that figure, and set the container to 100% width. I could be wrong on this, but give it a shot.