15 replies [Last post]
cheerful_nut
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT+9
Joined: 2006-06-02
Posts: 12
Points: 0

Hi,

I've worked on HTML-only sites in the past but am now trying to work with CSS for the first time Smile

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:

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

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 16 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

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

-- Frances

cheerful_nut
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT+9
Joined: 2006-06-02
Posts: 12
Points: 0

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 Smile (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...

cheerful_nut
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT+9
Joined: 2006-06-02
Posts: 12
Points: 0

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:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 13 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

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>.

Verschwindende wrote:
  • CSS doesn't make pies

cheerful_nut
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT+9
Joined: 2006-06-02
Posts: 12
Points: 0

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. Laughing out loud

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! Wink

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Backgrounds in containers and relative positioning

Quote:
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.
There is a design philosophy issue here. That you want a graphic element to effectively control the layout is a print medium paradigm, where the design parameters are more or less fixed (if variable from edition to edition). The web is not print, though table layout practice tries to belie that truism.

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.

  • The second row is a list of links (menu). You may or may not want to put it in a separate container, a div. You don't have to and as we're walking through the process, let's not. We can always come back to it.
  • The first of two objects. Since objects act like inline-block replaced elements, you may end up with it in a container.
  • Same here.
  • This block contains three columns. You can wrap each in a container, and likely will. You may also want to group all three to establish a containing context. If there are more than one element in a column, wrap it. Don't wrap the group until you need to. You may also decide to rearrange the order you have them in the source. You can come back to that, too.
  • And that's it. As you can see, The html will be straight forward, following the structure and semantics of the document parts.

    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

    [/]

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    cheerful_nut
    Offline
    Regular
    Last seen: 15 years 3 weeks ago
    Timezone: GMT+9
    Joined: 2006-06-02
    Posts: 12
    Points: 0

    Backgrounds in containers and relative positioning

    Thanks for the advice and suggestions Gary Smile

    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 Wink

    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!

    Smile

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

    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 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

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 15 weeks 6 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    Backgrounds in containers and relative positioning

    Hugo wrote:
    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 Smile
    As much as I've tried to improve Hugo's ability to communicate in the English language, his skills, or lack thereof, seem resistant to rising above the mire.

    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

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    cheerful_nut
    Offline
    Regular
    Last seen: 15 years 3 weeks ago
    Timezone: GMT+9
    Joined: 2006-06-02
    Posts: 12
    Points: 0

    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 &copy; 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?

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 15 weeks 6 days ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    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

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 13 weeks 2 days ago
    Joined: 2004-06-30
    Posts: 9674
    Points: 810

    Backgrounds in containers and relative positioning

    And remove the <p> tags from around the images Laughing out loud But the HTML is looking much nicer now. Isn't it much easier to manage as well?

    Verschwindende wrote:
    • CSS doesn't make pies

    cheerful_nut
    Offline
    Regular
    Last seen: 15 years 3 weeks ago
    Timezone: GMT+9
    Joined: 2006-06-02
    Posts: 12
    Points: 0

    Backgrounds in containers and relative positioning

    Ok, here's another update! (<p> tags removed! Smile) 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 Smile

    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 &copy; 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?

    Quote:
    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.. :?

    cheerful_nut
    Offline
    Regular
    Last seen: 15 years 3 weeks ago
    Timezone: GMT+9
    Joined: 2006-06-02
    Posts: 12
    Points: 0

    Backgrounds in containers and relative positioning

    Sorry to be a pest, but I'm still stuck with positioning.. Sad

    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!

    cheerful_nut
    Offline
    Regular
    Last seen: 15 years 3 weeks ago
    Timezone: GMT+9
    Joined: 2006-06-02
    Posts: 12
    Points: 0

    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?