Jump to content

NEWBIE HERE! I need help with background


aND|e

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! :)

Link to comment
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

Link to comment
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?
Link to comment
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 *

Link to comment
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. :)

Link to comment
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. :)

Link to comment
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 :)

Link to comment
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.
Link to comment
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>

Link to comment
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.

Link to comment
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. :)
Link to comment
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? :)

Link to comment
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 ^^

Link to comment
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... :)

Link to comment
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:
Link to comment
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

Link to comment
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>

Link to comment
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%;

Link to comment
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! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...