step-by-step design - Page 2 - Graphic Design Forum and Web Design Forum

Russlock · #11 (**permalink**) 14-06-2007, 09:22 PM

embed the "self-portrait as a second div within your header, then go to you css and just float it right.

Quote:

dannynosleeves · #12 (**permalink**) 15-06-2007, 12:32 AM

Quote:

Originally Posted by Russlock

embed the "self-portrait as a second div within your header, then go to you css and just float it right.

I dont want the image in the header. I want it in the main-contain div, but SLIGHTLY overlapping the header.

I think I got it. Is this good code?

Code:

#self-portrait{
	background-image:url(images/self-portrait.png);
	height:310px;
	width:450px;
	position: relative;
	top: -25px;
	left: 400px;
	}

<body>

<div id="header"></div>
<div id="main-contain">
	<div id="self-portrait"></div>
</div>


</body>

dannynosleeves · #13 (**permalink**) 16-06-2007, 06:31 PM

I have done a bit of work since the last post. Id love to have some CSS gurus go over my code.

WEBSITE

Code:

<body>

<div id="header"></div>

<div id="main-contain">
	<div id="row-1">
		<div id="top-ten"> 
			<p class="top-ten">TEXT TITLE</p>
	  	</div>
		
		<div id="self-portrait"></div>
		<div id="self-portrait-menu"></div>
	</div>
	
	<div id="row-2">
		<div id="reason1"></div>
		<div id="reason2"></div>
		<div id="reason3"></div>
	</div>
</div>


</body>


***********************************

/***************************/
/********* Header **********/
/***************************/

#header {
	background-image: url(images/header-bg.jpg);
	height:350px;
	width:100%;
}

/***************************/
/********* Content **********/
/***************************/

#main-contain {
	background-image:url(images/main-con-bg.png);
	height:4000px;
	margin:auto;
	width:790px;
	top: -1000px;
	}
	
/***************************/
/*******Photo Boxes*********/
/***************************/

#row-1 {
	width:100%;
	height: 440px;
	}
	
#top-ten{
	background-image:url(images/top-ten.png);
	height:433px;
	width:400px;
	background-repeat: no-repeat;
	position: relative;
	top: 15px;
	left: 25px;
	padding-top: 5px;
	}
	

#self-portrait{
	background-image:url(images/self-portrait.png);
	height:310px;
	width:450px;
	top: -475px;
	position: relative;
	left: 400px;
	z-index: 2;
	}
	
#self-portrait-menu {
	background-image:url(images/bio-paper.png);
	width: 362px;
	height:	241px;
	position: relative;
	top: -550px;
	left: 415px;
	z-index:1;
	}
	
#row-2 {
	width:100%;
	height: 640px;
	}
	
#reason1{
	background-image:url(images/reason1.png);
	height:300px;
	width:256px;
	position: relative;
	top: 25px;
	left: 15px;
	}
	
#reason2 {
	background-image:url(images/reason2.png);
	height:300px;
		width:272px;
	position: relative;
	top: -290px;
	left: 270px;
	}
	
#reason3 {
	background-image:url(images/reason3.png);
	height:468px;
	width:259px;
	position: relative;
	left: 530px;
	top: -590px;
	}
	
#samples {
background-image:url(images/samples.png);
	height:634px;
	margin:auto;
	width:760px;
	}


/***************************/
/*********Content***********/
/***************************/

p.top-ten {
	color: #CCCCCC;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	font-weight: bold;
	margin-left: 45px;

Toon · #14 (**permalink**) 16-06-2007, 06:38 PM

Looks ok to me, the only thing that bothers me is I'm already scrolling and not much is on it, does the header have to be that deep?

dannynosleeves · #15 (**permalink**) 16-06-2007, 07:37 PM

Quote:

Originally Posted by Toon

Looks ok to me, the only thing that bothers me is I'm already scrolling and not much is on it, does the header have to be that deep?

I know it looks a bit off now, but thats because it is a top secret design. This will be far from a typical design/layout. There is still much to be added, but it is ment to be a long scrolling site.

Thanks for checking it out. This forum has helped me beyond mention. Thanks to all!!!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Learning CSS - Step 1- The Basics	Graphic Design Network	CSS Forum	1	15-05-2008 11:56 AM
12 Step guide to SUCK at web design	tommylogic	Off Topic	5	26-03-2008 03:12 PM
The STEP Best of Web Design 2008 competition	Graphic Design Links	Graphic Design Links	0	12-02-2008 07:30 PM
The STEP Best of Web Design 2008 competition	Graphic Design Blog	Graphic Design Blog	0	06-02-2008 08:50 AM
Learning CSS - Step 1 - The Basics	Mack	CSS Forum	4	10-07-2007 11:27 PM