10 replies [Last post]
danshaw
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

I have been trying to get started on CSS but am struggling to get to grips with the whole table-less structure. I am ok on CSS for text styles etc, but dont know how to approcah my designs in any way other than nested tables, sliced images etc etc.

So I have knocked up a VERY quick example layout to refer to, using as many different practices as I can think of, and would appreciate any guidance on how to begin if I were to build this (which I will do as practice although it looks rubbish!)

If someone could give some pointers on how to start, how to position the different elements etc, the text boxes, background images and any other help would be really appreciated.

danshaw
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

Take it from the top - ABSOLUTE NEWBIE needs to get started

ok, lets break it down

firstly how do i approach the main centred white page, with the shadow borders?

Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Take it from the top - ABSOLUTE NEWBIE needs to get started

Hi danshaw,
Good idea to break it up sometimes it's a bit overwhelming trying to help with too much at once.

Firstly to center on the page this should help http://www.csscreator.com/css-forum/ftopic514.html

Then the shadowed borders, the easiest way to do that is create a 1px high image and that stretches across both borders and repeats down the page.
I used a similar technique at http://www.multiwebspace.com/ feel free to use the css although I still have some refining to do for older IE browsers when I get a chance.

Hope that helps

danshaw
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

Take it from the top - ABSOLUTE NEWBIE needs to get started

OK, maybe somebody can have a look at what I have done, I plan to ultimately create that example page I posted as a JPEG.

First attempt, aiming to get the background and place holder for the logo:

www.metaphase.co.uk/css_stuff

Im I doing this correctly?

I have a few comments/questions:

1) How is it possible to have a "footer" jpeg, which finishes off the page below the content, e.g. rounding off the corners of the shadow edges.
2) I found it very difficult to work like this, as a layout table designer, this seems very non-WYSIWYG and feels like a step backwards, with trial and error being the main method for positioning rather than actually seeing where you are putting things.
3) Im not sure why my shadow background image only works with the style "in-line", maybe somebody can advise?

Thanks alot, any further comments would be helpful, and a hint at how to do the form fields for the newsletter signup on this page?

danshaw
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

Take it from the top - ABSOLUTE NEWBIE needs to get started

I'm sorry to "harp on" about this, but could somebody help a newbie get started.

I have taken the time to try a few CSS bits in the link I posted before. Id like to know if Im on the right tracks.

Thanks alot

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Take it from the top - ABSOLUTE NEWBIE needs to get started

Hi danshaw,
To get the corner images in place you will have to position them, most likely with negative values or negative margins.
Yes it is difficult to learn these techniques, but with time and effort becomes second nature, eventually you will forget tables exist. :roll:

Paths to images in stylesheets are meant to be relative to the document not the stylesheet. Some browsers get this wrong and it is often the cause of confusion. Without seeing the link to the stylesheet this is only a guess.

Hope that helps

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 36 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

Take it from the top - ABSOLUTE NEWBIE needs to get started

Tony wrote:
Paths to images in stylesheets are meant to be relative to the document not the stylesheet. Some browsers get this wrong and it is often the cause of confusion.

Are you sure, I have been keeping all my background images in the same folder as the CSS and using the relative path from the .css file. This has been working for me on all browsers I have tried, regardless of the location of the html document. This is on IE5, IE6, Opera 7, mozilla, Firefox, NSN6 & NSN7 (all on 'doze).

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

danshaw
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-07-20
Posts: 10
Points: 0

Take it from the top - ABSOLUTE NEWBIE needs to get started

well I have put the styles in the page head for the purpose of this example, and so the path to the images is relative (e.g. /image.jpg)

Have I approached the layout in the right way, with the centred DIV forming the main background tile etc and the logo within this?

Thanks

I also realised why the image wasnt working properly (had a / before it), it is now.

Also both HTML and CSS validate so looking good so far.

Am I doing anything wrong so far?

www.metaphase.co.uk/css_stuff

Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Take it from the top - ABSOLUTE NEWBIE needs to get started

Hi rtm223,
I may have been slightly misleading, it should be the opposite way around.
http://archivist.incutio.com/viewlist/css-discuss/20879

Quote:
IE looks for the image relative to where the stylesheet
file is and NS relative to where the document calling the stylesheet
sits.
I think it may be just NN4 that get it wrong.

http://www.w3.org/TR/CSS21/syndata.html#value-def-uri

Hope that clears it up, I need some sleep . :roll:

JohnBrook
Offline
newbie
Westbrook, Maine, USA
Last seen: 16 years 25 weeks ago
Westbrook, Maine, USA
Joined: 2004-08-05
Posts: 2
Points: 0

Same problem with background-image

Hi! I hope those who were having problems with the background-image showing inline but not in the stylesheet can help me out, too. I'm having the same problem. I was sure when I read about the path issue that that was it, but that does not seem to be it.

Here's my complete test page:

<HTML>
<HEAD>
<STYLE type="text/stylesheet">
#header {
background-image: url('images/logo.gif');
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header">
<P>Paragraph</P>
<P>Paragraph</P>
<P>Paragraph</P>
<P>Paragraph</P>
<P>Paragraph</P>
<P>Paragraph</P>
</DIV>
</BODY>
</HTML>

Pretty simple, eh? No image. Now if I replace <DIV id="header"> with <DIV style="background-image: url('image/logo.gif');">, it works. Since the stylesheet's in the document, both URL's should be relative to the same directory, right? I've also tried specifying the absolute path in the stylesheet, to no avail. (But the same absolute path works inline.) I've also tried without the single quotes. Same pattern.

Any other ideas? I'm absolutely stumped.

JohnBrook
Offline
newbie
Westbrook, Maine, USA
Last seen: 16 years 25 weeks ago
Westbrook, Maine, USA
Joined: 2004-08-05
Posts: 2
Points: 0

Take it from the top - ABSOLUTE NEWBIE needs to get started

Hmmm... Maybe it's related to the server. I've been trying this up until now on my Windows Apache installation. But I just uploaded the same page (non-inline version) to my ISP-based public site, and it works fine there! (When I use the absolute path.) So maybe there's more going on behind the scenes with my localhost than meets the eye. At least it works on the public site, where it really matters. Still, any ideas on things to check in Apache? I'm just barely enough of an Apache admin to get it running so that I can start coding.