Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member
    Join Date
    Jun 2005
    Posts
    51
    Member #
    10207
    Alright, i'm trying to get my portfolio site up and running, but I can't figure out the whole CSS deal when it comes to positioning. The only way I know how to position text on top of a graphic is to use absolute positioning on a CSS sheet. So anyways, I do that, and the text jumps around as you change the size of your browser. Here's the site: http://www.geocities.com/graphdesignmark/ (you have to close geocities sidebar ad to see the text in it's right place). if anyone could tell me how to fix this that would be awesome. I'm pretty new to web design, so take it easy on me.

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    First off you have TOO MANY inline style sheets. In fact the whole document is improperly formatted, but that is not the reason why it is not working the way you want it to. But I would defenatly clean up your code befor you try fixing the problem. Here is a basic HTML document format template.
    HTML Code:
    <html>
    
     <head>
      <title>Page title</title>
      <meta></meta>
      <style type="text/css">
       selector {attribute:value;}
      </style>
     </head>
    
     <body>
    
    ....
    
     </body>
    
    </html>
    But, your main problem is incorrectly using relative and absolute positioning and improperly nesting your tags.

    Read my tutorial on the subject for information that will help solve your problem.


  4. #3
    Member
    Join Date
    Jun 2005
    Posts
    51
    Member #
    10207
    Alright. i'm starting to understand this all. So, tell me if this is right..since the text is absolutely positioned, and it positions itself inside its container, that means that the text finds it location according to the browsers position. therefore, i have to make the background picture it's container, then it will contain itself to where i want it to be on top of the background picture, regardless of what browser i'm using to view it..? if so, that sounds simple, but if you could tell me how to go about doing it, i would appreciate it.

  5. #4
    Member
    Join Date
    Jun 2005
    Posts
    51
    Member #
    10207
    So if this is my main index page...
    HTML Code:
    <html>
    
     <head>
      <title>Page title</title>
     <meta></meta>
      <style type="text/css">
       selector {attribute:value;}
      body {
    	background-image: url(background.gif);
    }
    </style>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
    
     <body>
     <div align="center"><img src="layout.jpg" width="634" height="517">
     </div>
     </body>
    
    </html>
    ..then where do i go from there? like..how do i make the "layout.jpg" my container for absolute positioning?

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Because you cannot nest tags into an image you cannot make "layout.jpg" your container. But you can use the div that the image is inside of as it's container. For instance, this is the way I would go about it.
    HTML Code:
    <html>
    
     <head>
      <title>Page title</title>
     <meta></meta>
      <style type="text/css">
       selector {attribute:value;}
      body {
    	background-image: url(background.gif);
    }
      div#wrap{
            position: relative;
            background: url(layout.jpg) no-repeat;
            height: 517px;
            width: 634px;
    }
      p#content{
            position: absolute;
            top: 50px;
            left: 50px;
    }
    </style>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
    
     <body>
     <div id="wrap" align="center">
       <p id="content">Your paragraph would go here...</p>
     </div>
     </body>
    
    </html>
    Note that I set layout.jpg as a background for your div that I named 'wrap'. I do this to prevent the image from getting in the way of your content, and it makes it a bit harder for people to steal images from your site. I then set the div to the size if the orgional image so it functions the same way it did befor, only it is preped for use as a container with its position set to relative.

    I then put a paragraph inside of the div with an id of 'content'. I gave it absolute positioning and gave it some top and left coordonates. Of course the coordonates I gave are just examples, you would have to find out what values would work for your page.

    Hope this clarifies things a bit.


  7. #6
    Member
    Join Date
    Jun 2005
    Posts
    51
    Member #
    10207
    okay, i applied that tag in the code view, and when i switched to design view my background or main picture didn't show up. is that normal? and how would i go about centering the back image (along with it's correspoding div) so it's in the same location as the original link i gave to my site?

    i attached a picture of what i mean (in design view)
    Attached Images Attached Images

  8. #7
    Member
    Join Date
    Jun 2005
    Posts
    51
    Member #
    10207
    i think i figured out the pictures not appearing, but still, how do i center all of this (div, main pic) with the text still being contained to the div? thanks a lot for all your help, by the way.

  9. #8
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Dreamweaver does not display css properly in most cases. In fact I do not recomend using design view at all if you are designing with CSS.

    You can center your site using this bit of code.
    HTML Code:
    body,html {
      text-align: center;
      }
    div#wrap {
      margin: 0 auto;
      text-align: left;
      }


  10. #9
    Member
    Join Date
    Jun 2005
    Posts
    51
    Member #
    10207
    for some reason its not centering it, but putting it to the left side of the screen..is this how it's supposed to look?
    HTML Code:
    	div#wrap{
            position: relative;
    	margin: 0 auto;
    	text-align: left;
            background: url(layout.jpg) no-repeat;
            height: 512px;
            width: 628px;
    I wasn't sure where exactly to put the body,html code..

  11. #10
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    the body,html code goes in your css just like div#wrap.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com