Hi,
I've worked on HTML-only sites in the past but am now trying to work with CSS for the first time
The trouble I'm having at the moment is that I have a simple gradient background that I would like to have centered on the middle of the page, and then have buttons/text/links/graphics positioned relative to the background image, but I can't figure out how to do so.
I've done a search here and came across Tyssen's comment, which I think covers what I'm trying to do:
You'd need to Google on how to vertically centre a layout and then add position: relative to your container which would also hold the background image. Then you'd place your <li>s absolutely relative to the container and give each one an ID so as to place it at different points around the container.
However, how do I place a background into the body container (which is what I think I need to do..?), and then how do I position items in locations relative to the background?
My reason for wanting to position items relative to the background is because I want the page to look the same regardless of viewer resolution. If this won't work, then I'd be happy to listen to any advice you may have.
Below what I've been doing in terms of CSS (with no luck), but either the background doesn't stay centered, or id's don't stay positioned relative to the BG.
CSS Code:
body { position: relative; background: url(images/blueGradientBG.jpg) no-repeat; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #title { font-family: Century, Arial; font-size: 23px; position: absolute; left: 400px; top: 5px; } #languageSelector { position: absolute; left: 570px; top: 5px; }
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hamburger</title> <link href="css1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="title"> Ze Homepage of Doom </div> <div id="languageSelector"> <img src="images/engjap.gif" alt="Change Language" width="170" height="26" /> </div> </div> </body> </html>
I hope my question was clear enough.. please respond back if you want me to clarify anything!
Backgrounds in containers and relative positioning
You can position the background using the "background-position" - so if you want it at the top, but in the center, you'd use
body {
position: relative;
background: url(images/blueGradientBG.jpg) no-repeat;
background-position: top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
Positioning elements inside the containers to match up exactly with the background is a little trickier. Yes, you can put your nav elements in an unordered list, then pad out the list items (li's) accordingly to fit in.
It would help to see the site so far to see exactly what effect you're trying to produce!
I forgot, here's a resource for background positioning; http://www.w3schools.com/css/pr_background-position.asp
Backgrounds in containers and relative positioning
Thanks for the fast reply! I sketched out a rough outline of what I would like the site to look like and attached it - again, any if any clarification is need, let me know!
Will take a look at the link you provided as well (though seeing as it's almost midnight, I'll probably be getting to bed soon.. >_<
EDIT: Sections are numbered because I'm assuming (and please correct me if you think it's impractical/not advisable) that each of the numbers will have to be an id..?
EDIT #2: (it's getting late and I'm keep remembering stuff I should have mentioned.. anyways - The "title" and "language selector" represent sections 1 and 2 respectively in the graphic - what I'm trying to do is have the "title" align with the top right of the BG and the "language selector" align with the top left of the BG, and have it stay there regardless of viewer resolution (BG is designed for an 800 x 600 viewing)
Hope no more edits...
Backgrounds in containers and relative positioning
After browsing around, I decided to follow drhowarddrfine's advice in keano's post and start with HTML, and worry about styles later. Here's what I've done so far (following the outline I attached in my previous post):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div id="title"> <h1>Main Title</h1> </div> <div id="languageSelector"> <img src="images/engjap.gif" /> </div> <div id="nav_bar"> <img src="images/nav_bar" /> </div> <div id="splash_graphic"> <img src="images/panoramaLeveled" /> </div> <div id="flash_nav"> <img src="images/flash_nav" /> </div> <div id="info"> <p> random random random random random random random </p> </div> <div id="news"> <p> random random random random random random random </p> </div> <div id="links"> <p> random random random random random random random </p> </div> </body> </html>
Does that look viable so far? I'm still unsure about the nav_bar - as shown in my outline, I want it to stretch across the page, and was hoping to have rollovers. Thus, maybe no list (ul) but rather one long graphic?
Another question I have is regards to the data section. I did a prettier mockup of the "info", "news", and "links" (6, 7, and 8 respectively in the outline), and am wondering how to go about creating the the two 'bars' that form the box where the data will be enclosed? Should that be a part of the background image? I don't think that would work too well, but am not sure how else to go about that.
Sorry for so many questions..! :oops:
Backgrounds in containers and relative positioning
You're suffering from Divitis, a common affliction to those new to CSS.
http://www.csscreator.com/css-forum/ftopic19126.html
For example, there is no need to wrap the <h1> tag in a div.
The navbar and bottom links could be better off in a <ul>.
Backgrounds in containers and relative positioning
<grin> Divitis eh? I skimmed through your post, and I believe that yes, it does look like I've got it kinda bad.
I"ll go through it again more carefully when I've got a bit more time and post my updated code for inspection in a bit!
Thanks!
Backgrounds in containers and relative positioning
The trouble I'm having at the moment is that I have a simple gradient background that I would like to have centered on the middle of the page, and then have buttons/text/links/graphics positioned relative to the background image, but I can't figure out how to do so.
So let's describe the page:
- Top row is a header and a form. You'll likely float one or the other, but for now just mark up a header and a form.
For the layout styling, start at the top. You may want to wrap the entire page to establish a context that allows you to move the whole kit and kaboodle without concern for the stuff in the box. After that, treat each block as a more or less independent agent, moving through the page. That's the fun part, and why we enjoy helping—because it is fun.
cheers,
gary[/]
Backgrounds in containers and relative positioning
Thanks for the advice and suggestions Gary
It's been a busy day and I didn't get a chance to do anything yet, and it's 0130 atm, so I'm going to hit the hay. I'll post what I come up with tomorrow morning/afternoon following your suggestions and thepineapplehead's advice on curing divitis
You'll be hearing back from me shortly, but I just have a quick question regarding what Gary wrote:
Regarding the first point, you recommend marking up a header and a form. By header I'm assuming you mean something along the lines of <h1>/<h2>/etc. However, I'm not sure why I would need a form.. unless I'm totally misunderstanding what you're saying (which wouldn't surprise me >_<)
Thanks for your patience, and for now, good night!
Backgrounds in containers and relative positioning
Gary likes forms and thinks that every page should have one.
Gary's other likes are paradigams and obscure words, and hopes that all pages will one day be semantically correct and that world peace shall prevail
Backgrounds in containers and relative positioning
Gary likes forms and thinks that every page should have one.
Gary's other likes are paradigams and obscure words, and hopes that all pages will one day be semantically correct and that world peace shall prevail
What Hugo was saying, or should have been saying, is that the form control you use to choose a preferred language properly belongs to a form. The form should be the ancestor to the form control.
Oh, and I firmly believe world peace will prevail long before all web pages being semantically correct.
cheers,
gary
Backgrounds in containers and relative positioning
Here are my modifications - it's really rough and I haven't figured out a few things (namely how I'm going to get the 3 columns/boxes on the bottom), and the CSS is also minimal (mostly consisting of slapping together samples from thepineapplehead's cure for divitis page and viewing page sources of other sites I've come across online)
Please feel free to point out anything that could be done better, as well as any comments/criticisms!
CSS Code:
body { position: relative; background: url(images/blueGradientBG.jpg) no-repeat; background-position: top center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } ul { width: 100%; margin: 1em 0; padding: 0px 0.5em; } li { margin: 0; padding: 0; float: left; width: 15%; text-align: center; }
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="css2.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Main Title</h1> <div id="languageSelector"> <img src="images/engjap.gif" /> </div> <p> <ul> <li><a href="">Home</a></li> <li><a href="">Services</a></li> <li><a href="">About</a></li> <li><a href="">News</a></li> <li><a href="">Contact</a></li> </ul> </p> <p> <img src="images/panoramaLeveled" /> </p> <p> <img src="images/flash_nav" /> </p> <div id="content"> <div id="info"> <p> random random random random random random random </p> < /div> <div id="news"> <p> random random random random random random random </p> </div> <div id="links"> <p> random random random random random random random </p> </div>\ </div> <div id="footer">copyright © 2005 cheerful_nut</div> </body> </html>
I know there's probably still an overabundance of div's, and I'll try to work more on it later. At the moment, I've got to run to a job interview, but I'll be back!
Thanks!
EDIT: I'm still not quite sure how to implement the form - my original concept for the "language selector" was to be a graphic button (image map?) that users to click to choose whether they wanted an enlish language or japanese language version of the website to display. How would a form duplicate that function?
Backgrounds in containers and relative positioning
The markup's looking much better.
<form action="setlang.php" method="get"> <fieldset> <button type="submit" value="en"> <img src="en.jpg" alt="English"></button"> <button type="submit" value="es"> <img src="es.jpg" alt="Español"></button"> </fieldset> </form>
The actual means of setting the language will have some bearing on how the form is set up.
cheers,
gary
Backgrounds in containers and relative positioning
And remove the <p> tags from around the images But the HTML is looking much nicer now. Isn't it much easier to manage as well?
Backgrounds in containers and relative positioning
Ok, here's another update! (<p> tags removed! ) Gary, thanks alot for posting the form code. However, I modified it following some info I found online because I wanted to get rid of the grey buttons and replace them with graphics. Will it work? I'm afraid I've never done anything with PHP, but if the code will work, then I'll be looking up more on PHP shortly
I've also replaced the navigation list following the directions for rollover buttons I found at CSS Rollover Buttons
Here's my current HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>This here is an untitle document woo!</title> <link href="css2.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Main Title</h1> <form action="setlang.php" method="get"> <fieldset> <input type="image" value="en" src="images\eng.gif" alt="English" /> <input type="image" value="jp" src="images\jap.gif" alt="Nihongo" /> </fieldset> </form> <div class="nav_bar"> <div class="cssnav"><a href="index.html" title="Main Page"><img src="images/downblank.gif" alt="Home" /><span>Home</span></a></div> <div class="cssnav"><a href="services.html" title="Services"><img src="images/downblank.gif" alt="Services" /><span>Services</span></a></div> <div class="cssnav"><a href="about.html" title="About GRN"><img src="images/downblank.gif" alt="About GRN" /><span>About GRN</span></a></div> <div class="cssnav"><a href="news.html" title="News"><img src="images/downblank.gif" alt="News" /><span>News</span></a></div> <div class="cssnav"><a href="links.html" title="Related Links"><img src="images/downblank.gif" alt="Related Links" /><span>Related Links</span></a></div> </div> <img src="images/panoramaLeveled.jpg" alt="."/> <img src="images/flash_nav" alt="Flash Selector"/> <div id="content"> <div id="info"> <p> random random random random random random random </p> </div> <div id="news"> <p> random random random random random random random </p> </div> <div id="links"> <p> random random random random random random random </p> </div> </div> <div id="footer">copyright © 2005 cheerful_nut</div> </body> </html>
and this is my current CSS:
body { position: relative; background: url(images/blueGradientBG.jpg) no-repeat; background-position: top center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } /* ul { width: 100%; margin: 1em 0; padding: 0px 0.5em; } li { margin: 0; padding: 0; float: left; width: 15%; text-align: center; } */ .nav_bar { height: 10px; width: 700px; } .cssnav { position:relative; float: left; margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; background: url(images/overblank.gif) no-repeat; width: 140px; height: 29px; overflow:hidden;/* for ie to hide extra height*/ } .cssnav a { display: block; color: #000000; font-size: 13px; width: 140px; height: 29px; display: block; float: left; color: black; text-decoration: none; overflow:hidden;/* for ie to hide extra height*/ } .cssnav a:hover { color: #ffffff; font-weight: bold; } .cssnav img {width: 140px; height: 29px; border: 0; } html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: -5px;top: 7px; text-align: center; width: 150px; cursor: pointer; }
So far the above HTML validates, but it's still not positioned as I want. Could anyone give me a pointer on how to get the form buttons to align on the top upper right of the background image and the nav_bar to center (also relative to the BG)?
Also, do you think it's possible to do what I requested earlier now?
Another question I have is regards to the data section. I did a prettier mockup of the "info", "news", and "links" (6, 7, and 8 respectively in the outline), and am wondering how to go about creating the the two 'bars' that form the box where the data will be enclosed? Should that be a part of the background image? I don't think that would work too well, but am not sure how else to go about that.
For now though, I'm going to take a look at Flash and see if I manage to create what I have in mind.. :?
Backgrounds in containers and relative positioning
Sorry to be a pest, but I'm still stuck with positioning..
I've gotten the form beside the header now by using float:
h1 { float: left; font-family: Century, Arial; font-size: 23px; } form { position: relative; float: right; }
but they're still not aligning relative to the background image. I thought that the body would be the 'container' and that elements would align relative to that, but everything is still lining up along the left when I'm trying to get everything centered on the BG (with the exception of the form). I've tried tossing in padding and margins but it's not working out the way I want.
I'm sure I can figure out what to do if someone just nudges me in the right direction.. (and for anyone wanting a visual of what I have in mind, I have a small template attached to a previous post above)
Thanks for your time!
Backgrounds in containers and relative positioning
Please, any suggestions? It's proving to be very frustrating, particularly because I believe the solution is probably simple. I've tried using "left:# of pixels", but this doesn't hold up under multiple resolutions, and Google searches for "element position relative to background" is proving fruitless.
Should I create another post for this topic under CSS layouts?