I have a type of navigation that is contained within a 'pill' of sorts.
I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.
I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.
Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/
How can I set this div element's width based on the amount of navigation items in the list?
Simply add display: table
DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/
.tabset-container {
margin: 0 auto;
position: relative;
top: 25px;
z-index: 1;
background: transparent;
text-align: center;
display:table;
}
Also add overflow: hidden to the tabs so then your rounded corners still show
.tabset {
overflow:hidden;
}
I was going in jQuery direction - fiddle (get the width and pass it trough .css())
+ display: inline-block on .tabset
Related
I have a parent div (for sake of test we'll call it #parent) and a child div (test reasons #child). #parent is absolutely positioned to the bottom of the page, with a fixed width of 100% and a height of 75px.
child is a div that holds dynamic content (being changed with jQuery). Seeing as it is dynamic, the width of the div is always different. What is the most efficient way to center this div horizontally, since the width is always unknown & different? Any help would be awesome.
The correct way to do this would be the following:
#child {
margin: 0 auto;
}
This sets the top/bottom margins to 0, and then the left/right margins to auto - which means "as large as possible". So you have two equal margins on the left and the right, filling up the space completely, and hence you have a centred div.
This will only work on block elements like divs though - inline elements cannot have auto margins. If you need to centre an inline element (like a span or some text), use text-align: center; on the parent:
#parent {
text-align: center;
}
You could set the margins to: margin: 0, auto;
For fun you could use the CSS Flexible Box Layout Module. Here is a jsFiddle demonstrating what you could do:
See working jsFiddle demo
HTML
<footer>
<div class="dynamic-content">Here is some child dynamic content</div>
</footer>
CSS
body
{
background: #ccc;
}
footer
{
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #232323;
}
footer .dynamic-content
{
flex: 1;
padding: 10px;
margin: 0 auto;
background: #545454;
color: white;
font-family: verdana;
}
Centering a div using CSS:
HTML:
<div class="center">
.... more content ....
</div>
CSS:
.center {
margin: 0 auto;
}
OR
.center {
margin-left: auto;
margin-right: auto;
}
The margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.
Try in jsfiddle
Make it display as an inline element and give the parent the property of text-align center
problem solved
#parent{
text-align:center;
}
#child{
display:inline-block;
}
Edit:
check how it works http://jsfiddle.net/ECMau/1/
I've been trying to figure out how to get my links working in layered divs
I have a big div containing two other divs:
main div with content and
a navigation div for my menu
The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:
.navigate {
width: 1020px;
height: 300px;
position: absolute;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
top: 190px;
z-index: -1;
border: 1px solid red;}
and
.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */
z-index: 0;
border: 1px solid green; }
it's like the navigation div is behind something :$
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
I've tried to fix it with
body {
position: relative;
z-index: 0; }
read somewhere that it should fix the problem - but not for me
Any ideas how to fix it?
Thanks in advance
Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;
Got it working!
Just added:
position: relative;
to the .main-div
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work
but..
if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind
use negative margin for the div you want to over lay for example
.overlay-div{margin-top:-20px;}
I am trying to center my a .img-link tag within a thumbnail but haven't had any luck.
Here is a link to an example of what I am doing http://jsfiddle.net/Dhk3M/ .
Is this possible?
Give .thumbnail text-align:center. Write like this:
.thumbnail {
text-align: center;
}
Check this http://jsfiddle.net/Dhk3M/1/
to auto center an element, it has to have a fixed width so you can apply margin-left: auto;
and margin-right: auto;
.img-link img {
width: 267px;
margin: 0 auto;
display: block;
}
this is valid if you can actually set the element width in your css, that means you know the element will always have the exact same width. alternatively:
text-align: center;
will work for inline elements (like an img tag)
I'm working on a product catalog page, and the group of images needs to be centered but I have yet to find a way to do so, since they're all floated in a div that's a 100% in width.
I'm looking for a way to center those images horizontally without losing the flexibility of their floating properties.
Here's a link to the catalog on the website: http://internetvolk.de/katalog/
try using display: inline-block; istead of floating and add text-align: center to their parent container)
Augment with the following rules:
#katalog {
text-align: center;
}
and
.imageLink {
/** float: left; <-- REMOVE! */
display: inline-block;
}
if you give #katalog a width - calculate this from the number of images and their margins. e.g.
#katalog{
width: 960px; /*just an example*/
margin: 0 auto;
}
#katalog {
margin: 10px auto 0;
overflow-y: hidden;
max-width: 940px;
min-width: 810px;
}
Use max-height and min-height to keep flexibility, I'm defining a max-width to keep it centered in all screens by adding margin: 0 auto;
I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}