SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 26
Thread: Two Colours
-
Sep 3, 2007, 11:51 #1
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Two Colours
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
-
Sep 3, 2007, 16:57 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Using CSS, how do I make whats in the pictures, found at the following URL?:
without images - it's just 2 block level elements with background colors.
-
Sep 3, 2007, 22:47 #3
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Two Colours
How do you do I without using images, using two divs instead?
TicTac
-
Sep 4, 2007, 00:38 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
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>
-
Sep 4, 2007, 06:51 #5
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's not easy.
How do I get the two divs to be 5px in height?
TicTac
-
Sep 4, 2007, 06:59 #6
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
-
Sep 4, 2007, 10:31 #7
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Two Colours
How do I add rounded corner images to the four corners of the two divs joined together?
TicTac
-
Sep 4, 2007, 14:10 #8
- Join Date
- Jul 2003
- Location
- Kent
- Posts
- 1,921
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
You use google.
There are lots of sites that will show you. Just search.Dr John
www.kidneydialysis.org.uk
-
Sep 5, 2007, 03:32 #9
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What do I search for?
TicTac
-
Sep 5, 2007, 03:44 #10
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 5, 2007, 03:53 #11
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
rounded corners box
http://www.smileycat.com/miaow/archives/000044.php
-
Sep 5, 2007, 04:09 #12
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 5, 2007, 05:43 #13
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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/
-
Sep 5, 2007, 05:46 #14
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Which "DocType" should I use? Strict?
TicTac
-
Sep 5, 2007, 06:17 #15
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 5, 2007, 06:24 #16
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Where do I get the "strict html4.01" DocType from?
TicTac
-
Sep 5, 2007, 07:02 #17
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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">
-
Sep 5, 2007, 07:15 #18
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Upon a user putting their mouse over the 2 coloured divs, how do I change the colours of the divs?
TicTac
-
Sep 5, 2007, 07:25 #19
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Perfect! Now works in both browsers.
Cheers Mate!
TicTac
-
Sep 5, 2007, 07:31 #20
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 5, 2007, 07:51 #21
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Or start using a little free Editor, my first one in 1996 ? was Hotdog
-
Sep 5, 2007, 08:14 #22
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Two Colours
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>
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; }
-
Sep 5, 2007, 08:21 #23
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 5, 2007, 08:23 #24
- Join Date
- Aug 2007
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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, 08:45 #25
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Bookmarks