I want to make a background image transparent and found a good answer here. But my footer is collapsing to the top of my page underneath my header. I can see the transparent image in the body, but my main article continues below the footer with the html background color applied. What is causing the footer to collapse? The section which is the parent container for the div's has a defined width. Any help would be appreciated.
html {background: #95A3C2;}
body {
background: white;
background-image: url(_images/pg_p_lewis_bckgrnd.jpg);
width: 960px;
margin: 0 auto 0;
font-family: "minion-pro";
}
section {
width: 960px;
display: block;
position: relative;
}
#trns {
height: auto;
opacity: 0.2; filter: alpha(opacity=20);
position: absolute;
}
#trnsb {
height: auto;
}
#heading {
width: 960px;
}
<body>
<header>
<div id="colA">
</div>
</header>
<section>
<div id="trns">
<div id="trnsb">
<div id="heading">
<div id="colD">empty</div>
</div>
<div id="main">
<div class="text">
<p>text</p>
<p>text</p>
</div>
<div class="image">
<p>Image Gallery</p>
<p><span class="caption">Center image vertically on page and hover to enlarge.</span></p>
<p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div id=copyright>copyright 2016 by Barton Lewis</div>
<div id=hosting>hosting by simply hosting</div>
</footer>
</body>
</html>
You have given #trns a position of absolute. Doing this removes the element from the normal flow of the document. So there is nothing 'pushing' the footer down. From your code I couldn't see a reason for giving #trns an abolute position. You should be able to just remove this declaration from your css.
Related
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
I have the following code
<body>
<div style="height: 35%; background-color: black;"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
</div>
</div>
</body>
Ideally, I would like the top portion of the page to be a certain color (black in the example), and I want the header area (which contains the <h1> and <h3> elements) to be inside the black box. Then I would like the first paragraph of the content to also be included inside the black box. Very similar to this picture:
What is the best way to go about this?
The simplest way is to use an absolute positioned pseudo element on the header
Stack snippet
body {
background-color: #ddd;
margin: 0;
}
#header {
position: relative;
color: white;
background-color: black;
}
#header::before {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 60px;
width: 100%;
background-color: inherit;
}
#header div {
width: 80%;
margin: 0 auto;
padding: 10px;
}
#content {
position: relative;
width: 80%;
margin: 0 auto;
background-color: white;
}
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>
One
</p>
<p>
Two
</p>
<p>
Thre
</p>
<p>
Fou
</p>
</div>
</div>
Three steps:
Apply a gradient background to the <body>.
Create two sectioning elements: <header> and <section>
Ensure all the relevant elements in <header> and at the top of <section> have an explicitly declared height in pixels which, combined, match the height of the first part of the gradient.
Make sure that the html and body have height: 100% or min-height: 100% otherwise height 35% is not going to be 35% of the viewport height.
You can make the black background with an absolute positioned element. I suggest to look into css position(relative, absolute, fixed, static).
Here's a demo and the code:
https://jsfiddle.net/n617L6rh/
<div id="bg"></div>
<div id="header">
<div>
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
</div>
<div id="content" class="card">
<div>
<p>One</p>
<p>Two</p>
</div>
</div>
html,
body {
height: 100%;
}
#bg {
height: 35%;
background: black;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#header {
height: 35%;
color: #fff;
position: relative;
}
I want to center left-aligned text in the yellow box (txtbox).
It looks like that now:
and it want it to be looking like this:
HTML:
<div class="content container small">
<div class="txtbox">
<header style="text-align:left;">
<h2>I AIN'T</h2>
<h2>AN ARTIST.<h2>
<h2>I'M A</h2>
<h2>BEAST!</h2>
</header>
</div>
<footer>
More
</footer>
</div>
CSS:
.container.small {
/* width: (containers) * 0.75; */
width: 900px;
}
.txtbox{
width:800px;
margin:0 auto;
background-color:yellow;
text-align:center;
}
.txtbox header h2{
padding-left: 50px;
}
.txtbox header {
display: grid;
grid-template-columns: 1fr;
width: fit-content;
margin: auto;
background-color: yellow;
text-align: left;
align-items: center;
}
This will put your text in a box. Align the text to the left of the box and fitting the box for the text you have.
Then it will center the box.
This also works when you don't know the width or height.
And remove
style="text-align:left;"
out of the header.
Get rid of the inline style in your
<header style="text-align:left;">
it overrides the stylesheet; leave just
<header>
It took me a little bit to figure out what "centered left-aligned" text mean.
If I understand you correctly, You want the text to be left-aligned on a vertical axis, but centered on the page.
If that is what you want than you can do that by centering your inner header tag like so: width: 132px; margin: 0 auto;
Here's a fiddle to demonstrate:
http://jsfiddle.net/u4sj7/
header h2 { position: relative; left : 30% /* percentage of yellow box */; }
<div class="txtbox">
<div class="centerblock">
<header style="text-align:left;">
<h2>I AIN'T</h2>
<h2>AN ARTIST.<h2>
<h2>I'M A</h2>
<h2>BEAST!</h2>
</header>
</div>
</div>
CSS:
.centerblock {
display:inline-block;
margin:auto;
}
HTML:
<div class="content container small">
<div class="txtbox">
<header>
<h2>I AIN'T</h2>
<h2>AN ARTIST.</h2>
<h2>I'M A</h2>
<h2>BEAST!</h2>
</header>
</div>
<footer> More
</footer>
</div>
Add this to CSS:
.txtbox header {
display: block;
margin: 0 auto;
}
So, I've been trying to create a horizontal scrolling page on my website. I set the entire scroll portion to 400%, as I have four pages. However, I was wondering is it possible(using CSS, jQuery, etc.) to cut up that 400% so that I can use 0-100% for the first page, 100%-200% for the second page, etc.? Or is there another way around this (I've been trying to accomplish this for cross-browser/screen size compatibility). I've only managed to do this so far using hard pixels, but is there a way to change that into percentages?
HTML:
<div id="transition-slide-container">
<div id="transition-slide">
<div id="inner-container>
<div class="slide" id="home">
<h1>home</h1>
</div>
</div>
<div class="slide" id="portfolio">
<div id="inner-container">
<h1>portfolio</h1>
</div>
</div>
<div class="slide" id="about">
<div id="inner-container">
<p>about</p>
</div>
</div>
<div class="slide" id="contact">
<div id="inner-container">
<p>contact<p>
</div>
</div>
</div>
</div>
CSS:
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
height: 900px;
min-width: 400%;
z-index: -1;
float: left;
position: relative;
}
div#transition-slide {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 1620px;
margin: 0 auto;
}
div#inner-container {
width: 1024px;
margin: 0 auto;
padding: 0;
}
Website: andrewgu12.kodingen.com
you can set your .slide width to 100% and give background-color: #bee1ff; to your body.
demo
and where is your #inner-container in html?
translition slide should have width of 400% and each slide 100%. The container would be width 100%, overflow:hidden if you want to do this with javascript/anchors or overflow-x:scroll;
you could give 100% width to your .slide class
.slide {
display: inline-block;
width: 100%;
margin: 0 auto;
}
I'm redesigning a site and the different sections (header, banner image, main, etc.) have a background that stretches all the way across, however the content is contained to a certain width and that box is centered.
However, in the design the "banner image" (which is a image below the header but above the main content) will extend beyond the width of the rest of the content. At first this was easy until a need arose to have text on top of the banner image, and that text would need to line up with the rest of the text.
I cannot use CSS background image because on some pages the banner image area will be a slider, which requires tags.
I have a working solution, but it seems clunky and I was hoping to find a better method: http://jsfiddle.net/PkStg/10/
HTML:
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
<div class="banner-image-wrapper">
<img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
CSS:
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner-text-outer {
position: relative;
}
.banner-text-inner {
position: absolute;
top: 10px;
}
.banner-image-wrapper {
margin: 0 auto;
max-width: 400px;
min-width: 300px;
font-size: 0;
}
.banner-image-wrapper img {
width: 100%;
}
I know that you wanted to not use background-image, but here is a solution which uses that for anyone else who sees the page.
Perhaps your slider could make use of the background-image?
This should do it:
jsFiddle
HTML
<body>
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
</body>
CSS
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner {
background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
}