Need a clue how to design css I think

I'm not sure how to accomplish what I'm trying to do. It's the first time for me to have abandoned wysiwyg (frontpage). So Ive just made a mock up and put it on line. With the parts I don't understand. Well that's all of it actually, but can someone give me an idea of what I am trying to do?

http://www.earrelaphant.com/shopping/pets/dogs/1.php

Any and I mean any help will be more than appreciated.

Happy Holidays

 

You're on the right track and this is - in my opinion - the best way to get into CSS, learning as you go.
Having said that, your site does need some work. What you need to understand is, that CSS means separation of style and content. If you look through your code, you'll notice that cell colors etc. are set each time (bordercolor="#FFFFFF" for instance).

What you want to do, is place all these style tags separately - either in a style sheet (.css file) or at the top of your code using
<style type="text/css">
<!--
(style tags go here)
-->
</style>

The .php extension is great - if you plan on using PHP code. If not, .htm would work just the same.

Also, you should know that tables are meant for presenting a schematical list of numbers for instance, while divs are a lot more useful when doing page layouts - dividing into columns and headers.

By using divs, you can keep the actual code down to a bare minimum and a lot easier to look through.

I'd recommend that you have a look at W3schools.com Tutorials and Glish.com.
View other sites source and see how they did, and in time you'll be able to use these tags yourself. Look at W3 Schools for reference and at Glish etc. for practical implementation.

Oh, and don't be afraid to ask a lot of questions here - people are usually more than willing to give a hand and point out what to do different...

 

Note to self: get on with the tutorials for xhtml and css

OK, like he said. Also, you need to learn and understand (X)HTML as well as CSS.

Here's a few great resources:

