Putting image at the right without affecting the layout - html

I am trying to insert a picture on the right without affecting the text which is in the middle. I tried to put the picture in the front using z-index in hope that it doesn't affect the layout below. But in fact, the text "footer" is not in the screen center anymore.
<div style="z-index:99;display:inline-block;float:right">
<img src="https://www.xing.com/img/custom/events/events_files/e/6/3/765539/square96/Apfel_klein.jpg?1443451610">
</div>
<p align="center">footer</p>
<p align="center">footer</p>
This is how the page looked at the beginning:
https://jsfiddle.net/eucysjp6/
This is after I tried to insert the picture:
https://jsfiddle.net/eucysjp6/1/

You can position the image absolutely and the table relatively to put the image in the bottom right corner without affecting the text:
jsFiddle example
img {
position:absolute;
bottom:0;
right:0;
}
table {
position:relative;
}

Related

Cannot center (vertically) linked image and text

I have an image and text that I want to center vertically using this method:
position:relative;
top:50%;
transform:translateY(-50%);
It works great on in most cases on both images and text.
However, I want to make both the text and images links (using <a href="">) AND I want to resize the image from large to small so as to look good on Retina (e.g. MacBook) screens.
Here is an example of what I have written so far, with dummy content and logo:
HTML:
<div class="logo">
<div class="logo-image">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/240px-Smiley.svg.png">
</div>
<div class="logo-text">
Logo text here
</div>
</div>
and CSS:
.logo {
height:64px;
margin:0;
padding:0;
float:left;
background-color:blue
}
.logo-image {
margin:0;
padding:0;
height:32px;
position:relative;
top:50%;
transform:translateY(-50%);
display:inline-block
}
.logo-text {
margin:0;
padding:0;
position:relative;
top:50%;
transform:translateY(-50%);
display:inline-block
}
This code is basically what I have so far (with the real logo and text substituted).
You can find a live version on jsfiddle.net here: http://jsfiddle.net/kLq28h17/
I would really appreciate the help if someone could tell me what I am doing wrong - why does the image not resize and center properly as I would like it to?
Thanks in advance for any help.
EDIT 1: Managed to get the logo resized correctly thanks to Stephan Muller. See here: http://jsfiddle.net/0f5rncqd - Now I just need to get the text centered correctly.
EDIT 2 - FIXED! : Stephan Muller managed to fix the problem. See his comments and here: http://jsfiddle.net/0f5rncqd/1/
You're styling the div that contains the image, but you're not styling the image itself in any way. The image has no way to know how to adapt to its surroundings, so it doesn't.
This rule should always resize the image to have a maximum height of whatever container around it that has a set size:
.logo-image img {
max-height: 100%;
}
http://jsfiddle.net/kLq28h17/1/
-edit-
That only fixed the image sizing. The vertical centering is a separate problem. The easiest way to fix this is not by having each in their own box and vertically centering those, but by vertically centering the logo contents as a whole and then relying on the intrinsic vertical-align-property that images already have.
By putting the image and link in a box with your translateY trick I got the contents as a whole vertically centered. To align the image and text both in the center of that box I just set vertical-align: middle to the image:
http://jsfiddle.net/0f5rncqd/1/

How to keep navigation text inline with the end of an image

I'm creating a navigation bar and I want the text, which is going to be on the right, to be inline with the end of the image. I want it to stay aligned and in position regardless of whether the window is resized or not.
I've included an image incase I haven't explained it very well:
http://i.stack.imgur.com/QWR6L.png
Hopefully you guys can help!
Is this something that you are looking to achieve ?... http://jsfiddle.net/65fBD/ Now the way i achieved it is to float the image to the right and wrap the image and the links inside a div and give it a min-width attribute. what this does that as soon as it hits the minimum width specified in viewport, the division will not shrink after that thus maintaining the inline look.
here is the css
#navcontainer {
width:100%;
min-width:400px;
height:40px
}
#image {
float: left;
}
#links {
float:right;
}
and the html...
<div id="navcontainer">
<img src="http://dummyimage.com/230x40/123dfe/fff" id="image"/>
<p id="links"> Link | Link | Link </p>
</div>
But on another note, please clarify what you mean by if window is resized the link should stay aligned....are you referring to responsive design?

Fixed div background

I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.

CSS Vertical Align Top not working - can I use a different method that is correct in coding instead?

I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.

Is it possible to fix an image to a webpage with a fluid layout?

I am constructing a website based off of the Fluid 960 GS System. I want to overlay an image in the header so that it stays put relative to the header image without disrupting the header itself. If I use the following CSS, I get halfway there:
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
<div class="grid_16">
<h1 id="branding">
<img src="img/logo.png" />
<img src="img/float.png" class="imgFloat" />
</h1>
</div>
The only "issue" (not really since the CSS is doing what it is supposed to) with this code is that the image stays put rather than being staying x pixels away from the header image like I want.
If I change the position to relative, it breaks the size of the header and thus the layout of the header itself, but it will position the image like I want.
Is there a happy medium CSS "trick" that I can apply to achieve this result?
Thanks in advanced!
You just need to make sure that the absolute positioned element is inside the element you want it to be relative to. Then just add position: relative to that element and it should work.
So:
tag(position:relative)
ag(position:absolute; left:2px)
Should work
I'm just guessing here since the code you're showing is not detailed enough ;)
Update:
#branding {position:relative}
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
set position: relative on the header element that wraps the .imgFloat element that should lock an absolutely positioned element to the wrapper.
Also you'll need to change your positions since the left will be relative to the 0,0 coordinate of the wrapper element.