Solved

CSS positioning

Posted on 2014-09-22
9
501 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Richard Korts
ID: 40337223
To Gary:

I don't understand your comment.

Thanks
0
 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 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