Currently im making a wordpress page, and i want to add these small author cards (pic related), which i can't seem to align side by side.
i figured that the margin is what restricts me from doing so.
The boxes are composed of shortcode. and i made my own div in my stylesheet to resize the width to 50%. However these author boxes are within a container, that sets a fixed margin, so if i for example try to float the boxes respectively left and right, they still align on top of each other.
Furthermore i tried adding individual div tags to my boxes, in order to css my way out of it, however still no luck.
Is there a way in which i can override the original margin?
Apply this CSS --
.author-shortcodes {
display:inline-block;
}
This will make those 2 boxes to stay next to each other. If applying this CSS does not really override, use 'display:inline-block !important;' instead.
Related
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
With the advent of the 'nav' tag I'm revisiting the creation of a navigation bar. There are many tutorials but they take different approaches and cloud the issue with too much css.
Specifically, I have a 960 width content area and I want to centre the nav buttons within this.
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
If I'm centre-ing the buttons then surely I don't need to 'float' them? Text-align, centre for the ul should do the trick.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
Here's a fiddle with a few examples: http://jsfiddle.net/joplomacedo/ejSby/
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
The nav element is a purely semantic container. In terms of css it behaves as nothing more than a simple block level element like div.
If I'm centering the buttons then surely I don't need to 'float' them? Text-align, center for the ul should do the trick.
If you,re using an ul, like you're saying you do, than you'll need the li's too. The problem is li's have a display of block (actually, not block - list-item. In the ways we're interested in, they behave like block though) - and when you want to put block level elements side by side, then you'll always either need to float them, or change their display to inline (inline-block).
Either 'floats', or 'inline-blocking'. I tend to prefer using the "inline-block technique" for many reasons - one of them is that, centering the blocks, as you want to, is just a matter of setting text-align to center on the parent element.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
It seems simpler to add padding-top & bottom to the nav block, doesn't it?
So again, here's the fiddle: http://jsfiddle.net/joplomacedo/ejSby/
I am new to CSS. I have created 4 main divs, header, bodybg, nav and main content.
I defined properties for #nav div, and it looked great. Now I wanted to create a jQuery slider in the div above it, i.e. #bodybg, but when I as a first step create a div #wrap inside the #bodybg and try to put 3 images on it, my nav bar is affected: it no longer has its properties and looks like a plain list of items.
Now when I remove 2 images our of 3, it becomes fine. In CSS for #wrap I added overflow:hidden but that rather makes #nav totally vanished or hidden.
The working state of my project: http://estheticdentalcare.co.in.white.mysitehosted.com/HTMLpage.htm
That was before I added the #wrap div inside the #bodybg and three images in that.
Hi i'm not sure that whats you are trying to do but if you want to do. But here is a link.
To make sure that all image div are on the same line, make them align left. And make sure youyr math are ok. If you have more width than the actual container div it will jump on two line and if you have overflow hidden the image will just be outside your container.
http://jsfiddle.net/etienne_carre/W5n4Y/1/
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.