Align form text at baseline of image - html

I want to do something like the following, but I can't figure out how to align the logout link just above the navigation bar, without specifying an explicit padding or line-height which breaks the layout if the size of the image changes.
<img src="logo.png" />
<a> logout link </a>
<div> navigation bar </div>
I am using bootstrap, but I am also fine with a non-bootstrap solution.

As Thanix says, you can combine relative and absolute positioning to achieve this. Make a containing div for the image and the logout link so that the logout link can be set at the bottom of this.
<div class="header">
<img class="logo_image" src="logo.png" width="40" height="40" />
<a class="logout_link"> logout link </a>
<div class="clear"></div>
</div>
<div class="nav_bar">navigation bar</div>
Then make the containing div position:relative and the logo position:absolute. The trick here is that "an absolute position element is positioned relative to the first parent element that has a position other than static." (www.w3schools.com). This means you can use bottom:0px and right:0px to position it at the bottom right of the containing div.
.header {position:relative;}
.logout_link {
position:absolute;
bottom:0px;
right:0px;
}
.logo_image {
float:left;
}
.clear {clear:both;}
The class="clear" div at the end of the containing div is to make sure the containing div fills the space of its child components.

Place the logout <a> inside the navigation bar <div>.
Set navigation bar's position to relative.
Set logout's position to absolute, right to 0 and top to -1em;

Related

How can one layer two aligned images in a scrolling <div> using CSS?

I would like to layer two aligned images in a scrolling <div>.
At first I tried:
<div style="width:300; height:300; overflow:scroll;">
<img src="bottom.jpg"
style="width:400; height:800">
<img src="top.png"
style="width:400; height:800; position:absolute; top:0; left:0;">
</div>
(this is a simplified example -- the actual site has a separate CSS sheet etc.)
I would like the two images to behave as one when the <div> is scrolled, but the "absolute" positioning of the second image causes it not to scroll at all and to go outside the borders of the <div>.
I have also tried changing the style of the second image to:
<img src="top.png"
style="width:400; height:800; position:relative; top:-800; left:0;">
but then there are 800px of extra white space in the bottom of my <div>.
Is there any CSS I can use on the second image that will align it on top of the first image and still allow both of them to be scrolled together?
[update] The working solution is at ozake.com
you just need to add position: relative to the parent (div). When you use position:absolute if you do not contain that element in a parent set to relative it will contain itself within the body. SO what's happening is top.jpg is scolling with it's parent div but bottom.jpg is staying with the body. Once you contain them both inside the parent, then you can set the 2nd image to top: 800px to align it just below the other image
<div style="width:300; height:300; overflow:scroll; position: relative;">
<img src="top.jpg" style="width:400; height:800"/>
<img src="bottom.jpg" style="width:400; height:800;position:absolute; top:800px; left:0;"/>
</div>
FIDDLE
Do you want this: Jsfiddle
If so, here you go:
<div style="width:300px; height:300px; overflow:scroll;">
<div id="container" style="position: relative">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg/785px-Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg" style="width:400px;">
<img src="http://pixabay.com/static/uploads/photo/2014/04/02/17/07/hat-308003_640.png" style="width:250px; position:absolute; top:75px; left: 125px;">
</div>
</div>
Use some units in your style, for example pixels.
If you are styling element with position absolute it will be positioned relatively to the document itself, so you should set position: relative to a parent element to bind absolutely positioned element to this parent element and not to the whole document. In our case we made a container for our images with position: relative.
So we have the #container which is scrolling inside our overflow:scroll div, and our image aligned relative to this container.

firefox absolute div inside relative div error

