13 replies [Last post]
rluka
Offline
Regular
Canada
Last seen: 16 years 21 weeks ago
Canada
Joined: 2006-05-12
Posts: 22
Points: 0

Hi All
I am currently redoing my web page using a separate style sheet.
The real problem Im having is just creating my basic page. I cant for the life me figure out how to get a small *.gif to repeat down the left hand side of my page. These forums are great for learning so I am starting all over again. Im not posting any code because I got it all mixed up. Im hoping that someone here will help me with the basic page. Ounce I get that, I know how to ad eveything else that I need. I included a picture showing what the basic page should should look like. (The colors will be different). I have looked at W3C school and tried the examples and I am missing something because it doesnt work for me.
Thanks very much..your help will be greatly appreciated

http://www.members.shaw.ca/troyka/BasicPage.jpg

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Newbie help needed with basic page layout

To repeat an image using the background property:
background: url(image.gif) repeat-y ;

This repeats an image down the left side of the element it's placed on.

one can also have 'no-repeat' 'repeat-x' and position offsets, top right 0 100% , em or any legitimate length values.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rluka
Offline
Regular
Canada
Last seen: 16 years 21 weeks ago
Canada
Joined: 2006-05-12
Posts: 22
Points: 0

Newbie help needed with basic page layout

Hugo wrote:
To repeat an image using the background property:
background: url(image.gif) repeat-y ;

Okay, this is what I have:

/* CSS Document */

body
{
	background-image: url('leftmargin.gif');
	background-repeat: repeat-y;
	background-color: #E7EFFF;
}
#header 
{
	background-color: #9DACBF;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	position: absolute;
	width: 100%;
		
}
h1 
{
	color: #FFFFFF;
	margin-left: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}

And this is what the page looks like:
http://www.islandnet.com/~luka/Test/index.html
On my computer the border isnt at the top of the page and doesn't go all the way to the left.

Thanks for your response..Ron L

artcoder
artcoder's picture
Offline
Enthusiast
Last seen: 8 years 36 weeks ago
Timezone: GMT-8
Joined: 2005-07-27
Posts: 69
Points: 0

Newbie help needed with basic page layout

It looks fine to me on both IE6 and Firefox. What browser are you using?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Newbie help needed with basic page layout

:? well that's because you are not controlling the margins on your elements isn't it? but you seem aware of that as evidenced in your other thread!

Ron I'm confused here (as I state on the other thread) on the one hand you ask a question about repeating an image down an element and say that you have no code to show, responding to that question prompts a slightly revised problem replete with some code :? it would have helped if your first post had in fact been your second one wouldn't it have?

On the other hand you started a thread virtually straight after you started this one where you link to a layout that seems to be the one being talked about here, that layout seems to be controlling it's margins properly, so my question is "why this thread?" you seem to have sorted the problem and please when posting questions fully form them as to exactly the problems you are experiencing and wishing to solve
Thanks,

Hugo Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rluka
Offline
Regular
Canada
Last seen: 16 years 21 weeks ago
Canada
Joined: 2006-05-12
Posts: 22
Points: 0

Newbie help needed with basic page layout

Arrow The page that already exists was put together with the help of other coders and without my complete understanding of CSS. I am learning as we speak!! (Does that make sense)

:? I dont know how to control the margins in my elements. That is someone elses code. Again ( I am learning as we speak)

:idea: The left border in the image included in my first post is done in code and has caused me some problems. That was also someone elses code. I now want to completely re-build my page and understand whats going on and that was my first problem. I still dont fully understand it. You gave me the right code but I didnt know that I had to use the 'body' tag for it to work. I found that out on my own by looking at the page that already exists.

:idea: I would really appreciate it if you could explain to me the different ways of placing an image on a page using a separate style sheet.
For example:Now that I have the left hand border done, how can I place the logo in the right side/bottom position. I can only place one image in the body tag. Do I creat a container for it or ? If I do create a container (#logo) what code do I use in the body of the page to show the container with the image in it.

:? Again, I must apologize for the confusion...The code for the top border isnt mine so I dont really understand it. Should I just end this thread since I have the left border problem solved and start another one regarding the top border.

Laughing out loud Thank you very much for taking the time to help me out..I really appreciate that..Ron L

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Newbie help needed with basic page layout

Could you put a quick image together to show us what it is you want to create? We should be able to direct you from there Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

rluka
Offline
Regular
Canada
Last seen: 16 years 21 weeks ago
Canada
Joined: 2006-05-12
Posts: 22
Points: 0

Newbie help needed with basic page layout

thepineapplehead wrote:
Could you put a quick image together to show us what it is you want to create? We should be able to direct you from there Laughing out loud

Thanks for responding..I would like to place this image in the right hand bottom postion.
http://www.islandnet.com/~luka/Troyka/pictures/3HorsesBySusanKerr.jpg

Is this the correct code for my style sheet?

#logo
{
    background: url(3HorsesBySusanKerr.jpg) bottom right no-repeat;
}

I dont know what code to place in the body of the html page so that this will appear.
Thanks for responding..Ron L

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Newbie help needed with basic page layout

Well, what is the current background image on the body?

Verschwindende wrote:
  • CSS doesn't make pies

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 2 years 24 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Newbie help needed with basic page layout

Just jumpimg in on this, it looks like the OP needs to spend some time reading up on basic web page building, and trying to understand the code.

Perhaps spending some time here will help. http://www.w3schools.com/

Without this basic knowledge you will always struggle to grasp the simple elements. This is not meant to be taken in the wrong way, it just makes it easier for everyone. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Newbie help needed with basic page layout

rluka wrote:
Arrow The page that already exists was put together with the help of other coders and without my complete understanding of CSS. I am learning as we speak!! (Does that make sense)

:? I dont know how to control the margins in my elements. That is someone elses code. Again ( I am learning as we speak)


Well that explains things somewhat, but would have helped in the first place, sorry I don't want to appear harsh it's just a little confusing.

I think that as the barf has remarked it may be wise to spend a little more time at sites such as w3 schools htmldog etc, whilst we can and do help out with problems at a basic level it's easier if posters get a grasp of basics from tutorials and guides.
Quote:
but I didnt know that I had to use the 'body' tag for it to work. I found that out on my own by looking at the page that already exists.


I could only provide an answer that matched the information provided but this is one of the methods of getting to grips with things learning by example, we will help you out but there is a limit to how much basic instruction we can give.

This in no way implies though that you shouldn't ask further questions.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Newbie help needed with basic page layout

Thinking about things Ron it might be best to start a new thread completely. Post a link to the work in progress so we can see what layout your working up , the placing of the horse gif depends somewhat on the rest of the layout, just creating a container for it won't place it as such , if you have a main container wrapping your layout elements then you could place the image as a right/bottom positioned image on that whilst having an image on the body if required, but content could mask that image, you could place the horse image as an absolute positioned image referenced to the body so that it would sit in the extreme bottom right of the viewport, it all depends on the layout and elements you have to play with.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rluka
Offline
Regular
Canada
Last seen: 16 years 21 weeks ago
Canada
Joined: 2006-05-12
Posts: 22
Points: 0

Newbie help needed with basic page layout

Thanks to all that responded..I spend a lot of time at:
http://www.w3schools.com/css/default.asp
And ZenGardin plus other sites offering CSS tutorials.
I also have(dont laugh) Sams Teach Yourself CSS in 10 minutes.
I would love to get hold of a good reference book with good examples, but Coles Bookstore was out.
I already had my web page up using standard HTML and tables
and just started hearing about CSS about 3 weeks ago. I was going to pay a local coder to do the page for me but I thought that it would be nice to learn a new coding language for the web.
The current page kind of works..I over used absolute positioning plus who knows what else.
So, i will start a new thread "work in progress" and take it from there.
Thanks..Ron L

How do I link this page to a new topic?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 23 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Newbie help needed with basic page layout

It's alright, I'll do it for you Wink

Continued here:

http://www.csscreator.com/css-forum/ftopic18678.html

/locked

Verschwindende wrote:
  • CSS doesn't make pies