I believe my question would be best answered with an example. So here is a JSFiddle.
HTML:
<ul>
<li>
<a href="#">
<img alt="placeholderImg" src="http://placehold.it/82x82">
</a>
</li>
<li>
<a href="#">
<img alt="placeholderImg" src="http://placehold.it/82x82">
</a>
</li>
<li>
<a href="#">
<img alt="placeholderImg" src="http://placehold.it/82x82">
</a>
</li>
</ul>
What I want to do is have my floated list items occupy an exact width of 262px in all major browsers (IE7 and above).
I assume you need to keep li's at a certain width, so that they float left in order to lie next to each other? In that case you need to do away with the scroll overflow because the scrollbar is taking up unwanted space. Your items should lie next to each other now if your math (adding widths and margins together) is done correctly .
http://jsfiddle.net/Diezel23/kGKaV/14/
Related
I am using grid for ul tag, but also want to make whole li clickable.
How is it possible?
<ul>
<li class="wedding-bouqette">
<a href="#">
<h3 class="bouqette-title">Свадебные букеты</h3>
<span class="bouqette-desc">Букеты для невест</span>
</a>
</li>
Hello Im having problems with foundation 6. In my footer there is a social list with 4 icons(phone, email, twitter, facebook) I cant get them to stay centered on resize. On my PC it seems fine, however, uploaded onto the web and viewed on my phone(nexus 6) the icons are off center to the left. here is my footer code
<footer>
<!--social icons should be centered -->
<div class="row">
<div class="large-3 medium-centered columns">
<ul class="menu social">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901 ;="">
<i class="fi-telephone"></i></a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
The site is www.gastromob.com. I could really use some suggestions on how to improve this site. I'm having several problems, but I'd like to fix this one first, thanks.
The class medium-centered that you use is meant to center a column within a row; it does not center the text inside that column.
Foundation 6 recommends using the <div class="menu-centered"> wrapper around the <ul class="menu">. If you're using Flexbox, you don't need the wrapper and can add the .align-center class to the ul element instead. Please click here for more information.
Using the row and column wrapper seems unnecessary here.
You could write your code this way to achieve what you need:
<footer>
<div class="menu-centered">
<ul class="menu">
<li>
<a href="http://www.twitter.com">
<i class="fi-social-twitter"></i>
</a>
</li>
<li>
<a href="http://www.facebook.com">
<i class="fi-social-facebook"></i>
</a>
</li>
<li>
<a href="tel:12345678901">
<i class="fi-telephone"></i>
</a>
</li>
<li>
<a href="mailto:info#example.com">
<i class="fi-mail"></i>
</a>
</li>
</ul>
</div>
<p class="text-center copyright"> All Rights Reserved Final FInal 2016.</p>
</footer>
By the way, href="tel:12345678901 ;="" is incorrect and should be href="tel:1234567890" instead.
I've also looked at your site, and noticed that you set a fixed height for the element <div id="overlay">. As a result, when viewing the site on a small device, this overlay spills over and covers the elements below it. You should simply remove the fixed height to solve this problem.
The boat logo also obstructs the view when shrinking the size of the screen. You may want to make it responsive as well.
Other than that, all the other elements are responsive and look good!
So, I have this list contained within a specific id. I only want to manipulate the link colors for this specific id, which is #icon-header. So here is the problem:
I want the whole li element to be the link, but instead of having the background color change on hover, I want all of the text elements to to the color #2BA6CB. And no matter where the user clicks, I want the whole li element to be the link.
So, I was wondering if there was something wrong with where I am putting the a tag, and also what your suggestions were for the css of it all.
The i tag is a webfont. I need that to change with the h4 and the p tag all at the same time when the user hovers over the li.
Any help would be amazing. Here is the html:
<div class="row hide-for-small" id="icon-header" align="center">
<ul class="large-block-grid-6 small-block-grid-1 medium-block-grid-6">
<li></li>
<li>
<a href="#">
<i class="fi-male size-60"></i>
<h4>Ready</h4>
<p>Create a personal health and fitness profile.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-checkbox size-60"></i>
<h4>Set</h4>
<p>Set goals and chart your progress.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-upload-cloud size-60"></i>
<h4>Go</h4>
<p>Upload your exercise data from anywhere.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-graph-bar size-60"></i>
<h4>Learn</h4>
<p>View real results and develop healthy patterns.</p>
</a>
</li>
<li></li>
</ul>
</div>
You need to give the a-tag the dimensions (width & height) of the li Element instead of styling the li Element. Then you will have the effect, that you can click the whole highlighted area instead of only the link.
To give an inline element like ´a´-Tag a width and height you need to give it ´display:block;`.
Make the 'a' tag display: block in the css. Note that wrapping an anchor tag around block level elements is only allowed in html5. Older specs explicitly disallow it.
So I have a question that might be relatively simple, but I haven't been able to solve yet.
On my website, I have a of company logos that is within a div that breaks if you add any other divs for organizational purposes (because the first div is used for css animations and adding any other divs in it causes problems for some reason), which is preventing me from centering the second row's logos beneath the first row. I've been kindly warned about posting links so deleted that. Here is the relevant code (i'm hoping it's complete):
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="#">
<img src="x" />
<div><span>Account Management and Product Intern</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Advisory Board Member</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Biz. Intelligence and Web Specialist</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Marketing Manager</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Marketing Consultant</span></div>
</a>
</li>
<li>
<a href="#">
<img src="x" />
<div><span>Product Manager/Developer</span></div>
</a>
</li>
<li>
<a href="#">
<img src="X" />
<div><span>Tech+Data Lead/Advisor</span></div>
</a>
</li>
</ul>
Due to the sizes of the container and the images, these elements show up as 3 in the first row, 4 in the second. Does anyone have any solutions for this? I tried turning them into inline-block elements, or adding margins, but nothing really worked without specifying a new div for the second row's 4 elements.
Thanks in advance!
*Edit: Deleted link, sorry about that.
Is this what you are looking for?
ul{text-align:center;}
li{display:inline-block;}
jsfiddle: http://jsfiddle.net/UpG5M/
You might try to target the offending logos with the :nth-oftype CSS pseudo-class.
http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
So at the top of my page I have a title and a facebook logo. Here's a working example: fiddle
So everything is in a neat row at the top of the page. However, I want the logo and the text Join us on... to be on the right side, and the heading stays where it is. I've tried adding class="pull-right" to the 2nd and 3rd <li> elements, like this. But you can see how that really screws up the vertical alignment. Other than the alignment that's how I want it to look.
Any ideas on how to fix the alignment?
You can apply the pull-right on the li. Also, H4 will cause a break so, you should put the img and "Join Us..." inside the H4.
Try this:
<ul class="inline">
<li><h3 class="muted">Heading</h3></li>
<li class="pull-right">
<div class="media">
<h4 class="media-heading">
<a href="#">
<img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
</a>
Join Us on Facebook
</h4>
</div>
</li>
</ul>
you should add another element and give it "pull-right" class. Your join us code should be in that .
So you should have like this;
<ul>
logo
</ul>
<ul class="pull-right">
join us
</ul>