I have looked around a lot but cannot find a tutorial or suggestion for how to place an image in both the vertical and horizontal center of a page of two-column text. I've seen explanations for straddling an image across two columns, but aligned at the top of the text. I want to align an image in the middle middle.!
Is this even possible? I would prefer to do it in CSS, but will consider anything that works, (especially if it comes with some instruction.)
Thanks for any help you can offer (even if it's to tell me to give up.) (c;
I've found the technique described here and shown below to be very effective:
HTML
<div class="container">
<div class="inner">
<img src="//placehold.it/200x200">
</div>
</div>
CSS
.container {
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
display: inline-block;
vertical-align: middle;
}
I don't know if this is what you looking for.
1) Create two div (as column) and put image at the middle(Image will overlapped the both column.)
DEMO
img
{
background: red;
height: 300px;
width:400px;
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
2) Create 2 div(as column) with opacity:0.5 and put image at the middle (The image will acts like background since z-index is added)
DEMO
img
{
z-index:-1;
}
Good Luck!!
Related
Here's the basic HTML code:
<div class="soc-cont">
<div class="soc-item-cont" style="background: blue;">
<div class="soc-item">
<img src="img/facebook.png" style="width: 100%; position: absolute; left: 0;">
</div>
</div>
</div>
And here's the CSS:
.soc-cont {
position: absolute;
height: 100%;
width: 20%;
display: inline-block;
right: 0;
text-align: center;
font-size: 0;
}
.soc-item-cont {
width: 25%;
height: 100%;
position: relative;
display: inline-block;
}
.soc-item-cont:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.soc-item {
vertical-align: middle;
width: 50%;
display: inline-block;
position: relative;
background: black;
}
What I'm trying to do is add position: absolute and left: 0 to to the img in order to take it out of the usual document flow to be able to overlap it with another picture later on. But instead of working as it should, I get this:
Instead of this:
Note: I have color-coded it a little to be more easily understood.
It also should be noted that there are, in fact, four .soc-items. However, since they are, right now, nothing more than copies to fill up the space, I didn't deem it necessary to post it here, as it would probably confuse you even more.
However, all it takes is changing position to absolute to instantly break the look.
Any ideas on how to fix this?
The reason for your problem is that, by changing it to position:absolute, you are taking it out of the normal flow but that causes your div(s) to collapse cause they now have no content (essentially). Once they do, you have to deal with the image being on the baseline and having white space, just like text. So it's the same as if you inserted or removed that content. Your layout "adjusts" to the content.
I'm kind of knew (some days) to this so this might be a dumb question.
I'm trying to make a navbar with three links/buttons. Two of them, when hovered, simply change the background to a darker one, the third one, opens a small menu with more links/buttons.
This is what I did (probably not the best method, but the first that came into my mind):
http://jsbin.com/woxodovoxo/1/edit?html,css
My problem is that on the button in the middle, the positions are not right (you can see that the button flickers a little when you hover your mouse over it, although this doesn't happen on the other buttons).
This is happening because I wasn't able to put #text-dropdown and #dropdown-div on the same starting position, since I couldn't find the right value for the "margin-top; padding-top" on #dropdown-div
From what I see on the code, .headertext is 0.5em (+ font-size) underneath the top of the page.
The problem comes with #dropdown-div, since I don't know its original position (without any tweaking) relative to the top of the page. If I were to know that, I could simply make a calculation to know which values to put in "margin-top; padding-top" on #dropdown-div.
Could you help me with that?
Also, percentages and em's don't seem to go well together, specially on the navbar when zooming in/out. What alternative could I use? Everything with em's? Everything with percentages? Or something else?
Thanks
Would this solve your problem? I didn't copy over your exact code because it was exhausting to read, but hopefully it gets you in the write direction. If you set an objects position to be absolute with its parent set to relative you can move it around relative to its parent.
Also, the box-sizing attribute may help you in the future. Makes it so that the padding/borders are included in the size calculations.
div#navbar {
width: 100%;
height: 2em;
}
div#navbar *,
div#navbar {
padding: 0;
margin: 0;
background-color: #3ff;
}
div#navbar div {
display: inline-block;
position: relative;
box-sizing: border-box;
height: 100%;
width: 150px;
}
div#navbar div>div {
display: none;
position: absolute;
top: 100%;
left: 0;
height: auto;
}
div#navbar div:hover>div {
display: block;
}
<div id="navbar">
<div>Something 1</div>
<div>Submenu
<div>
Other text
<br />Yup
</div>
</div>
<div>
hello
</div>
</div>
.headerlink{
height: 3em;
line-height: 3em;
width: 25%;
z-index: 1;
position: fixed;
}
.headertext{
text-align: center;
font-size: 1.3em;
font-family: 'Verdana';
color: #E3E3E3;
font-weight: bold;
}
#dropdown-div{
position: absolute;
top:100%;
width:100%;
background-color: #57a58a;
opacity: 0;
}
Modify the above styles and delete the below one
#hd2:hover #text-dropdown{
opacity: 0;
}
Edit:
Add this too..
#hd2:hover{
background-color: #57a58a;
}
and remove this extra option:
<div class="header-dropdown">Page2</div>
I've already asked this question, but in the wrong way. I should have told you guys what I wanted, and not how to fix my way of getting to it...
Basically I want a dynamic, fixed-height (150px) header that consists of an image (PNG with alpha channel) and a box on either side that stretch to the edge of the screen. The whole thing needs to be 50% transparent too.
I've tried this with divs to create the stretching boxes, having them and the image in a parent div, but never got them to adjust their width to reach the edge of the screen.
Here's a diagram:
[---div---][---image---][---div---]
Anyone got any ideas?
#header
{
position: absolute;
top: 0px;
left: 0px;
height: 150px;
width: 100%;
opacity: 0.5;
background-color: gray;
display: table;
}
#l
{
background-color: red;
}
#r
{
background-color: blue;
}
.headDiv
{
height: 100%;
width: 50%;
vertical-align: middle;
display: table-cell;
}
<head>
<div id="header">
<div class="headDiv" id="l"></div>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" width=auto height=150px style="display:block">
<div class="headDiv" id="r"></div>
</div>
</head>
<body style="background-color:green; margin-top:160px;">
Things in the body go here.
</body>
This is the working bar, with color-coded divs and a Japanese flag to represent the center. All credit goes to Marc Audet for his great display: table strategy for filling space.
I have seen people ask questions about how to get two divs to line up side by side. I can get mine to do that just fine.
My problem is that they will not smash up against each other. There always seems to be a gap.
For example, I have a wrapper div with a width of 500px. Inside that div I have two other divs with widths of 250px.
They will not line up next to each other because there is not enough space for each other.
When I set the width to 248px they do line up but with a 4px gap between each other.
I have an example of this code located here:
https://c9.io/riotgear66/day1/workspace/sams/html/index.html
Please feel free to take a look at it and try adjusting it with your browser's element inspector.
The layout problem is the result of applying display: inline-block to the div elements.
Any white space between those div elements are taken into account when laying out the content.
You could remove the white space (linefeed or carriage return) between the div's if you don't mind how your source code looks.
Since your parent container has specific dimensions (500px x 300px), I would use absolute positioning to place the child elements. This would make it easier to position your logo motif over the other images.
You could also use floats as stated in other responses, not any easier or harder.
In this application, the layout is fixed so there are no design considerations for a responsive or flexible design, so either approach is valid.
Demo
You can see how this might work in the following demo: http://jsfiddle.net/audetwebdesign/hZ5dB/
The HTML:
<div class="container">
<div class="panel ul"></div>
<div class="panel ur"></div>
<div class="panel ll"></div>
<div class="panel lr"></div>
<div class="overlay"><span>Cats</span></div>
</div>
and the CSS:
.container {
border: 1px dotted blue;
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
.panel {
width: 250px;
height: 150px;
position: absolute;
}
.ul {
background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
top: 0; left: 0;
}
.ur {
background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
top: 0; right: 0;
}
.ll {
background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
bottom: 0; left: 0;
}
.lr {
background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
bottom: 0; right: 0;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.overlay span {
display: block;
background-color: gray;
border-radius: 50%;
text-align: center;
vertical-align: middle;
width: 80%;
height: 80%;
margin: 10%;
line-height: 80px;
}
I also show how you can create the circular motif without having to modify the original background images, saves a bit of work with PhotoShop or similar.
You shouldn't be using
display: inline-block;
Make them:
float: left;
Here is a jsfiddle sample of how it should be.
http://jsfiddle.net/Tqdqa/
The problem lies in the white space in your HTML. When using display: inline-block, white space after elements is taken into account like Marc Audet said.
To fix it without changing your current method, you must remove that white space. The easiest way I've found to do so while still maintaining readability of the HTML is by commenting it out, or using <!-- after each element and --> before the next element. This prevents having to change the whole structure and you can make each one 250px again as well
You could also move the closing > to the next line, move everything after the opening <div> to the next line, or use margin-left:-4px; for each element after the first. Or use a method described by others here, floating it or using FlexBox
Here is the CSS Tricks page that references this situation and provides more detail
having some CSS difficulties and hoping someone can help me out.
I am trying to get the navbar to expand out on both sides of the page (filled with a solid color), but have a transparent space where I can squeeze in my logo (as seen in the image below).
My page background is an image, so I can't just fill the {Logo} cell, with a bg colour - If it helps at all, I am also using Twitter Bootstrap.
Please can someone help me out with this. Been stuck for a a while now. :S
I was referring to something like this in my comment http://jsfiddle.net/slash197/Eh2xL/1/ This is just a proof of concept, you need to change the values and sizes.
HTML
<div class="bg">
<div class="nav">
<div class="logo">Logo</div>
</div>
</div>
CSS
body, html {
height: 100%;
}
.bg {
background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top;
width: 100%;
height: 100%;
padding: 30px 0px;
}
.nav {
background: url("http://slashwebdesign.net/nav.png") no-repeat center top;
height: 35px;
}
.logo {
margin-left: 100px;
color: #ffffff;
}
Maybe you could do something like this (no image needed, just pure css) :
http://jsfiddle.net/Jh4ya/6/
You have the right side of your navbar positioned as absolute :
#right {
left: 250px;
right: 0px;
position: absolute;
height: 30px;
background: #469;
top: 0px;
}
I think it is one of the most cleanest way to do it. Hope it helps
EDIT :
It may faces some widths issues. As a workarround, you could use display: table-cell; and display: table; properties. See this fork : http://jsfiddle.net/qxVce/