Solved

make background-color fill the div block

Posted on 2011-03-21
5
691 Views
Last Modified: 2012-08-13
http://asqastage.esa.edu.au/subscribe-for-updates.html

how do you make the dark grey background colour (#E5E4E4) in 'subscribe me to:' and 'i am a:' go down to the same level as it's corresponding input field?

The other fields dont have the same problem because chracters in their respective divs fit in one line.


0
Comment
Question by:jeremyll
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
label's background-color is
rgb(229, 228, 228);

and the input field's is
rgb(241, 241, 241);

In style.css, you need to change
.formContainer .column1Item {
      background-color:#e5e4e4;color:#444444;padding:10px;font-weight:bold;margin:0;float:left;width:188px; font-size:0.875em;
}

with

.formContainer .column1Item {
      background-color:rgb(241, 241, 241);
      color:#444444;padding:10px;font-weight:bold;margin:0;float:left;width:188px; font-size:0.875em;
}
0
 

Author Comment

by:jeremyll
Comment Utility
Thanks gurvinder372

I don't think I've explained my question clearly.

The label's background-color is meant to be rgb(229, 228, 228);

I'm not worried about the color. The labels with the dark grey background color is meant to fill up so that there are no white areas which 'subscribe me to:' and 'i am a:' has. There's just a 1px gap between the label div and the input div.

0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 150 total points
Comment Utility
It's a matter of div's height, that you cant control without javascript.:
You need a script that checks each "input" div's height and assigns the same height to the "label" div.
My 50 cents, put it all in a 2 columns table and forget all about it, or add the following rule to the CSS
.formContainer
{
   background-color: #E5E4E4;
}

Open in new window

0
 
LVL 11

Accepted Solution

by:
mattibutt earned 350 total points
Comment Utility
hello mate,

try adding: style="height:159px;"

just like this...

<div class="column1Item" style="height:159px;">I am a: </div>


and: style="height:60px;"

just like this...

<div class="column1Item" style="height:60px;">Subscribe me to: </div>

the reason why i have done in-line CSS styling is because your classes have the same name, you can do this in your external CSS too if you like, you just have to add a new and different named ID to each field and call them in your code, it is the same thing anyway just 2 different ways of doing it...


Cheers

0
 

Author Comment

by:jeremyll
Comment Utility
wow, thanks guys. I'm conviced that I just have to put a fixed height. was hoping to use an 'auto' value somewhere to 'auto fill'. there goes that idea.

Thanks!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now