I have a set of CSS which allows simple family trees to be drawn using unordered lists.
This works well so long as the ul.tree is narrower than the width of the screen at which point it does an untidy wrap. To avoid this I have used the following:
#treewrapper {
margin: 10px; padding: 20px; width: auto; white-space: nowrap; overflow-x: scroll; overflow-x: scroll;
}
#tree {width: 5000px;}
How ever this means you get a huge #tree area even when the tree is actually narrower than the the current width of #treewrapper.
My first thought was to find the width of the ul element and change the width of ul.tree to match using javascript once the page is rendered, but when I look at the width of ul it appears to be the width of #tree minus the padding.
Setting #tree width to auto simply results in a wrapped ul.tree when the screen is narrow.
Is there a simple way in CSS (or javascript) to get #tree to be wide enough?
Live example with #tree set to Auto can be seen at http://www.rjt.org.uk/m/example/index.html
The way to get the width is by using javascipt and .offsetWidth. Here is an example:
document.getElementById('tree').offsetWidth;
Though you can just use css to include the padding by using:
display: block;
float: left;
Because when you use block elements it picks up the padding as well
Change the width of #treewrapper, .tree and .tree ul to width:100%;. Should fix your problem.
Related
Imagine h1 is inside a div:
Compare two styles: What is the problem with inline-block?
h1 {
display: block;
Width: 150px;
margin: 0 auto
}
h1 {
display: inline-block;
Width: 150px;
margin: 0 auto
}
As their name implies, inline-blocks are laid inline. Auto margins have no effect on inline and inline-block boxes.
This isn't a "downside" or a "problem" with inline-blocks per se; it's just how inline formatting works. There is little reason to use an inline-block for anything other than putting a block container on a line box.
You could wrap inline-block styles around a block. That way you still get to control margins.
.wraper { display: block; margin: 0 auto; }
.content { display: inline-block }
<div class="wrapper"><h1></h1></div>
You may add as many inline blocks and will just work.
Well...a bit late, but still useful, I hope.
First of all: a visual example is here on the Jsfiddle.
Remember that "headings" are block-level elements (see MDN), so the display:block; is somewhat "implicit".
When you add the display:inline-block;, you are in fact removing the "block-level" element status thus making it behave differently: in your specific case, margin: 0 auto means 0-pixels margins on top and bottom, while 0-pixels margin on the left and "whatever it is" on the right. Just like any text on your page. So, you could add something after the <h1> tag, to have it show up inline (of course) with the heading (see JSFiddle example).
On a display:block; element, on the contrary, the left and right margins would be calculated so that the element remains on the center of the parent.
I want to create a breadcrumb for a website.
The elements should expand to fill all of the available space. If they couldn't fit on it, I'd like to have their inner text clipped with text-overflow: ellipsis, except the last one.
In other words: have the last element with the full width, and distribute the other ones on the remaining space (with width depending on their content, or if not possible at least they should't look bad...).
I tried with this code.
<div>
<ul>
<li>paka</li>
<li>ultrapaka</li>
<li>ultrapaka</li>
<li>ultrapaka ultrapaka</li>
<li>daslidjsajdsa</li>
</ul>
</div>
Here the CSS:
div {
display: table;
margin: 5px;
border:1px solid #777;
padding: 3px;
table-layout:fixed;
}
ul {
display: table-row;
}
li {
display: table-cell;
padding: 5px;
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
If I put table-layout: fixed the table really constrains its space, but I lose the automatic cell width.
If I don't put it, the table just overflows outside of its limits.
You can find a JsFiddle here. (I have set the table width to 400px to show the desired effect, even though on the final solution it should expand at 100%).
The best way to do that is using flexbox properties, but it's hard to make it work for all browsers.
You could maybe give a fixed width or percentage for all cells, and use the :last-child selector to apply an auto width on the last cell.
You could also try box-sizing, but I'm not sure about the result.
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
Let's say I have a CSS DIV that holds formatted syntax code. The DIV is set to a min-width:100; and a max-width:100;
This same DIV has another CSS declaration for when the DIV is Hovered, max-width: 135% !important; and min-width: 135%;
So if the DIV holding the formated code is wider then the DIV's width, it shows a scroll bar and when you hover over the DIV it expands the DIV to the width of the code not to exceed 135%, if the DIV's code does not exceed the width of the DIV then the DIV stays the same width.
My problem, is that when a div exceeds the 100% width, it expands to the width of the code inside but stays LESS then 135%, is there a way to make it expand to 135% even if the code is not 135% but is over 100%?
Hopefully this makes sense
I almost need some kind of conditional statement that says...
If DIV contents are > 100% then make DIV 135% on Hover otherwise leave DIV at 100%
Is this even possible?
Here is my full CSS
.syntax {
min-width: 100%;
max-width: 100%;
margin: 1em 0 1em 0;
position: relative;
overflow-y: hidden;
overflow-x: auto;
font-size: .9em;
display:inline-block;
}
.syntax:hover {
max-width: 135% !important;
min-width: 135%;
}
I'm not sure I'm getting waht you mean, but if I'm not mistaken, all you're leaving aside is this:
min-width: 135% !important;
you may need to adjust overflow depending on what you need
A better option would be to use fixed sizes, but if you're working on adaptive layout environments guess that is a no go
In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.
<img src="/img/logo.png" style="margin:0px auto;"/>
add display:block; and it'll work. Images are inline by default
To clarify, the default width for a block element is auto, which of course fills the entire available width of the containing element.
By setting the margin to auto, the browser assigns half the remaining space to margin-left and the other half to margin-right.
You can center auto width div using display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with position:relative; will prevent margin:0 auto; from working, even if top, right, bottom, and left aren't set.
Setting the element to position:static; (the default) may fix it under these circumstances. Generally, block level elements with a specified width will respect margin:0 auto; using either relative or static positioning.
In my case the problem was that I had set min and max width without width itself.
Whenever we don't add width and add margin:auto, I guess it will not work. It's from my experience. Width gives the idea where exactly it needs to provide equal margins.
there is a alternative to margin-left:auto; margin-right: auto; or margin:0 auto; for the ones that use position:absolute; this is how:
you set the left position of the element to 50% (left:50%;) but that will not center it correctly in order for the element to be centered correctly you need to give it a margin of minus half of it`s width, that will center your element perfectly
here is an example: http://jsfiddle.net/35ERq/3/
For a bootstrap button:
display: table;
margin: 0 auto;
I remember someday that I spent a lot of time trying to center a div, using margin: 0 auto.
I had display: inline-block on it, when I removed it, the div centered correctly.
As Ross pointed out, it doesn't work on inline elements.
img{display: flex; max-width: 80%; margin: auto;}
This is working for me. You can also use display: table in this case.
Moreover, if you don't want to stick to this approach you can use the following:
img{position: relative; left: 50%;}
put this in the body's css:
background:#3D668F;
then add:
display: block;
margin: auto;
to the img's css.