I have a row of two columns, one column contains an image and the other column some text. Is there a way I can always vertically align the text within the column so that it is always centered vertically? You can see an example here on the fourth and fifth row of what I'm trying to do:
http://machinas.com/wip/hugoboss/responsive-img/
The height depends on the size of the image really so I can't really set a height of the column.
HTML
<div class="row">
<div class="large-6 column">
<div class="txt-block">
<h3>Lorem ipsum dolor</h3>
<p>Vivamus eget tempus magna. Proin dignissim, est ac mollis viverra, ligula leo fringilla dolor, in porttitor quam lectus eget augue. Etiam vel felis at mauris pellentesque cursus dignissim in nunc.</p>
<div class="center-wrap">
<div class="center">
Jetzt entdecken
</div>
</div>
</div>
</div>
<div class="large-6 column">
<img src="http://placehold.it/470x400" alt="">
</div>
CSS
.column {
display: table;
float: left;
height: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
}
You need to remove floats on the large-6 column div and add vertical align middle, also you should be displaying those as table-cells not tables. The row is acting as a table. See css below;
.large-6.column {
display: table-cell;
float: none;
vertical-align: middle;
}
If you don't need IE8 support then you can use CSS3 transform. In your case set top: 50% to your .txt-block and add transform: translateY(-50%); what will move the element 50% of it's height to the top.
JSFiddle DEMO
UPDATE
Other good solution is to style your divs a table instead of floating and use vertical-align: middle; as mentioned here by #Jay.
Related
I have a weird issue with some of my divs. Right now my divs are set up to take up the whole screen then have a background color then a background image over it. However, while everything displays properly, if I try to add any content specifically everything disappears except for my background color. I've never had this problem before and I believe it has something to do with how my images and my div are set up. But I can't find a solution so I was wondering if any of you guys could help! I've included the html and css down below!
Here is the jsfiddle that might help: http://jsfiddle.net/e7C87/1/ the red section is the section where I'm trying to place a nav bar and where the background image dissapears
Html (the area with the is the div that's giving me issues all the other divs displays correctly):
<div id="induoIntro" class="divide">
<div class="graphic" style="background-color:#ff837b">
<p id="introGraphic"></p>
<nav>
Designers
Developers
Directors
</nav>
</div>
<div class="textBody">
<p>A rag-tag group of desginers, directors and developers hoping to collaborate with you in an effort to satisfy your endeavours, beautify the web, and enginneer a functional interaction; we'll even guaraantee affordability.</p>
</div>
</div>
<div id="designers" class="divide">
<div class="graphic" style="background-color:#FFB37B">
<p id="designGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="developers" class="divide">
<div class="graphic" style="background-color:#CEE28F">
<p id="devGraphic"></p>
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
<div id="directors" class="divide">
<div class="graphic" style="background-color:#C195DA">
<p id="directGraphic">
</div>
<div class="textBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>
</div>
</div>
CSS:
.divide {
height:200%;
}
.graphic {
display:table;
height:50%;
width:100%;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#introGraphic {
background-image: url(../images/WAInduo-02.svg);
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
}
#designGraphic {
background-image: url(../images/WAdesign-03.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
#devGraphic {
background-image: url(../images/WAdevelop-04.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: bottom center;
}
#directGraphic {
background-image:url(../images/WAdirect-05.svg);
background-size: 100% 80%;
background-repeat: no-repeat;
background-position: center;
}
.textBody {
display:table;
height:50%;
width:75%;
margin:auto;
}
.textBody p {
display: table-cell;
vertical-align: middle;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size:45px;
margin:auto;
}
Okay, you have a lot of irrelevant code there. Here is a JSFiddle and the code that is relevant to your problem (it can be difficult to determine, but if possible, it really helps to provide only the requisite code that we need to solve your problem): JSFiddle
HTML:
<div id="header">
</div>
<div id="induoIntro" class="divide">
<div class="graphic">
<p>Graphic Test</p>
<nav>Test</nav>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#header {
position: absolute;
height: 70px;
top: 0;
width: 100%;
background-color: #fff;
}
.divide {
height: 200%;
}
.graphic {
display: table;
height: 50%;
width: 100%;
background: #ff837b;
}
.graphic p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
As you can see from the JSFiddle, the <p> contents of "Graphic Test" are appearing properly, but the <nav> content is not. Well, if you look at the CSS, you see that any <p> element that is a child of an element with the .graphic class has special instructions, namely display: table-cell, vertical-align: middle;, and text-align: center;.
The <nav> class, however, has no such special instructions. If you remove those instructions from your .graphic p selector, you'll see that "Graphic Test" disappears as well. Where is it going? You can find it using your browser's built-in code inspector, but I'll just tell you: it's moving up to the top of the document.
But wait, isn't that where your header is? Exactly. You have an absolutely positioned header, which means it is removed from the normal document flow and placed on top of the document. So, in effect your <nav> element is being hidden by your header. To illustrate this, we'll give some opacity to your header and see the element sitting behind it:
JSFiddle
Now, if we go back to your original provided JSFiddle and do the same thing to the header there, this is what you'll see: JSFiddle
So to solve this, you should take the CSS properties you have for .graphic p and copy them to a new selector, .graphic nav, or something similar. Hope this helps! :-)
I'd like to code html+css to achieve result as shown on attached image: .
I mean the coding part with text and arrow box. Putting just position absolute is not an answer, cause I need text to float round the arrow box. Is there any way to do that?
I've alredy tried putting all kinds of floats on box and paragraf tag with text. Placing arrow box before, after and in paragraf tag. Also tried using vertical-align and position on arrow box.
Fiddle to play with:
http://jsfiddle.net/K2S5y/1/
<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>
</div>
.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}
Use clear:both ex.
<div style="float:left; width:300px">
<img/>
</div>
<div style="float:left; width:300px">
Text text text
</div>
<div style="clear:both"></div>
you can see the live example here:
http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating
#arrow {
float: right;
}
/* then possibly */
#arrow:after {
content: ' ';
display: block;
clear: both;
}
I'm trying to align a image with text on its right. I also wanted the image to align vertically with the text.
But when I start writing text, it goes under the image.
Any ideas as how to solve this??
<div style="float: left; vertical-align: middle">
<img alt="" src="/portals/85/Images/AukraMaritime.gif" class="Images" />
</div>
<div style="float: left;">
Aukra Maritime
<br />
<br />
<span>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </span><br />
<br />
www.aukramaritime.no
</div>
Remove float:left from the second div.
Notice how the text will start next to the image, and will then float under. To prevent this, add overflow:hidden to the text div, or give it a fixed width and float it to the left.
See http://jsfiddle.net/D7gGp/3/.
To align vertically, enclose both the image and the text in a div, absolute position the image, set top:50% together with a margin-top:-(halfImageHeight)px, and push the text to the right to give space for the image. See http://jsfiddle.net/D7gGp/6/.
You need to float your image to the left:
CSS
.Images { float:left; }
you can also use margin to adjust your text
.classname {
margin-top: 15px;
}
or
.classname{
margin : 1px 1px 1px 1px; (please change as per your requirement)
/*(BOTTOM, LEFT, RIGHT, TOP)*/
}
i've been going over this one for about two days.
example
it's a fairly complicated design, so to reduce code pasted here i've recreated the main structure on this jsfiddle and included the simplified code at the end of this post:
http://jsfiddle.net/rwone/zwxpG/10/
scenario
i have a container with numerous <li>'s containing a div (containing dynamic content from a database) that initially has the property display: none.
on hovering over an image in these <li>'s however, i wish to show the div.
it is working, however the div appears to be beneath other elements in the container which has a fixed height and overflow-y: auto.
what i've tried
i have tried combinations of z-index's and absolute and relative positioning, but i haven't been able to find a solution yet.
i've isolated two causes in the code below and the jsfiddle (shown as /* comments */) but these do not work on the live test site.
question
my question is therefore, is there another way to enforce that the hover state div is shown on top of and outside of the container that is enclosing it?
it is not an ideal solution that i can fix these issues in the jsfiddle but not the live site, but i just thought i'd ask if there was another way to approach this altogether?
thank you.
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
update
in response to answer below, here is further information on the actual content that is being displayed upon hover (everything within the #container_c div). each <li> has its own unique content:
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>
You only want to display one of these hover elements at a time?
Put a single DIV outside of the main body and make it hidden.
Then use javascript to adjust its position and content every time you hover over an LI.
No need to give every LI its own DIV.
Store the contents inside a data attribute
<li id=something data-some-content="Hello joe">
Then you can retrieve it with jQuery like so
$("#something").data('some-content')
Your CSS styles are correct but in your HTML you have two <div> elements with the id='container_c' and that's invalid, IDs are unique and you can't give same id to two or more elements. If you two ore more elements to be given same style then try class='container_c' and in the CSS change the #container_c to .container_c
Check this fiddle for the fixed version
http://jsfiddle.net/DeepakKamat/zwxpG/13/
the solution was a mixture of #NoPyGod's jquery suggestion and to have a better understanding of how absolute and relative positioning work.
basically, when absolute and relative positioning are applied to a div, this position is relative to the position of the last element that had absolute or relative positioning defined and is a 'container' of the div you are working with.
to escape from the 'container' that had overflow: auto and a fixed height and width, i had to remove erroneous positioning back till a parent div that was not constrained by overflow and height and width restraints that were impacting on the hover state div.
a working jsfiddle is here:
http://jsfiddle.net/rwone/eeaAr/
i also implemented #Deepak Kamat's suggestion to only have one id per page and change the rest of the div's to be identified by classes.
i subsequently read the article below that made more sense to me this time and after working in this context:
http://css-tricks.com/the-difference-between-id-and-class/
thank you to all for your assistance!
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 100px;
overflow-y: auto;
}
.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden;
z-index: 999;
}
img {
width: 50px;
height: 50px;
}
.magic {
display: inline;
}
#container_a { position:relative; }
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
script
$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() {
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}
);
I have 2 divs that are side by side. They are both closable via jquery. When they are both visible, they have a fixed width, but when one is closed, I want the remaining div to expand to eat up the width that the closed div used to take up. Is there a way to do this using just CSS (aside from the close button), or do I have to resort to javascript?
The only method I could see for solving this with CSS would be to add classes to the containing element:
<div id="container" class="left|right|both">
<div class="left"></div>
<div class="right"></div>
</div>
Style the contents depending on what the parent class is. If left is the class, you give the first div a non-restricted width and hide the second div. The same goes for right and the second div. When the parent is both, you give both divs 50%.
All your JavaScript would need to do is handle which class is currently applied to the container.
You need to atleast write one line of javascript for this and then you can use css for the effect.
Using jquery, toggle a class to the parent of divs whenever you click on the close. Find the jquery code for the click on the close button and add
$("#parent").toggle("classname");
Use css like
#parent div { width: /*fixed*/100px; }
#parent.classname div { width: 100%; }
Does something like this work?
HTML:
<div id="parent">
<div class="right">div2</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>
<br />
<button id="remove">Remove Div 2</button>
CSS:
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background:green;
}
.left {
overflow: hidden;
height: 100px;
background:red;
}
JS:
$('#remove').on('click', function() {
var div2 = $('.right')
//div2.hide('slow'); // you could hide it as well
div2.remove();
});
Example:
http://jsfiddle.net/9Q86Y/
Edit
You could mimic tables by using
display:table
and
display:table-cell
See: http://jsfiddle.net/DUx3W/ (hat tip: #Jimmy Breck-McKye).
My original table fiddle: http://jsfiddle.net/6KkRL/