CODEWITHSUNDEEP
htmlcss
tagalo
tagalo

Reputation: 61

CSS & HTML Square Background

Can anyone guide me, How can I create a 'almost' square background in CSS?

I want to get the brown background and have text on it with the error bullets and how to create the dotted yellow on the top right in CSS?

My working progress is here:

HTML:

<body>
    <div id="contentContainer">
        <div id="setBackground">
            <div id="header"> <span class="style1">This is LOGO </span>

                <hr />
                <div id="body_block">
                    <p class="intro">Introduction</p>

                    <h1> Back </h1>
                    Click Here

                    <h2> Next </h2>
                    Click Here

                    <p>More about Web Design:</p>
                    <p>• Bla bla bla... .</p>
                    <p>Contact:</p>
                    <p>• Bla bla bla...</p>
                    <div id="footer">
                        <!--hr class="footer"/-->
                        <p>&copy; Copyright 2013
                        <a href="">sample.com </a>|
                        <a href="">More Site </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS:

@charset"UTF-8";

/* CSS Document */
 hr {
    clear:both;
    border: 0;
    height:12px;
    width:100%;
    background-color: #993300;
}
.intro {
    color: #1e2a74;
    font-size:16px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}
#footer {
    background-color:#6994AF;
    clear: both;
    color: #FFFFFF;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    font-family:Arial, Helvetica, sans-serif;
}
#footer p {
    border-top: 1px solid #83CDE1;
    margin: 0;
    padding: 15px 0;
    text-align: left;
}
#footer a {
    text-align:right;
}
.style1 {
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}

Upvotes: 4

Views: 6157

Answers (6)

Giorgos T.
Giorgos T.

Reputation: 1

What about this? You can create a "pseudo" "hr" tag with a div :P

//IN HTML

<div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div>

//AND IN CSS

#CUSTOM_HR_WITH_TEXT {
border-radius: 10px 10px 10px 10px;
border: 0;
height: auto;
width: auto;
background-color: #993300;
color: #fff;
text-align: center;
}

Upvotes: 0

ANJYR
ANJYR

Reputation: 2623

Try border-radius properties

Example 1

Div{border-radius:10px;}

Example 2

Div{border-radius:10px 15px;}

For better information visit:- CSS-TRICKS

Upvotes: 0

thunderbird
thunderbird

Reputation: 2733

Here's the jsFiddle

Your design is really poor. You don't have to nest all divs inside one another. I changed your html a bit(just rearranged your divs and added two new divs leftDiv and rightDiv) HTML:

<body>
    <div id="contentContainer">
        <div id="setBackground">
            <div id="header"> <span class="style1">This is LOGO </span>

                <hr />
            </div>
            <div id="body_block">
                    <p class="intro">Introduction</p>

                   <h1> Back </h1>
                   Click Here

                   <h2> Next </h2>
                   Click Here




             </div>


            <div id="leftDiv">
                    <p>More about Web Design:</p>
                    <p>• Bla bla bla... .</p>
            </div>
            <div id="rightDiv">
                    <p>Contact:</p>
                    <p>• Bla bla bla...</p>
            </div>

            <div id="footer">
                    <!--hr class="footer"/-->
                    <p>
&copy; Copyright 2013
                        <a href="">sample.com </a>|
                        <a href="">More Site </a>
                        </p>
                </div>
          </div>
        </div>
    </body>

Add these rules to your CSS:

#leftDiv{
    clear:both;
    width:200px;
    background:brown;
    float:left;
    border-top-left-radius:25px;

}
#rightDiv{
    margin-left:20px;

    border-bottom-right-radius:25px;
     background:brown;
    float:left;
}

Upvotes: 0

Xarcell
Xarcell

Reputation: 2011

Border radius is what you want to look at: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

In your case, it would go something like this:

border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */

http://jsfiddle.net/spKMM/

Upvotes: 0

Rampill
Rampill

Reputation: 113

Try this out.

     border-bottom-right-radius:20px;

Upvotes: 0

Joe
Joe

Reputation: 2105

the border radius CSS attribute can help you obtain rounded corners - specifically something like this should do the trick for the pink element containing everything else.

div {
    /* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */
    border-radius: 20px 5px 20px 5px;
}

i would personally break this up into a few divs, a header and body. put the background yellow dots with color on the top div and apply border radius to the top pieces.

then place the content other divs within the body and apply those border styles for each case.

this however is just one way to do it I am sure there are plenty of other wayas.

more info about CSS Rounded borders here

Upvotes: 1

Related Questions