Jump to content
brynn

remove background color of columns

Recommended Posts

Hi Friends,

I'll probably never be more than a beginner with CSS and HTML.  I have relatively simple needs.  From my simple knowledge, I'm guessing the background color must be coming from the CSS rather than from the HTML, but I could be wrong, and I could be posting in the wrong board.  So please move this if necessary. 

Currently, I'm trying to create 4 columns using this code which I found here:  https://www.w3schools.com/howto/howto_css_four_columns.asp

* {
    box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

 

The problem is the gray background colors behind each column.  I don't want any background color, so that what's behind the columns is the same as what's behind the whole page (which is an image) (a denim fabric - well let me just show you the whole current page, where I have not added the columns yet - https://forum.inkscapecommunity.com/index.php - of course my code only affects part of that page, which I think should be obvious, but if not, I can explain.)

But I can't figure out how to get rid of the gray background colors.  I thought of adding background-color to the .column class, but I don't actually want any color there.

Is there some way to get rid of those gray colors and still use that code?  Or should I look for another solution, like maybe make a table?  Because I may end up with....geez, 3 or 4 rows of 4 columns.  Maybe a table would be better in the end?

Thank you very much 🙂

Share this post


Link to post
Share on other sites

The grey colours are coming from the html div with inline css styling, the  style="background-color:#aaa;" part, because it is inline, it will have a higher precedence over any background colour used in the .column class, in you 1st post.

 <div class="column" style="background-color:#aaa;">
 

 

Share this post


Link to post
Share on other sites

Ooohh, I see it now!

Thank you very much.

Now I have realized that a table might be a better idea.  I have a question about the table, but I'll start a new topic, since it's a whole different subject.

Thanks again!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×