I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
Related
I have a long paragraph of text which I'd like to flow around an image which is floated left. Instead it seems there's a paragraph break inserted where I put the image, and the new paragraph starts next to the image. What's odd is that this doesn't happen when I insert a second image further down.
How can I keep my paragraph together and flow properly around the image + caption?
HTML:
[...] Integer rutrum at libero ut auctor. Integer sem tellus, imperdiet
non dignissim ut, laoreet sit amet nunc.
<figure class="figureleft">
<img src="i/dodecahedron.jpg" width="300" height="300" alt="" />
<figcaption>
Artwork by Igne Mikalauskaite
</figcaption>
</figure>
Nunc dolor ex, malesuada ac lobortis eget, commodo laoreet est. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices sapien nunc,
sit amet euismod turpis elementum eu. [text continues]
CSS:
body {
font-family: Verdana, Geneva, sans-serif;
}
#maincol {
width:800px;
background-color:#91C1CC;
padding:1em;
}
.figureleft, .figureright {
background-color:white;
padding:5px;
border:1px solid black;
}
.figureleft {
float:left;
margin:15px 20px 15px 0;
}
figcaption {
font-style:italic;
font-size:0.85em;
}
JSfiddle at https://jsfiddle.net/stevenvh/k3tnwyfs/2/
Edit
Tonielton pointed out that I can't use block elements like figure inside a paragraph, but when I want an image with a caption I'm bound to use a block element of some sort, I guess.
I think I found it. Tonielton's suggestion of breaking the paragraph before the figure, and restarting a new one after is not the solution, since the new paragraph doesn't follow on the same line as where the previous ended.
Solution: do break the paragraph, but add
<p style="display:inline;">
to both the one before and the one after the <figure> block.
See https://jsfiddle.net/stevenvh/k3tnwyfs/4/
I'm stuck on this one.
I want to vertically center a div. Its parent has an unknown height, however, it does have a min-height.
How can I do this?
Here is one approach using the CSS3 transform property.
Use absolute positioning to place the top edge of the child element at 50% from the top, and then use the transform: translateY(-50%) to adjust for the child's height.
.parent {
height: auto;
min-height: 200px;
border: 1px dotted gray;
position: relative;
}
.child {
border: 1px dotted blue;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.content {
margin-left: 100px;
margin-right: 400px;
}
<div class="parent">
<div class="child">child</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.
</div>
</div>
An other solution requires Javascript.
Javascript can help you to get the real height of the parent element :
var myElt = <your parent selector>;
var myEltHeight = myElt.offsetHeight;
After that, you can set the 'line-height' property of the parent to be equal to this height,
myElt.style.lineHeight = myEltHeight + 'px';
And finally add a 'vertical-align: middle' to him.
myElt.style.verticalAlign = 'middle';
Of course you have to re-do the maths each time the parent element is resized (with a window resizing for instance)...
For the record, I did not test this solution. It probably needs some adjustments ...
Use a table display, like this:
div {
height: 80vh;
/* Random height and width */
width: 80%;
border: 5px solid blue;
display: table;
}
p {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
}
<div>
<p>
Some centered content.
</p>
</div>
I do not recommend this usage, but you can use a display:flex on the parent element, and use one of the following, according to your needs, on the child item :
The flex-direction property establishes the main axis.
The justify-content property defines how flex items are laid out along the main axis on the current line.
The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
Source : Using CSS flexible boxes
This guide can be helpful to understand the mechanism : A Complete Guide to Flexbox
/!\ Warning :
flexbox properties are really attractive (I have been really interested in them some times ago) but they become really instable as soon as you use some absolute positionning within the DOM.
flexbox properties needs some vendor prefixes for not-even-so-old version of almost all browsers. And sometimes the properties does not even have the same names (there are the old, tweener and new syntaxes. See the end of this post : A Complete Guide to Flexbox)
I have a block of text with unknown width and I would like to place another text right after it that would always stick to the last word. If the first block is one line then setting them both to 'inline' or 'inline-block' is enough, but if the first block is more than one line, the second block always goes to the next line.
Code:
html
<div id="text">sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.</div>
<div id="new">New</div>
css
div {
float: left;
display: inline-block;
}
http://jsfiddle.net/nmuUd/1/
'New' needs to always stick to the last word of the previous block. How can I do this?
EDIT: To clarify, I cannot change the markup. The content is always in two separate divs.
Like this:
html
<div id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.
<div id="new">New</div></div>
css
#new {
background: red;
}
div {
display: inline;
}
Getting rid of the float:left; on your fiddle seems to do what you're looking for.
Your text is pushed down because if you have an 'inline-block' element, and the text is long enough to fill 100% width of a parent container the second line will also have 100% width. That's why the second div will start rendering below that first div.
If you want your divs in one line you have to give them 'display: inline;' property.
If it's a static and short text, for example name of an author, you can use pseudo-element ':after', like this:
div.text:after{
content: ' put you text here'; /*remember to put whitespace on the beginning*/
background-color: red;
}
but if you want to use 'div' as inline element just use 'display: inline;' without float:
div.text{
display: inline;
}
Hope I helped.
Just remove the float, if the two divs are display: inline that should be enough.
fiddle
you can make use of span
<span id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. </span>
<span id="new">New</span>
Like this
demo
css
#new {
background: red;
}
div {
display: inline-block;
}
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);
}
);
like in the title i can't put some text centered vertically near a div with CSS, i searched on google and on stackoverflow so i decided to make a question here.
This is an example of what i need done with Paint:
I tried display table cell and box solutions but it works only without the floating div on top left.
When the text is longer than the blue div it should go under the div just like a normal text with a floating div.
I'm searching an only CSS solution, it can be done or not?
I am not completely sure if that is possible, but here is my best attempt at it, at least works for the first 2 examples.
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim.</p>
</div>
<div class="wrap">
<div class="invisible"></div>
<img src="http://placehold.it/140x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim. Proin venenatis arcu id enim rutrum eget condimentum urna venenatis. Suspendisse at tortor nisi, in tempus ligula. Maecenas nisl felis, bibendum ut luctus nec, bibendum sit amet erat.</p>
</div>
CSS:
.wrap {
width:500px;
border:1px solid red;
margin:10px;
}
.wrap:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
margin-left:-0.25em; /* adjusts spacing */
}
p {
display:inline-block;
vertical-align:middle;
width:350px;
}
img {
float:left;
}
.invisible {
height:100px;
display:inline-block;
vertical-align:middle;
}
A fiddle.
This is possible with pure CSS.
body {
background: url("http://img08.deviantart.net/b5aa/i/2015/140/7/c/chalkboard_by_lorelinde-d8u2phm.jpg") no-repeat;
}
.container {
color: rgba(255, 255, 255, .9);
font-family: "Chalkduster", "Baskerville";
font-size: 18px;
padding: 0 10px;
width: 550px;
}
#user_portrait {
border-radius: 13px;
border: 3px solid rgba(255, 255, 255, .9);
float: left;
margin: 0 20px 0 0;
max-height: 300px;
max-width: 300px;
filter: sepia(50%);
}
#overview_text {
letter-spacing: 1px;
line-height: 1.3rem;
padding: 0 0 0 10px;
white-space: pre-line;
}
<body>
<p class="container">
<img id="user_portrait" src="https://pbs.twimg.com/profile_images/704337993293815810/PmkKs6yw.jpg">
<span id="overview_text">“Never hate your enemies. It affects your judgment.”
“My father held a gun to his head, and my father assured the bandleader that either his signature or his brains would be on the contract.”
“There are many things my father taught me here in this room. He taught me: keep your friends close, but your enemies closer.”
</span>
</p>
</body>
The key point is to put both image and text into non-inline parent tag and make them float.
This is impossible with css only. (i would be happy to be proved wrong.)