I have some test boxes that popup with information when you put your cursor over a link. The current design kind of look boring, I wanted to see if you guys had any suggestions about maybe font style or color, or background color or something of the text boxes that will jazz it up or make them look better, please take a look @ http://www.mepledge.com

they are the ones that popup when you put your cursor over the what, why, and how buttons. Thank You

anybody?

It's really very simple. Just go into styles.css and modify the css.

- Steve

yes the color not looks good and alignment need to be changed.

could you be more specific please. Ya I was having quite a bit of trouble witht the alignment. I agree the the background and text are really bland. I dont know what I should do to jazz them up though. Any suggestions?.

1) Learn CSS. This is a good place to learn.

2) Go into styles.css

3) Modify the following code to your heart's desire:

ul#navbar li div.popup h1{
margin:40px auto;
width:90%;
}
ul#navbar li div.popup h2{
margin:60px auto;
width:90%;
}
ul#navbar li div.popup h3{
margin:15px auto;
width:90%;
}
ul#navbar li div.popup{
    background-image:url(images/textboxbackground.jpg) ; /* replace "none" with the image location - e.g. background-image:images/border.png; */
     background-repeat:no-repeat;
        color:#cccccc;
    width:500px;
        height:400px;
        font-style:italic;
        font-weight:600;
/* set position */
    float:left;
    position:absolute;
    top:100px;
    margin-left:299px;
/* hide popup */
    display: none;
}

ul#navbar li:hover div.popup{
/* display popup */
    display: block;
}

- Steve

Btw, in Opera, the text in the 'What' and 'How' boxes is out of the box at the very bottom, I would double check that. But if that's not a concern to you, I have to say it looks good in firefox 3.

Originally Posted by stevej

1) Learn CSS. This is a good place to learn.

2) Go into styles.css

3) Modify the following code to your heart's desire:

ul#navbar li div.popup h1{
margin:40px auto;
width:90%;
}
ul#navbar li div.popup h2{
margin:60px auto;
width:90%;
}
ul#navbar li div.popup h3{
margin:15px auto;
width:90%;
}
ul#navbar li div.popup{
    background-image:url(images/textboxbackground.jpg) ; /* replace "none" with the image location - e.g. background-image:images/border.png; */
     background-repeat:no-repeat;
        color:#cccccc;
    width:500px;
        height:400px;
        font-style:italic;
        font-weight:600;
/* set position */
    float:left;
    position:absolute;
    top:100px;
    margin-left:299px;
/* hide popup */
    display: none;
}

ul#navbar li:hover div.popup{
/* display popup */
    display: block;
}

- Steve

I programed like 95% of the css. I know how to make changes I just dont know what changes I should make.

I programed like 95% of the css. I know how to make changes I just dont know what changes I should make.

Wait a minute... do you want to make it look different, or do you want to fix a specific problem?

- Steve

Sorry for not being clear. I want to make my popups look different. I think they are bland the way they are currently and was looking for suggestions on how I can spice them up.