Download TopStyle:
[ http://www.bradsoft.com/download/index.asp]
There's a free lite version, or the 30 day trial for the pro version

Download CSE HTML Validator
"CSE HTML Validator Pro is an all-in-one HTML, XHTML, CSS, link, spelling, and accessibility checker"
Personally I just use it to validate for nesting errors - now - as I prefer coding with a text editor, but this package taught me more about HTML coding than any number of courses, books and tutorials

Free, Lite edition* [ http://www.htmlvalidator.com/lite/ ]

Pro version 30 day trial download* [ http://www.ackadia.com/files/csesetup.exe ]
*(Affiliate download).
Else get it from the source via here: [ http://www.htmlvalidator.com/htmldownload2.html ] )

Hope this helps, if not, ask again.

 

Note to self: get on with the tutorials for xhtml and css

OK, like he said. Also, you need to learn and understand (X)HTML as well as CSS.

Here's a few great resources:

Download TopStyle:
[ http://www.bradsoft.com/download/index.asp]
There's a free lite version, or the 30 day trial for the pro version

Download CSE HTML Validator
"CSE HTML Validator Pro is an all-in-one HTML, XHTML, CSS, link, spelling, and accessibility checker"
Personally I just use it to validate for nesting errors - now - as I prefer coding with a text editor, but this package taught me more about HTML coding than any number of courses, books and tutorials

Free, Lite edition* [ http://www.htmlvalidator.com/lite/ ]

Pro version 30 day trial download* [ http://www.ackadia.com/files/csesetup.exe ]
*(Affiliate download).
Else get it from the source via here: [ http://www.htmlvalidator.com/htmldownload2.html ] )

Hope this helps, if not, ask again.

 

Great stuff. Most of this I can deal with one way or another sooner or later.

But. I have some items from content management systems, chat room (whos in chat rooms which I have placed in the left hand column already), the arcade (like top games ...), and I'd like to bring in rss feeds using carp evolution. Maybe more. Will these type of things mandate the file type?

If I understand the the structure of css it is this

1> main.html which has the content unique for the page as viewed
it then pulls in the formats from header.css, left.css, main.css, right.css, and footer.css?

If that's right then where is the content for header.html, left.html, right.html,and footer.html?

 

All right. I went through some more stuff and then downloaded the topstyle program. Wow. Did I get this right. One style sheet that covers each section of html doc? top, left, right, body, footer?

 

All right. I went through some more stuff and then downloaded the topstyle program. Wow. Did I get this right. One style sheet that covers each section of html doc? top, left, right, body, footer?

 

Well, if you're going to be using serverside scripts (like php), the .php extension is necessary (if PHP). I would imagine a RSS parser would require such scripts, although I'm not familiar with the one you mention (always made them myself).

Unless you'll be using a lot of different styles, there's no reason not to keep all of them in one stylesheet (like 'style.css') and place a link to it in your head tags.

When you're writing your content, you then place text etc. within <p class="relevant_class">Text</p>, or even better, within <div id="relevant_class">Text</div> tags.

That makes it possible to change pretty much every aspect of design and layout from your stylesheet and keep it slick looking.
The use of div's take som getting use to, but when you do, you'll be able to create great looking sites very fast...

 

ok here is the first step

http://www.earrelaphant.com/shopping/pets/doggie.html

one style sheet to center the html tables that are created from affiliate program

Now I am stuck again. I have a menu to place in the left hand margin, logo at the top, and another menu on the right that are shared for the whole site.

Is this done in the ocean.css file that I'm testing with? Then when the doggie.html file is viewed, it has all the meta tags and such.

http://www.earrelaphant.com/shopping/pets/doggie2.html

syntax is wrong with div call

 

Perhaps you should start off with something simple, just to get familiar with the concepts. Try creating 3-4 divs with different background colors and get them to line up or at least be positioned properly.

I'm not sure I understand exactly what you mean with your different files, but I suspect it's something this. (nevermind the .asp files)

When you've got the div part down, you can include your different parts into separate divs an maintain control of the style from your stylesheet.

 

a little better but not there for sure.

Thanks

 

I use variations on the Gliss style myself, that and ideas from alistapart etc. Anyway, try this.


For the style sheet:



body { background: #DCDCDC; color: black; margin: 0; padding: 0; font: normal normal 80% Verdana,Arial,Helvetica,sans-serif; }

/* ~~~~~ CSS Division settings for layout ~~~~~ */

#adbar, #menubar { width: 130px; text-align: center; }
#adbar { float: right; margin-left: auto; margin-right: 15px; }
#menubar { float: left; margin-right: auto; margin-left: 15px; }
#content { padding: 4px; margin-left: 165px; margin-right: 165px; }
#footer { clear: both; padding: 5px; margin-top: 8px; text-align: center; }

#adbar,#menubar,#content,#footer { border: thin dotted #6495ED; background: white; color: black; }



For the 'body' html / php file, in this order:

<!-- menu --><div id="menubar> ...Your menu... </div>
<!-- ads --><div id="adbar"> ... Your ads ... </div>

<!-- Main Body Content --><div id="content"> ... All your blurb ... </div>

<!-- Footer --><div id="footer"> ... Your footer ... </div>


Notes:
#name is for one use only, in association with id="name" in the html

.anothername is for repeated use, used with class="name" in the html



Also, since you are using PHP there's no reason you can't store the global content in separate files, i.e.:

<!-- logo --><?php include_once 'logo.php'; ?>

<!-- menu --><div id="menubar"><?php include_once 'thistopic/menubar.php'; ?></div>

<!-- ads --><div id="adbar"><?php include_once 'adbar.php'; ?></div>


.

I've kept it basic, but you can see how it looks here: [ http://www.ackadia.net/3col ]



.

 

Thanks for the help but I'm just not going to get there fast enough. And I'm completely without taste in layouts. I learned enough to get basic things pulled together on the site. Hopefully, I can get a few people to visit and play. Get the funtionality of the place worked out a little better then work on makeover later. Stop by yourselves and play a game or 2 in the arcade and maybe find someone to chat with.

Again,

Thanks,

Jim

Happy Holidays

 

I've finally got somewhere. I needed htaccess file to parse the html. That's why I could get anything to start. I think.

Anyway can someone tell me the correct syntax for using a line break
I thought <br> would do it and it does but causing some problems with validating.

 

I took this thing live tonight. Happy New Year. Still have a ways to go. But it's a major step forward for me. Thanks so much.

http://www.earrelaphant.com/

Now how to get it finished?

 

All things - including the meta tags in the header and labels in forms should be closed.

For line break - <br> this becomes <br />

Note that is some circumstances free floating brakes are not allowed, in which case enclosed them in, or replace them with a paragraph:

<p></p>, <p><br /></p>

In a similar fashion, <hr> becomes <hr />
Images can end in <img src="....." /> or <img src="...."?</img>

 

My external css sheet is recognized in index.html just fine.
these are 2 excerpts from the css shhets.

#title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #0033FF;
}

#normal {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
}

________

This is the call for the external page with php extention:

<div id="menubar"><? include ("earrelaphantfiles/css/templates/menu.php"); ?></div>

This part works also.

_____________
The following are the first two items in the menu.php page. I can't get them to use the css styling. I know it's just that I am confusing it. Any ideas to clear me up?
______
<p class="title">Community Menu</p>
<br />

<span class="normal"> <a href="http://www.earrelaphant.com/community/index.php"> Arcade games </a> </span>

 

I got somewhere. I chaged the css file for the things I was trying to class instead of starting with a # I used a .

Things are working still so getting somewhere. 5 includes in index page. 4 are now tableless. And look ok too. The last include has a table 2 * 8 so its going to take a while longer to strip it out.

Thanks. I'll be back when I get closer.

 

Yippe. No more tables.

Now the question. Do you set the div's to absolute postions somehow so that they don't move around?

 

Looking good!

If you keep it all in a wrapper div, you can set each div with a fixed width i pixels, just like you would using %.

Your div's don't seem to be moving around, though.