Float problem

HTML & CSS
1

One more question.

I’m doing this in Wordpress and on this page…

http://modocom.ca/gillons/contact-us/staff-directory/business-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

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.


.fourcolstaff{
float:none;
display:inline-block;
*display:inline;/* ie7 hack for inline-block*/
*zoom:1.0;
margin-right:2.8%;
vertical-align:top;
}
3

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

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:


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

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

Hi,

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

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.


	<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 :slight_smile:

7

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

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.:slight_smile:

9

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

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:


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


.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:


<script>
			$('.nav-location').on('click', '.locationhead > a', function() {
  			$(this).closest('.nav-location').toggleClass('navon');
  		return false;
		});
		</script>

Then add this CSS:


.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

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

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

Remove this line:


.nav .selected a {text-decoration:underline}

and change it to this:


.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

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/locations/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

Hi,

I think we must be talking at cross purposes :slight_smile:

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 :slight_smile:

16

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

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.


<h3 class="toggle-title sws_toggle1 [B]open[/B]">Rainy River</h3>
<div class="toggle-content"[B] style="display: block;"[/B]>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 :slight_smile:

18

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/locations/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

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 :slight_smile:

20

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