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

    Hoping For Quick Reply, Noobie With This Forum and CSS rounded Corners & Divs

    Good Afternoon All,

    Hope you are having a great Wednesday. Happy Hump Day. LOL

    Any who, I am in need of trying to get my layout fixed.
    I have a lot of code already in it and I am not sure where I am messing up at. I want to have
    three rounded boxes, one for header, body, footer. Keep it a uniformed rounded look.

    I attached and uploaded the files. I could only upload the css4.css file but the link is listed below.

    I need help to make the rounded theme look be in the middle and the rounded black borders to go exactly around the rounded themes.

    Can anyone show me the correct code or fix my code for me and maybe post the corrections on pastebin.com for me.
    I would really appreciate it. I am trying to learn this rounded theme look. Do you like the look that I am creating?

    Rio Tanning 2.0
    it is using css4.css


    A two parted question:

    The second question, Is rounded corners still the current excitement. I know responsive design is the new craze, what else am I missing or should learn?
    You can also email me off list if you want. my email is in my profile.

    I am hoping for a answer before 5pm est if it's not to much trouble. Trying to get this theme down so I can continue. There are only going to be three links on this page as you can tell.
    Products | Accessories | ContactUS

    Thanks, karl
    Attached Files Attached Files

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Hi Karl,

    I hope it’s not too late to reply yet? Anyway, you have lots of crazy things going on there, lots of duplications that make it hard to determine what’s the actual goal. How wide should the boxes generally be? I see at least three different widths.

    One thing to keep in mind is that by default paddings and borders add to the overall width of an element. So if you specify a div to be 500px wide and add 10px padding and a 2px border on each side you end up with a div that’s 524px wide. There is CSS to change that behavior but as I’m thinking practically I wouldn’t recommend it just yet since there are older but still popular browsers that don’t support it yet. And in your case it’s not even crucial so we’re gonna ignore this for now.

    So, having had a second thought, it looks like you have specified a width of 500px multiple times so apparently this is where you want to go. You should make better use of the CSS selectors. You have several divs with class “content” that have a different purpose/meaning so it doesn’t suffice to just have .content {…} in the CSS if you need to apply very specific styles. The outermost element(s) set the overall width of the content. I would recommend you wrap a div around all your elements and call it “container”, for example, i. e.:
    Code:
    <body>
    <div id="container">
    <div class='header round ' style='background-color:#269999;'>
        <div class='content top' style='background-color:#269999;'>
             <h1><img src="http://www.riotanning.com/rio_tanning_2.0/images/riotanninglogobanner.png" width="700" height="160"></h1>
    
        </div>
    </div>
    <!-- You should put here -->
    <p class="navigation content">Products | Accessories | Contact US
        <br>
        <img src="http://www.riotanning.com/rio_tanning_2.0/images/blame_on_rio_thumb_whitebackground.jpg" width="317" height="443">
    </p>
    <div class='clear'></div>
    <div class='footer round' style='background-color:#269999;'>
        <div class='content footer'>
            <!-- will not working because the height will be 0-->
            <div class='clear'></div>
             <h1>Test</h1>
    
        </div>
    </div>
    </div>
    </body>
    Now, with this container you can set the overall width one time and all elements inside will adapt accordingly. That also saves you a lot of repetition in your CSS.
    Code:
    #container {
      width: 500px;
      margin: 0 auto;
    }
    Now you can concentrate on the styling of the boxes, and you don’t have to apply any widths anymore since they will just be as wide as the container. You can then do:
    Code:
    .header, .navigation, .footer {
      border-radius: 10px;
    }
    .header, .footer {
      background-color: #269999;
      padding: 2px;
    }
    .content {padding: 8px;}
    .header .content, .footer .content {
      border: 4px solid black;
      border-radius: 8px;
    }
    And this should be it for the boxes.

    On another note: you should always specify a general page background color, font family, and text and link colors because these things can be changed by the users in their browser settings unless they are specifically set by you. Specifically, you forgot to set a background color on the body (body {background-color: white;}, for example), you cannot assume that everybody has the same browser settings as you and therefore sees a white background by default as you most likely do.

    Now, as to your second question: The question itself is actually wrong. First of all, you shouldn’t only do what you think is the “current excitement”. And secondly, good design doesn’t just randomly throw together what is considered as current excitement, good design uses whatever is appropriate to get the message across. Rounded corners can be tasteful or awful at any time, it depends on how they are used. But this is a very wide field for which some people study a few years to get a university degree on. For you to get an idea it helps to read 9 Essential Principles for Good Web Design - Tuts+ Design & Illustration Tutorial


  •  

    Posting Permissions

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