Solved

CSS positioning

Posted on 2014-09-22
9
474 Views
Last Modified: 2014-09-22
Please look at http://davispipe.com/outdoor-lighting.html. On the menu, right center, click the item at the top, Irrigation. Note the gold colored < left of the first item. Click that & the full menu returns. This is done with a Flash Element.

Now look at http://rkassoc.org/Davis/outdoor-lighting.html. Similar menu center, right. Note that when you click on the top item (Irrigation), the gold < appears but on it's own line, pushing the submenu down. This version all done with CSS, Jquery.

How can I position the div containing that "gold" < so it replicates the Flash version?

Source attached.

Thanks.
outdoor-lighting.html
0
Comment
Question by:Richard Korts
  • 4
  • 3
  • 2
9 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40336970
Hi,

If you add a "float: left;" to the goback element, that should be close to what you want... You might also want to add "margin-top: 3px;" to push it down a little bit so it lines up better with the >

Hope this helps!

WebDevEM
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337006
No menu on that page, it's on the other page.
0
 

Author Comment

by:Richard Korts
ID: 40337221
To webDevEM

Doing what you said produces the attached; worse than before.

Here is the div:

<div id="goback" style="color: #EED028; font-family: Memphis Pro Medium; padding-left: 50px float:left; margin-top: 3px; ">

My guess is a conflict between padding-left & float: left

Thanks
misplaced-back-symbol.jpg
0
 

Author Comment

by:Richard Korts
ID: 40337223
To Gary:

I don't understand your comment.

Thanks
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 58

Expert Comment

by:Gary
ID: 40337243
There is no Irrigation menu on the page.
You have an unclosed script tag

      <script type="text/javascript">
$(document).ready(function() {
                  $('#slider').s3Slider({
                        timeOut: 5000
                  });
            });      
// no closing tag
      <script type="text/javascript">
0
 

Author Comment

by:Richard Korts
ID: 40337274
To Gary,

What page are you referring to?

I did a search on this page http://rkassoc.org/Davis/outdoor-lighting.html for "s3slider"; no find. That stuff is elsewhere in this project but I do NOT believe on that page.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40337281
http://davispipe.com/outdoor-lighting.html

The page is working OK in IE but not in FF.
0
 
LVL 9

Accepted Solution

by:
WebDevEM earned 500 total points
ID: 40337291
I'm guessing everyone is using different browsers here... In Chrome (for Mac) I made the edits I wrote above and got this:float left and margin top on Chrome
I looked at your site just now in IE, and it seems that you're missing a semicolon after "padding-left: 50px" before the start of the "float: left" which would ignore the float and confuse the padding-left because the browser would treat them both as one command.

Correcting that gave me this on IE 11 (Windows)IE11-Windows so it looks like there will be a more involved answer than just a line or two in order to make this work properly on all browsers.  Depending on what browser you're using, you'll also want to use the developer tools.  (For IE, that would be F12 http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx)  Looking in there I see 2 errors and 3 warnings, all of which could be confusing the final outcome of the page.  If you find and fix those, you'll have a more consistent end result and be that much closer to being able to adjust the positioning of the  back arrow.
0
 

Author Comment

by:Richard Korts
ID: 40337308
Works perfect in Firefox now after that fix on the missing semicolon.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 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

10 Experts available now in Live!

Get 1:1 Help Now