I am trying to have one one layer, and center images within. I.E., if I have 3 images and want 3 links beneath them, is there a way to do this without using a separate div tag for each link and image? To automatically make the links be centered under the images, and the images to be spaced evenly within a layer?
I was also wondering how I would make the div show behind standard html if that is possible. I.E. if I have some text and a div over the text, the div will default show over the text, when I would like it to be behind. Is this only possible by using another layer?
Yes, you'll have to put a container element, such as a div, around each image and its caption to keep them together.
<div class="pictureBox">
<div>
<img />
caption caption
</div>
<div>
<img />
more caption
</div>
</div>
--------
.pictureBox div {
text-align: center;
/* whatever width/height/positioning you want */
}
for the second part of the question, regarding putting it behind the other text, take a look at CSS z-index, though I think that only applies to absolutely positioned elements.
nickf is right, z-index only applies to absolutely positioned elements.
You could make the containing element position:relative, then give both the image and link position:absolute to affect their stacking order.
Related
In Wordpress, I am trying to alter some of the standard layout for a given theme using only CSS. The following markup produces a div with all the child elements flowing from the top (as expected).
The issue is that I have 3 of these divs side by side and would like the button (the anchor formatted as a button) to always be at the bottom of each respective div
regardless of how many lines of text precede the anchor/button ("Our team... more text" in the example below but much more text for the other 2 divs). The div has a fixed height of 300px. I was hoping to be able to do this with CSS only. I have seen some solutions that wrap the anchor in spans or divs but I really discourage myself from editing theme code. Is there any way to get the anchor positioned at the bottom of the div regardless of the amount of text present?
Edit: This div is only a small part of the content on this given page. It is not the only markup present.
<div class="widget-front">
<h2>The Team</h2>
<p class="fp-text-one">Our team ...more text</p>
<a class="btn btn-primary fp-button" href="http://www.mysite.com/the-team/" title="The Team">Read more ...</a>
</div>
I have a selector:
.widget-front > a {
XXX
}
which does identify the buttons correctly but I cannot seem to get the anchor/button to be at the bottom of the div ..
For XXX I have tried (and failed)
position: absolute;bottom:0
position: relative
position: relativebottom:0
vertical-align: bottom
You have to give your anchor a the rule display: block;. Anchors are inline elements per default.
If you give an element position: absolute, you take it out of so-called normal document flow. It will orientate it starting x and y position from the webbrowser canvas (the document area) or from the nearest parent element having position: relative or absolute assigned to.
See http://www.w3.org/TR/CSS21/visuren.html#box-gen for more-into-detail explanation.
HTML
<img id="btnLeft" src="img/btnLeft.png"/>
<img id="logo01" src="img/logo01.png"/>
CSS
#btnLeft{heigth:64px;}
#btnLeft:hover{height:74px;}
On mouseover btnLeft pushes #logo01 down by 10px.
I want #logo01 to stay in place.
Create a separate div for your image elements, float them left or right depending on your preference and then use use vertical-align: top on the containing div. Here is an example: http://jsfiddle.net/94zVg/.
The reason for this issue is because you have to image elements side by side which will be aligned to the bottom of their containing block. When one image is enlargened, it expands the containing block and the other element descends to stick to the bottom of it. Floating and aligning vertically solve this problem.
Give the first image a width as well, otherwise its width will expand proportionally and push the adjacent image down.
#btnLeft{height:64px;width:100px;}
#btnLeft:hover{height:74px;}
Here is a demonstration with explicit width: http://jsfiddle.net/XRKK4/
Here is a demonstration without explicit width: http://jsfiddle.net/XRKK4/1/
I'm trying to achieve the following: I have a central div (wrapper) exactly in the center of my page, both vertically and horizontally. Inside that div I want to have another 2 divs, one of which will contain a logo and the other some text. The logo image also has to be aligned vertically and horizontally to the center of its div. Currently this is what I have:
Here's the jsfiddle with my HTML and CSS: http://jsfiddle.net/7cQhG/
How can I center the logo div (only centered horizontally, and have a 10px margin-top) and have the logo image centered inside that div, both horizontally and vertically, just as it is now)?
Is there any reason you have to have the logo as an img?
I've taken the starting point you gave, and put together a jsFiddle fork : http://jsfiddle.net/mori57/HDmkZ/
I've taken out the img tag, and used it as a background image. "center center" should theoretically center it within its container, and as it's a transparent png, your background color still shows up as you wanted.
Let me know if this works for you, or if you have any other questions.
As a sidebar, you really don't need (and you really shouldn't) to specify your tags in your CSS. The only place that's really appropriate is if you're assigning defaults to a specific tag... otherwise, rules of specificity are already going to take over when you're using those IDs you've got in there.
Note that I wasn't clear what you wanted to do with the text below the logo, so I didn't do any styling, there.
Having problems with CSS, and I think what I want is possible without javascript, but I'm not sure.
I have an article of text that I want to display with 0-3 images(The number is dynamic for each article). I want to display the 3 images all on the right-hand side of the page, with about 200-300px between them. This much I have achieved just by floating the images, using clear, and margins.
The part I haven't been able to do is allow the text to flow between the images in that 200-300px worth of space. I've tried relative positioning to push the images down to the part of the page I want them at, but the blank space reserved for them in the text by floating them stays where it is (i.e. the image ends up on top of text).
Is this even possible without js? The text is also completely dynamic, so I can't use any element in the text as an anchor.
EDIT: Here's some code to explain a little:
The tags:
<div>
<img class="floater" src="get_file.asp?image=1"/>
<img class="floater" src="get_file.asp?image=2"/>
<img class="floater" src="get_file.asp?image=3"/>
<p>lots and lots of text and paragraphs go here....</p>
</div>
The CSS:
.floater
{
float:right;
height:250px;
clear:both;
margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}
You can achieve it only by using extra helper elements.
Look at this fiddle: http://jsfiddle.net/kizu/BwySX/
You just add helper elements with zero width, so they are pushing your floaters with their height, but as they have zero width, the text flows near them almost perfectly.
Not sure that's possible. A margin always pushes everything to the sides.
I'd divide the text into paragraphs, and have only one image per paragraph. Then the image could float inside it.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.