Jump to content
aND|e

NEWBIE HERE! I need help with background

Recommended Posts

hi! I'm just new to creating webpages and I've been using the internet and some books for reference. But I can't seem to find how to havea split background. by split, what I mean is, for example i want the left side of the page to be black and the other half to be pink. is this possible? I really appreciate your help! :)

Share this post


Link to post
Share on other sites

if I understand this right it should be like this<body bgcolor="#CC66FF"> <--for page ex middle.htm<body bgcolor="#000000"> <--for page ex left.htmto make this all work you need to creat 3 html dokuments1 called Index.html where the frames will be inputed and then linked to the other two dokuments (left.htm and middle.htm)in Index it should look like this<frameset cols="25%,75%"> <frame src="left.htm"> <frame src="middle.htm"></frameset>more information in here W3Schools Frames

Share this post


Link to post
Share on other sites
if I understand this right it should be like this<body bgcolor="#CC66FF">  <--for page ex middle.htm<body bgcolor="#000000">  <--for page ex left.htmto make  this all work you need to creat 3 html dokuments1 called Index.html where the frames will be inputed and then linked to the other two dokuments (left.htm and middle.htm)in Index it should look like this<frameset cols="25%,75%">  <frame src="left.htm">  <frame src="middle.htm"></frameset>more information in here W3Schools Frames

thanks mimika! ill give it a try! it's really that easy?

Share this post


Link to post
Share on other sites

Well it depends on how advanced the page will be. i often use frames cause they can be a nice tool for design.make sure your index looks like this

<html><head><title>my page</title></head><frameset cols="25%,*" frameborder="NO" border="0" framespacing="0">  <frame src="left.htm" name="leftFrame" scrolling="NO" noresize>  <frame src="middle.htm" name="mainFrame"></frameset><noframes><body></body></noframes></html>

you might have seen the * in the "25%,*".. its cause i dont have to give away the value 75% cause it will be automaticly be shown anyway by the *

Share this post


Link to post
Share on other sites

i see..let me give it a try and i'll let you know what happens :) it's my first time building a website so i'm still a little confused..but thanks so much!

Share this post


Link to post
Share on other sites
...frames cause they can be a nice tool for design.
What? :)

Share this post


Link to post
Share on other sites

I often creats a 1024x860 img that i den chops of into diffrent peaces then place them into the frame sets as backgrounds (like a pussle) then you just have to add the code you want inside it and use the background to help you design the page. well this is atleast how i do it. :)

Share this post


Link to post
Share on other sites

mimika i tried doing what you pasted earlier but the other half of the page says page cannot be displayed. the other side appeared as it should. what could be the problem? and it keeps on saying something like c is not a protocol. :)

Share this post


Link to post
Share on other sites

well have you made 2 html dokuments calledleft.htm and middle.htmif you use Dreamweaver open the Index.html then press on the page that are displayed wrong save.Then look so that you have the Index.html and the other left.htm/middle.htm on the same locationhope it will work now :)

Share this post


Link to post
Share on other sites
hehe..do you have other suggestions Jonas? :) i'm having trouble with frames..

It's not that frames is a difficult way to go, quite the opposite actually, but I at least find it to be ugly. It's also moving out of the webstandards, going in the wrong direction of what future sites will be using. I'd rather use a set of <div>'s, styling them with height, width, absolute positioning, background-color and z-index with css. I don't know if you know any css at all, so that can be very difficult for you, but it's definetely the way to go, imho.

Share this post


Link to post
Share on other sites

Actually, you don't need two <div>'s, and forget about z-index. You could try something like this:

<html><head><style type="text/css"><!--body {background-color: black;}div#left {width: 50%; /* will make the div half the total width of your page. */height: 100%;position: absolute;top: 0px;left: 0px; /* sticks your div in the top-left corner of your page. */background-color: pink;}--></style></head><body><div id="left">Menu content, or whatever you want...</div></body></html>

Share this post


Link to post
Share on other sites

Or you could use a table, I know Jonas that that is not the direction that standards are going (only use tables for tabular data) but in some situations it is easier to setup the page with a table, especially if a person is not familiar with CSS.

<table width="100%">  <tr>    <td style="background-color: #000000;width:250px"></td>    <td style="background-color:#[pink hex color]"></td>  </tr></table>

And in reference to the comment about making 1024x768 images and just cutting them up, remeber there are plenty of people out there using resolutions greater than 1024x768.if your background image is only 1024x768 you need to plan for an 'overflow' background even if it is just a solid color.

Share this post


