I have the following markup (and the resulting display shown below that).
I want the Prev and Next buttons to be placed closer to the left (as it is now) and the right edges of the bottom list divider respectively.
The middle button (this may be changed as a text) to be in the mid.
I tried almost all the usual technique such as text-align:right right:5px etc., but no success.
Can anyone suggest me a reliable cross browser way of doing this by CSS?
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"> Cars</li>
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li data-role="list-divider">
Prev
1 of 2
Next
</li>
</ul>
You can see a live example here: http://www.jsfiddle.net/yyshf
If I understand what you mean, you can just float the anchors and add a margin to the two rightmost anchors:
http://jsfiddle.net/yyshf/1/
li.list-divider a
{
float left;
}
li.list-divider a + a
{
margin-left: 33%;
}
Remember that with jQuery mobile CSS you have to add your CSS to the bottom. You might also have to add classes to these anchors to more specifically select them, or it might mess something else up in your mobile site.
You should add to <li data-role="list-divider"> (which contains the buttons spans) the following style: text-align: right;
See http://jsfiddle.net/wF5qa/1/
Related
I have a set of columns on my site. Each item is an <a> within an <li> and a member of an <ul>. The columns are set up so that the top-most <li> has a different class from the lower <li>'s in the same list (<ul>).
In IE7, the top <li> element will not align appropriately with it's lower neighboring <li>'s.
Here is how it should look (Latest version of Google Chrome):
Here is how it looks in IE7 (looks fine in >=IE8):
**Don't mind sizing differences.*
Here is the trimmed HTML for a single column
<div class="map-col" id="map-2">
<ul class="site-map">
<li><a class="map-upper">Services</a></li>
<li>Wood Fencing</li>
<li>Ornamental Iron</li>
<li>Gates and Openers</li>
<li>Restoration</li>
</ul>
</div>
Here is the CSS (I pulled out anything that didn't have to do with positioning --such as font-weight and font-size-- for readability)
.site-map{display:inline;}
.map-col{display:block; width:150px;}
.map-upper{text-align:left;}
.map-lower{*text-align:left;}
#map-1{float:left;}
#map-2{float:left;}
#map-3{float:left;}
#map-4{float:left;}
As far as it seems to me, IE7 just doesn't like when two separate CSS classes are appended to a single list.
Don't define text-align property for anchor tags.. Use it in LI. i.e
ul.site-map li{
text-align:left;
}
I was able to figure it out. For anyone with this issue in the future here is the simple fix:
It appears that IE7 has an indentation/margin bug on list elements. To get around this, the I modified the <li> elements to have a defined width of 100% so that they will fill the entire area of the <ul>. This allows the text to be left aligned correctly.
Added the following:
.site-map li{display:block; width:100%; text-align:left;}
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)
I am creating a website using Bootstrap found here:
http://www.bestcastleintown.co.uk/wp/
My issue is that on the home page my social networking buttons for Twitter and Facebook found just underneath the <header> do not align horizontally if you look closely. I was hoping that by creating a separate CSS class class="like-btn" for the list item containing the facebook button I can make them align horizontally.
<div class="bs-docs-social">
<div class="container">
<ul class="bs-docs-social-buttons">
<li class="like-btn">
<!--facebook like button-->
</li>
<li class="follow-btn">
<!--twitter follow button-->
</li>
<li class="tweet-btn">
<!--twitter tweet button-->
</li>
</ul>
</div>
</div>
However it looks like the facebook code for the like button is contained within an iframe which includes some CSS styles and unless my website happens to have the same matching protocol, domain and port as the Facebook iframe, I cannot not modify it because of Same Origin Policy.
I have noticed one CSS rule from facebook that if removed makes the buttons seem to align, but the border is removed from the bottom of the like button which is undesirable.
.pluginButtonSmall {
padding: 0 5px 2px;
}
Is there anything I can add to my .like-btn class to resolve the issue so the buttons align horizontally?
If that's causing the issue; maybe add a rule
.like-btn div {
padding: 0px;
}
or
.like-btn .pluginButtonSmall {
padding: 0px;
}
You might like to try a css rule something like...
.like-btn, .follow-btn, .tweet-btn {
float: left;
display: inline-block;
}
Use divs instead of ul> li and the use margin-top or padding-top on the social container elements to make them align horizontally. Usually you need to move them one or two pixels since not all social buttons have the same dimension.
At the bottom of getBootstrap.com they had this:
I used Chrome's developer's tools to see that the formatting came from this css file: http://getbootstrap.com/assets/css/docs.min.css
It has a license at the top that allows me to use it. So I downloaded it and made my own social media footer:
I found this thread because you are using the same class names as getBootstrap.com does, so I guess you are using bootstrap....
On Wordpress i'm using youtube channel list plugin.
It works well, but the align of the videos don't looks great. Actually display diagonal list below the BIG video!
Can someone suggest me how to fix this issue with css?
here's the page
http://www.snowypeach.com/home/?page_id=1106
I need the list under the video aligned horizontal, not diagonal!
You have nested a <div /> as a child of the <ul />. This is invalid markup. Move the <li/> elements to be the children of the <ul />, delete the <div /> and it will work
EDIT
Okay I see the problem. You are wrapping all this content within a <pre/> tag. This tag shouldn't be used here but if you are unable to get rid of it add the style white-space: normal;.
I tested the previous answer by moving elements within chrome dev tools which removed the whitespace and therefore the problem.
Hope this helps :)
There is class ytc-columns4 on the below <ul> which is taking control over the alignment of the small video <li> tags
<ul class="ytchagallery ytccf ytc-table ytc-td-bottom ytc-columns4">
according to that class the below css is generating by plugin in the css file on line 66
http://www.snowypeach.com/home/wp-content/plugins/youtube-channel-gallery/styles.css?ver=3.4.1
.ytc-columns4 li {
width: calc(100% / 4 + 10px / 3);
}
i have changed the class ytc-columns3 and ytc-columns2 and result vary every time. I am not exactly getting where is the calculation part of the plugin. Other wise i can tweek the code.
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.