[FreakStyley]

Hello folks,

I've attached two gif images. walking further away from dreamweaver and these last couple of days using Topstyle3. I believe its that bit more intuitive in its layout, and its forcing me to learn coding better! but still I'm running into some questions (without the use of tables this time)

1. stretch.gif
I am trying to get into the swing of using div elements, etc. whats the best way to code something for this kind of setup. basically its 3 images that spread out to the width of the users browser, while keeping their respective widths (hights are the same). I hope the image illustrates what I'm trying to achieve. I'm testing it with css & divs but I'm not sure whether to nest divs, etc.

2. buttons.gif
This one is somewhat easier, but how do I get the buttons to go beneath each other while while having larger margins (?) on top/bottom than the sides. its so easy in tables. but I want to try it a different way. The white area is the actual div and the rose colour are the buttons.

3. lastly! if I have just one div element how do I center/center it to the browser window with css?

thanks so much for your help!

[pgo]

CSS Layouts
http://glish.com/css/
http://www.bluerobot.com/web/layouts/
http://www.alistapart.com/articles/practicalcss/

As far as your other questions - check http://css.maxdesign.com.au/ for list tutorials - how to make buttons out of links, basically.

For a series of buttons, you'll use the following markup...

<ul>
  <li><a href="#" title="blah">Blah</a></li>
  <li><a href="#" title="blah">Blah</a></li>
  <li><a href="#" title="blah">Blah</a></li>
  <li><a href="#" title="blah">Blah</a></li>
</ul>

And then use the various CSS styling tutorials at the link above to change them into horizontal or vertical lists and buttons.

Centering - try setting text-align: center; to your body element. Then create a <div> with margin: 0 auto; or just margin: auto; and give it a width: ++%; or width: +++px;.

Centering is more difficult when using standards - there's no align="center".

Also...

http://www.dezwozhere.com/links.html is an invaluable resource.

[emil]

http://css.maxdesign.com.au

[FreakStyley]

thanks guys!

those are great links! and you know what? I'm starting to love coding again....hello topstyle,

....goodbye dreamweaver.

yeah, I found it hard to believe at first, but *tables* are only meant for sitting at or dancing on! hahahaha

- Styley :P

[FreakStyley]

...oh I forgot to mention, in my question2 above:

when you put images (gif) into a list like that how can I get rid of the "LINK" colors that suround each image? sorry guys its very late for me right now and I'm not getting it....

thanks!

[pgo]

Well, presentational images like that should really go in the CSS as background images. For instance, the menu on the site I just (sorta) completed is text with a 1px by 30px background GIF repeated along the x-axis. Here's the XHTML and CSS for it...

<div id="nav">
  <ul>
    <li><a href="index.html" class="current">About Privnett</a></li>
    <li><a href="plans.html">Hosting Plans</a></li>
    <li><a href="policy.html">Terms/Policies</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

#nav {
  background-color: transparent;
  padding: 0;
  border: 0;
  margin: 0; 
  }

#nav ul {
  height: 30px;
  padding: 0;
  border: 0;
  margin: 0 25px 0 25px;
  }

#nav li {
  display: inline;
  list-style-type: none;
  padding: 0;
  border: 0;
  margin: 0;
  }

#nav a:link, #nav a:visited {
  float: left;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 20px;
  border: 0;
  margin: 0;
  }

#nav a.current:link, #nav a.current:visited {
  background: url(../images/current.gif) no-repeat bottom center transparent;
  }
  
#nav a:hover, #nav a:active, #nav a.current:hover, #nav a.current:active {
  background: url(../images/navover.gif) repeat-x bottom left #84975F;
  color: #FFF;
  text-decoration: none;
  }

It's a good idea to look at source code from websites you like to get a sense of how to accomplish a given effect.

Follow the maxdesign tutorials - they're really all you need to know in that regard.

On the topic of TopStyle - the only complaint I've had about it is that it doesn't open things in tabs like Dreamweaver does (unless I missed something). I really loved that aspect of the Dreamweaver interface - as I do with Firefox.

[Stickman]

Originally Posted by pgo

On the topic of TopStyle - the only complaint I've had about it is that it doesn't open things in tabs like Dreamweaver does (unless I missed something).

I think you did. Mine does.

[pgo]

Indeed, I did. Must have been hitting the sauce the night I downloaded and tried TopStyle.

Will give it another shot...and if I like it...$80.

[FreakStyley]

Thanks pgo,

Yep, I've been checking various sites for a similar "image based nav" but....



....they're ALL tables! I've seen a LOT of css with just text links but none (yet) with images as links. with my gallery page at the moment the thumbnails are just exploding the page. I'm using a basic 3 column layout (closest setup to my original tables layout)

anyone got some examples (that I'm missing?)

[emil]

Image links

www.rammstein.com
(it was the first I could think of)

Three column layout

http://css.maxdesign.com.au/floatuto...torial0916.htm

[FreakStyley]

Hi guys,

here is a link to my "CSS" version of my site. the graphic elements are still bound via tables (for the moment!)....I couldn't get it to the same layout as I had with tables. If anyone can explain how to me would be a great help, the same goes for the top navigation.

I've only been at this CSS malarky for a week or so now and I'm really loving the control. the only pain is making it cross-browser friendly.

this is the best version (so far) that I made that looks similar in IE and Firefox.

http://homepage.eircom.net/~samblake/index_css.htm

Questions:

1.
How can I get the center section to always touch the top of the "footer"?
I've been trying but then something else explodes, etc, etc.

2.
and the same question for the left and right columns, so no matter what the resolution of the users computer, it ALWAYS stretches down to meet it without having any scroll in the main window.

can someone explain the use of the "clear" tag? is it like a limit or something?

thanks for your help!

- Styley

[emil]

clearing
http://positioniseverything.net/easyclearing.html

Also chech the same site (http://positioniseverything.net) for
layout examples
http://positioniseverything.net/piefecta-rigid.html

Have a look here, too
http://www.alistapart.com/articles/fauxcolumns/