CSS Content Boxes - Webmaster Forum - Web Design, Programming and SEO forums

11-08-2005, 10:33 PM

Yang

Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:

Posts: 460

iTrader: 0 / 0%

Yang is on a distinguished road

CSS Content Boxes

I'm just wondering if I'm doing this correctly. You know those content boxes on www.yahoo.com 's Weather/In The News/Marketplace. It has a header (with purple background) and the content area.

This is how i do it with CSS

CSS Code:

Code:

.header { 
width: 100px; 
background-color: purple;
padding: 5..pxem;
margin: 0;
}

.content {
width: 100px;
padding: 5px;
border: 1px solid purple;
}

HTML CODE:

Code:

<body>

<div class="header">In Th News</div>
<div class="content">Content flows here</div>

</body>

It seems annoying to insert both the header and content div's everytime you want a new content box. Is there an easier way?

11-08-2005, 11:00 PM

xZaft

Status: Member
Join date: Jul 2005
Location: Massachusetts, US
Expertise:
Software:

Posts: 428

iTrader: 0 / 0%

xZaft is on a distinguished road

I have never come across one, so I assume it is the only way to do it.

11-08-2005, 11:04 PM

nathomusic

Status: Senior Member
Join date: Mar 2005
Location: England
Expertise:
Software:

Posts: 974

iTrader: 0 / 0%

nathomusic is on a distinguished road

If your not supplying the exact pixels, you will need a container DIV in there aswell or else the box will go right accross your page.

11-08-2005, 11:10 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

A better way would be to have the header div inside of the boxes div.

Code:

<div id="content">

		<div id="header">Header Text Here</div>

		 Content Text Here

</div>

Code:

div#content
{
	 width: 100px;
	 background: light purple;
	 border: 1px solid purple;
}
div#header
 {
 	 background: purple;
 }

That's how I would do it, but your way should do it fine.

11-08-2005, 11:11 PM

jono1

Status: Non-conformist
Join date: Jul 2005
Location: Canberra, Australia.
Expertise:
Software:

Posts: 1,172

iTrader: 0 / 0%

jono1 is on a distinguished road

I would do it something along the lines of
css:

Code:

.contentbox {
	width: 350px;
	background: #FFF;
	border: 1px solid purple;
	}
.contentbox h1 {
	color: #FFF;
	display: block;
	width: 100%;
	height: 18px;
	background: purple;
	font-size: 12px;
	margin: 0px;
	padding: 2px;
}
.contentbox p {
	margin: 5px;
}

Code:

<div class="contentbox">
	<h1>In the news today</h1>
	<p>Sed metus tortor, molestie a, euismod vitae, porttitor non, nulla. Curabitur semper dui. Nunc nec enim non sem tempus tempor. Duis nulla pede, condimentum pellentesque, tristique mattis, posuere ac, pede. Morbi varius semper est. Aliquam pulvinar fermentum nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis eu purus nec lectus pharetra ultricies. Quisque tincidunt leo sed velit. Quisque tempor luctus dui. Fusce consectetuer risus ac urna. Donec nec metus id pede congue tempor. Cras at augue. Nam at ipsum. Donec ac sapien ac tortor vulputate bibendum. Integer interdum mi vel risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

its just a little faster typing <h1> instead of <div class="header"> or whatever.

11-08-2005, 11:31 PM

Yang

Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:

Posts: 460

iTrader: 0 / 0%

Yang is on a distinguished road

Originally Posted by jono1

its just a little faster typing <h1> instead of <div class="header"> or whatever.

Makes sense

You too Jonny.

Thanks for the replies.

11-09-2005, 07:46 AM

Techno

Status: Sin Binner
Join date: Jul 2005
Location: Yorkshire, UK
Expertise:
Software:

Posts: 3,709

iTrader: 1 / 100%

Techno is on a distinguished road

I'm also looking for this so it will be intresting to see how this topic devolps.

11-09-2005, 05:29 PM

KoMiT

Status: Junior Member
Join date: Apr 2005
Location:
Expertise:
Software:

Posts: 94

iTrader: 0 / 0%

KoMiT is on a distinguished road

the way I do it, (Im no expert but it works)

Code:

#divname {
       width: 191px;
	height: 196px;
	background-image: url(images/bgimage.png); }

then my text

.header1 {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 9pt; }

and then in my html like this

Code:

<div id="divname"><span class="header">

Text Here

</span></div>

11-14-2005, 08:57 PM

Yang

Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:

Posts: 460

iTrader: 0 / 0%

Yang is on a distinguished road

So great, i have that mastered... does anyone have any idea to code this one?

See the Windows Control Panel icon on the left of the header? I would assume that the image is placed on the header and then given a z-index value of 1... Anyone knows?

11-14-2005, 10:35 PM

#10

bcd

Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:

Posts: 96

iTrader: 0 / 0%

bcd is on a distinguished road

Originally Posted by dumbc0der

So great, i have that mastered... does anyone have any idea to code this one?

See the Windows Control Panel icon on the left of the header? I would assume that the image is placed on the header and then given a z-index value of 1... Anyone knows?

I'd do something along the lines of this (just creating as I type):

Code:

HTML:

<div>
<h1>Header</h1>
<p>Content blah blah</p>
</div>

Code:

CSS:

div {
  background: #fff url(...) top left no-repeat;
  border: 1px solid navy;
  padding: 4px;
}
h1 {
  background-color: navy;
  color: #fff;
  font-size: 140%;
}
p {
  color: #333;
  margin-left: 3px;
}

Not sure if that'd work, maybe someone could test it out?