School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,406
  • Replies: 826,004
  • Topics: 137,453
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,606
  • Members: 118
  • Guests: 1,488

Welcome to Dream.In.Code
Become an Expert!

Join 300,406 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,606 people online right now. Registration is fast and FREE... Join Now!




coloured bars

 

coloured bars
ghqwerty

3 Jul, 2009 - 04:03 AM
Post #1

if($spareTime > 0){ $this->writeCode(); }
Group Icon

Joined: 8 Aug, 2008
Posts: 748



Thanked: 24 times
Dream Kudos: 25
My Contributions
ok so i have 3 little sections at the moment which slide down to reveal more links using jquery

now i added this bit of css to it

CODE
#slider {
color: #ffffff;
background: #336600;
width: 150px;
text-decoration: none;
}


to give it a bar of colour to make it lok better. in ie the bar stretches the correct width however in FF the bar only stretches the width of the text

User is offlineProfile CardPM
+Quote Post


BetaWar

RE: Coloured Bars

3 Jul, 2009 - 08:04 AM
Post #2

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
FF is a minimalist. Try this:
CODE
#slider {
color: #ffffff;
background: #336600;
width: 150px;
min-width: 150px;
text-decoration: none;
}
User is offlineProfile CardPM
+Quote Post

ghqwerty

RE: Coloured Bars

3 Jul, 2009 - 08:11 AM
Post #3

if($spareTime > 0){ $this->writeCode(); }
Group Icon

Joined: 8 Aug, 2008
Posts: 748



Thanked: 24 times
Dream Kudos: 25
My Contributions
ive already tried that and it doesnt work :S

havent tried it with both width and min width thoug, will try that


---------------
nope still doesnt work

This post has been edited by ghqwerty: 3 Jul, 2009 - 08:12 AM
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: Coloured Bars

3 Jul, 2009 - 08:15 AM
Post #4

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
Hm, are you using a span or div for this? They both act differently.
User is offlineProfile CardPM
+Quote Post

ghqwerty

RE: Coloured Bars

3 Jul, 2009 - 08:18 AM
Post #5

if($spareTime > 0){ $this->writeCode(); }
Group Icon

Joined: 8 Aug, 2008
Posts: 748



Thanked: 24 times
Dream Kudos: 25
My Contributions
links actually because im using jqeury, heres the bit about the link

CODE

var a = $("<a id='slider'>Forts</a><br/>").attr('href','#').addClass("btn-slide3");
    $('#panel3').before(a);
User is offlineProfile CardPM
+Quote Post

ghqwerty

RE: Coloured Bars

3 Jul, 2009 - 01:28 PM
Post #6

if($spareTime > 0){ $this->writeCode(); }
Group Icon

Joined: 8 Aug, 2008
Posts: 748



Thanked: 24 times
Dream Kudos: 25
My Contributions
changed the links to divs and it works fine, dont know why
User is offlineProfile CardPM
+Quote Post

joezim007

RE: Coloured Bars

6 Jul, 2009 - 02:40 PM
Post #7

D.I.C Head
Group Icon

Joined: 13 Sep, 2008
Posts: 83



Thanked: 4 times
Dream Kudos: 100
My Contributions
QUOTE(ghqwerty @ 3 Jul, 2009 - 02:28 PM) *

changed the links to divs and it works fine, dont know why


Links are "in-line" elements meaning that they cannot be explicitly sized and that they will not create a new line before and after it. A Div on the other hand is a "block" element meaning it can be explicitly sized and will cause a line break before and after it. So, since a div can be explicitly sized and a link cannot, the div will work for your sizing while an anchor tag won't. You'll have to look up the rest of the tags to find out what kind of elements they are, but you can explicitly set the way it is displayed using the display property in CSS:
CODE

display:"block";

or

display:"in-line";


There are also other displays like table-row and such but the first two mentioned should be enough for most people. smile.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/7/09 11:03PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month