I have problem using nav-bar menu on foundation 3. I use default code on foundation 3 old doc but the menu become down. Please see my attach. [https://f.cloud.github.com/assets/4178068/487263/0e3ed49a-b951-11e2-9e10-ce74723ef6b3.jpg]
Please help regarding my problem. Thank you.
Some code:
<ul class="nav-bar">
<li class="active">Menu 1</li>
</ul>
The items on your nav-bar are exceeding the width of your template. You have to either give a bigger width to the .row class located in the foundation.css or remove some items from the nav-bar.
Related
I've 2 section in my screen. Left section is for showing tabs and right is for displaying that tab template(as shown in screenshot). I'm not able to understand how to load different templates when I click these tabs
For example, when I click change password, I should be able to load change_password.html template
This is by far I've tried with code.
<div class="nav">
<ul>
<li class="active"></i><span class="hidden-xs hidden-sm">Home</span></li>
<li></i><span class="hidden-xs hidden-sm">Change Password</span></li>
<li>Bookings</span></li>
<li></i><span class="hidden-xs hidden-sm">Settings</span></li>
</ul>
</div>
I've tried to use with but no luck.
I've just started with django, so if anything is missed let me know. Thanks for your help!
Screenshot
I think what you're attempting is not possible. If you don't want a page reload upon clicking on a tab, you need to use Javascript to dynamically show/hide elements. If page reload is acceptable, you can create different views for each tab, each view rendering a different html file.
You can use the Django include tag to render another template with the current context. E.g. {% include "foo/bar.html" %} (see documentation here). But this will not solve your problem of displaying different content upon clicking on a tab.
I have the following code for django-oscar
<ul class="row">
{% for product in products %}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-3">{% render_product product %}</li>
{% endfor %}
</ul>
it works find except on the phone.
As you can see from the screen shot, there is a weird space in the grid system when the size is reduced to the phone (it actually displays like this on the phone). On the desktop, the grid system displays correctly until the size of the browser becomes less than certain px. Is there a way to fix this? (I think I am using bootstrap3)
Grid system working well
Phone mode
what you're looking for is clearfix
Add this to the parent element, in this case the row class
If you look closely, in phone mode the In Stock is on different lines, i am assuming this is a height problem. Best solution is to use flex box . Or manually adjust the min height.
I am using Foundation 5 and trying to include a menu inside of an accordion. When the accordion is clicked and expands it works fine but rather than pushing the below content down when opened, it opens over the background of the below content, but under the content of the below content.
I have tried to change the z-index of the accordion to 0 but it does not help. I have also added the clearfix class to no avail.
Can be seen here
Any help or suggestions would be appreciated.
Thanks,
Pete
The error is in this line:
<div class="large-3 medium-4 columns hide-for-small sidebar-wrap" data-equalizer-watch="" style="height: 228px;">
You've set a fixed heigth for the container. Since it is already at max height, it can't expand further down.
remove style="height: 228px;" and everything gets pushed down. If you need a fixed height, so the content doesn't snap up and down everytime the user clicks on the accordion set it to height: 402px;. Thats the value Chrome tells me for 4 elements, with one expanded.
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
So yeah, I have this on the page:
<div class="addthis_toolbox addthis_default_style " id="divAddThis" runat="server">
<a class="addthis_button_facebook_like" style="opacity:1;" <%="fb:like:layout='button_count'"%>></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
But after clicking the like button (and closing the bubble), a <span> just inside the <fb:like ...> element dynamically gets a width of 450px, breaking the layout of AddThis (the buttons are all inline).
Recommendations?
Seems like it might be a bug on Facebook's side of things. I've seen a few reports pop up this week and I'm experiencing it myself as well.
Here is a link to one of the bug reports for it that says that Facebook is looking into it:
Facebook Bug Report
Hopefully we'll have an answer soon.