http://jsfiddle.net/95pR2/1/
Essentially what the title says, I am trying to center the numbers to the center. This is taken from http://www.kevinresol.com/divslideshow/example.php
Something else that I am having an issue with is centering the facebook embedded div like button. It is the similar issue of centering a div within another div. I was able to get it to center by doing style="text-align:center" on the parent div, but doesn't work on the first issue (so I posted both).
http://jsfiddle.net/qWJm5/1/
I'm pretty sure its related to correctly styling parent and child divs, but i've tried other stack overflow forums and they don't seem to work for example doing margin:0px auto;.
Thanks in advance.
Your script is automatically floating your control elements with an inline style, if you remove that line from line:90 of your jquery.divslideshow-1.2.js script you can then style the control elements yourself. So, remove line:90, which reads:
.css('float','left')
And add the following CSS:
CSS
#dss .control-containter {
text-align:center;
}
.controls {
display:inline-block;
}
And all should be well.
demo: http://jsfiddle.net/95pR2/7/
Apply a text-align: center; to the parent div. Remove the float:left on the child divs, and make each child div an inline-block.
Related
Sorry. I had to edit my question: I made the second image in Photoshop.
**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?
How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.
At any rate, here is is another alternative. It uses a clever trick as follows:
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Check it out here:
http://jsfiddle.net/jplew/yPMVJ/
try this
<div name="outer">
<div name="inner>put your contents here</div>
<div style="clear: both"></div>
</div>
you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.
Possibly you have floats in the children divs. In that case you can do either of the followings:
Add overflow:auto; to the parent div's style.
Use CSS Clearfix
Add another tag (last tag under the parent div) containing clear:both style like the answer above.
I mocked up a solution on JSfiddle using simple percentages:
http://jsfiddle.net/xLSQX/
Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.
I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs.
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
I have a div classed content.
Inside the div, is a h1 tag.
Inside the h1 tag is a span tag, with its' class set to regTalker.
Here is the tag:
<h1><span class="regTalker">Not Listed? Register here</span>Browse Listings</h1>
The regTalker class looks like this:
.regTalker {
text-align: left !important;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
The container div has text-align value set to center.
The main string inside of the h1 tag displays centered.
The string inside of the span tag is also centered, not aligned to the left, as i would presume it to be...
What gives? Surely !important should override the content div text-align value?
There are two different css files in question, the main one, and the seconary one, which houses the regTalker class... These files are linked one after each other, so incase this comes up in an answer, it is not due to the instance of inclusion.
I have also cleared my cache and reloaded the css file directly. So its not that either.
I am using firefox 8.0.1, have not tried it on other browsers yet.
If anyone has any advice, or input regarding this issue, or how to solve the problem, it would be greatly appreciated, thank you!
The text-align applies to the content of the element it's applied to, not the element itself. The text inside the span is left-aligned, but the span itself is centre-aligned within its parent. As the span is an inline level element, it's only ever as wide as its content and as the span is centre aligned, its content will also appear to be centre-aligned...
If the span was as wide as its container, then the text in it would appear left-aligned, but you have to apply a display: block or display: inline-block to it before you can assign it a width.
Also, never use !important. It'll just lead to tears and gnashing of teeth in the long run.
You're slightly misunderstanding how text-align works. You can't use text-align to change the alignment of a span within its container; text-align affects the contents of the element it's applied to, and cannot affect its context. (If your span were a block element, your declaration would make its contents align left within it, but would still not make the span itself align left within its container.)
I have used this to answer the problem most described in comments for the answer from GordonM:
.regTalker {
position: relative;
top: -5px;
left: -20%;
margin-right: -10%;
font-family: GoodDog;
font-size: 0.7em;
color: #000;
}
This was used to keep the main text within the h1 tag roughly centered, while applying positioning to the span element within it.
im having a problem regarding using background property with url('location') value with a div element. All browsers do not show the background image for any content written within the div tag.
code:
HTML:
body has a div tag with the class = slide. this div tag contains some content and links.
CSS:
div.slide {
margin: 0 auto;
background: url(images/btnslide.gif);
}
please help me identify the error. maybe i have misused div tag. please point out the solution for the above problem
thanks in advance
You either haven't set the height for your .slide element, or you haven't cleared the floats for the elements inside .slide. Try setting a height or adding overflow: auto if you want to clear the floats inside your <div>.
This code should work by default, as everybody said something else is wrong.
Either the height is wrong or the image does not exist.
Which browsers are failing exactly?
If you like you can try writting the CSS with full syntax:
background: url(..) top left repeat;
I'm working on the navigation for this website and am having trouble with the dropdown nav.
Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.
For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.
Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.
Any suggestions to achieve the same result are also welcome.
Solution:
Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule.
Demo: http://jsfiddle.net/88fYK/5/
overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.
if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}
try to put position:fixed on dropdown content.
.dropdown-content{
position:fixed
}
For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that