?
Solved

CSS positioning

Posted on 2014-09-22
9
Medium Priority
?
545 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

762 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