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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...