How do you suggest I do it?

Coreper · April 6, 2008

here is my story:

I made a design for my website in The GIMP [a program like Photoshop], which is completely finished now

but now I was thinking: what would be the best way/program/software to make my website, from the design I made?

if you could help me out here, that would be great!

The main purpose of my website is using it as an online Portfolio for my designs [and other stuff].

I am running Windows XP, with all updates.

Here is the design for my website: [ofcourse, the real design is without the watermarks]

http://img153.imageshack.us/img153/3663/we...edesign3fq0.png

here is my question again:

1. what would be the best way/program/software to make my website, from the design I made?

i have been playing around a bit with Adobe Dreamweaver, and this is what i got so far: [ive only been working on the menu bar]

http://img387.imageshack.us/img387/363/websitejt0.png

and as you can see, i added 2 red arrows:

i want the image [which is 100% width] underneath the other images [above it], but i cant seem to pull it off

2. so i was hoping you could help me out...

here is the code for my website so far:

<!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>Coreper - Online Portfolio</title>
<style type="text/css">
<!--
body {
	background-image: url(images/bg_mainframe.png);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.HeaderUpMiddle {
	position: relative;
	top: 0px;
	z-index: 3;
}
.HeaderUpCornerLeft {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
}
.HeaderUpCornerRight {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
}
.HeaderUp {
	position: relative;
	width: 100%;
	top: 0px;
	z-index: 0;
}
-->
</style>
</head>

<body>
<div align="center">
<img src="images/header/Menu_Bar.png" width="958" height="238" class="HeaderUpMiddle" />
<img src="images/header/Menu_Corner_Left.png" width="20" height="146" class="HeaderUpCornerLeft" />
<img src="images/header/Menu_Stretch.png" width="1" height="146" class="HeaderUp" />
<img src="images/header/Menu_Corner_Right.png" width="20" height="146" class="HeaderUpCornerRight" />
</div>
</body>

</html>

Mike567 · April 6, 2008

Designing in IE?

You want FF with all the web design plugins, makes life easy to edit!

Heres what you want to do, you see your top left pictures use some div tags you want the top left pictures to repeat across then center the image ontop of that.

I'll PM you my portfolio site, I haven't edited it in a while been pissing about with drupal, but yeah check out the CSS and how I setup the div tags.

Coreper · April 6, 2008

I had a look at your site, but i wasnt able of seeing anything usefull in your code: it isnt very organised...

you said you used a logo for on top of the gradient, but i cant see anything like that in the code...

could you just tell me how i can get the big bar underneath the other images?

Mike567 · April 6, 2008

#headerfade{background-image:url('images/fade.png'); width:100%; height:100px;}

#header{background-image:url('images/header.png'); background-repeat:no-repeat; width:117px; height:100px;}

Its rather well organised I would say

Coreper · April 6, 2008

so.....

what do i need to do?

Mike567 · April 6, 2008

You need to make something which will fit under your header to make it appear asif its one image, then lay the div tags out like this.

You see what I did?

the id back contains all the other ones theirfore will be behind all the others inside that you make the fade type thing which you set the width as 100%.

Coreper · April 7, 2008

this is what i got now:

.HeaderUpMiddle {
	position: absolute;
	top: 0px;
	z-index: 3;
}
.HeaderUpCornerLeft {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
}
.HeaderUpCornerRight {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
}
.HeaderUp {
	position: relative;
	width: 100%;
	top: 0px;
	z-index: 0;
}
-->
</style>
</head>

<body>
<div id="Menu_Stretch" align="center"><img src="images/header/Menu_Stretch.png" width="1" height="146" class="HeaderUp" />
<div id="Menu_Corner_Left"><img src="images/header/Menu_Corner_Left.png" width="20" height="146" class="HeaderUpCornerLeft" /></div>
<div id="Menu_Bar"><img src="images/header/Menu_Bar.png" width="958" height="238" class="HeaderUpMiddle" /></div>
<div id="Menu_Corner_Right"><img src="images/header/Menu_Corner_Right.png" width="20" height="146" class="HeaderUpCornerRight" /></div>
</div>

but still... the header doesnt show up properly:

http://img206.imageshack.us/img206/8053/websiteud6.png

the middle bar doesnt want to get above the stretch bar...

Mike567 · April 8, 2008

z-index is put in automatically by dreamwaver right?

if so remove it.

You want to put the images in CSS using something like this background-image:url('images/fade.png');

suppose it would be easier if I showed you with one of them.

.HeaderUpCornerRight {

background-image:url('images/header/Menu_Corner_Right.png');

width:20;

height:146;

}

Only problem with the way your doing it is its not valid XHTML1.1 if I remember correctly, the standards say you shouldn't put div tags in div tags.

Coreper · April 8, 2008

thanks

but unfortunatly: nothing changed after i changed the css styles to this:

.HeaderUpMiddle {
	background-image:url("images/header/Menu_Bar.png");
	width: 958px;
	height: 238px;
	position: relative;
	top: 0px;
}
.HeaderUpCornerLeft {
	background-image:url("images/header/Menu_Corner_Left.png");
	width: 20px;
	height: 146px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.HeaderUpCornerRight {
	background-image:url("images/header/Menu_Corner_Right.png");
	width: 20px;
	height: 146px;
	position: absolute;
	top: 0px;
	right: 0px;
}
.HeaderUp {
	background-image:url("images/header/Menu_Stretch.png");
	position: relative;
	width: 100%;
	height: 146px;
	top: 0px;
}

Mike567 · April 8, 2008

Remove position, top and left

Coreper · April 8, 2008

doesnt work: now every image is put on a different line...

there has to be an easier way...

Mike567 · April 8, 2008

wow I'm getting rusty, you have another technique for potitioning thing using the float tool:

float: left;

float: right;

float: center;

I shall leave it upto you to decide where to put them goes without saying really :lol:.

Coreper · April 9, 2008

i tried

but it doesn't work :(

Mike567 · April 9, 2008

Post code.

Coreper · April 10, 2008

.HeaderUpMiddle {
	float: center;
}
.HeaderUpCornerLeft {
	float: left;
}
.HeaderUpCornerRight {
	float: right;
}
.HeaderUp {
	float: none;
	width: 100%;
}
-->
</style>
</head>

<body>

<div id="Menu_Stretch" align="center"><img src="images/header/Menu_Stretch.png" width="1" height="146" class="HeaderUp" />
<div id="Menu_Corner_Left"><img src="images/header/Menu_Corner_Left.png" width="20" height="146" class="HeaderUpCornerLeft" /></div>
<div id="Menu_Bar"><img src="images/header/Menu_Bar.png" width="958" height="238" class="HeaderUpMiddle" /></div>
<div id="Menu_Corner_Right"><img src="images/header/Menu_Corner_Right.png" width="20" height="146" class="HeaderUpCornerRight" /></div>
</div>

</body>

Mike567 · April 10, 2008

remove img tags and replace it with background-image('blah');

change headerup to float:center;

Coreper · April 10, 2008

im sorry if this looks stupid, but here is what i tried, which didnt work:

.HeaderUpMiddle {
	float: center;
	background-image: url("images/header/Menu_Bar.png");
}
.HeaderUpCornerLeft {
	float: left;
	background-image: url("images/header/Menu_Corner_Left.png");
}
.HeaderUpCornerRight {
	float: right;
	background-image: url("images/header/Menu_Corner_Right.png");
}
.HeaderUp {
	float: center;
	width: 100%;
	background-image: url("images/header/Menu_Stretch.png");
}

-->
</style>
</head>

<body>

<div id="Menu_Stretch" align="center" class="HeaderUp">
<div id="Menu_Corner_Left" class="HeaderUpCornerLeft"></div>
<div id="Menu_Bar" class="HeaderUpMiddle"></div>
<div id="Menu_Corner_Right" class="HeaderUpCornerRight"></div>
</div>

could you explain it a bit more clear?

Mike567 · April 10, 2008

can't believe I didn't notice this, class is used for fonts ID should be used for position.

try this

#HeaderUpMiddle {
	float: center;
	background-image: url('images/header/Menu_Bar.png');
}
#HeaderUpCornerLeft {
	float: left;
	background-image: url('images/header/Menu_Corner_Left.png');
}
#HeaderUpCornerRight {
	float: right;
	background-image: url('images/header/Menu_Corner_Right.png');
}
#HeaderUp {
	float: center;
	width: 100%;
	background-image: url('images/header/Menu_Stretch.png');
}

