Centering a layer of unspecified width - html

For the sake of record, I have read How do I center a div with an unspecified width? and found that although my problem is related to it, it is not exactly that.
I have a layer containing only one image (the logo of my site) and nothing else. Right now I do know the size (width) of the logo image (and hence the width of the layer) and if I specify the width of the layer, I am able to put it in the center of the page. That is:
#logodiv {
position:absolute;
width:200px;
margin:auto;
}
and inside the webpage source
<div id="logodiv">
<img src="logo.png" />
</div>
However for the sake of making my site more responsive for smaller display size devices, I do not want to specify the width of logodiv in hard and fast figures. But then I am unable to place my logo layer in the center of the page.
Any workaround for that?

Try this-
#logidiv{
margin:0px auto;
display:flex;
justify-content:center
}

If your markup looks like this:
<div id=logodiv>
<img src="logo.png">
</div>
then you can use this style
#logodiv {
width:max-content;
margin: 0 auto;
}
to center it horizontally.

Related

How do I horizontally and vertically center an image on the page, except for when it's too big to fit?

I'm trying to implement a basic image viewer using HTML and CSS, where the image remains centered in the page, except for when it's too big to fit. In that case, the user should be able to scroll to see the rest of the image with no margins. If only one dimension is too big to fit, the other dimension remains centered. There is nothing else on the page other than the image.
However, the size of the image needs to be specified by a scaling factor so that I can enlarge or shrink it relative to its original size. This means I can't use an explicit width/height in pixels or size it relative to the size of the page. I've tried adjusting its transform css property, i.e. transform: scale(2.5) but that generally causes the top of the image to be cut off. I've also tried doing this by making the image's display property by set to inline-block and its height property set to auto so that I can set its width to the percentage I want it to be scaled by, but I can't figure out how to keep it centered on page as described in the above paragraph.
How can I accomplish this? So far I've tried around a dozen different ways of centering an element on the page, and none of them result in this exact behavior I'm shooting for. For example, I've used flexboxes to keep the image centered horizontally and vertically, but as soon as it grows too tall to fit, (again) the top of the image gets cut off.
You can use flexbox and center with margin to obtain this:
body {
min-height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
}
<img src="https://picsum.photos/500/500?image=1069" >
And in case you don't want scroll apply max-height/max-width:
body {
height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
max-width:100%;
max-height:100%;
}
<img src="https://picsum.photos/500/500?image=1069" >
there are several ways to achieve horizontal and vertical alignment. However, they are usually done separately and in different ways. You can have a look at W3Schools, they do a few tutorials on each:
W3Schools Alignment Tutorial
Also if you are willing to use bootstrap (makes everything much easier, especially centering) you can have a look at the following link:
BootStrap Grid System Tutorial
Below is a quick method on for centering. Credit goes to: This Post with some minor improvements from myself.
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align:center;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>

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?

Responsive Web Design - What Is the Best or Right Way to Put Images and Divs On Top of Image?

I have a background image for the "portal" to a new website. On top of the image, there need to be 5 images, placed in a unique pattern, plus 3 divs with text with links. Here is a picture of what it needs to look like:
Link to design of Portal
http://dansdemos.info/clips/screenshots/portal.png
The portal needs to be implemented in a responsive design.
I have experimented with relative and absolute positioning, but I am having trouble figuring out whether either or both of those is the correct way to position these smaller items on top of the larger item. So, I am struggling to figure out the best way of positioning the images and yellow divs on top of the picture. My question is: what is the best way of putting the images and divs on top of the background image for the portal?
Link to construction to live portal.
http://dansdemos.info/prelaunch/WorldClothingCorp_QA/
I think I can figure something out, but I really want to do this the "right way", or at least a good way.
Thank you.
I've had this situation myself before.
Resize the images you want to put on top to the same size as the parent (background) image. So place the images the way you want and make the rest transparent (png24, good transparency support and lower file size as gif).
Using your favorite image editing software:
Create a canvas of the same size as the background image
Place the background image in the canvas for reference (and lock the layer if possible)
Put in the overlay image and position like you want
Repeat this for the other overlays
Remove the background (reference) image and make the canvas transparent
Export the overlay images as PNG24
In the CSS use:
img { width: auto; max-width: 100%; }
…to make the images responsive. Now if the window resizes the images will respond to the width you specify to the page container.
More info on responsive or "fluid" images here: http://alistapart.com/article/fluid-images
I would suggest you position your background image within a relatively positioned div container. Once you have that placed to your liking, You would do the same thing for the images to be placed on top of the big image except you will want to position them absolutely.
HTML:
<div id="container>
<img src="..." alt="Background Image" /> /* Big Image */
<img src="..." alt="Jacket" />
<img src="..." alt="Skirt" />
<img src="..." alt="Top" />
<img src="..." alt="Dress" />
<img src="..." alt="Jacket 2" />
RETAIL STORE
WHOLESALE USED CLOTHING
WIPING RAGS
</div>
CSS:
#container {position:relative;}
#container > img { width: 100%; }
#container img+a {position:absolute; top:30%; left:30%;}
#container img+a+a {position:absolute; top:50%; right:30%;}
#container img+a+a+a {position:absolute; top:30%; right:30%;}
#container img+a+a+a+a {position:absolute; top:30%; left:30%;}
#container img+a+a+a+a+a {position:absolute; top:80%; left:40%;}
#container .yellowflag
{
/* Retail Store */
background-image: url(...);
position:absolute;top:...;left:...
}
#container .yellowflag+.yellowflag
{
/* Wholesale */
top:...;left:...;
}
#container .yellowflag+.yellowflag+.yellowflag
{
/* Wiping rags */
top:...;left:...;
}
As Chawk said you want to position your divs containing each image using position:absolute in a div containing the background image which uses position:relative. By setting them up this way, the 5 images will be positioned in relation to their parent element rather than the full screen.
Be aware that the divs around the images are currently displayed as blocks meaning they take up the full width of the parent element. You might want to set widths for them and display them as inline-block to make things easier.

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.