CSS "boxes" for updates

Rise · #1 Jul 1st, 2008, 14:44

Hi, I'm trying to use CSS to handle my layout and I'm working on the part that handles updates (news) where I would show say 5 or so per page. I have come up with what I think will work, but I remember reading somewhere that you shouldn't use the same div tags more than once... yet my layout does. I'm very new to making websites - it's day 2 of my web design. The colors are just for me to be able to see what exactly is going on and isn't going to be the color scheme

css:

Code: Select all

body {
   width: 600px;
   font-family: tahoma, arial;
}

h1 {
   color: White;
   padding-top: 0px;
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 0px;
   font-size: 24px;
   border: 1px solid green;
   margin: 5px;
   }

p {
  color: blue;
  background: white;
  border: 1px solid yellow;
  padding: 2px;
  margin: 5px;
  }

#boxes {
   border: 3px solid blue;
   background: black;
   padding: 5px,5px,5px,5px;
   margin: 10px;
}

html:

Code: Select all

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>

<body>

<div id="boxes">
<h1>Welcome!</h1>
<p>now that this is a box, lets put some decent amount of text into it to see how the wrapping works inside of it.  I probably need about 2 lines or so to make sure that it wraps correctly.</p>
</div>

<div id="boxes">
<h1>Welcome2!</h1>
<p>2now that this is a box, lets put some decent amount of text into it to see how the wrapping works inside of it.  I probably need about 2 lines or so to make sure that it wraps correctly.</p>
</div>

</body>

That's my test setup so far... Is this a good way of doing things? Is something like wordpress better suited for this?

moojoo · #2 Jul 1st, 2008, 14:58

You can use divs as many times as you want UNLESS the div uses an ID.

e.g. <div id="foo"> could be used ONCE per page while <div class="foo"> could be used as many times as you want. Classes in CSS are started with a period (.) while ID's start with a Hash (#). Hope that clears it up.

so in your case you should change your HTML code to this:

Code: Select all


<div class="boxes">
<h1>Welcome!</h1>
<p>now that this is a box, lets put some decent amount of text into it to see how the wrapping works inside of it.
I probably need about 2 lines or so to make sure that it wraps correctly.</p>
</div>

<div class="boxes">
<h1>Welcome2!</h1>
<p>2now that this is a box, lets put some decent amount of text into it to see how the wrapping works inside of it.
I probably need about 2 lines or so to make sure that it wraps correctly.</p>
</div>

and your CSS to:

Code: Select all

.boxes {
   border: 3px solid blue;
   background: black;
   padding: 5px,5px,5px,5px;
   margin: 10px;
}

Rise · #3 Jul 1st, 2008, 16:01

Yes it does, thank you very much! But is this a good way to regularly update your page? I would expect to update it every couple of days.

Aso · #4 Jul 1st, 2008, 16:12

If you're talking about manually inserting HTML (and if this is going to be frequent) you might want to think about going dynamic, using a database and backend system to easily update and edit content.

Don't late 'database' and 'backend' throw you off though - there's plenty of freely available blogging platforms (and content management systems) for you to set up with ease

If you're going to be posting frequent content in some form of manner as you describe, a blogging platform would most likely suit you - top two in my book are textpattern and Wordpress

Rise · #5 Jul 1st, 2008, 17:28

Thanks, Aso. I am familiar with databases having programmed a few multi-user dbs in Access so I don't think it would be too difficult to look into what you are talking about. As far as I know, Wordpress is open source and free so perhaps that's what I'll look into.

One last question on that - Does wordpress integrate into an existing xhtml/css website fairly seamlessly? Or will my layout be dictated by how WP needs to be layed out? I only ask because a website I used to visit made the change to WP and the layout went from nice to nasty in no time at all.

Aso · #6 Jul 1st, 2008, 18:15

Quote:

Or will my layout be dictated by how WP needs to be layed out? I only ask because a website I used to visit made the change to WP and the layout went from nice to nasty in no time at all.

Wordpress is extremely customisable. All in all, it simply manages the content - the theme dictates everything about how and where it is presented - see for yourself

IMO Wordpress is drop dead easy to 'theme', the easiest I've come across so far.

Best thing for you would be to install WP, read up the basics on it's very well documented 'codex' section, and just explore / modify the default theme that comes with it.

Two articles you should start with;

Then you're on your way!

Rise · #7 Jul 1st, 2008, 18:48

Thanks for your help, Aso. I'll start looking into it today!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating a "tag" system to find relevant "related" pages	MrQuestions	PHP Forum	3	Mar 20th, 2008 23:06
[SOLVED] Show "Image" Depends On User "Status"?	Monie	Classic ASP	6	Oct 16th, 2007 01:22
? IS "meta name="robots" content="?" necessary in pages ?	Love2Java	Starting Out	6	Aug 8th, 2007 13:48
window.opener.document["nameForm"].getElementById("someid").value; doesnt work	drpompeii	JavaScript Forum	0	Feb 17th, 2007 23:09
<option value="yes" class="x"> problem in Firefox	mameha1977	Web Page Design	1	Jun 21st, 2006 11:20

		Webforumz.com > Main Forums > Design Your Website > Starting Out
CSS "boxes" for updates

The Following 2 Users Say Thank You to Aso For This Useful Post:
Jack Franklin, Rise