Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-05-2012, 12:34 AM   PM User | #1
kyhryt
New to the CF scene

 
Join Date: Sep 2012
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
kyhryt is an unknown quantity at this point
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
Click image for larger version

Name:	Screen Shot 2012-08-31 at 9.46.14 PM (2).jpg
Views:	34
Size:	46.5 KB
ID:	11514   Click image for larger version

Name:	Screen Shot 2012-08-31 at 9.46.20 PM (2).jpg
Views:	26
Size:	44.5 KB
ID:	11515  
kyhryt is offline   Reply With Quote
Old 09-05-2012, 03:35 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,498
Thanks: 18
Thanked 361 Times in 360 Posts
sunfighter is on a distinguished road
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>
sunfighter is offline   Reply With Quote
Reply

Bookmarks

Tags
basic, css, elements, html, position

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:54 AM.


Advertisement
Log in to turn off these ads.