Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Position help. Elements are not being placed properly..

    Hello everyone,

    I'm new to HTML & CSS Coding...I'm working on a school assignment, and unfortunately my teacher cannot help me. Elements on my site are not being properly placed...Depending on the browser width, the elements on my site are shifting.

    I have attached two snapshots. One snapshot shows the correct placement, and the other shows the incorrect placement of elements.

    Can someone please show the correct way to do this...

    the site domain is: http://kyhryt.aisites.com/bio.html

    -Please reach out to me if you have any questions.
    K.
    Attached Thumbnails Attached Thumbnails CSS Position help. Elements are not being placed properly..-screen-shot-2012-08-31-9.46.14-pm-2-.jpg   CSS Position help. Elements are not being placed properly..-screen-shot-2012-08-31-9.46.20-pm-2-.jpg  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,095
    Thanks
    23
    Thanked 594 Times in 593 Posts
    You have learned the problems of using positioning absolute. Once used you have to use it all the time. It's good for placing a single element or two, but on a more complicated html page it's murder.

    I used two major divs to hold stuff. container .. which held everything and word_holder .. for the two divs that had text.

    I used margins and padding to position the divs. <center> is depreciated so I took it out. If you have questions ask:

    Code:
    <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transitional/En" http://www.w3.org/TR/xhtm1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> Bio </title>
    <style type="text/css">
    a:link
    {color:#000000; text-decoration:none;}    /* unvisited link */
    a:visited
    {color:#000000; text-decoration:none;} /* visited link */
    a:hover
    {color:#E3170D;}   /* mouse over link */
    a:active
    {color:#E3170D;}  /* selected link */
    
    .serif {
    font-family:Helvetica;
    font-size:11px;
    }
    
    .sansserif {
    font-family:Helvetica;
    font-size:11px;
    line-height:130%;
    }
    
    body
    {
    	background-color: #FFFFFF;
    	margin-top: 50px;
    }
    #container
    {
    	width: 780px;
    	margin: auto;
    }
    #homelinksplacement
    {
    	float:right;
    }
    img
    {
    	border: 0px;
    }
    #allimages
    {
    	height: 191px;
    	 padding-left:10px;
    	 padding-top:50px;
    	clear:right;
    }
    .menublock
    {
    	background-color:#DCDCDC;
    	height:300px;
    	width:512px;
    }
    #textcontent
    {
    	height:290px;
    	width:437px;
    	margin-left: 10px;
    	padding-right: 75px;
    	padding-top: 15px;
    	float:left;
    	background-color: #DCDCDC;
    }
    #othertextcontent
    {
    	height:290px;
    	width:224px;
    	padding-top: 15px;
    	padding-left: 31px;
    	margin-left: 3px;
    	float:left;
    	background-color: #DCDCDC;
    }
    
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="homelinksplacement" class="serif">
    		<tr>
    		<td><a href = "home.html">HOME</a></td>
    		<td><a href = "bio.html">BIO</a></td>
    		<td><a href= "Gallery">GALLERY</a></td>
    		<td><a href= "Contact">CONTACT</a></td>
    		<td><a href= "Credits">CREDITS</a></td>
    		</tr>
    	</div>
    
    	<div id="allimages">
    		<img src="http://kyhryt.aisites.com/Bio1.jpg" width="254" height="191" alt="" />
    		<img src="http://kyhryt.aisites.com/Bio2.jpg" width="254" height="191" alt="" />
    		<img src="http://kyhryt.aisites.com/Bio5.jpg" width="254" height="191" alt="" />
    	</div>
    
    	<div id="word_holder">
    		<div id="textcontent" class="sansserif">
    			<h1> BIO: </h1>
    			Born October 6, 1948, Paula Scher is an internationally known Graphic Designer, illustrator, and art educator in design. Scher is mostly recognized for her work on the Boston album cover, the New York performing arts poster, Tiffany’s & Co. logo, as well as CitiBank logo.
    			In the world of graphic design, Scher has paved the way for women in the male dominated Graphics Design industry during the 70’s. Paula Scher recognition came from her talent of developing unique artistic concepts and illustrating them using typography.
    
    			Paula Scher, the 16th recipient of the School of Visual Art's Masters Series Award, started her career in New York City working as a layout artist for the Random House Children's book division. As Scher became more experience, she left the Random House Children's book division to start working for CBS Records in the advertising department, where she received several recognition for her designs.
    		</div>
    
    		<div id="othertextcontent" class="sansserif">
    			<h1> OTHER LINKS: </h1>
    			For more information about Paula Scher <br /> and her career, visit one links listed below.
    			<br />
    			<li> <a href="http://www.ted.com/speakers/paula_scher.html" target="_blank">TED - Paula Scher</a> </li>
    			<li> <a href="http://www.paulascher.com" target="_blank">Paula Scher Official Website</a> </li>
    			<li> <a href="http://www.pentagram.com/en/new/paula-scher/" target="_blank">Pentagram - Paula Scher</a> </li>
    			<li> <a href="http://www.allamericanspeakers.com/celebritytalentbios/Paula-Scher" target="_blank">America Speakers - Paula Scher</a> </li>
    		</div>
    	</div>
    </div>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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