Link to post
Share on other sites
Or you could use a table, I know Jonas that that is not the direction that standards are going (only use tables for tabular data) but in some situations it is easier to setup the page with a table, especially if a person is not familiar with CSS.
Heh, I don't have a problem with using tables for layout. Done it myself on several occasions. But frames on the other hand are tags that are probably facing deprecation (or whatever :)). The only thing I can think of that makes divs a spesific advantage is that it takes less code. But by all means, if tables are easier for you, that's the way to go. Also, tables can do something divs can't do that well, extend downwards along with another table, stretch in other words. :)

Share this post


Link to post
Share on other sites

haha! ok ill try everything you guys suggested :) actually im also just starting out with css, been reading a lot about it lately so i think ill give it a try. i want the page to look like its just 1 page, not 2 sites in 1 page like what frames do right? :)

Share this post


Link to post
Share on other sites

I know about thouse funktions :Dwhy i make img with 1024x860 is cause its world standard atm :( there are accualy ppl who dont have money to buy screens that supports bigger then 1024x860. just to concider them cause they can be customer for your company or a page visitor. :blink: and yes about the over flow i have a plan for that :)Well i can agree that div tags can be a solution but iam maybe an old fasion guy (even for my age hehe) thats why i use frames hehe :)Edit 2---------aND|e well thouse 3 funktions we brought up works old or new :) hope learning CSS will help you alot and that you like it ^^

Share this post


Link to post
Share on other sites

<< side note >>search engines struggle with frame pages and javascript navigation - choose wisely

Share this post


Link to post
Share on other sites

I thought 1024x768 was world standard :) Of course, I could be wrong. Either way, the browser window will not be as big as your screen size because of various toolbars and stuff, so I would make smaller images if they were for background, instead of scrolling just a tiny bit to get the entire page. Or you could usehtml, body {overflow: hidden;}If they're just for the site's visitors to download, then of course full size would be the way to go without a doubt... :)

Share this post


Link to post
Share on other sites
I know about thouse funktions :Dwhy i make img with 1024x860 is cause its world standard atm  :( there are accualy ppl who dont have money to buy screens that supports bigger then 1024x860. just to concider them cause they can be customer for your company or a page visitor. :( and yes about the over flow i have a plan for that :)Well i can agree that div tags can be a solution but iam maybe an old fasion guy (even for my age hehe) thats why i use frames hehe  :)Edit 2---------aND|e well thouse 3 funktions we brought up works old or new  :) hope learning CSS will help you alot and that you like it ^^

thanks Mimika! I hope I get the hang of it soon..it gets really frustrating sometimes :blink:

Share this post


Link to post
Share on other sites

btw jonasi made a misstake just saw that :) about the img size you had right.must have mixed up the sizes with another img i was makeing who is higher sorry

Share this post


Link to post
Share on other sites
hi jonas! just tried what you suggested and it totally worked, just the way i want it! thanks again! :)

No problem... :)

Share this post


Link to post
Share on other sites

hi jonas! i kinda need help with something (again!) or anyone's help :) mani_ gave me this code in css forum and i think it's going to eb easier for me to use this since there's a left and right div but since im really new to css and just know a little html, i want it to come out like jonas's suggestion. this one doesnt fill the whole page. hope you guys can edit the code or somthing or at least tell me what i need to do to fill up the page with the background. thanks!<html><head><style type="text/css">.left{position:relative;float:left;z-index:-10;width:50%;height:600px;background-color:black;}.right{position:relative;float:right;z-index:-10;width:50%;height:600px;background-color:pink;}</style><body><div><div class="left"> </div><div class="right"></div></div></body></html>

Share this post


Link to post
Share on other sites
<html><head><title>Untitled document</title><style type="text/css">html, body{overflow: hidden;}#left{padding: 5px;position: absolute;top: 0px;left: 0px;width: 512px;height: 100%;background-color: pink;}#right{padding: 5px;color: white;position: absolute;top: 0px;right: 0px;width: 512px;height: 100%;background-color: black;}</style></head><body><div id="left">Left content, used for menu I'm guessing...</div><div id="right">Right content, main content probably(?)</div></body></html>

Try that... Of course, you can also change the width, if you want the left side to be a bit thinner. Just change the one under .left to width: xx%; and the one under .right to width: yy%;

Share this post


Link to post
Share on other sites

Hi,It's very easy. You could use frames to do this. Include these frames in a frameset and you could achieve your target.Thnx,Bhushan.

hi! I'm just new to creating webpages and I've been using the internet and some books for reference. But I can't seem to find how to havea split background. by split, what I mean is, for example i want the left side of the page to be black and the other half to be pink. is this possible? I really appreciate your help! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...