Shapes and CSS?

[Yuiichi]

Web developers,

I'm in the process of coding out a design for my blog and seem to have hit a snag. I want to make a rectangular box (dimensions: 45px w / 79px h) for the date, but can't seem to figure out how to do so. I would like to know if it's possible and how to do it!

Also, I'd like some advice on where I can learn html/css. Any resources anyone can think of that really helped them?

Thanks in advance!

[baseballboy828]

You could set a div and put the date in it, specifying the hight/width you want. Then go into your CSS and style that however you want (background, border, etc.). I'm no expert, but that's how I'd do it.

Example:

HTML:

<div id="date">INSERT DATE CODE HERE, (PHP, I ASSUME)</div>

CSS:

#date {
   background-color: #000;
   border-style: solid;
   border-color: #9c9c9c;
   color: #fff;
}

Which would produce:



Good luck!

[Yuiichi]

Thanks for the advice BBB. I think it's going to be a little more complicated, just due to my usage.

Basically, this is for date "tabs", so it's going to be sticking out from the rest of the design. The main content part is a larger rectangle and these date tabs are going to be sticking out at the left side. As an example, something like this, but long instead of wide and the month on top of the day.

[J Walk]

I think I know what you need to do.

Say your main content area is 500px wide, with 10px padding on both the left and right side. In the main content area, you have all of your separate posts, with a div class of "post". Here's what it would look like:

<div class="post">
<div class="date">
<p>Aug<br />1</p>
</div></div>

And here's the CSS: (weird, it's in a scrolling box)

.date {
position: absolute;
right: 480px;
width: 45px;
height: 79px;
}

Sorry if that sounds confusing for you, but you'll pick up on it in no time. My best advise is to learn (X)HTML and CSS by trial and error and plenty of Google searches. That's what worked for me.

Let me know if you need any other help with your website, as I'd be glad to help.

[baseballboy828]

JWalk's CSS didn't all show up (seemingly because of the indents), so I reposted it below.

.date {
position: absolute;
right: 480px;
width: 45px;
height: 79px;
}

[Yuiichi]

Thanks for the help guys!

Well, it's with that that I've kind of got a problem. My layout has 3 elements that need to be placed right in order for it to work. The first is the header, the second is the RSS button, and the third is the content. These all link together right at the top of the page. I've got it working within Coda's preview window but unfortunately, this doesn't translate to the real web.

I'm wondering if there's a way that I can make the header and content of the page always be in the center and the RSS button placed relative to the other two? I've got them all setup with absolute positions which doesn't seem to work.

Also, it's with this that I think J Walk's code snippit might work. Right now, it's more or less sitting in the middle of the content

[Shpigford]

Just an FYI, it's generally easier to help you figure out what you want to do if you have an image showing what you ultimately want to do. It's hard to follow all of the "I want X to be below Y and Z to the right of X" stuff.

[Yuiichi]

Yeah, I thought of that. Okay - here's the design mockup.



I didn't want to let the cat out of the bag so early, but I guess I really have no choice, do I?

[Shpigford]

Great. That helps a lot.

One mistake people new to using CSS make (no offense) is that they try to absolute position everything. It's not necessarily the wrong way to do it, but you'll find out pretty quickly that it's just not really the most convenient way to do stuff.

For something like this, I'd have 3 main blocks here.

I'd have "wrapper" to wrap and position the overall design.

I'd have "header" for everything including and above the round bubbly cloudy thingies.

I'd have "content" to hold all of the posts.

The only thing I'd absolute position here is that RSS button. The trick here is to position the button absolute, but position its containing element as relative.

So, all of that being said, you might have something like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css" media="screen">
		#wrapper {
			width: 690px;
			margin: 0 auto;
		}
		#header {
			position: relative;
		}
		#header h1 {
			margin: 100px 0 0 30px;
		}
		#rssfeed {
			position: absolute;
			top: 20px;
			right: 50px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1><a href="http://theappleblog.com/community/development/2299-shapes-css/#">therewasecake</a></h1>
			<a href="http://theappleblog.com/community/development/2299-shapes-css/#" id="rssfeed">RSS Button</a>
		</div>
		<div id="content">
			<!-- Post listing goes here -->
		</div>
	</div>
</body>
</html>

Having the position: relative on the containing element contains any absolutely positioned elements to that area.

I know that might be a lot to take in so just let me know if you have any questions.

[Yuiichi]

Thanks for the help Josh - that solved a few problems. I thought it was wrong to position everything absolutely, I just didn't know how relative positioning worked.

I would like to know why you've chose 690px for the wrapper width though.

So, I have a few more problems with the layout.

1. While my header is perfectly center, the posts are around 20 to 30 pixels to the right and about 10 down from the "icing" header.
2. The candle (RSS button) is now on the left, beside the icing.
3. I still don't know how to make the dates appear like tabs.
4. The titles of the posts (which are supposed to be highlighted orange) have the highlighting following the entire line, not stopping after the title is done.

If anyone can help with any of those issues, I'd be grateful!