Web Designers? Options

[steve25]

Hi. At the moment i have to make a website for something and i've ran into a spot of trouble. I'm not a designer at all in fact i'm crap with design but i can do coding fine. So are there any designers here who might be able to hlep me out with a little problem, just need some ideas and tips mainly.

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[Rvddps]

Hi. At the moment i have to make a website for something and i've ran into a spot of trouble. I'm not a designer at all in fact i'm crap with design but i can do coding fine. So are there any designers here who might be able to hlep me out with a little problem, just need some ideas and tips mainly.

I dabble in design, mainly XHTML, CSS and PHP, so what is the specifics of what you need to know?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[matimusprime]

Hey, I'm a graphic designer for print and web, what is the issue your running onto?

Hey, I'm a graphic designer for print and web, what is the issue your running onto?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[steve25]

Well first of all i would like a continueing running header at the top of the page. I know how this is done with the background as i've already done that (like what the GMC background has here!) but not as a header going from one end to the other. Here's osme sites about what i mean:

http://www.dreamtheater.net/ (this has a green part at the top going all the way across

http://www.satriani.com/2004/discography/welcome/ (again this site has something running all the way across)

So how do you do that? I've tried and tried and so far i've failed miserably.

The website i'm doing needs to be a sort of original design. But its got to be a red looking website. I've never really done much with red as i've found it hard to fit with anything. Any ideas on how i could get this to fit with anything. So far all i've got is a slight patterned red background with a header being made by the other guy i'm working with, and i've created a drop down flash menu which has the colours red and black to sort of blend in with it. At the moment it looks too common simple and not at all original. Any suggestions there?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[spdalton]

Well first of all i would like a continueing running header at the top of the page. I know how this is done with the background as i've already done that (like what the GMC background has here!) but not as a header going from one end to the other. Here's osme sites about what i mean:

If you want something that runs across the whole page you can create a <div> tag,
give it an ID e.g. <div id="header"></div>
and then you need to give it colour and width and a height in your css file or in the <style> tags

#header {
width:100%; /*this gives you the whole page*/
height:100px;
background-color:#fff;
}

Edit: if you want a background image in this header instead of just a colour, then replace
background-color:#fff;
with
background:url(path/to/image);

you can then fill the header with whatever you want, just put it in between <div id="header"></div>.
For example <div id="header">this is going to be my header section.</div>

At the moment it looks too common simple and not at all original. Any suggestions there?

Perhaps if you can give us some images or screenshots of what it looks like we can help you with that one.

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

This post has been edited by spdalton: Dec 8 2007, 02:53 AM

[steve25]

Hey thanks for the reply. I'll get screenshots when i get to my own pc im using someone elses at the moment. Just quickly tried what you put and it almost did it but it doesn't go all the way across, it leaves backs slightly to the side and above it.

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[Kaneda]

Hey thanks for the reply. I'll get screenshots when i get to my own pc im using someone elses at the moment. Just quickly tried what you put and it almost did it but it doesn't go all the way across, it leaves backs slightly to the side and above it.

You don't need "width: 100%", since a block element (such as <div>) always takes up 100% width (of the content area of whatever container it's in), unless you specify otherwise.

However, the <body> in browsers (which is the container in this case) usually has padding applied by default, which will take up 5-10 pixels on the top, left, right (and bottom). You can remove that padding (and any margin that might be there) with:

CODE

body
{
   padding: 0;
   margin: 0;
}

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

This post has been edited by Kaneda: Dec 9 2007, 12:25 AM

[steve25]

That's cool thanks a lot . And say i wanted to ass an image on top of that it'll work the same way as a background as well?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[spdalton]

That's cool thanks a lot . And say i wanted to ass an image on top of that it'll work the same way as a background as well?

Er, I'm not sure you'd want to do exactly that to an image..

But you can add one by using the <img> tag.
e.g. <img src="path/to/image"/>

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[steve25]

No what i mean is i wouldn't want the image to go all the way across because i know it'll stretch and look bad i mean have say a color going all the way across and then have an image on top of that say in the center of to the left of it. Unless you had a smaller image that would look fine when repeated?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[Kaneda]

No what i mean is i wouldn't want the image to go all the way across because i know it'll stretch and look bad i mean have say a color going all the way across and then have an image on top of that say in the center of to the left of it. Unless you had a smaller image that would look fine when repeated?

