Reply to this topicStart new topic
> Web Designers?
steve25
post Dec 7 2007, 02:49 PM
Post #1


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



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.
Go to the top of the page
 
+Quote Post
Rvddps
post Dec 7 2007, 03:04 PM
Post #2


GMC:er
*

Group: Members
Posts: 133
Joined: 23-August 06
Member No.: 819



QUOTE (steve25 @ Dec 7 2007, 03:49 PM) *
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?
Go to the top of the page
 
+Quote Post
matimusprime
post Dec 7 2007, 03:07 PM
Post #3


GMC:er
*

Group: Members
Posts: 1
Joined: 14-November 07
Member No.: 3.297



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?
Go to the top of the page
 
+Quote Post
steve25
post Dec 7 2007, 03:14 PM
Post #4


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



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?
Go to the top of the page
 
+Quote Post
spdalton
post Dec 8 2007, 02:41 AM
Post #5


GMC:er
*

Group: Members
Posts: 192
Joined: 28-January 07
From: Auckland
Member No.: 1.125



QUOTE (steve25 @ Dec 7 2007, 08:14 AM) *
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>

QUOTE
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.

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


--------------------
IPB Image
Ticking away the moments that make up a dull day. Fritter and waste the hours in an offhand way

http://www.myspace.com/cashnz
Go to the top of the page
 
+Quote Post
steve25
post Dec 8 2007, 11:47 PM
Post #6


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



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.
Go to the top of the page
 
+Quote Post
Kaneda
post Dec 9 2007, 12:22 AM
Post #7


Other side of the coin
*

Group: Members
Posts: 266
Joined: 3-May 07
From: CPH, Denmark
Member No.: 1.754



QUOTE (steve25 @ Dec 8 2007, 11:47 PM) *
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;
}


This post has been edited by Kaneda: Dec 9 2007, 12:25 AM
Go to the top of the page
 
+Quote Post
steve25
post Dec 9 2007, 05:55 PM
Post #8


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



That's cool thanks a lot smile.gif. And say i wanted to ass an image on top of that it'll work the same way as a background as well?
Go to the top of the page
 
+Quote Post
spdalton
post Dec 9 2007, 08:13 PM
Post #9


GMC:er
*

Group: Members
Posts: 192
Joined: 28-January 07
From: Auckland
Member No.: 1.125



QUOTE (steve25 @ Dec 9 2007, 10:55 AM) *
That's cool thanks a lot smile.gif. 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"/>


--------------------
IPB Image
Ticking away the moments that make up a dull day. Fritter and waste the hours in an offhand way

http://www.myspace.com/cashnz
Go to the top of the page
 
+Quote Post
steve25
post Dec 9 2007, 08:51 PM
Post #10


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



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?
Go to the top of the page
 
+Quote Post
Kaneda
post Dec 10 2007, 03:11 AM
Post #11


Other side of the coin
*

Group: Members
Posts: 266
Joined: 3-May 07
From: CPH, Denmark
Member No.: 1.754



QUOTE (steve25 @ Dec 9 2007, 08:51 PM) *
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 wink.gif

This post has been edited by Kaneda: Dec 10 2007, 03:12 AM
Go to the top of the page
 
+Quote Post
Batista
post Dec 10 2007, 12:01 PM
Post #12


GMC:er
*

Group: Members
Posts: 213
Joined: 13-July 07
From: Sandefjord, Norway
Member No.: 2.301



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


--------------------
Seven Deadly Sins, One Deadly Syn

Gear list:
Gibson Les Paul Studio Alpine White
Schecter Damien-6
Vox AD30VT
Boss DS-1
Boss MT-2
Go to the top of the page
 
+Quote Post
steve25
post Dec 10 2007, 08:25 PM
Post #13


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



QUOTE (Kaneda @ Dec 10 2007, 04:11 AM) *
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 wink.gif


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?
Go to the top of the page
 
+Quote Post
radarlove1984
post Dec 11 2007, 02:56 AM
Post #14


GMC:er
*

Group: Members
Posts: 170
Joined: 19-January 07
Member No.: 1.092



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?
Go to the top of the page
 
+Quote Post
Kaneda
post Dec 13 2007, 06:21 AM
Post #15


Other side of the coin
*

Group: Members
Posts: 266
Joined: 3-May 07
From: CPH, Denmark
Member No.: 1.754



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.

This post has been edited by Kaneda: Dec 13 2007, 06:30 AM
Go to the top of the page
 
+Quote Post
steve25
post Dec 18 2007, 07:07 PM
Post #16


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



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!
Go to the top of the page
 
+Quote Post
steve25
post Jan 2 2008, 06:05 PM
Post #17


GMC:er
*

Group: Members
Posts: 1.197
Joined: 19-April 07
From: Wiltshire, England
Member No.: 1.626



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
Attached image(s)
Attached Image
 
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 


RSS Lo-Fi Version Time is now: 23rd January 2017 - 03:31 AM