<div class="menu-item" > //top container
<a href="banks.html" class="menu-item-image"> //link when image or slide div clicked
<img src="images/banking.png" alt="banking"/> //relative image
<div class="slide" style="background:#666666;">Find Banks</div> //this div should slide
</a>
</div>
http://jsfiddle.net/kpppvjmq/1/
i place an absolute div inside of relative. i want absolute to slide over the relative div on hover. it worked in chrome. but not in Firefox and IE. absolute div came out of outer div. i need cross browser solution.
..are you looking for this?
http://jsfiddle.net/kpppvjmq/2/
all I needed to add is a
left:0;
..in the slide up element.

Place a div between two sections so that it's partially on top of both of them

I'm pretty much trying to copy what you see in the following picture. I have three sections. Between section 1 and section 2 (the blue section) you can see the white arrow-box. That's what I can't place properly without messing things up.
Now I already got this "working" by placing the arrow box inside the blue section, and then gave both the arrow-box and the blue section absolute positions, and then gave the arrow box some minus margin from top. The problem with this is, that for some reason I can't create section 3 that is supposed to come after the blue section. I can't place anything under the blue section if its position is absolute. If I give the blue section a relative position, things obviously start working normally again, but then the arrow box gets out of place and something like this happens:
My code looks something like this, HTML:
<section id="first-section">
<!-- bunch of stuff here -->
</section>
<section id="blue-section">
<div class="arrow_box">
<p>How can I help you?</p>
</div>
</section>
<section id="third-section">
<!-- More stuff here -->
</section>
CSS:
#blue-section {
position: relative;
}
.arrow_box {
position: absolute;
width: 500px;
height: 100px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
margin-top: -50px;
}
OK, then here you go:
HTML
<section class="container" id="first-section">
<!-- bunch of stuff here -->
</section>
<section class="container" id="blue-section">
<div class="arrow_box">
<p>How can I help you?</p>
</div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
<div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
</section>
<section class="container" id="third-section">
<!-- More stuff here -->
</section>
CSS:
.container{position:relative; background:#ccc; padding:40px; width:100%; height:auto; min-height:100px; text-align:center;}
#blue-section{background:#06c}
.arrow_box{position:absolute; background:#f9f9f9; position:absolute; top:-50px; left:50%; margin-left:-100px; height:100px; width:200px;}
.col{width:30%; padding:1%; display:inline-block;}
.col img{width:200px; height:200px; border-radius:50%;}
As you can see, you weren't that wrong, you just need to understand that absolute positioning requires a relatively positioned div in order to be positioned itself.
See the possible values so you understand (from Mozilla MDN)
static
This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption
elements is undefined.
absolute
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.
sticky
The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.
And if you made it here, you get a free fiddle
<body>
<!-- //take it as example, it may help u, just make the arrows boxed div child of blue div ,
//i ll call upper white section as white as give it white as id, arrow boxed as box,blue as blue
-->
<div id="container">
<div id="upper">
<!--//content of this div;-->
</div>
<div id="blue">
<div id="box" style="position:relative; top:-100px; z-index:10000; margin:0 auto; width:40%;">
<!-- // adjust top attr.-->
</div>
<!--//here blue sectiions content is inside lower part.-->
<div id="lower" style="margin-top:200px">
<!--//try as much u want to space to be below thw box;-->
</div>
</div>
</div>
</body>

relative position browser differences, absolute works but has no flow

I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.

Vertical Align Image inside Anchor

I have a <ul> with two columns
Code:
<li class="clearfix">
<div class="product-copy">
Product Content Here
</div>
<a href="">
"PRODUCT IMAGE HERE"
</a>
</li>
The .product-copy expands to content in height, width is fixed.
I want to be able to vertically align the image within the anchor to center. So no matter how large in height the .product-copy is, the image in the right column will always be centered.
Please note that I am still a new user so couldn't type the proper image html within the anchor but there is a html image within the anchor.
Any ideas?
Thanks
You can try some CSS like
.product_img { position:absolute; top:0; bottom:0; }
This is from memory, you may need to remove the position:absolute; from the class.
Simply add the class to the img tag and this will vertically align your image to the middle of the div.
<img srv="my_image.png" class="product_image" />