Jump to content


CSS

Started by Lastcrime, Jul 19 2007 10:21 PM

2 replies to this topic

#1 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 19 July 2007 - 10:21 PM

okay ive coded a bit of the layout using css and ive got this so far:

Attached File  dreamweaver_preview.jpg   96.7K   99 downloads

now i cant quite get the border to work im not sure how to code it with css, this is the border that i need:

Attached File  tocodeincss_forp2l__copy.jpg   255.52K   82 downloads

This is the code that i have so far:
css:
@charset "utf-8";
 /* CSS Document */
 .header
	 {
	 width: 752px;
	 height: 179px;
	 margin-top: 50px;
	 background:url(header.png) no-repeat center top;
	 margin-left: 74px;
 }
 .content
	 {
	 width: 749px;
	 height: 646px;
	 background:url(contentbox.png) no-repeat center;
	 margin-left: 74px;
	 margin-top: 23px;
 }
 .nav_button1
	 {
	 width: 71px;
	 height: 42px;
	 background:url(home_btn1.png) no-repeat left;
	 float: left;
	 margin-left: 129px;
	 margin-top: -9px;
 }
 .nav_button2
	 {
	 width: 89px;
	 height:47px;
	 background:url(tutorials_btn2.png) no-repeat left;
	 float:left;
	 margin-left:22px;
	 margin-top:-14px;
 }
 .nav_button3
	 {
	 width:90px;
	 height:47px;
	 background:url(contact_btn4.png) no-repeat right;
	 float:right;
	 margin-right:85px;
	 margin-top:-13px;
 }
 .nav_button4
	 {
	 width:95px;
	 height:46px;
	 background:url(portfolio_btn3.png) no-repeat right;
	 float:right;
	 margin-top:-13px;
	 margin-right:22px;
 }

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 <link href="stylesheet.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 <div class="header">
 </div>
 <div class="content">
 </div>
 <div class="nav_button1">
 </div>
 <div class="nav_button2">
 </div>
 <div class="nav_button3">
 </div>
 <div class="nav_button4">
 </div>
 </body>
 </html>

Any help would be great.

Edited by Lastcrime, 19 July 2007 - 10:22 PM.

#2 Demonslay

    P2L Jedi

  • Members
  • PipPipPip
  • 970 posts
  • Gender:Male
  • Location:A strange world where water falls out of the sky... for no reason.
  • Interests:Graphic Design, Coding, Splinter Cell, Cats

Posted 19 July 2007 - 11:16 PM

You'll need to make a wrapper div and give it a background for that.
Make an image that is the middle part of the background, and have it repeat vertically.

You'll then need a div at the top of the wrapper with a slice of the top portion of it, and another one of the bottom slice.

The reason you need to do that is simply because you have round corners and a drop shadow. Otherwise you could just make a wrapper with a background color.

If I have time tomorrow and you still need help, I can easily code it for you.

#3 Lastcrime

    Impatient Jedi that likes to eat cereal

  • Members
  • PipPipPip
  • 649 posts
  • Gender:Male
  • Location:Toronto, Ontario, Canada
  • Interests:Soccer, Snowboarding, Hockey, B-ball, Skateboarding, Computers!

Posted 20 July 2007 - 11:50 AM

thatd be great cause im very lost from what you said lol im not very good a css i dont know very much all the stuff i did yesterday i kind of just winged it im not sure how to do the wrapper things what do i need to send you to code it?
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design