...

View Full Version : How can I do this?



KyleTroy
07-14-2011, 11:18 PM
Hi there, I'm new to CF and I'm trying to code a semi simple layout.

I want the middle section of the website to resemble the floating boxes on http://hover.com

any help?

teedoff
07-15-2011, 12:58 AM
ummm ok what have you got so far?? Where is your code? or your site?

takumi309
07-15-2011, 03:35 AM
I can have a look for you in detail if you, i do quite a lot of these things. let me know, i'll give you my msn or whatever

KyleTroy
07-15-2011, 07:03 AM
I don't have anything really then a basic layout that I started.

My MSN: Kyle.Troy@live.com

CSS:


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding-bottom:60px;

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#content {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
width: 940px;
display: inline;
}

#footer {
width: 940px;
margin: 0 auto;
position: relative;
}

HTML(going to use .php extension so I can use PHP includes for the header and everything later:


<!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=iso-8859-1" />
<title>Entertainment Production Company</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

<div id="header">

This is the Header

</div>


<div id="content">

<a href="#">Content</a>

</div>
</div>

<!-- Begin Footer -->
<div id="footer">

This is the Footer

</div>
<!-- End Footer -->



</body>
</html>

gopinath_3411
07-15-2011, 08:20 AM
place all the html code into one more div and css for that div as "margin:0px auto; width:940px;" no need of giving margin auto for every sub div.

KyleTroy
07-15-2011, 07:37 PM
place all the html code into one more div and css for that div as "margin:0px auto; width:940px;" no need of giving margin auto for every sub div.

I made the changes. You can see the updated code below. Still need help with how to execute the boxes.

CSS:

* { padding: 0; margin: 0; }

#wrapper{
margin:0px auto;
width:940px;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding-bottom:60px;

}

#header {
width: 940px;
position: relative;
}

#content {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
width: 940px;
display: inline;
}

#footer {
width: 940px;
position: relative;
}


HTML:

<!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=iso-8859-1" />
<title>EPC</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="wrapper">
<div id="header">

This is the Header

</div>


<div id="content">

<a href="#">Content</a>

</div>

<!-- Begin Footer -->
<div id="footer">

This is the Footer

</div>
<!-- End Footer -->

</div>
</body>
</html>

KyleTroy
07-17-2011, 10:32 AM
Anyone out there that can help?

vikram1vicky
07-17-2011, 11:06 AM
PAste your code here n share mockup of what you want to make :)

thesam101
07-17-2011, 11:36 AM
Hi KyleTroy

something like this?



<!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=iso-8859-1" />
<title>EPC</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="wrapper">
<div id="header">

This is the Header

</div>


<div class="content" id="content1">

<a href="#">Content</a>

</div>


<div class="content" id="content2">

<a href="#">Content</a>

</div>

<!-- Begin Footer -->
<div id="footer">

This is the Footer

</div>
<!-- End Footer -->

</div>
</body>
</html>




* { padding: 0; margin: 0; }

#wrapper{
margin:0px auto;
width:940px;
background-color:red;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding-bottom:60px;

}

#header {

}

#footer {

}

.content {
color: #333;
border: 1px solid #ccc;
margin: 5px 5px 5px 0px;
}


#header, #footer {
margin:5px 0px;
width: 940px;
}

#header, #footer, .content {
float:left;
padding: 10px;
background: #F2F2E6;
color: #333;
border: 1px solid #ccc;
}


#content1 {
width:150px;
}

#content2 {
width:740px;
margin: 5px 0px 5px 0px;
}

legendlamb
07-18-2011, 12:49 PM
Sorry I'm a newbie in this field, so I can't help you.

Sammy12
07-18-2011, 06:45 PM
if you plug this code into a new document, should work.



.wrapper {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color: #DDD;
border: #BBB 1px solid;
padding: 5px;
-box-shadow: 0 0 1px 0 #333;
-webkit-box-shadow: 0 0 1px 0 #333;
-moz-box-shadow: 0 0 1px 0 #333;
}

.wrapper .box {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
height: 100px;
background-color: #FFF;
}




<div class="wrapper">
<div class="box">

</div>
</div>


if anything don't feel intimidated by a site. chances are you know more code than them. especially this site, the script is awful. they need to use sprites for their images, if you hover over things, they flicker, because the images are loading separately. inline javascript ftl

KyleTroy
07-18-2011, 09:15 PM
if you plug this code into a new document, should work.

Like another css document and link to that one as well? or can it go into my main.css?

Sammy12
07-18-2011, 09:30 PM
this is just an example. try pasting the code with a correct doctype, head, body and so forth in a new text document



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.wrapper {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color: #DDD;
border: #BBB 1px solid;
padding: 5px;
-box-shadow: 0 0 1px 0 #333;
-webkit-box-shadow: 0 0 1px 0 #333;
-moz-box-shadow: 0 0 1px 0 #333;
}

.wrapper .box {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
height: 100px;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>



should look like this:

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-16.png

was this the portion of the page you wanted?

KyleTroy
07-18-2011, 09:55 PM
this the portion of the page you wanted?

Yup! Thanks for all of your help Sammy!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum