im now learning how to do css cosding (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

adorablelilpixies -> im now learning how to do css cosding (9/22/2007 21:56:09)

i have a new program called coffee cup style sheet maker, i am now learning it, i have my background image done but when i view it it cuts it in half and doesnt show all of it, what am i doing wrong? ok i got some of it figured out but on the right side, my image starts all over again this is the code im using so why does my image start all over again on the right side?
<style type="text/css">

body {
background-image: url(fallbg.jpg);
background-position: 0% 100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
background-color: #ffffff;
}
</style>



jurgen -> RE: im now learning how to do css cosding (9/22/2007 23:50:09)

quote:


body {
background-image: url(fallbg.jpg);
background-position: 0% 100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 60px;
margin-bottom: 0px;
background-color: #ffffff;
}


you need to add
background-repeat: no-repeat;

The image is only as big as the original. You can not make it smaller or bigger for the background.



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 3:10:49)

Usually easier to use the shorthand: 

body {background:#fff url(fallbg.jpg) no-repeat left bottom;}


Which is the same as the longer chunk of code you're using.



Donkey -> RE: im now learning how to do css cosding (9/23/2007 7:53:51)

You missed out the margin code. [;)] 
margin: 0 60px 0 0;

quote:

ORIGINAL: Tailslide

Usually easier to use the shorthand: 

body {background:#fff url(fallbg.jpg) no-repeat left bottom; margin: 0 60px 0 0;}


Which is the same as the longer chunk of code you're using.




adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 8:36:11)

ok i did the first replys code and only half my image showed up, i did the 2nd replys code and nothing showed up and so as for the 3rd reply code.... my image is 1024x829



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 11:19:00)

So can you post it online and give us the URL - there's obviously something else at play here and it's hard to see what without seeing it live.



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 11:26:44)

ok im going to upload the html and stle sheet to my cpanel thing and what ur will u need? now remember if never done css so im just now learning it..... i download coffee cup stle sheet creator and only have the bg code thing on it ....
lol

editing secton below
ok i uploaded the html page and the style page here is both links please tell me what im doing wrong why does my image repeat on the right side....
http://cutiesexpressions.com/fallindex.htm
http://cutiesexpressions.com/style



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 12:42:40)

Ok well here it is working on a test page: http://www.littleblueplane.com/test/fallindex.htm

Notice I've added a DOCTYPE to the top of the page and added html {height:100%;} as well as the body rule mentioned above. Also I've removed the style from within the body of your page.

Two points though - firstly, that's a HUGE image and takes a while to download - personally I might split it up so that you've got the blue faded sky as the main background and then the hill image repeated along the bottom.

The other point is that obviously on screens larger than 1024 you just get white space around the image - was that what you wanted?



jurgen -> RE: im now learning how to do css cosding (9/23/2007 12:42:50)

quote:

ORIGINAL: adorablelilpixies

ok im going to upload the html and stle sheet to my cpanel thing and what ur will u need? now remember if never done css so im just now learning it..... i download coffee cup stle sheet creator and only have the bg code thing on it ....
lol

editing secton below
ok i uploaded the html page and the style page here is both links please tell me what im doing wrong why does my image repeat on the right side....
http://cutiesexpressions.com/fallindex.htm
http://cutiesexpressions.com/style


The page shows up pretty nice on my machine. But you have serveral things not quiet right in your code.

1. The doctyp declaration is missing. This can prevent certain browsers from displaying correctly. What browser are you using?

2. Your style sheet is not existing. The style sheet should have the extension .css

3. You have your style withing the html page in your <body></body> section. It should be either in the style sheet or in your <head></head> section.



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 12:48:40)

explin in child terms what i need to do to fix it, i have posted a link to show what i mean by it repeating itself on the right side.
http://i199.photobucket.com/albums/aa101/adorablelilpixies/sample.jpg if u dont see it in the sample tell me as i have marked blue arrows pointing where it repeating at...ive never done css and really wanna learn how.



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 12:50:07)

Look at the example I posted - it's all there for you!



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 12:54:42)

when i view ur sample i see a white edges and when i view mine i see the repeat section on the right? here ill show ya a sample page im intigued on wanting to learn this
http://lilfantasies.com/Set/LilFantasies_Fairyland2007/index.htm i do not know the page for her css but this should help u get what im wanting to do for my image.....



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 13:03:13)

Yes I know - you said you wanted it without the repeating image - just having the background image once so that's what I did!!!

Look at the source code and you'll see how I did it (although I explained it in my post too).




adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 13:05:14)

but u see how on hers it doesnt repeat and it fits all of my screen, no white edges no nothing? how do i do that to mine?



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 13:11:12)

She repeats her image horizontally and her image is the same both sides so it joins seemlessly - yours isn't.

Either get another image or crop it so it's the same both sides (i.e. so it joins up).



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 13:13:03)

so another words make the image 1024x1024 or what her image is 1024x1200?



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 13:22:56)

ok im going to do a whole new thing, can u guide me step by step what to do? i downloaded coffee cup css creator, cause it gave me 30 days free , cause my frontpage 2003 cant do css lol. i did a new image 1024x1200 in size..... what do i do first? please i really want this to work, once i get the hang of it it wont be a big issue cause im a fast learner



jurgen -> RE: im now learning how to do css cosding (9/23/2007 13:26:34)

quote:

ORIGINAL: adorablelilpixies

so another words make the image 1024x1024 or what her image is 1024x1200?


I would rather do a different approach. She and you are setting up yourself for a screen resolution of 1024 width. The images are NOT resizing. For a test, just go to her site and resize the screen. It doesn't look nice anymore.

Different people have different monitor settings, and will see the picture differently......



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 13:28:54)

WHAT u mean? i resized me screen and it still looks good?



Tailslide -> RE: im now learning how to do css cosding (9/23/2007 13:38:00)

I'd start at the beginning - you need a better understanding of the markup and CSS - try this tutorial: http://www.htmldog.com/

Work your way through that. Then have another go and come back here with any issues you have and we'll try to sort those as they arise.

We won't take you through the whole thing start to finish though, that's not what we're here for (well not unless you decide to hire us!).

As far as background images go - make them as small file-size as you can which usually means as small physically as you can. Maybe have it only half as high and set the background image to the same colour as the top of the image so that it looks like a continuation of the sky. The image has to be repeatable though (i.e. the same on the left as on the right) otherwise it won't match up.



adorablelilpixies -> RE: im now learning how to do css cosding (9/23/2007 15:01:11)

i have done tuts but the tuts are only good for what there teaching u, ive done everything ive even redid the image and the coding and nothing works . my html program does not do the doc code and when i add it it rips it out cause that code is useless as every html page ive see does not have it either. so im not going to do css unless i can purchase a program that builds the code for u. i thought that is what coffee cup style sheet maker did but i was wrong. im good with html but ive never done css . ive been doing html for 14 yrs but have always wanted to learn css and no one doesnt want to guide me on the startes code. thanks for ur help




Donkey -> RE: im now learning how to do css cosding (9/23/2007 20:06:16)

Apologies if you are very young or if English is not your first language, but it looks to me like you need to try and learn the basics, not expect someone else or a program to do it all for you.

I suppose that we should expect this attitude from someone who is too lazy to use correct English in their posts. Text-speak and/or terrible punctuation is not acceptable.

Why don't you follow the good advice you have been given, and that includes trying to understand what you are doing. Then come back for help if you get stuck.



jurgen -> RE: im now learning how to do css cosding (9/23/2007 20:40:53)

quote:

ORIGINAL: adorablelilpixies

i have done tuts but the tuts are only good for what there teaching u, ive done everything ive even redid the image and the coding and nothing works . my html program does not do the doc code and when i add it it rips it out cause that code is useless as every html page ive see does not have it either. so im not going to do css unless i can purchase a program that builds the code for u. i thought that is what coffee cup style sheet maker did but i was wrong. im good with html but ive never done css . ive been doing html for 14 yrs but have always wanted to learn css and no one doesnt want to guide me on the startes code. thanks for ur help




You are doing html for 14 years..... the html program does not do "doc" code.... rips it out cause that code is useless.....

Makes me thinking what all you do know about html. For one, having FP running doesn't mean you know all about html in the first place.......

Done with <ranting>...... [8D]



adorablelilpixies -> RE: im now learning how to do css cosding (9/24/2007 20:52:22)

i was able to get that sites style.css and all that is on it is font colors, font names, font sizes, bg color only, link colors and info and thats it.... im still curious how she has the bg image a whole page thing?



Tailslide -> RE: im now learning how to do css cosding (9/25/2007 2:28:05)

She's using CSS to do it.

The technique used has already been explained.



adorablelilpixies -> RE: im now learning how to do css cosding (9/25/2007 10:26:36)

just for your info ive repeated everything above said and nothing worked right , my image still repeated it self on the right side and when id change the code to no repeat id lose half my image , and when id change the margin width and hight id only get a 3rd of my image .... she wont tell me how she got hers to do the whole page all she was nice enough to do was send me the style.css file .... i have figured out that u can do css for transparent bg and all but i still like to know how she did that with that webset page style. ive redone every tut i have found and played with the settings for my image and nothing seem to work right, her image size is 1024x1200 , ur talking about resizing ur images for this but she didnt.



Tailslide -> RE: im now learning how to do css cosding (9/25/2007 11:01:21)

No that wasn't what I suggested. You need an image that is repeatable (the same on the left as on the right). Yours isn't. Hers is.

All the other necessary techniques have been explained.



adorablelilpixies -> RE: im now learning how to do css cosding (9/25/2007 11:07:48)

i dont understand though i pulled her bg from her source code and it is 1 big image i even went to view its size , ya know, i do still learn things and this is 1 id like to learn? since im doing something wrong, maybe it would help if u told me what it is im doing wrong maybe then ill understand?



Tailslide -> RE: im now learning how to do css cosding (9/25/2007 12:15:19)

I'm really not trying to be rude but there's only so many times I can repeat the same thing:

quote:

ORIGINAL: Tailslide
The image has to be repeatable though (i.e. the same on the left as on the right) otherwise it won't match up.


Get a repeatable image and repeat it horizontally as she has.



William Lee -> RE: im now learning how to do css cosding (9/25/2007 12:36:55)

Hi
Would u like to post to an URL what you have done so far that is not working according to what you want?

All the previous links are broken and not showing anything relevant to this discussion. People like me who came in late does not have a clear understanding and therefore cannot help in any way.




Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375