Yeah, you can have both a background image and a background color in CSS. As long as you remember to use the right attribute names (I've seen people get lost with them). For example, this won't work:

CODE

#header
{
  background-color: #ff0000;
  background: url(headerimage.gif) no-repeat; /* This latter rule will completely overwrite the other one, since it's general ("background") */
}

... but this will:

CODE

#header
{
   background: #ff0000 url(headerimage.gif) no-repeat;
}

... or this:

CODE

#header
{
   background: url(headerimage.gif) no-repeat;
   background-color: #ff0000; /* Only changes the color, and leaves the other parts of the previous rule intact */
}

"no-repeat" of course, makes sure the image is only shown once, not "tiled". You can also use repeat-x or repeat-y to repeat in only one dimension.

The background color will used where where there's no image.

You can place the image more precisely by adding coordinates (like most other rules):

CODE

#header
{
   background: #ff0000 url(headerimage.gif) no-repeat 10px 15px; /* Places at x = 10, y = 15 */
}

... or, to split it all out:

CODE

#header
{
   background-image: url(headerimage.gif);
   background-repeat: no-repeat;
   background-color: #ff0000;
   background-position: 10px 15px;
}

The position can be made in pixels (or any of the other units), % or "words":

CODE

background-position: top right; /* vertical top, horizontal right */
background-position: bottom center; /* vertical bottom, horizontal center */
background-position: center right; /* vertical center, horizontal right */
background-position: center; /* center both vertically and horizontally */

etc.

As far as I recall, all of this works in all modern browsers - haven't actually had a use for all combinations, so not all of them are tested

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

This post has been edited by Kaneda: Dec 10 2007, 03:12 AM

[Batista]

Dude all this codes and stuff does so I want to start with web designing and development again

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[steve25]

Yeah, you can have both a background image and a background color in CSS. As long as you remember to use the right attribute names (I've seen people get lost with them). For example, this won't work:

CODE

#header
{
  background-color: #ff0000;
  background: url(headerimage.gif) no-repeat; /* This latter rule will completely overwrite the other one, since it's general ("background") */
}

... but this will:

CODE

#header
{
   background: #ff0000 url(headerimage.gif) no-repeat;
}

... or this:

CODE

#header
{
   background: url(headerimage.gif) no-repeat;
   background-color: #ff0000; /* Only changes the color, and leaves the other parts of the previous rule intact */
}

"no-repeat" of course, makes sure the image is only shown once, not "tiled". You can also use repeat-x or repeat-y to repeat in only one dimension.

The background color will used where where there's no image.

You can place the image more precisely by adding coordinates (like most other rules):

CODE

#header
{
   background: #ff0000 url(headerimage.gif) no-repeat 10px 15px; /* Places at x = 10, y = 15 */
}

... or, to split it all out:

CODE

#header
{
   background-image: url(headerimage.gif);
   background-repeat: no-repeat;
   background-color: #ff0000;
   background-position: 10px 15px;
}

The position can be made in pixels (or any of the other units), % or "words":

CODE

background-position: top right; /* vertical top, horizontal right */
background-position: bottom center; /* vertical bottom, horizontal center */
background-position: center right; /* vertical center, horizontal right */
background-position: center; /* center both vertically and horizontally */

etc.

As far as I recall, all of this works in all modern browsers - haven't actually had a use for all combinations, so not all of them are tested

Ok great, but what if i wanted 2 images there? So say for example you have a logo to go on and you wanted a patterned image as well? Is this possible for this part or would you have to do it another way?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[radarlove1984]

I'm going to be pretty general here since most of work has already been posted. Anyway, here's how I do that...

Set your main background up in a <div></div> tag like everyone just taught you to do. Then inside of that div tag, make another div tag to put your image in.

For example...

<div id="background">
<div id="image"><img src="#" /></div>
</div>

You can then position the image by editing the CSS file id "image". (set padding, margin, etc...).

I like to physically put the image the html code and not the css code because it tends to load faster on most browsers. However, if you need to change stylesheets (for example, you have 2 different themes to the website using two different css styles), then you could also set the image in the background and just have this tag:

<div id="image"></div>



Does that make sense?

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[Kaneda]

CSS as it's implemented in current browsers doesn't allow more than one image per element (at some point in the future, multiple bg images will be possible, though - it's already in the specifications). You can do as radarlove describes (although I've never seen <img> being faster than a background image in any browser). The main decision "purity-wise" would be whether your images are content or... backgrounds. Are they decorative, or do they provide meaning.

To elaborate on radarlove's version:

CODE

<div id="header">
   <img id="headerimg" src="whatever.gif" />
</div>

You don't really need an additional <div>. Just do:

CODE

#headerimg
{
  display: block; /* This will allow you to set position, padding, margin etc. on the image */
  padding: 20px; /* Or whatever */
}

#header
{
   /* Background stuff goes here */
}

If you need two background images:

CODE

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

Each element can have its own background image, so either of those <div>'s could have a background.

For a header logo - which is really content rather than "decoration" - I'd rather do something like radarlove's version with a twist:

CODE

<div id="header">
  <h1><img src="logo.jpg" alt="My Logo" /></h1>
</div>

CODE

#header
{
   /* background stuff */
}

h1
{
   padding: 10px;
   margin: 0;
}

h1 img /* img element inside h1 element */
{
   display: block;
   right: 20px; /* Place the image 20 pixels from the right border of the h1 */
}

"My Logo" (in the "alt" attribute) should be replaced by what text you'd want if the logo isn't there (if the user has decided to not display images) - usually what the text (if any) in your logo says.

<h1> is a headline, so it makes sense here - you can restyle that headline in CSS in whatever way you want - font size, padding, margin etc. Note that <h1> has insane margins/padding by default, so you'd need to "reset" those (padding: 0; margin: 0). You can test the result for non-image browsers, by replacing the img with the alt text manually:

CODE

<div id="header">
<h1>My Logo</h1>
</div>

This way, if the user has images on, your logo will be displayed. Otherwise, "My Logo" will be displayed as text, in whatever font, size etc. you choose for <h1>. All on top of the background image of the <div> header.

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

This post has been edited by Kaneda: Dec 13 2007, 06:30 AM

[steve25]

Sorry for late reply. What if, ok lets say you have a header then another section with something else then the main body but you wanted to have a graident image as the background? Like the lin6 site sort of (www.line6.com). They have a sort of gradient like image going across like that how can you make that work? Whenever i try that it never works!

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!

[steve25]

ok sorry for digging up old posts but as i said a while ago i have a screenshot here with what i have so far. This isn't the final design as i still don't like it yet. I just want your opinions so far and preferably what i could do to improve it. Designing is my weakness when it comes to this sort of stuff so just let me know what you think and your ideas and stuff. Thanks

You are at GuitarMasterClass.net

Don't miss today's free lick. Plus all our lessons are packed with free content!

Don't miss today's free blues, jazz & country licks. Plus all our lessons are packed with free content!