Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Positioning Issues...

Posted on 2011-03-10
6
Medium Priority
?
264 Views
Last Modified: 2012-05-11
Hi All...two questions for you....

1. I'm pretty new to CSS and web design and I can't figure out why some of my elements won't position correctly. The "side-bar" content is supposed to be to the right of the main-content. When I give it the position: absolute CSS tag...it is pushed out of the main-content completely and rests in the footer area. Here is the site:

http://designisrelevant.com/clients/index.html

While I'm at it...I do wonder where a really good tutorial that sufficiently explains positioning can be found. I still have some trouble grasping this idea.

2. At the top of the navigation is a colored bar that matches the home bar. I have no idea why that exists and how to get rid of it.

Thank you all very much in advance.
0
Comment
Question by:mikegeorge2
6 Comments
 
LVL 16

Assisted Solution

by:SSupreme
SSupreme earned 200 total points
ID: 35101314
Replace part of your markup with this part
 
<div class="group" id="page-wrap">
		
		<header>
			<div id="logo"></div>
			<h1>Nina Penny</h1>
			<h2>Mortgages</h2>
			<p class="phone"><span class="skype_pnh_print_container">480.635.2410</span><span class="skype_pnh_container" dir="ltr" tabindex="-1"><span class="skype_pnh_mark"> begin_of_the_skype_highlighting</span>&nbsp;<span class="skype_pnh_highlighting_inactive_common" title="Call this phone number in United States of America with Skype: +14806352410" dir="ltr"><span class="skype_pnh_left_span" skypeaction="skype_dropdown">&nbsp;&nbsp;</span><span class="skype_pnh_dropart_span" title="Skype actions" skypeaction="skype_dropdown"><span class="skype_pnh_dropart_flag_span" style="background-position: -5849px 1px ! important;" skypeaction="skype_dropdown">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;</span><span class="skype_pnh_textarea_span"><span class="skype_pnh_text_span">480.635.2410</span></span><span class="skype_pnh_right_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>&nbsp;<span class="skype_pnh_mark">end_of_the_skype_highlighting</span></span></p>
			<p><a href:=""></a><a href="mailto:nhpenny@msn.com">nhpenny@msn.com</a></p>
<a href="mailto:nhpenny@msn.com">				
				<nav>
					</nav></a><ul>
<a href="mailto:nhpenny@msn.com">						</a><li><a href="#">Home</a><span></span></li>
						<li><a href="#">Refinancing</a><span></span></li>
						<li><a href="#">Reverse Mortgages</a><span></span></li>
						<li><a href="#">Mortgage Programs</a><span></span></li>
						<li><a href="#">Nina's Blog</a><span></span></li>
						
						</ul>
		</header>
			
			
			<div id="main-content">
				
				<h3>Hello. My name is Nina Penny. </h3>
			<p>	I'm the mortgage broker who specializes in 
				customer service. With over 10 years experience, I offer the expertise to find the 	best options available for your mortgage needs.</p>

			<p>	If you are considering a home purchase; a refinance; or interested in learning about reverse mortgages, I can help make sense of the options available to you.</p>

			<p>	My clients know I'm true to my word and someone they can trust. <a href="#">(View testimonials) </a>Call (<span class="skype_pnh_print_container">480.635.2410</span><span tabindex="-1" dir="ltr" class="skype_pnh_container"><span class="skype_pnh_mark"> begin_of_the_skype_highlighting</span>&nbsp;<span dir="ltr" title="Call this phone number in United States of America with Skype: +14806352410" class="skype_pnh_highlighting_inactive_common"><span skypeaction="skype_dropdown" class="skype_pnh_left_span">&nbsp;&nbsp;</span><span skypeaction="skype_dropdown" title="Skype actions" class="skype_pnh_dropart_span"><span skypeaction="skype_dropdown" style="background-position: -5849px 1px ! important;" class="skype_pnh_dropart_flag_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;</span><span class="skype_pnh_textarea_span"><span class="skype_pnh_text_span">480.635.2410</span></span><span class="skype_pnh_right_span">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>&nbsp;<span class="skype_pnh_mark">end_of_the_skype_highlighting</span></span>) or email <a href="mailto">(nhpenny@msn.com)</a> anytime to discuss your mortage needs.</p>

				<h3>I will work evenings and weekends to earn your business. </h3>
