Tue, 2004-07-20 19:08
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.
Wed, 2004-07-21 23:42
#1
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
Thu, 2004-07-22 07:01
#2
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
Mon, 2004-07-26 11:37
#3
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:
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?
Wed, 2004-07-28 10:30
#4
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
Wed, 2004-07-28 12:51
#5
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
Wed, 2004-07-28 13:07
#6
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).
Wed, 2004-07-28 13:21
#7
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?
Thanks
Wed, 2004-07-28 13:37
#8
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:
I think it may be just NN4 that get it wrong. IE looks for the image relative to where the stylesheet
file is and NS relative to where the document calling the stylesheet
sits.
http://www.w3.org/TR/CSS21/syndata.html#value-def-uri
Hope that clears it up, I need some sleep . :roll:
Thu, 2004-08-05 01:52
#9
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.
Thu, 2004-08-05 02:26
#10
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.