-->
</style>
</head>

<body>

<div align="center">
	<div id="HeaderUp">
		<div id="HeaderUpCornerLeft"></div>
			<div id="HeaderUpMiddle"></div>
		<div id="HeaderUpCornerRight"></div>
	</div>
</div>

Coreper · April 11, 2008

nope, doesnt work either

now everything has disappeared...

Mike567 · April 11, 2008

LOL I forgot to put in widths & heights.

adding them in should be a simple job.

Coreper · April 11, 2008

thanks!

that worked!

we almost have it done:

i get this error message:

and this is what is meant:

http://img257.imageshack.us/img257/5930/websitead6.png

dreamweaver linked me through to this page, but i dont really understand what they are saying...

i checked out the link to the original article, but i found out that when you apply that trick, the menu bar wont grow to 100% width anymore...

EDIT:

ok, i fixed the right corner dropping down, by changing the DIV order, but now my Header_Middle get kicked out... > floats underneath the bar when the window size gets too small [998px is minimum width of header]...:

#HeaderUpCornerLeft {
	float: left;
	background-image: url('images/header/Menu_Corner_Left.png');
	width: 20px;
	height: 146px;
}
#HeaderUpCornerRight {
	float: right;
	background-image: url('images/header/Menu_Corner_Right.png');
	width: 20px;
	height: 146px;
}
#HeaderUpMiddle {
	float: none;
	background-image: url('images/header/Menu_Bar.png');
	width: 958px;
	height: 238px;
}
#HeaderUp {
	float: none;
	width: 100%;
	background-image: url('images/header/Menu_Stretch.png');
	height: 146px;
}
-->
</style>
</head>

<body>

<div id="Header" align="center">
	<div id="HeaderUp">
	<div id="HeaderUpCornerLeft"></div>
	<div id="HeaderUpCornerRight"></div>
	<div id="HeaderUpMiddle"></div>
</div>
</div>

Mike567 · April 12, 2008

#HeaderUpMiddle {

float: none;

because its not floating, you need to set it to center;

Coreper · April 12, 2008

the float: center; property doesnt exist...

Mike567 · April 12, 2008

LOL your right :lol:.

chuck in clear:none; to all of them.

Coreper · April 12, 2008

i tried, but it didnt work

just to make it all clear again:

when i resize the windows to a width which is smaller than the width of the HeaderUpMiddle, the Header_Bar drops down

i want that if that happens, the window applies a scrollbar so the header wont get messed up

but, i also want the HeaderUp, with the Header_Stretch image, to stretch to the full width of the screen...

btw: thanks you so much for helping me out...

Sign In

How do you suggest I do it?

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information