Two Colours

**TicTac** · Sep 3, 2007, 10:51

Hiya,

Using CSS, how do I make whats in the pictures, found at the following URL?:

Also, How do I add rounded corners, using images?

http://www.freewebs.com/ticstacs/Two%20Colours.bmp

**markbrown4** · Sep 3, 2007, 15:57

Using CSS, how do I make whats in the pictures, found at the following URL?:

It depends on what you are wanting to use it for - My guess is that you are wanting to use it as a background and place text over the top. If this is the case just use it as a background image on an element.

without images - it's just 2 block level elements with background colors.

**TicTac** · Sep 3, 2007, 21:47

How do you do I without using images, using two divs instead?

TicTac

**markbrown4** · Sep 3, 2007, 23:38

That's a very easy question, maybe you need to pick up a good book to work through - I find starting out with a good book helps me pick up a topic like CSS much more easily. Bulletproof Web Design - by Dan Cederholm is excellent.

Code:

.light {
  height: 13px;
  background: #A8CC46;
}
.dark {
  height: 13px;
  background: #9EC631;
}

Code:

<div class="light"></div>
<div class="dark"></div>

**TicTac** · Sep 4, 2007, 05:51

It's not easy.
How do I get the two divs to be 5px in height?

TicTac

**DaveWoods** · Sep 4, 2007, 05:59

It's easy if you understand CSS. As Mark has said, this is something quite easy within CSS so try picking up a book however, the solution for this is:

Just change the height from 13px to 5px.

However, IE6 and below has a little bug and won't display a box smaller than it's base font so you'll need to reset those to zero.

Use Mark's HTML above and change the CSS to:

Code:

.light {
  height: 5px;
  background: #A8CC46;
  font-size: 0;
}
.dark {
  height: 5px;
  background: #9EC631;
  font-size: 0;
}

**TicTac** · Sep 4, 2007, 09:31

How do I add rounded corner images to the four corners of the two divs joined together?

TicTac

**Dr John** · Sep 4, 2007, 13:10

You use google.

There are lots of sites that will show you. Just search.

**TicTac** · Sep 5, 2007, 02:32

What do I search for?

TicTac

**DaveWoods** · Sep 5, 2007, 02:44

have you never used google?

try searching for something like

rounded corners css

there's loads of different methods. I personally create a top and bottom div and then float a div left and right with a background image in each but there are other ways.

**all4nerds** · Sep 5, 2007, 02:53

Hello

rounded corners box
http://www.smileycat.com/miaow/archives/000044.php

**TicTac** · Sep 5, 2007, 03:09

I come up with the following way of doing it, how come all but the top-left corner doesn't line up under FireFox (FF)?, but does in Internet Explorer (IE)?

http://www.freewebs.com/ticstacs/Corners/Index.html

TicTac

**DaveWoods** · Sep 5, 2007, 04:43

Presumably because you're using an incomplete doctype and therefore IE is rendering in quirks mode which is baaaad!!

Have a read of this.

http://www.alistapart.com/articles/doctype/

**TicTac** · Sep 5, 2007, 04:46

Which "DocType" should I use? Strict?

TicTac

**DaveWoods** · Sep 5, 2007, 05:17

If you've got full control over the code then I'd always use strict html4.01

There are times when you may be using a content management system where the source code isn't entirely in your control and under these circumstances I may use the transitional html doctype.

note: this won't fix the problem in firefox but it will make IE behave more like Firefox so you'll have an easier time correcting any problems

**TicTac** · Sep 5, 2007, 05:24

Where do I get the "strict html4.01" DocType from?

TicTac

**DaveWoods** · Sep 5, 2007, 06:02

The link that I mentioned above

Here's the strict html 4.01 doctype

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

**TicTac** · Sep 5, 2007, 06:15

Upon a user putting their mouse over the 2 coloured divs, how do I change the colours of the divs?

TicTac

**TicTac** · Sep 5, 2007, 06:25

Perfect! Now works in both browsers.
Cheers Mate!

TicTac

**DaveWoods** · Sep 5, 2007, 06:31

Sorry if this sounds harsh but you really need to learn how to use google or invest in buying a book that teaches you the basics of HTML and CSS that you can work through.

Here's an example that I found through google though

http://www.smileycat.com/miaow/archi...lock-hover.php

I would suggest buying a book though or trying to put your own site together and come for advice when you get stuck

**all4nerds** · Sep 5, 2007, 06:51

Hello

Or start using a little free Editor, my first one in 1996 ? was Hotdog

**TicTac** · Sep 5, 2007, 07:14

CSSWIZ,

How come the images don't nest inside the "Light" div?

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>

<body>
<div class="light">
<img class="Corner_TL" src="Corner_TL.bmp">
<img class="Corner_TR" src="Corner_TR.bmp">
</div>
<div class="dark"></div>
</body>
</html>

CSS:

Code:

.light
{
  width: 57px;
  height: 15px;
  background: RGB(150,195,26);
  font-size: 0;
}
.dark
{
  width: 57px;
  height: 13px;
  background: RGB(138,188,0);
  font-size: 0;
}

.Corner_TL
{
  TOP: 0px;
  LEFT: 0px;
  POSITION: absolute;
}

.Corner_TR
{
  TOP: 0px;
  LEFT: 100px;
  POSITION: absolute;
}

TicTac

**all4nerds** · Sep 5, 2007, 07:21

Hello

because position absolutes are related to a starting point (left top) of the screen, a position relative can move that starting point , so something probably needs a position relative

PS Looks to me your on a crash course HTML Editing , rounded corner boxes are not exactly the first thing to start with

**TicTac** · Sep 5, 2007, 07:23

PS Looks to me your on a crash course HTML Editing , rounded corner boxes are not exactly the first thing to start with

What do you mean?

TicTac

**DaveWoods** · Sep 5, 2007, 07:45

He means that you're starting with some complex methods but don't understand the basics. Take things one step at a time, if you don't understand what position absolute and relative are for then you shouldn't be using them

The SitePoint Forums have moved.

User Tag List

Thread: Two Colours

Thread Tools

Display

Two Colours

Two Colours

Two Colours

Two Colours

Bookmarks

Bookmarks

Posting Permissions