I have two separate non nested sections with a background image. The one displays the other does not. The one does not display because takes up no space even though a height is specified. When I put content in it, it shows, but only at the height of the content. So the bg image is not the problem. Both have no content except for an absolutely positioned item (which does not count as content to browser). The section that displays is inside a regular div. The section that does not display is inside of a flexbox. Don't know why that would make a difference.
I've seen answers on the web and at stack overflow and they all consist of either changing the path of the background image to the correct one, or giving a height to the element with bg image. I already knew about both of those requirements and I have them in both tags (unless there's a typo). But it works in one, but not the other. Do I have a typo that I can't see from looking at it too much? Driving me nuts over what should be a simple thing. A second pair of eyes would be very helpful
this works:
<section class="headingImg">
<p class="container headerText">
Increase your home's value<br />and enchance your lifestyle
</p>
</section>
Related styles. Container class attribute comes from bootstrap therefore not defined in css
.headerText {
text-shadow: 2px 2px 2px #222;
color:#f4e9da;
font-size:36px;
padding-top:235px;
font-style:italic;
line-height:36px;
}
.headingImg {
background-image:url('images/browndeck.jpg');
background-position: center;
background-repeat:no-repeat;
background-size:cover;
height:350px;
margin-bottom:40px
}
this does not work because section with bgimage has no height even though one is specified
<div class="container">
<section class="flex">
<div class="flexDiv bgColor">
<section id="kitchens" class="imgBoxSize cover relative">
<h2 class="absCenter">Kitchens</h2>
</section>
<p>Enhance the lifestyle of your mice, cock roaches and flies</p>
</div>
</section>
</div>
Related styles
.bgColor{
background-color:white;
}
.flex {
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}
.flexDiv {
background-color:#CCC;
width:30%;
margin:0 auto;
}
#kitchens {
background-image:url("images/kitchen1.jpg");
background-repeat:no-repeat;
}
.imageBoxSize {
height:200px;
width:100%
}
.cover {
background-size:cover;
background-position:center;
}
.relative {
position:relative
}
.absCenter {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
}
In the HTML you call class imgBoxSize while in the CSS it is called imageBoxSize. Those darn typo's..
Related
I'm trying to achieve this look in a clean way:
I can make it happen with adding a large line-height and then a negative margin-top to the textbox but I doubt that's the best solution.
Here's the code I have
.container {
background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: cover;
height:600px;
}
.overlay {
height: 600px;
width: 100%;
background-color: rgba(0,0,0,0.4);
}
.small-flexbox {
display:flex;
justify-content:center;
align-items:center;
max-width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:-340px;
}
h1, p, a {color:white;}
h1 {
text-align:center;
display:block;
padding-top:1em;
line-height:3;
font-size:80px;
letter-spacing:5px;
text-transform:uppercase;
}
a {
border:15px solid #f5e2c8;
padding:10px 30px;
text-transform:uppercase;
}
.first-word {
letter-spacing:11px;
}
<div class="container">
<div class="overlay">
<h1><span class="first-word">Complete</span><br> Remodeling</h1>
<div class="small-flexbox">
<p style="max-width:400px; margin-right:3em">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
<a>Get a Quote</a>
</div>
</div>
</div>
In practice, it's not good to give any tag a margin with a negative value. Instead, you can achieve that by giving it a position relative or, in some cases, absolute and changing its position with top, bottom, right, and left in the CSS. You see margins move the block and the entire content that is inside of it by adding space inside its body, and the position changes the place of the block and doesn't add any extra spaces inside. So if you are trying to change the position of your headlines or the small paragraph or even the button does it using the position attribute. Also, you can give those elements inside your container padding so that the container will be more similar to the one you want. I hope this helps you.
I want my text to be centered horizontally on the main part of the page, while behaving like the sidebar doesn't exist. I additionally also want it to be at the very bottom of the page.
#chat-form {
display: flex;
justify-content: center;
}
<section id="bottom-notice" style="position: absolute; bottom: 0px; width: 100%; background-color: red;">
<form id="chat-form">
<p style="color: #9a9a9e; font-size: 12px;">This text is the bane of my existence</p>
</form>
</section>
My idea was to have a parent div that would put it at the bottom with an absolute position, and to then
Have the child be centered horizontally like this, the justify-content centering it while respecting other divs.
However it behaves very weirdly and is too far on the right.
I can get the text to be centered respecting the sidebar and to be at the bottom, but never both at the same time.
Ive tried a bunch of stuff, but none of them brought me anywhere.
I think this will solve your problem. From the following code, your sidebar will be fixed on the left side and your text will remain on the bottom of the page without considering the position of the sidebar. For the demonstration purpose, I have written down HTML and CSS separately.
.container{
min-width:100%;
min-height:100%;
}
.sidebar{
position: fixed;
top:0;
left:0;
background-color: #000000;
color:#ffffff;
width:25%;
height:100%;
}
.text{
position: absolute;
bottom:0;
text-align:center;
width:100%;
}
<div class="container">
<div class="sidebar">My Sidebar</div>
<div class="text">
<p>This text is the bane of my existence</p>
</div>
</div>
The background is pretty simple, I wanted to have a small caption slide up from the bottom of an element when the user hovers/taps. See fig 1.
A bit of digging said this couldn't be done using CSS, but I really don't see why. A few hours later, I think I'm very close to solving it, but I can't jump the final hurdle.
My logic was, if your parent element has overflow: hidden, and you absolutely position the caption off the bottom of the parent, you can just animate the position values using the transition attribute so it slides up. Pure CSS baby!
You can't animate height- the text is crushed, the element has to be moved as a block (though not necessarily rendered as display:block).
Here's where I've got to so far https://jsfiddle.net/zufwavpn/. The HTML,
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content</span>
</div>
</div>
And the CSS (I've converted to vanilla CSS here),
.item-wrapper{
height:22rem;
position:relative;
overflow:hidden;
color:white;
font-family:sans-serif;
}
.content{
height:100%;
background-color:red;
padding:10px;
}
.popup-title{
position:absolute;
top:100%;
bottom:0%;
width:100%;
transition: bottom 0.5s, top 0.5s;
vertical-align: bottom;
}
.popup-title span{
display:block;
margin:0;
background-color: black;
}
.item-wrapper:hover .popup-title{
bottom:0%;
top:0%;
}
The reason I feel close is that at this stage, the popup basically works, but the content inside it should be aligned to the bottom of the container. Essentially it's the age old trick of set an absolutely positioned element's top and bottom to '0' but used to animate something from below the container.
Why am I animating the top and bottom attributes? If you only work with the 'top' value, you can hide the element by setting top:100%, but you can't animate that so it'll rest on the bottom of the parent. You'd need a specific value for top to be set to (height of parent minus height of content of pop up), and the pop up content / parent could be any size. You could set bottom:-100% - and this actually works, you can animate to bottom:0%, and the pop up with rest at the bottom of the parent. All good and done with no need to set a top value. But, it's unsatisfactory, you're having to place the slider way way below the parent and animate it up, which for various reasons to do with the other animations, produces a badly timed effect.
So, here we have the pop up element positioned at the bottom of the parent, with no height since the top and bottom values coincide, and the content overflowing downwards. Perfect. Then the top value animates up, the pop up element now has top:0; bottom:0, filling the parent, and if only I could get the content to stick to the bottom all would be well.
This last bit isn't usually too difficult. We have vertical-align, and the whole world of flex, but they all seem to produce errors and bugs and lead me down holes. Any ideas anyone? At this point I have to move on and just use javascript, but I feel like it's a problem worth solving in its own right.
.item-wrapper {
height:22rem;
position:relative;
overflow:hidden;
color:white;
font-family:sans-serif;
}
.content {
height:100%;
background-color:red;
padding:10px;
}
.popup-title {
position:absolute;
top:100%;
width:100%;
transition: transform 250ms;
vertical-align: bottom;
}
.popup-title span {
display:block;
margin:0;
background-color: black;
}
.item-wrapper:hover .popup-title {
transform:translateY(-100%);
}
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content</span>
</div>
</div>
Adjusted the top: and bottom: properties for the .popup-title, and moved the background color to the div, not it's child span. No need for specific heights here. It should be dynamic.
.item-wrapper{
height:12rem;
position:relative;
overflow:hidden;
color:white;
font-family:sans-serif;
}
.content{
height:100%;
background-color:red;
padding:10px;
}
.popup-title{
position:absolute;
bottom: -101%;
width:100%;
transition: bottom 0.5s, top 0.5s;
vertical-align: bottom;
background-color: black;
}
.popup-title span, .popup-title p{
display:block;
margin:0;
padding: 10px;
}
.item-wrapper:hover .popup-title{
bottom: 0;
}
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content. Height of the content here is irrelevant.</span>
</div>
</div>
<br />
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<p>The popup div should expand as necessary. Even if there are multiple sentences or paragraphs.</p>
<p>Just dont' make it taller than the wrapper div</p>
</div>
</div>
Simply make .popup-title to have negative bottom position (not top value needed at all) and on hover transition it to 0.
.item-wrapper {
height: 22rem;
position: relative;
overflow: hidden;
color: white;
font-family: sans-serif;
}
.content {
height: 100%;
background-color: red;
padding: 10px;
}
.popup-title {
position: absolute;
bottom: -100%;
width: 100%;
transition: bottom 0.5s, top 0.5s;
vertical-align: bottom;
}
.popup-title span {
display: block;
margin: 0;
background-color: black;
}
.item-wrapper:hover .popup-title {
bottom: 0;
}
<div class="item-wrapper">
<div class="content">
Hello I am content. All that matters for this method to work is that the item wrapper has a fixed size. In my working project, the width is set to a % value, and the height to rem.
</div>
<div class="popup-title">
<span>A title for my content</span>
</div>
</div>
This is my CSS code:
#outer {
width:580px;
padding:10px;
float:left;
}
.inner {
width:560px;
padding: 10px;
background-color:#fff;
color:#666666;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
My problem is the background-color for the inner div doesn't extend to fill the entire div alongside its content. I've had this problem quite often, and my solution has usually been to specify a height for #inner, which makes the background fill #inner accordingly. However, I don't want to specify a height explicitly because it's dynamic content. What should I do to make the background-color fill the div as it extends?
Set the position of each element, with the inner element needing to be absolute, and then just tell the inner div to always fill the outer one with height: 100%. The only care that you have to take with this is that setting the position of inner to absolute will then make it ignore floats, but presumably you are taking care of that with outer.
(I changed the background color to red in this answer to make it more obvious what is going on.)
This is my CSS code:
#outer {
position: relative;
width:960px;
height: 500px;
}
.inner {
position:absolute;
height:100%;
width:400px;
background-color: red;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
I couldn't replicate your issue. If you don't specify a height for '.inner', the background color should extend dynamically as '.inner' fills with content.
You might be having an issue due to a lack of a CSS reset. Each browser has a set of standard css rules it applies to all pages, unless you override these rules.
I recommend adding a CSS reset in your above all your current css.
A very basic but popular reset is by Eric Meyer, found here: http://meyerweb.com/eric/tools/css/reset/
Let me know if that helps, and if not try posting an image of what you are experiencing.
Btw, this is how your code renders for me:
The padding of the outer element will always show the background color of the outer element...
Just remove the padding there.
#outer {
width:580px;
/* padding: 10px;*/
background:red;
border:1px solid green;
}
.inner {
width:560px;
padding: 10px;
background-color:lightblue;
color:#666666;
}
I have a column of text, with wide margins on either side. Below it, I have a full-width section of data (in tabular format).
I can align these against each other quite readily. My problem is that there is a 'tab' that sits on top of the table section. It's narrow enough that it doesn't interfere with the center column of text, and the layout calls for it to slide up into the white space to the left of the text.
The easy solution would a position:absolute, with top:foopx to slide it up relative to the rest of the div. The only problem is, the tab's height is dynamic. I need to somehow to top:'height'px, but (obviously) CSS doesn't contain anything for dynamic values.
What I need to do is align the bottom edge of the 'tab' against the top edge of the containing div, and I cannot for the life of me figure out any CSS statement that does that. I'd rather avoid a javascript based approach (e. g. at runtime get the height of the tab, then set top equal to that height) because the entire bottom div is refreshed from time to time using an AJAX call, and adjusting the height in that process causes the page to 'jitter' on the update (not sure why it doesn't happen without the height update; the jitter is in a separate section of the code).
Requested code example:
<html>
<head>
<style>
#smallColumn
{
float:left;
width:100px;
height:100px;
background:#000;
margin:5px;
}
#fullColumn
{
float:left;
width:200px;
height:300px;
background:#000;
margin:5px;
}
#bottomDiv
{
position:relative;
}
#tab
{
position:absolute;
top:-40px;
}
</style>
</head>
<body>
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
<div id="tab">Tab</div>
<hr />
DATA DATA DATA
</div>
</body>
</html>
Use top margins, the appropriate display properties and vertical-align:bottom. See the code below + comments for an explanation. You have to set a height and negative margin-top value which is larger than the actual height of the tab's content. Otherwise, the content may jump back to the top.
Relevant HTML/CSS:
<div id="cont">
<div id="tab">
<div id="tab-fix">
Tab
</div>
</div>
Rest of content
</div>
#cont {
margin-top: 30px; /*Reserve space*/
height: 100px;
background: lightgreen;
}
#tab {
display: table; /* Necessary for the application */
margin-top: -30px;/* Move tab to the top*/
}
#tab-fix {
height: 30px; /* Expecting the height to not exceed 30px*/
display: table-cell;
vertical-align: bottom; /* Aligns the content at the bottom*/
}
Fiddle: http://jsfiddle.net/stEW3/2/
Update2
So this is a tough problem to solve! The only thing I could think of was to put a wrapper around the tab. That wrapper needs to be relatively positioned and have a height equal to that of the tab. Then you can use absolute and negative top of 100%.
http://jsfiddle.net/mrtsherman/BC8Xr/2/
Update
With posted code I now understand. How about using absolute and specifying a bottom value of 0?
http://jsfiddle.net/mrtsherman/BC8Xr/
<div id="content">
<div id="smallColumn">a</div>
<div id="fullColumn">b</div>
<div style="clear:both"></div>
<div id="bottomDiv">
<div id="tab">Something</div>
<hr />
</div>
</div>
#content { border: 1px solid red; position: relative; }
#bottomDiv
{
position:absolute;
bottom: 0px;
}
#tab
{
/*
position:absolute;
top:-40px;
*/
}
Old
Without html structure and a somewhat vague description this is a bit hard to decipher. But this is what I think you mean:
http://jsfiddle.net/mrtsherman/VM99L/
Basically you want the tab above the tabular data to be drawn up into the div before it. You can use a negative top margin for this. Just set it to the same height as the height of your tab. If you have padding on the div then you will need to compensate for that also.
<div id="tabulardata">
<div id="tab">Tab X</div>
<table>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</div>
#tabulardata { margin-top: -50px; }
#tab { height: 50px; width: 80px; background: gray; color: white; }