SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27

Thread: Float problem

  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Float problem

    One more question.

    I'm doing this in Wordpress and on this page...

    http://modocom.ca/gillons/contact-us...ess-insurance/

    I want those to be posts for each person and they are floats currently but I want it to act like what I originally had on this page...

    http://modocom.ca/gillons/contact-us/staff-directory/

    So when you select a person it pushes everyone down below too. This was achieved by rapping another div around the three and then so on and so on but since its going to be posts in Wordpress I can't really specifiy that I don't believe to wrap a div around three of the posts so everything pushes down nicely. And by doing it way I'm attempting too with just using floats it sometimes shifts things to the side when you open it.

    I hope the makes sense and that it can be easily achieved.

    Thanks,

    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    I split your post as your other question was more an js/ajax question.

    Regarding the question in this thread then if I understand correctly you can just use inline-block instead of floats.

    e.g. .Add this code after all the original rules for that element.
    Code:
    .fourcolstaff{
    float:none;
    display:inline-block;
    *display:inline;/* ie7 hack for inline-block*/
    *zoom:1.0;
    margin-right:2.8%;
    vertical-align:top;
    }

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect, exactly what I was looking for.

    Is there a way to make it so it goes the full-width of its parent column. I'm guessing it will be tough since theres a margin-right on the divs?

    Thanks for splitting the post I didnt know exactly where to put it I thought maybe CSS would be able to do something like that.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could try something like this but you will need to test it doesn't push to a new line in some browsers.

    Additional code:
    Code:
    .bizcontent {margin-left:-2.8%;}
    .fourcolstaff{
    margin-right:0;
    margin-left:2.8%;
    width:29.5%;
    }

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Another question on my homepage my dropdown isnt working if you scroll down the Select Locations one...

    http://modocom.ca/gillons/

    Also once this dropdown is working is it possible instead of when you rollover Select Locations the dropdown appears but when you click on Select Locations it appears so you can choose the location. May confuse people if you just rollover it and it always appears. Some people may think you should be clicking then the dropdown appears.

    Thanks,

    Mike

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is really another JS question as none of this is CSS

    I don't know why your select isn't working as I remember it working before when you mentioned it. Where is the script for it?

    You will have a problem anyway in that you have set all links to fade out the page and redirect to another page.

    Code:
    	<script type="text/javascript">
    		$(document).ready(function() {
        	$("body").css("display", "none");
     
        	$("body").fadeIn(1000);
     
        	$("a").click(function(event){
           	 	event.preventDefault();
            	linkLocation = this.href;
           		 $("body").fadeOut(1000, redirectPage);      
        	});
             
        	function redirectPage() {
            	window.location = linkLocation;
        	}
    	});
    	</script>
    That means your select dropdown will never work because as soon as you click the link the body element is faded out.

    I can move this thread to the JS forum if you want as this looks to complicated for me

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Actually want the Select Locations to be a dropdown menu in CSS. I wook off my page transitions for all the a elements so can achieve what I want when clicking on select location.

    Would you be able to help me out with the Select Location CSS Dropdown and making it so you need to click on Select Location to show the dropdown.

    Thanks,

    Mike

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    You can only make a hover menu with CSS. If you want it to open on click then that's really the realm of Javsacript (although you can do things with CSS :target but in most cases is too awkward or not the best option).

    If you want to show the menu on click then you could just add a class with jquery which will open the menu and then remove that class when you close the menu.

    You may need to clarify exactly what you want as I may be misunderstanding what you need.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Basically what I believe I'm looking for is a select dropdown menu.

    Someone in the JS forums is helping me with pulling content in when each item is selected.

    So just need help solving my dropdown menu for Select Location currently the dropdown is not even working.

    Not sure if that makes sense lol.

    Thanks,

    Mike

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The dropdown isn't working because you have closed the list before the ul and that is invalid. The nested ul must be inside the li element like this:

    Code:
    <div class="nav-location">
    		<ul>
    				<li class="locationhead"><a href="#">Select Locations</a>
    						<ul id="location-options">
    								<li><a href="#">Atikokan</a></li>
    								<li><a href="#">Dryden</a></li>
    								<li><a href="http://www.google.com">Emo</a></li>
    								<li><a href="#">Fort Frances</a></li>
    								<li><a href="#">Rainy River</a></li>
    								<li><a href="#">Red Lake</a></li>
    								<li><a href="#">Sioux Lookout</a></li>
    								<li><a href="#">Thunder Bay</a></li>
    						</ul>
    				</li>
    		</ul>
    </div>
    The hover dropdown will now work but it won;t be able to break out of .row because you have hidden the overflow. You wil need ot make the overflow visible and use another clearing technique.

    Code:
    .row{overflow:visible;zoom:1.0}
    .row:after{
    	content:" ";
    	display:block;
    	clear:both;
    	height:0;	
    }
    If you want the menu to open on click then you could add some js but this may interfere with whatever you are doing in the other forum so you may need to ask there but here goes.

    Put this script at the end of the html:
    Code:
    <script>
    			$('.nav-location').on('click', '.locationhead > a', function() {
      			$(this).closest('.nav-location').toggleClass('navon');
      		return false;
    		});
    		</script>
    Then add this CSS:

    Code:
    .navon ul ul{
    	display:block;
    	background:#fff;
    	top:100%;
    }
    .nav-location ul li:hover ul{display:none}
    .navon ul li:hover ul{display:block}
    You should then change the down arrow to an upward arrow using the navon class that is added to .nav-location.

  11. #11
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    One more question on this page is it possible to have a specific one open. I plan to make 8 location pages and each page that specific location info will be open but you can close it and view other location information as well.

  12. #12
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Another thing, in the main Nav when your selected on a child of the nav the parent shows as underline which is correct but when you scroll over that parent the childs are underline. I only would like the selected one to be underline and selected child. Example....

    http://modocom.ca/gillons/us/our-story/

    If you roll over About Us on the main navigation you will see all the children pages are also underlined I would just want Our Story to be underlined.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post

    If you roll over About Us on the main navigation you will see all the children pages are also underlined I would just want Our Story to be underlined.
    Remove this line:
    Code:
    .nav .selected a {text-decoration:underline}
    and change it to this:

    Code:
    .nav .selected > a{text-decoration:underline}
    Now only the immediate child will get the underline.

    One more question on this page is it possible to have a specific one open. I plan to make 8 location pages and each page that specific location info will be open but you can close it and view other location information as well.
    I'm not quite sure I follow as I don't really understand what you mean by location info and what it looks like and how it ties into the dropdown menu as such. You may have to draw or show me an example. It is possible to have the dropdown open by default but that doesn't seem to be what you are asking?

  14. #14
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks, sorry didn't explain that very well.

    On this page...

    http://modocom.ca/gillons/contact-us/locations/

    All my toggles are closed. I am going to be making 8 different location pages for example...

    http://modocom.ca/gillons/contact-us.../fort-frances/

    So on the above link I'd like it so that the Fort Frances toggle is open immediately when you get to the page.

    Hope that makes more sense.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think we must be talking at cross purposes

    I thought we were talking about the select dropdown but now you seem to be talking about toggle elements which I guess are the big elements on this page with the + sign to open them. Is that correct?

    However you say you wanted a default one open on this page:

    http://modocom.ca/gillons/fort-frances/

    But I don't see any toggle items on that page?

    I must be barking up the wrong tree

  16. #16
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    I actually havent created that page yet.

    It will be the same content as the Locations page, identical but just with for example the Fort Frances toggle to be open.

    Just wanted to see how to do it using the Locations page and then I can make the other pages to have a default open toggle for each location on a separate page.

    Hopefully that makes sense lol.

    Thanks,

    Mike

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The easiest way is just to hardwire the current item on those pages to be open. As the JS is doing this by changing the inline style and adding a class then you could do the same so that the JS wil still work the same way.

    e.g.

    If you want Rainy River open then add a class of open to the h3 and an inline style of display:block to the div as follows.
    Code:
    <h3 class="toggle-title sws_toggle1 open">Rainy River</h3>
    <div class="toggle-content" style="display: block;">213 Fourth St<br>
    		Rainy River, ON P0W 1L0
    		<p></p>
    		<p>Phone: (807) 852-3257<br>
    				Fax: (807) 852-3127</p>
    </div>
    That will allow the JS to close the item n the normal way.

    BTW you shouldn't be using an empty p element just to make space as that's what margins are for. If you put the p element around the address you can apply a margin-bottom to it and fix the semantics at the same time

  18. #18
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!!!

    Actually thats Wordpress creating those damn empty paragraph tags. Its very frustrating cause it does it all over the place lol.

    One more thing, heres one of the pages...

    http://modocom.ca/gillons/contact-us...ions/red-lake/

    My bottom border is gone now from the one that is defaulted to open. How can I put it back, do I have to wrap it all in a div?

    Thanks,

    Mike

  19. #19
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    No worries I solved that issue just going through all of them now to fix it up.

    Now if I could only solve the issue with that Location but think thats a Javascript/Ajax thing. Had some help in the other forum when you separated it, but didn't really solve it. Hopefully soon though

  20. #20
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Edit....

    Fixed the Staff Directory to show the Name and Job Title but now the 100% opacity that use to show when it was open is gone.

    How could I change that back to how it was so when it is open the image is 100% opacity.

    Thanks,

    Mike

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Edit....

    Fixed the Staff Directory to show the Name and Job Title but now the 100% opacity that use to show when it was open is gone.

    How could I change that back to how it was so when it is open the image is 100% opacity.

    Thanks,

    Mike
    Which page are we on now Mike and which element

  22. #22
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oppps back to this page...

    http://modocom.ca/gillons/contact-us...ry/management/

    Had made it for the image to stay at 100% but went in and needed the employees name and job title to show but once did that it ignored the rule we put for the image to be at 100% tried couple things to get it back when open but was unsuccessful lol

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You should be able to do this:

    Code:
    .sws_toggle3.open img{opacity:1.0}

  24. #24
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect!!!! You are the man!!! Do you know any javascript/ajax gurus I can ask regarding my find an office section?

    Thanks

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll just have to ask again in the thread as Markbrown certainly knows his stuff.

    It looks to me as though you haven't created the html file he told you to:

    Code:
    <div class="sevencol">
      <h4>Gillons  | Emo</h4>
      <p>74 Front St<br>Emo, ON P0W 1E0</p>
      <p>Phone: (807) 482-2146<br>Fax: (807) 482-2757</p>
    </div>
    <div class="fivecol last">
      <h4>Office Hours</h4>
      <p>Monday-Friday<br>8:30am - 5:00pm</p>
    </div>
    You need to save that snippet as an html file (just the code above nothing more) and then reference it in the href that you click:

    emo-snippet.htm
    Code:
    <li><a href="http://modocom.ca/gillons/emo-snippet.htm">Emo</a></li>
    At the moment you are loading the whole page and all the scripts so it just all gets messed up. You will need to do the same for al snippets

    Try that and if it doesn't work ask Mark for help again

    Or you could simplify it and just include those snippets in each page and hide and show the relevant div without loading anything. It's a bit wasteful but saves the Ajax request and of corse means you have to the same info to all pages (unless you can just include it).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •