I am using jquery tools scrollable plugin with Navigator plugin for navigation buttons.
everything is working great it just a matter of positioning.
right now i have to us absolute positioning for the navigation buttons:
.navi {
width: auto;
height:13px;
position: absolute;
right: 35px;
top: 10px;
}
.navi a {
width:8px;
height:8px;
float:right;
margin:3px;
background: url(../img/navigator.png) 0 0 no-repeat;
display:block;
font-size:1px;
cursor: pointer;
}
I need to have the anchors floating right because they will grow dynamically and in the design the are aligned on the right edge and grow out to the left side.
The problem with that, the plugin will make the anchor to the far right the first one. I need the first anchor on the left side to be the first one and iterate to the right.
currently the html looks like this
<div class="navi">
<a></a>
<a></a>
<a class="active"></a>
</div>
with them floating right.
I need them to float right but render like this:
<div class="navi">
<a class="active"></a>
<a></a>
<a></a>
</div>
I'm using this plugin Jquery Tools Navigator
The default functionality of float:right; is to display the first element far right and the following elements will line up from right to left. If you want them to be displayed from left to right you would have to use float: left;. If floating left is not working for you you would have to rearrange the order of the images.
This is just a CSS issue - nothing to do with jquery, and certainly not the C# 'float' tag!
I presume this image 'navigator.png' is 20x20px, so you will have to use a block element on the .navi a liks to be able to set the size. In that case, you will have to use float: left on .navi a, and then change .navi width: auto to a specified size (3 a tags = 3 x (8+6) = 42 - that's the width+margin). This then lets you enter some text in the tags which you can hide using .navi a text-indent:-9999px.
The alternative is to just hack it a bit using some padding. Personally, I'd use the first solution. Let me know if you need clarification with the CSS code.
Related
I have a table (bootstrap themed, generated from Django admin).
In one of the columns I have a div, which contains three elements, and anchor and two spans - each span to display bootstrap glyphicon.
<div class="my-fixed-width under-review data-sent-false">
C4U0UACXX-8 6nb
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>
I would like to have the icons moved to the right (ideally lined up between table elements in the same column).
My problem is that when I add float:right to the spans, it moves them right, but also down and expands the div height.
After the float:right is added :
How can I keep the icons at the same vertical position as before, while moving the elements right? (I have tried position:absolute, and clear:both).
This question has been here a while, but I found a good answer so I want to share.
According to this answer I found elsewhere on StackOverflow, the elements that you want to have floated right need to be given first in your html structure.
<div class="my-fixed-width under-review data-sent-false">
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
C4U0UACXX-8 6nb
</div>
This bug was giving me all sorts of trouble on my own website, but once I found this out I realized that it's actually quite simple to understand the fix. When you put a float:right element after everything else, then it will float to the right just like you asked it to. But if there's not enough room to the right (or if some quirk of browser rendering makes it think there's not enough room) then that element gets pushed down as well, so the browser is satisfied that it will fit. But if you put the float:right element first, then it goes right where it's supposed to before the browser lays out any other elements. Then the ones without float:right get put in according to their usual layout, including adjusting auto-widths or auto-margins to accommodate floated elements.
It didn't happen when I was testing this, but this configuration might still cause both of them to be on top of each other even if they're not initially pushed down from their original position, but if that happens try adding the display:inline-block like this:
span.glyphicon{
float:right;
display:inline-block;
}
See this JSFiddle on an example of it working with the spans placed before the anchor.
Maybe you should post all the code, because float right should not do that. See that codepen : http://codepen.io/mbrillaud/pen/myKjPO
.my-fixed-width{
width:200px;
background-color: orange;
}
.icon{
float: right;
}
If you want to use position: absolute, do not forget to set the parent to position: relative, like this: http://codepen.io/mbrillaud/pen/jEKpqx
.my-fixed-width{
position: relative;
width:200px;
background-color: orange;
}
.icon{
position: absolute;
right: 0;
top: 0;
}
if it goes down when you don't want it to then simply add a
"Margin-top: -(###)px;"
to the CSS
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.
The problem we're trying to solve is that text is overflowing past the end of a <p>. It seems to be the result of its contents, which include a relatively-positions <a> element, with an absolute-positioned <span> element within it, which has padding. Firefox wraps the text as I would normally expect.
Here's an abstraction of my HTML:
<p>
In this second example,
<a href="#">
<span class="icon"><img src="play.gif"></span>
mo
</a>
muh...
</p>
And an abstraction of the CSS, as simplified as I think still makes sense:
a {
padding: 5px;
}
a span.icon {
position: absolute;
display: block;
width: 15px;
height: 15px;
}
Here's a screenshot of the problem (the highlighting is Chrome's element inspector with the <p> element highlighted). You can see the word immediately overflowing at the end of the <p>:
Any pointers in the right direction appreciated.
Instead of using absolute positioning, try using display:inline or display:inline-block (if you need to set height/width - Note: not supported in IE 7 and lower).
You could drop the display all together, because images and spans are inline to start with. I have an example here removing the span and just styling the image and surrounding link.
You could also use the image as a background for the button, and set the padding to account for the space. Example:
.button{
background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */
padding: 0 0 0 15px;
}
example
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)