Clever Geek Handbook

Make a div with a curve?

This looks like a vague question, but you will see what exactly I want, after you read this, I have a design that I have to "convert" to a static HTML page, but I don't understand how.

Design:

http://i.imgur.com/KC3KqLA.png

The curve im says where the logo is and the other is at the bottom.

What I have so far (a little messy):

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #eee url(images/body-bg.jpg) center top no-repeat;
}

#container {
	width: 80%; margin: 0 auto; height:1000px; margin-top: -75px; background-color: blue;
}

#destaques {
	width:100%;
	height: 40%;
	background-color: grey;
}

#header {
    overflow: hidden;
	padding: 0 0 50px 0;
}

#mllcont {
	height:200px;
	background-color: grey;
}

#slidecont {
	height: 650px;
	background-color: red;
}

#squares {
   width:100%;
   height:250px;
}

#divs div { 
        height: 250px; 
        width: 20%; 
        border: 0px solid red; 
        margin-left: 2.5%; 
        margin-right: 2.5%; 
        float: left; /*Here you can also use display: inline-block instead of float:left*/
        background: orange; 
}

	#header h1 {
		float: left;
	}


#content, #footer, #header  {
	height: 100%;
}
      

        
        
        
      

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Particle</title>

<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

	<div id="slidecont">

		<div id="mllcont">

			<div id="logo">
			</div>

			<div id="header">
					<ul id="categories">
						<li><a href="#">Menu1</a></li>
						<li><a href="#">Menu2</a></li>
						<li><a href="#">Menu3</a></li>
						<li><a href="#">Menu4</a></li>
					</ul>
			</div>

			<div id="languages">
			</div>

		</div>
		</div>

	<div id="container">

			<div id="squares">
			    <div id="divs">
				      <div>One</div>
				      <div>Two</div>
				      <div>Three</div>
				      <div>Four</div>
			    </div>
			</div>	

			<div id="destaques">

			</div>
			
			<div id="Projetos">

			</div>

	</div>	

		<div id="footer">
			<ul id="credits">
				<li><a href="http://wordpress.org" class="wordpress">Powered by WordPress</a></li>
				<li><a href="http://www.blog.spoongraphics.co.uk" class="spoongraphics">Theme by SpoonGraphics</a></li>
			</ul>
			<p id="back-top"><a href="#header">Back to top</a></p>
		</div>
	</div>


</body>
</html>
Run codeHide result


+3


source to share


1 answer


You can use transparent background images (.png or .gif) and assign their positions in each div, and also use absolutely positioned divs with z-index geriarchy to achieve the visual effect you are after, although if the site needs to be representative of the layout. you have a lot of work for you using this method.

For example, extract the top curve (white bit and blue bit) in your selected image editor, leaving the background transparent and save it correctly. Then this is just a case of using code line by line:

//STYLES CSS
.splash{
   background-image:url("icewater.jpg");
   width:1289px;
   height:513px;
   position:relative;
   z-index:1;
}
.top-curved-section{
   position:relative;
   top:0;
   left:0;
   z-index:2;
   background-image:url("blue-white-curve.gif");
   background-repeat:no-repeat;
   background-position:top left;
//Padding to get your logo element to display properly
   padding: 20px 0 0 20px;
//These heights are guesses to force the size of the div for background image
   width:400px;
   height:150px;
}

HTML, in its most simplified form:



    <div class="splash">
<div class="top-curved-section">
<img src="yourlogo.png" alt="Your Logo">
</div>
</div>

Hope this helps you and helps you. This code has not been tested. You can apply the same principle to the bottom curved section of your splash page using:

.bottom-curved-section{
       position:relative;
       bottom:0;
       right:0;
       text-align:right;
       z-index:2;
       background-image:url("blue-white-curve2.gif");
       background-repeat:no-repeat;
    background-position:bottom right;
    //Padding to get your logo element to display properly
       padding: 0 20px 20px 0;
    //These heights are guesses to force the size of the div for background image
       width:400px;
       height:150px;
    }
0


source






More articles:


All Articles