48 users online (1 members and 47 guests)  


  Results 1 to 6 of 6

Related

  1. CSS Image Pop Up - Positioning    Forum: CSS Forum
    Replies: 1
  2. Positioning of image    Forum: HTML Forum
    Replies: 3
  3. image positioning    Forum: HTML Forum
    Replies: 1
  1. #1
    foofoo's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    4

    Question Image Positioning Problem?

    Hi. I am new to all of this so please excuse my errors.

    I have a CSS2 file and an XHTML file. I am having some rendering problems because of my CSS (my best guess)

    Here is my web page as it is now:
    http://img78.photobucket.com/albums/v249/goombas/Clipboard02.jpg

    This is what I want it to look like (edited with image editor):
    http://img78.photobucket.com/albums/v249/goombas/Clipboard03.jpg

    To display my images, I used http://www.stopdesign.com/articles/replace_text/

    Here is the code in my html document to display the images:
    Code:
    <div id="intro">
    <div id="pageheader">
    <h1><span>Hello World!</span></h1>
    <h2><span>A Web Journal - By Kristine.</span></h2>
    </div>
    </div>
    Here is the code in my html document to display the menu:
    Code:
    <div class="menu">
    <p class="menu"><span class="strong">Navigate &raquo;</span> <a accesskey="S" class="menu" href="#main" title="Home Page (Skip to Content) - AccessKey S">Home</a> | <a  accesskey="4" class="menu" href="archive.php" title="Older Entries (searchable) - AccessKey 4">Archive</a> | <a  accesskey="5" class="menu" href="about.html" title="Learn About This Web Site - AccessKey 5">About</a> | <a  accesskey="K" class="menu" href="kitties.php" title="My Pet Kitties - AccessKey K">Kitties</a> | <a  accesskey="7" class="menu" href="contact.php" title="Contact the Author - AccessKey 7">Contact</a></p>
    </div>
    Here is the code in my CSS to display the images:
    Code:
    #pageheader	{ 
    	margin-bottom: 20px;
    }
    #pageheader h1 {
    	background: transparent url(butterfly.gif) no-repeat top left; /* Fahrner Image Replacement (FIR) */
    	margin-top: 0px;
    	width: 169px;
    	height: 112px;
    	float: left;
    	display: block;
    }
    #pageheader h1 span {
    	display:none
    }
    #pageheader h2 {
    	background: transparent url(header.gif) no-repeat top left; /* Fahrner Image Replacement (FIR) */
    	margin-top: 28px;
    	width: 383px;
    	height: 51px;
    	float: right;
    	display: block;
    }
    #pageheader h2 span {
    	display:none
    }
    #intro	{ 
    	min-width: 552px;
    }
    Here is the code in my CSS to display the menu:
    Code:
    a.menu	{
    	text-decoration: none;
    	padding: 1px 10px 1px 10px;
    }
    a.menu:link	{
    	color: #F30;
    	text-decoration: none;
    	border-bottom: none;
    }
    a.menu:visited	{
    	color: #C30;
    	text-decoration: none;
    	border-bottom: none;
    }
    a.menu:active	{
    	color: #CC0;
    	background-color: transparent;
    	text-decoration: none;
    	border-bottom: none;
    }
    a.menu:hover	{
    	color: #C30;
    	background: #FFC;
    	text-decoration: none;
    	border-bottom: none;
    }
    So what exactly went wrong? What can I do to make the first image look like the second? Ahh!

    Any tips or comments would be very appreciated! Thank you

  2. #2
    foofoo's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    4
    Anyone know?

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Could I have a link to the page itself, rather than code snippets? Putting them all together is not enough here I think.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    foofoo's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    4
    Quote Originally Posted by QuietDean
    Could I have a link to the page itself, rather than code snippets? Putting them all together is not enough here I think.
    Unfourtunatly I don't have the page online yet.. sorry. Hopefully I have cited all the relevant code... hum, tell you what, I'll just sign up for some geocities type deal

    EDIT: Here is the page http://www.geocities.com/dipped_wick/
    Last edited by foofoo; 07-04-2004 at 09:27 PM.

  5. #5
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    To get some clues, I tried validating it at w3.org

    It failed horribly. I suspect thats due to the code that geocities places in the page.

    hate to be a pain,l could you zip up the pages and attach them to a post?
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  6. #6
    foofoo's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    4
    Quote Originally Posted by QuietDean
    To get some clues, I tried validating it at w3.org

    It failed horribly. I suspect thats due to the code that geocities places in the page.

    hate to be a pain,l could you zip up the pages and attach them to a post?
    All-right I signed up with something better. The errors were all Geocities doing. My page: http://ballz.ababa.net/goomba/

    That is just my temporary page for testing purposes. None of the links work. I will sign up for something better when I'm done but I need a free host with php support and preferably ad free. I doubt I would find all that though.

    I fixed the problem I was having now but if anyone has any suggestions to make please do so. Specifically I am striving to make an accessible and error free web site.



Tags for this Thread