Css skeleton for your website

I was creating a website and thought that sharing a crude wire frame for building website would be good idea. Here is my effort at that. Feel free to use it distribute it. This is according to the way i wanted it but you can safely change the layout. Could be a good starting point. Remember to create a new style sheet and not keep it embedd in the html itself.

body {
margin: 0;
padding: 0;
background-color: #eeeeee;
}

#container {
margin: 10px auto;
padding: 5px 10px;
width: 960px;
}

/*<– Header –>*/
#header {
position: relative;
width: 100%;
}

#header #logo {
background-image: url(“LOGO_TRANSPARENT.gif”);
background-repeat: no-repeat;
background-position: left;
display: block;
float: left;
padding: 0 5px 0 0;
width: 360px;
height: 115px;
text-indent: -9999px;
height: 115px;
}

#header #connect {
float: right;
padding: 0 5px 0 0;
width: 400px;
height: 50px;
}

#header #connectto {
float: right;
padding: 0 5px 0 0;
width: 400px;
height: 50px;
background-image: url(“LOGO_TRANSPARENT.gif”);
background-repeat: no-repeat;
background-position: right;
}

/*<– content –>*/
#content {
background-image: url(“stripe_b.png”);
background-repeat: repeat;
position: relative;
width: 100%;
height: 500px;
position: relative;
}

#content #featured {
margin: 0px auto;
padding: 5px 10px;
background-color: white;
height: 350px;
width: 500px;
}

#content #left1 {
height: 50px;
width: 100px;
position: absolute;
top: 10px;
left: 20px;
background-color: white;
position: absolute;
}

#content #left2 {
height: 50px;
width: 100px;
position: absolute;
top: 70px;
left: 20px;
background-color: white;
}

#content #left3 {
height: 50px;
width: 100px;
position: absolute;
top: 130px;
left: 20px;
background-color: white;
}

#content #left4 {
height: 50px;
width: 100px;
position: absolute;
top: 190px;
left: 20px;
background-color: white;
}

#content #left5 {
height: 50px;
width: 100px;
position: absolute;
top: 250px;
left: 20px;
background-color: white;
}
#content #left6 {
height: 50px;
width: 100px;
position: absolute;
top: 310px;
left: 20px;
background-color: white;
}
#content #left7 {
height: 50px;
width: 100px;
position: absolute;
top: 370px;
left: 20px;
background-color: white;
}
#content #left8 {
height: 50px;
width: 100px;
position: absolute;
top: 430px;
left: 20px;
background-color: white;
}
#content #left8:hover {
height: 200px;
width: 400px;
}

/*<– other –>*/
#twitter {
background-color: white;
position: fixed;
top: 200px;
right: 0px;
margin-right: 0px;
width: 180px;
}
#twitter:hover{
left: 0px;
}

<div>
<div>
<h1>Company Logo</h1>
<div><img alt=”tw” src=”test.jpg”> <img
¬†alt=”tw” src=”test.jpg”> <img alt=”tw” src=”test.jpg”></div>
<div>
<p>+001 9837055733</p>
<h6>Address</h6>
</div>
</div>
</div>

<div>
<div>
<div></div>
<div>DcS</div>
<div>DcS</div>
<div>DcS</div>
<div>DcS</div>
<div>DcS</div>
<div>DcS</div>
<div>DcS</div>
<div>Hover effect</div>
</div>
</div>

<div>
<div><h3>Footer goes here</h3></div>
<div><h3>Copyright goes here</h3></div>
</div>

<div>
<h4>twitter widget</h4>
</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s