Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    images and text surrounded by wrong colour!

    I have created a css file with the following info:


    [CODE]* { padding: 0; margin: 0; background:#2ECCFA; }
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    }

    a {
    text-decoration:none;
    }

    p
    {
    font-family:"Times New Roman",Georgia,Serif;
    font-size: 15px;
    background:#FFFFFF;
    }

    #wrapper {
    margin: 0 auto;
    width: 922px;
    background:#2ECCFA;

    }
    #header {
    color: #333;
    width: 900px;
    float: left;
    padding: 10px;
    border: 1px solid #ccc;
    height: 125px;
    margin: 10px 0px 0px 0px;
    background:#FFFFFF;
    }
    #navigation {
    float: left;
    width: 900px;
    height: 10px;
    padding: 10px;
    color: #333;
    border: 1px solid #ccc;
    margin: 0px 0px 0px 0px;
    background:#FFFFFF;
    }
    #banner {
    float: left;
    width: 800px;
    height: 230px;
    color: #333;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 0px 0px 0px 0px;
    background-color:#FFFFFF;
    }
    #rightadvert {
    float: right;
    width: 78px;
    height: 230px;
    color: #333;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 0px 0px 0px 0px;
    background-color:#FFFFFF;[CODE]

    The problem I am having is when i want to add an image or a link or change any font or font size in the index file it brings the background colour through to the layout.
    i.e If I want certain words in the #rightadvert section in Bold, as soon as i put in the B tag then the writing is surrounded by the blue background colour and not the white which I have stated in the css.

    I am new so it's probably simple but it's very annoying!!

    Hope someone can help!

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    It would be easier to see what is going on if you post your html as well.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I am new so it's probably simple but it's very annoying!!
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't posted it online yet I am just opening my code from my desktop with a browser!

    The code for the html is basically this:

    [CODE]<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>General Communications</title>
    <link rel="stylesheet" type="text/css" href="main.css" />

    </head>

    <body>
    <!-- Begin right advert -->
    <div id="rightadvert">

    <a href="http://www.facebook.com"><img src="facebooklogo.jpg"></a>



    </div>
    <!-- End right advert -->
    <!-- Begin Left Column -->
    <div id="leftcolumn" >
    <p><font size="7">G</font>eneral Communications is an independent telecommunications company established in 1990..</p>
    </div>
    <!-- End Left Column -->[CODE]

    The facebook logo is underlined with the background colour and the big G in the text leftcolumn area is surrounded by the background colour.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Remove background-color from *{}

    Code:
    * { padding: 0; margin: 0; background:#2ECCFA; }
    Because above code sets background-color default for all elements.

    Also you img tag is invalid.

    Use following:

    Code:
    <img src="facebook.gif" alt="facebook" />
    Cheers
    Last edited by vikram1vicky; 07-14-2011 at 01:03 PM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    From the description, you may perhaps need the following in your CSS
    Code:
    a img{
    border:none;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •