Running this JS Fiddle shows my <div> formatted correctly: http://jsfiddle.net/MRpj2/1/
It is a container that will act as an absolute positioned label. The problem is when you change the left property of the label CSS class to something high enough (1000px for example) to move the <div> out of view. When you do this, you'll have to scroll right to see the <div>, but the text is now below the div?
Is there a way around this? Everything I've tried has had no effect.
Simply use
white-space: nowrap;
on the .label.
Demo
Try before buy
Edit
As mentioned in the comments. This solely doesn't work in Firefox. So a solution to fix this is to use
display: inline-block;
instead of floating elements but still together with white-space: nowrap;. Check the new demo:
Second try before buy
Related
I'm having a tuff time centering the navigation of my website with the content body. I'd like the navigation to center with that instead of the browser because it looks like its a bit left of the content body and doesn't quite look right.
Is that possible. http://www.bryananthonylewis.com/ Just a simple blog with Twitter Bootstrap.
I think you're on the wrong track here..
a quick scan using chromeinspect shows me you use span8 offset 2 for your main content (the first element within your container element right beneath #modal-contact), and i think you're main content is a bit to the right and not the header to the left.
my quick fix:
remove the offset,
and get a css style on that content with:
float: none;
margin: 0 auto; /*replace 0 for top margin*/
putting a width to the container as Pankaj suggests might work too, although you might loose dynamic width changes provided by bootstrap this way... didnt check so i might be wrong on that part
update
another update to clarify
remove previous fix.
in the container element right beneath your #modal-contact add a wrapping div,
not at the top of your page like i think you did...
<div class="container">
<div class='row'>
<div class="span8 offset2">
blogcontent here
</div>
</div>
<div>
woops code tags were missing here
i get a feeling this should do the same thing.
and i also believe that the header needs the same fix. but i'm not 100% sure, so pls try and comment if it works or not. this update is based on the official docs
bootstrap documentation
if things don't work, forget about my suggestion and stick to what works
There is no problem with your header. Actually your content below is not centered and this is happening because of unwanted div with classes "span8 offset2 middle" right under div.container. Fix this by removing that div altogether and overriding .container in your css file by
.container {
width:777px;
}
an example of same edits inside web inspector of chrome
If you refer to the following screenshot:
You will see that everything is lining up perfectly except, the icon does not have a width that is calculated in the centering. You obviously want the icon TO have width.
So how can we do that?
Perhaps add something to the i tags like so:
i {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
}
UPDATE:
The screenshot above points to the problem. After a media query, the site goes into tablet mode and the navigation is off. Now, back to work!
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
I just need a sanity check here... DEMO
Basically, I can't figure out how to get the box under the link to get wider as more content is added. It seems fixed to the width of the parent div (or the width of, say, the longest element like the select or a really long word with no spaces), despite being absolutely positioned. I use this trick all the time with ul and li but it doesn't make sense to use that in my situation, and for some crazy reason it just won't work with a div inside a div.
I don't want to set a width (which, of course, works) because I don't always know what will be in this box. GRR
Thanks :\
EDIT
It appears that removing the position:relative from the parent element does, in fact, allow the box to get wider. However, relative positioning is necessary because I need the child div to be absolutely positioned under the parent div, and the parent div's location is technically dynamic (so no figuring out absolute page coords).
If I understand correctly...
Floating containers (i.e., #parent) will fit to their contents with the default of width: auto. The contents will line-break where possible to prevent the width from ever increasing.
To counter this, you should just need to employ white-space: nowrap.
Either for the contents as a whole:
.advanced {
/* ... */
white-space: nowrap;
}
Or, define a new class to allow for more flexible usage:
.line {
white-space: nowrap;
}
Then, (e.g.) wrap each label/select as:
<div class="line">
<label>Show:</label>
<select name="showAll">
<option value="true">My Team</option>
<option value="false">Mine Only</option>
</select>
</div>
Have you try the pre tag
<pre>text goes here</pre>
this will cause to break the line only wherever you insert a <br />
div#parent has position: relative;. Try removing that declaration. In my environment, that causes the div to expand as needed.
I am in Google Chrome 6.0.422.0 dev and as I add content (text) the grey box expands horizontally and vertically as necessary. What browser are you using?
I've been banging my ahead on this IE7 bug for the last few days and it's time to resort to the mind of the crowd.
I have the following HTML and CSS: http://beerpla.net/for_www/ie7_test/test.html
The goal is to have a <ul>, with each <li> containing a small icon and some text. Multiline text would be aligned to itself and not wrap under the image.
I've tried using float:left on the image and a bunch of other things, and finally I thought the position:absolute would work for sure but in IE7 I consistently see the text pop off to the next line and get misaligned with the image:
This is what I expect it to look like:
I even tried to make the div display:inline which kind of worked but then started wrapping under the image for long lines, so it was no good. zoom:1 also produced a similar effect.
I'm at a loss at the moment. This code works fine in all other browsers. IE7 is a special, very special child.
Any ideas?
Thank you.
Edit: If you have IE8, you can emulate IE7 by pressing F12 and then Alt-7.
instead of putting the image as an element, try using background property. like so
ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }
note: you might have to adjust the padding to suit the distance you want to maintain between the image and text.
Try using padding on the li instead of margin on the div. If display:inline worked, it's probably IE choking on working out the div's box model in some arcane way: padding on the li and maybe display:inline on the div may iron it out.
Moving the <img> tag into the <div> fixes the issue. Still unknown to me why IE7 does what it does.
Go back to floating your image left, and then add overflow: hidden; to the div. The text will no longer wrap below the image, and there are no side-effects unless you are trying to position content from inside the div out (don't see that here). Completely compatible cross-browser. With IE6 you simply need to add hasLayout by any means to get the same effect.