</div>	
				
				<aside>
					<div class="widget">
						<div class="sidebar-post">
							<h4><em>Latest Post</em></h4>
							<div class="date">March 21, 2011</div>
							<h5>Reverse Mortgage Rates at all time lows!</h5>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
						<div class="post">	<a href="#">View post</a></div>
						</div>
					</div>
					
						<div class="widget industry-news">

							<h4><em>Industry News</em></h4>

							<div class="sidebar-post">
								<div class="date">March 16, 2010</div>
								<h5>Why Refinancing is Good</h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							<div class="post">	<a href="#">View post</a></div>
						
							</div>
						</div> <!--End main content-->	
				</aside>
</div>

Open in new window

Existed markup has problems with proper closing divs

Could you please make screenshot of colored bar?
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 400 total points
ID: 35101476
Positioning is difficult because a lot of it is not intuitive.  W3Schools has a good section on CSS http://www.w3schools.com/css/default.asp and Quirks Mode http://www.quirksmode.org/compatibility.html can show you some of the differences in the way that the browser interpret CSS.

In addition, you're trying to do it with HTML5 tags and I don't think any browser fully supports HTML5 yet.  HTML5 is expected to be adopted in 2014 last I read.   IE8, Firefox, and Chrome show your page quite differently.
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 400 total points
ID: 35101543
If you are using <div>'s and floats the property of surrounding elements are effected by the child elements. This is always a trouble spot for new designers (it was for me). I learned a lot from one of the best websites for learning about CSS call "A List APART".

Here is the link:
http://www.alistapart.com/articles/css-floats-101/
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mikegeorge2
ID: 35101800
Thanks guys. Sometimes I guess just a second set of eyes helps one to notice something as simple as a missing closing tag.

@SSupreme..I copied and pasted the Skype code but it doesn't seem to be working right on the page. Is it a click that automatically calls? I am not very familiar with it. I think my client will mostly be dealing with senior citizens so I'm not sure if I need that extensive technology attached to the site. But it is something I will definitely use in the future. I've attached a screenshot of the bar...I use Chrome as my default browser and that's where the bar appears...I checked it in Safari and the bar doesn't appear. Weird.

Thank you @DaveBaldwin and @jeremyjared74. I will check out both of those links!
Screen-shot-2011-03-10-at-7.01.2.png
0
 
LVL 1

Accepted Solution

by:
A_Nilsson earned 1000 total points
ID: 35101875
Hi,

Question 1:

It is not necessary to use 'position: absolute', actually this will make the code more difficult to maintain. Here is a solution that will work:
1. Put the <aside> outside of the <div id="main-content">. This is done by moving the line '</div> <!--End main content-->'  to before the opening '<aside>' tag. Thereafter, you might need to adjust margin and width, but that will be easy.

Position: absolute specifies that the left, right, top, and bottom properties should be interpreted in respect to the parent element (that the element is inside of). For example, if used together with 'left:100px; top:150px;' means that the element places itself 100 pixels from the left edge of the outside div, and 150 pixles from the top of the outside div.
Position: relative specifies that the left, right, top and bottom properties is interpreted as 'from what would be natural'. For example, "left: -50px" places the element 50 pixles to the left of its natural position.

Question 2:
Here, there was a little mess with the a and p tags. Change the following:
<p><a href:"<a href="mailto:nhpenny@msn.com">nhpenny@msn.com</p>
to:
<p><a href="mailto:nhpenny@msn.com">nhpenny@msn.com</a></p>

Good luck!
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35101925
You need to check your page in Firefox because it is broken there.
NinaPenny.jpg
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question