Solved

CSS Positioning Issues...

Posted on 2011-03-10
6
256 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 50 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 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 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 100 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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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 250 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 82

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now