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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Div/image problem. Think this is an easy one.

    Hi there,

    This is my my first website in over 10 years. At first I made it using html, tabels & iframes (as back in the days) but decided to remake it using css for the first time ever.

    In dreamweaver it looks good but in all my browsers, safari, firefox, chrome and opera it "breaks" or rather two of the pictures are placed wrong.

    The divs are in the right place, same size as the pictures.

    The problem can be seen here:
    http://www.flaw.se/test/test.html

    This is how it should look like:
    http://www.flaw.se/test/test.jpg

    Right click on the page for the source code in test.html...

    Been trying a cuple of things but non works. Guess its just a simple extra line that could fix this..

    CSS code for all the divs:

    Code:
     
    
    * { padding: 0; margin: 0; }
    
    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     margin: 0px 0px 0px 0px;
     background-image:url(../layout/bg1.png)
    }
    #wrapper { 
     margin: 0 auto;
     height: 588px;
     width: 991px;
    }
    #logo {
     width: 991px;
     float: left;
     padding: 0px;
     border: 0px solid #ccc;
     height: 132px;
     margin: 0px 0px 0px 0px;
    }
    #uppekant {
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     width: 991px;
     height: 7px;
     float: left;
    }
    #navigering1 {
     float: left;
     width: 24px;
     height: 39px;
     color: #333;
     padding: 0px;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
    }
    #navigering2 {
     float: left;
     width: 460px;
     height: 39px;
     color: #333;
     padding: 0px;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
    }
    #navigering3 {
     float: left;
     width: 66px;
     height: 39px;
     color: #333;
     padding: 0px;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
    }
    #navigering4 {
     float: left;
     width: 367px;
     height: 39px;
     color: #333;
     padding: 0px;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
    }
    #navigering5 {
     float: left;
     width: 74px;
     height: 39px;
     color: #333;
     padding: 0px;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
    }
    #vansterkant { 
     color: #333;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     height: 363px;
     width: 8px;
     float: left;
    }
    #vansterruta { 
     color: #333;
     border: 0px solid #ccc;
     background: #FFFFFF;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     height: 363px;
     width: 491px;
     float: left;
    }
    #mittenbreak { 
     color: #333;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     height: 363px;
     width: 36px;
     float: left;
    }
    #hogerruta { 
     color: #333;
     border: 0px solid #ccc;
     background: #FFFFFF;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     height: 363px;
     width: 448px;
     float: left;
    }
    #hogerkant { 
     color: #333;
     border: 0px solid #ccc;
     margin: 0px 0px 0px 0px;
     padding: 0px;
     height: 363px;
     width: 8px;
     float: left;
    }
    #nerekant {
     width: 991px;
     float: left;
     padding: 0px;
     border: 0px solid #ccc;
     height: 7px;
     margin: 0px 0px 0px 0px;
    }
    #copyright { 
     width: 991px;
     height: 40px;
     clear: both;
     color: #333;
     border: 0px solid #ccc;
     background: none;
     margin: 0px 0px 10px 0px;
     padding: 0px;
    }

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    I'd suggest using the radius attribute, rather than images to get curved corners. Other than that, what else seems to be the problem?

  • Users who have thanked ASTP001 for this post:

    patrikmonka (09-04-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow i will look in to that. Guess i will have to remake the page once again then..

    This is how the page looks for me in all my browsers.
    http://www.flaw.se/test/problem.jpg

    Does it look right on yours?

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    I don't see the text in the right hand box.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You have defined

    Code:
    * {
     padding: 0;
     margin: 0; }
    so there is no need to define following code again and again in each class

    Code:
    margin: 0px 0px 10px 0px;
     padding: 0px;

  • Users who have thanked vikram1vicky for this post:

    patrikmonka (09-04-2011)

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Once again, big thanks!

    It feels like the page is 80% smaller now when i remade it using css

    The main problem is solved since i took the advice of radius attribute instead of images. It made the 2 boxes go from 7divs to 3divs. Incredible!

    Also took away all the unnecessary padding & margin, gracias.


    Please take a look at:
    http://www.flaw.se/test/test.jpg

    Focus on the left box. Is there a way to make the corners around the image using css? Actually i was planing to use a slider in there, you will get it from the layout. But is that possible or rather is it really hard or??

  • #7
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 309 Times in 308 Posts
    You can apply the same border-radius stuff to the img tag for that image, to give it rounded corners.

    Dave


  •  

    Posting Permissions

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