SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Positing Issue

    Hello

    This is one of my first attempts at positioning an HTML document using CSS. My issue is occurring when a question has links (see question 2 & 3). I am using DHTML to display the answer and links for a question when the user clicks on the question. My problem occurs when the answer and links are display. It is causing the Question to follow the last link instead of positioning itself on the next line (which is how they are when none of the questions have been clicked on). I am using float to display the links since I only want the word Links to appear once for each question regardless if they have 1 to many links. I have looked at this for a while and can not determine using CSS how to make sure the Question always appears on the next link regardless if the question has links or not. Can someone spot my error?

    Also, if you feel there is a better way to code this using CSS, please let me know.

    Thanks in advance for your time.

    They question will make more sense if you use the code below.

    Code:
    <html>
    <head>
    </head>
    
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    
    <style type="text/css">
    	.PageHeader { font: 19px Arial; color: #000000; font-weight: bold; } 
    	a.Question { font: 13px Arial; font-weight: bold; text-decoration: none; }
    	a.Question:hover { color: #990000 }
    	.Answer { font: 13px Arial; color: #000000; }
    	.LinkLable { font: 13px Arial; color: #000000; font-style: italic; font-weight: bold; }  
    	.LinkHREF { border: 2px solid green; float: left; margin-left: 45px; margin-top: -17px; font: 13px Arial, Helvetica, sans-serif; color: #990000; } 
    	
    	/* container */
    	#faqQuestion { border: 2px solid black; position: absolute; margin-left: 30px; }
    	#faqAnswer { border: 2px solid blue; margin-left: 20px; }
    	#faqImage { border: 2px solid red; margin-left: 20px; }
    	#faqLink { border: 2px solid yellow; margin-left: 20px; }
    </style>
    
    <script language="JavaScript">
    
      function visibility(div)
      {  
         display = (document.getElementById(div).style.display == 'none') ? 'block' : 'none';
         document.getElementById(div).style.display = display;
      }
    
    </script>
    
    <br>
       
    <span class="PageHeader">Frequently Asked Questions</span>
       
    <p>
       	
    <div id="faqQuestion">
    	<a href="javascript: visibility('question1');" class="Question">Question 1</a>
     	<br>
     	   		
     	<div id="faqAnswer">
     		<div id="question1" style='display:none'>
     	   	
    			<span class="Answer">Answer 1 to Question 1</span>
     	   		<br>
     	   				
     	   		<div id="faqImage">
     			</div>
     	   							
     			<div id="faqLink">   			
     				<span class="LinkHREF">
    				</span>
     			</div>
     	   			
    		</div>
    	</div>	
     	   			
     	<a href="javascript: visibility('question2');" class="Question">Question 2</a>	
     	<br>
     	   	
     	<div id="faqAnswer">
     		<div id="question2" style='display:none'>
     	   		<span class="Answer">Answer 1 to Question 2</span>
     	   		<br>		
     	   				
    			<span class="Answer">Answer 2 to Question 2</span>
     	   		<br>
     	   				
     	   		<div id="faqImage">
     	   		</div>
     	   				
     	   		<span class="Answer">Answer 3 to Question 2</span>
     	   		<br>		
     	   			  
    			<div id="faqImage">
     	   		</div>
     	   					
     	   		<div id="faqLink">
     	   			<span class="LinkLable">Links:</span>
     	   			
     	   			<span class="LinkHREF">
     	   				Q1
     	   				<br>
     	   				www.google.com
     	   				<br>
     	   			</span>
     	   		</div>
     	   	</div>
     	</div>	
     			
     	<a href="javascript: visibility('question3');" class="Question">Question 3</a>
     	<br>
     	   		
     	<div id="faqAnswer">
     		<div id="question3" style='display:none'>
     	   		<span class="Answer">Answer 1 to Question 3</span>
     	   		<br>
     	   				
     	   		<div id="faqImage">
     	   		</div>
     	   				
     	   			
     	   		<div id="faqLink">
     	   			<span class="LinkLable">Links:</span>
    
     	   			<span class="LinkHREF">
     	   					www.google.com
     	   					<br>
     	   			</span>
     	   		</div>
     	   	</div>
    	</div>	
     	   			
     	<a href="javascript: visibility('question4');" class="Question">Question 4</a>
     	<br>
     	   		
     	<div id="faqAnswer">
     		<div id="question4" style='display:none'>
     	   		<span class="Answer">Answer 1 to Question 4</span>
     	   		<br>
     	   				
     	   		<div id="faqImage">
     	   		</div>
     	   				
     	   		<div id="faqLink">
     	   			<span class="LinkHREF">	
     	   			</span>
     	   		</div>
    		</div>
    	</div>					
    </div>
     	
    
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, you need a DOCTYPE to go with your document. Second, the <style> element belongs inside the <head> section, below the <title> element that you are missing.
    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>
     <title>Untitled Document</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     </head>
     <body>
     </body>
     </html>
    In the example I posted above, the script and style tags would go below <title>Untitled Document</title>

    Bear in mind this IS XHTML, so if you have a tag like <img> or <br> it needs to be closed differently. <img /> and <br /> respectively. If an element does not hae a closing tag (sorry, but <p> does have one), you need to add a space and a forward slash ( /) before the closing bracket.

    Also, since you're using CSS for your presentation, it would make sense to remove the presentational HTML tags from your document.

    If you can clean up your example code, then provide me with a link to a "working" copy of your page, I'll be able to help you better.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the response. To be 100% honest, I had the page 90% working with the layout being controlled with CSS but I had a few issues that I could not get resolved so I ended up getting frustrated and I coded everything using HTML. Thanks again for the response and maybe next time I will give CSS more of a chance with my page layout needs.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •