my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:
margin: auto;
For the x-axis. Any ideas?
I am talking about the following piece of code, empty page, align one image in the center.
<div id="main" style="display: block;">
<img style="margin: auto; display: block;"
src="http://www.example.com/img.jpg" />
</div>
Any help will be appreciated! :)
Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?
If you know the height of the element that you're trying to center, you can do this:
img {
display: block;
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px; /* 50% of your actual height */
}
I know only one way for that:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
This is for x and y axis - but width/height and margins have to be changed for every element. I hate it :-)
Additionally you get problems if the element is larger than the browser-window.
The best known method is to use absolute positioning. You set the top amount to 50% and then set a margin top of minus half of the element.
#main {
position: relative;
}
#main img {
position: absolute;
top: 50%;
margin-top: -(half your image height)px;
}
Here is a variation using vertical-align
http://jsfiddle.net/audetwebdesign/r46aS/
It has a down side in that you need to specify a value for line-height that will also define the height of the containing element that acts like the viewport (outlined in blue).
Note: You may be able to get around the window height issue by setting a height to the body or html element (100%) but you would need to try it out (see 3rd reference).
However, the good thing is that you don't have to do some math based on the dimensions of the image.
Here are some references related to vertical alignment:
http://css-tricks.com/what-is-vertical-align
http://blog.themeforest.net/tutorials/vertical-centering-with-css
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
and sometimes I have to remember the basics so I reread:
http://www.w3.org/TR/CSS21/visudet.html
This may not solve OP's problem, but may be useful in other contexts.
Using #menu img { vertical-align: middle; } in my style sheet works great for the latest versions of FireFox, Opera, Safari and Chrome, but not in IE9. I have to manually add style="vertical-align: middle" to every line of img code. For example:
<li><a href="../us-hosts.php">
<img src="../images/us-button.png" width="30" height="30"
alt="US Hosts" style="vertical-align: middle;"/> US Hosts</a>
</li>
Try this css:
margin-top:auto;
margin-bottom:auto;
display:block;
Related
How to set a div in the center of the screen/parent div, and make it fixed, which will ignore the width changes after it has been placed in the center? I have a div which contain a table, it looks like this:
I am not sure whether the outer div is necessary or not. I want my table to be placed in center, and fixed, which it will ignore its width changes. Result below is what I get:
As you can see, the table moves left when its size changes to remain the table in center, I want to prevent this, any idea?
This is what I have so far:
.main
{
position: relative;
width: 600px;
left: calc(50% - 300px);
border: 1px solid #000;
}
.table
{
margin: 0 auto;
}
<div class="main">
<table class="table">
<tr><td>Username: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
<tr><td>Password: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
</table>
</div>
Try using this style inside the div, it works for me and you may use help text instead of them inside a table.
<div style="text-align:center">
<input/><br/><input/><br/><button/>
</div>
Change you position to fixed
position:fixed;
and re-align other divs that might have been rearranged with top bottom left right
Why the use of a table for lay-out? Tables should be used for data output or HTML mails (correct me if I'm wrong but that's what I know).
Also you can use this code to vertical and horizontal center a specific element (keep in mind this is absolute but please feel free to play around with this):
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
Regarding the fact you want the error messages not to inflict the width of the form. I would advice using position absolute.
I've wrote an example for you see https://jsfiddle.net/bdwte97g/
Hope this helps.
Remove margin: 0 auto; from .table
and put this lines
`.table{
position: relative;
left: 45%;
}`
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I have seen the layout similar to the image below used on some sites before and I really like the design but don't exactly know how to implement the overlapping image (Profile Image). I am using bootstrap if that helps. Any ideas?
Thanks!
I can see three ways to do this generally.
position: absolute
You could give the image or the image's wrapper the attribute of position:absolute and giving its container (in your example the green box) position:relative. Then you would apply top: -100px or whatever and a left attribute of left: 100px or whatever. This gives the effect of the image being out of flow, aligned to the left and offset by 100px, and 100px offset from the top of the green container. The disadvantage of this approach would be that any body content in your green container could appear under the image.
position: relative
This is the same approach as the first one with the exception of how the image flows in the document. Instead of giving the image position:absolute, you would give it position:relative. Relative works differently from absolute. instead of being x and y coordinates of the parent container, it's just shifted by however much you give as a value for top and left. So in this case, you would apply top:-100px and just leave the other directional values as default. this would shift your element by that amount but also leave its original spot in the document flow. As such you end up with a gap below the image that other content will flow around.
negative margin
I honestly would prefer this method in your case. In this method, you can give the image a negative margin (e.g. margin-top:-100px). This will offset the image, collapse the area below the image, and it will still retain some of its flow in the document. This means that the content of the green container will flow around the image but only around the part that is still inside the container. It won't have a ghost area that content flows around like with relative positioning, but it also doesn't entirely take the image out of flow like absolute positioning. One thing to keep in mind, however, is that if you try to use overflow of any kind other than the initial value, it will cause undesirable effects to your image.
Demo
Here's a quick little demo demonstrating all three methods in a simple use case: http://jsfiddle.net/jmarikle/2w4wqfxs/1
The profile image can be set with position: absolute; top: 20px; left: 20px, or something like that to keep in from taking up space in the flow of the page.
make the html element that holds the header image "position:relative". Then put the header image and the profile image in that element. then make the profile image "position:absolute" and utilize "top: XXpx" depending on how far you want it from the top of the header element. Same for "left".
see fiddle here
<div class="header">
<img src="" alt="my image" class="floatdown">
this is my header, image could go here too
</div>
<div class="body">
this is my body content
</div>
.header {
position: relative;
width: 100%;
height: 150px;
border: 2px solid #000;
text-align: right;
}
.body {
position: relative;
width: 100%;
border: 2px solid #000;
height: 500px;
text-align: right;
}
img {
width: 90px;
height: 90px;
border: 2px solid #ddd;
}
.floatdown {
position: absolute;
top: 100px;
left: 20px;
}
You can use the float property on your profile image to take it out of the "flow" of the document, and play with the margins to place it properly.
CSS :
#profile-image{
width: 100px;
height: 100px;
float: left;
margin: 100px;
}
The marginis used to push it down and place it properly.
You can see an example of this in a Fiddle : http://jsfiddle.net/y706d77a/
I wouldn't recommand using position: absolute as you can get very strange results with different resolutions. I would only use that as a last resort.
This can be done many ways.
Anytime you see something like that on the web you can just use your inspector or firebug and see how they are doing it to get some ideas.
It wouldn't hurt to do some research on the web about CSS positioning.
http://www.w3schools.com/css/css_positioning.asp
Another great site.
http://css-tricks.com/
I just finished it.
Here is a codepen link:
http://codepen.io/anon/pen/zxYrxE
HTML:
<div class="main-container">
<div class="header">
<p>This is the header div</p>
</div>
<div class="profile">
<p>Profile</p>
</div>
<div class="content">
<p>Some dummy content div</p>
</div>
</div>
CSS is to big to be pasted here, so just open the link.
Put the profile image in the header, make the position: absolute; and the image position: relative;, and give it a negative bottom value that's half the height of the image, and set left to position it horizontally to taste.
HTML
<header>
<img class="profile">
</header>
<div>Content</div>
CSS
header, div{
min-height: 110px;
background: darkgray;
}
header{
position: relative;
background: gray;
}
img{
position: absolute;
bottom: -50px;
left: 100px;
}
http://jsfiddle.net/dekqn84c/
I'm building a carousel/slideshow-type widget that rotates between 3 quotes. Let's say the markup looks like this:
<div class="carousel">
<blockquote>...</blockquote>
<blockquote>...</blockquote>
<blockquote>...</blockquote>
</div>
I want the three quotes to overlap in place, and I'll then transition their opacity property to create fade in/out transitions. My CSS looks something like this:
.carousel{
position: relative;
}
.carousel blockquote{
position: absolute;
top: 0px;
left: 0px;
}
Now if I leave it at this, the .carousel div will default to a height of 0px, and will not push the rest of the page's content down.
So I need to specify a height, but the problem is each quote can be of different length, and as a result each blockquote can have a different heights.
So my question is this: how can I make sure that the .carousel div stretches to fit the blockquote with the biggest height?
I'd prefer a pure-CSS solution, but if it doesn't exist, an elegant JS or jQuery solution works for me as well.
Here's my own answer, using a simple jQuery loop to find out which blockquote is the tallest:
var tallest = 0;
$('blockquote').each(function (i, e){
var h = $(e).height();
tallest = h > tallest ? h : tallest;
});
$('.carousel').height(tallest);
It turns out it is possible without JavaScript! All props to Hugo Giraudel for finding the solution:
http://codepen.io/HugoGiraudel/pen/d6006e5bb32f13d50d1ab07d6cadbc8f?editors=010
The trick is floating all blockquotes and giving them a width of 100%. Hugo was then able to use margin-left: -100%; instead of position: absolute and top: 0px to overlap them, which doesn't disrupt the normal flow of the layout.
Note that the JS code in there is only used to animate each blockquote's opacity (which could also be done in CSS, but that's another problem), not to set the layout.
I guess what you could eventually do is trying to center every blockquote vertically so that whatever their size is, and even if they overflow the container height, they remain centered anyway ?
Using that method maybe : http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Classic problem and unsolvable without javascript.
If you want to do it without javascript I guess you could use a dirty hack like this: (if you know the width at least...)
<style>
.carousel{
position: relative;
border: solid 1px #000;
}
.carousel blockquote{
float: left;
width: 300px;
}
.carousel blockquote.next{
float: left;
margin-left: -340px;
width: 300px;
}
</style>
<div class="carousel">
<blockquote>...</blockquote>
<blockquote class="next">...<br>second</blockquote>
<blockquote class="next">...<br>...<br>third</blockquote>
</div>
Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.
The basic structure of my header is this
[logo][user-stuff][right-side][1][2][3][/right-side]
These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.
[logo][user-stuff][right-side][1][2][/right-side]
[ 3 ]
any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.
current html
<div id="header">
<div id="logo"></div>
<div id="user-stuff"></div>
<div id="right-side">
<div id="1" class="right-side-section"></div>
<div id="2" class="right-side-section"></div>
<div id="3" class="right-side-section"></div>
</div>
</div>
current css
#header {
height: 48px;
width: 100%;
}
#logo {
display: inline-block;
vertical-align: top;
}
#user-stuff {
display: inline-block;
vertical-align: top;
}
#right-side {
display: block;
float: right;
}
.right-side-section {
display: inline-block;
vertical-align: top;
}
Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow.
Since the header has a defined height this will be easy. Just add position: relative so that you can absolutely position child elements relative to itself.
Then you can set the css for div#3 to use absolute positioning as in the following example.
#header {
height: 48px;
width: 100%;
position: relative;
}
#3 {
position: absolute;
top: 48px;
left: 0;
width: 100%;
text-align: center;
}
See working Demo here: http://jsfiddle.net/Cce9n/
Please note that it is not valid to assign an ID starting with a number.
You may use Javascript to edit other div definitions,
E.G. changing the text-align style
document.getElementById("right-side").style.text-align = "center";