The background color of the div is not showing up for the h1 and h3 content. What am I doing wrong? Thanks in advance!
CSS:
#header {
width: 100%;
height: 250px;
background: linear-gradient(#4C205C, #000000);
margin: -20px 0px 0px 0px;
overflow: hidden;
}
#header > h1 {
color: #FFFFFF;
text-align: center;
padding-top: 15px;
}
#header > h3 {
color: #FFFFFF;
text-align: center;
}
HTML:
<div id="header">
<h1>Hello world</h1>
<h3>Hello!</h3>
</div>
Demo
Your code works properly if you want to add background color for h1/h3 you need to specify css style for it.
#header > h3 {
color: #FFFFFF;
text-align: center;
background: red /* add this */
}
If you want to change the background color then you have to use background property not color property because color property changes the color of text inside that div.
your CSS should be like this :
#header {
width: 100%;
height: 250px;
background: linear-gradient(#4C205C, #000000);
margin: -20px 0px 0px 0px;
overflow: hidden;
}
#header h1{
background: #FFFFFF;
text-align: center;
padding-top: 15px;
}
#header h3{
background:#FFFFFF;
text-align: center;
}
Is this solves your problem if not comment..
Thank you!!
Related
Need help setting the header size so that accommodate the image and text.
I've tried changing the background size using the "background-size" property but it doesn't change.
header {
background-color: red;
background-size: 200px 100px;
}
header h1 {
font-size: 50px;
text-align: center;
text-decoration-line: underline overline;
text-decoration-style: double;
position: relative;
margin-top: -100px;
margin-bottom: 100px;
}
header .pic {
border: 5px #000 outset;
border-radius: 50px;
}
<header>
<img class="pic" src="" alt="" width="200px">
<h1>Placeholder Text</h1>
</header>
The header background appears until the middle of the text and image when I want it to be on the bottom of the text and image (whichever is lower).
try this :
header {
background: url("img/index.jpg") ;
background-color: red;
background-size: 200px 100px;
}
header h1 {
font-size: 50px;
text-align: center;
text-decoration-line: underline overline;
text-decoration-style: double;
position: relative;
margin-top: -100px;
margin-bottom: 100px;
}
header .pic {
border: 5px #000000 outset;
border-radius: 50px;
}
<header>
<h1>Placeholder Text</h1>
</header>
When you want a background image in a container you do something like this:
header {
background-image: url('https://picsum.photos/800/400');
background-size: cover;
background-repeat: no-repeat;
height:100vh;
width: 100vw;
}
h1 {
color: black;
font-size: 50px;
text-align: center;
}
Instead of using a normal image tag, you declare you background image in the CSS.
See a working example here: https://codepen.io/Angel-SG/pen/dwOEvy
I think you might be looking for the display: flex
Try this
/* Reset
*******************/
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; }
/* Styles
*******************/
header { background-color: red; display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
header .pic { width: 200px; }
header h1 {
font-size: 50px;
text-align: center;
text-decoration-line: underline overline;
text-decoration-style: double;
position: relative;
}
<header>
<img class="pic" src="https://sg.fiverrcdn.com/photos/105746482/original/3e2a4ad867ed23117cfda223391c35ab42bb99fc.png">
<h1>Placeholder Text</h1>
</header>
I want to show the divs #botone, #bottwo and #botthree one after the other. I also want to have the background image to be adjusted by 100% width and proportional height on #botone div.
Now the last two Divs show up behind the #botone Div and the #botone div adds the 49px to the vertical placement that comes from the .topnav Div.
I also want to fixate the .topnav Div on top.
** body {
margin: 0px 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.block {
float: left;
width: 40px;
}
.blocka {
float: right;
width: 250px;
}
#botone {
position: absolute;
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
#bottwo {
background-color: blue;
height: 400px;
width: 100%;
}
#botthree {
background-color: yellow;
height: 600px;
width: 100%;
}
<div class="topnav">
<div class="block">
Oi
</div>
<div class="blocka">
News
Contact
About
</div>
</div>
<div id="botone">testtext
</div>
<div id="bottwo">testtext
</div>
<div id="botthree">testtext
</div>
If I understand your question correctly, does this accomplish what you're trying to do?
HTML:
<div class="topnav">
<div class="block">
Oi
</div>
<div class="blocka">
News
Contact
About
</div>
</div>
<div id="botone">testtext
</div>
<div id="bottwo">testtext
</div>
<div id="botthree">testtext
</div>
CSS: (Changes at bottom)
body {
margin: 0px 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color:white;
}
.block { float:left;width: 40px; }
.blocka { float:right;width: 250px; }
#botone {
position: absolute;
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
#bottwo {
background-color:blue;
height: 400px;
width: 100%;
}
#botthree {
background-color:yellow;
height: 600px;
width: 100%;
}
/*--- Fixes --*/
.topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
#botone {
/*-- Test --*/
background-image: url("https://images.pexels.com/photos/948358/pexels-photo-948358.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
background-position: center;
height: 100vh;
margin-top: 49px;
position: relative;
}
link to example
A little confused with your requirements description but I think this is what you're trying to achieve:
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
position:fixed; //add this
width:100%; //add this
}
#botone {
position: absolute;
margin-top: 49px; //add this
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
To fixate the top nav or header, use position:fixed. You would have to define the width as 100% or it automatically takes a width: auto.
To ensure the following div shows directly under the fixed element, give it a margin-top corresponding to the height of the fixed element. If you are using SCSS, this would be much better in responsive design, since you can create a function that applies the height to the margin-top at the same time. But if you are using CSS, just check your #media queries to make sure the height and the margin-top are consistent.
At the moment the blue element is your element that follows the fixed element. If you want to add something in between the blue element and the header (i.e. a slideshow, or banner) treat is as the blue element is being treated now. Give this the margin-top and remove it from the blue element, since the blue element is no longer directly under the fixed header.
See DEMO
Or the whole code in the snippet
body {
margin: 0px 0px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #000;
overflow: hidden;
height: 49px;
position:fixed;
width:100%;
top:0;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.block {
float: left;
width: 40px;
}
.blocka {
float: right;
width: 250px;
}
#botone {
position: absolute;
margin-top: 49px;
height: 100%;
width: 100%;
background-image: url("arc.jpg");
background-size: cover;
}
#bottwo {
background-color: blue;
height: 400px;
width: 100%;
}
#botthree {
background-color: yellow;
height: 600px;
width: 100%;
}
<div class="topnav">
<div class="block">
Oi
</div>
<div class="blocka">
News
Contact
About
</div>
</div>
<div id="botone">testtext
</div>
<div id="bottwo">testtext
</div>
<div id="botthree">testtext
</div>
I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it.
Screenshots : Before and After
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
Set the image as a background-image of header. Is that what you're after?
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px means horizontally centered and 100px from the top (in relation to the h1 element).
h1 {
position : abosolute;
}
This should do the trick but it is preferable to use ids instead of changeing the h tags everywhere on your side
Put this parameter to the image object in css (example creating custom classes) :
.image{
position: relative;
}
And this one to the text :
.text{
position: absolute;
}
Of course, you have to set this classes to it's respective objects. Hope it helps !
Looking for a little help with a project, I am trying to get a nav bar centered inside a header with a logo on the left.
HTML
<header>
<img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
<div id="nav">
<span>Home</span>
<span><button>Televeisions</button></span>
<span>Electronics</span>
<span>Services</span>
</div>
</header>
CSS
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
}
#nav {
width: 100%;
text-align: center;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
JSFiddle
Your nav width 100% is forcing the nav below the image. I added overflow: hidden to the header, floated the img left, and put a margin-top on the #nav.
Adjust your CSS to something like this:
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
overflow: hidden;
}
img {
float: left;
}
#nav {
width: 600px;
text-align: center;
margin-top: 2.5em;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
You can adjust the margin, etc. to style how you want from there on out.
Codepen: http://codepen.io/Tambe257/pen/XdGdLZ
Use positioning on your parent element and your child elements that will be nested inside. Here's a quick example
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
position:relative;
}
#nav {
width: 100%;
text-align: center;
top:2em;
position:absolute;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
I can't seem to center my div tag within a section tag. I can get it centered from left to right but not top and bottom in the center of the section tag. If I give a margin-top:xxpx then it moves the section tag down and exposes it (not good!)
Here is my css
body
{
background-color: yellow;
margin: 0;
}
header > * {
margin: 0;
float: left;
}
header
{
background-color: white ;
width: 100%;
height: 40px;
}
/*header > input {
margin: 10px 20px 0px 10px;
}*/
#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}
article > * {
margin: 0;
}
article
{
background-color: red;
}
#search {
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;
}
#mostdesired
{
background-color: #c7d1d6;
height: 200px;
}
section h2 {
margin:0;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
Here is my html
<body>
<header>
<p class="site-title">#Html.ActionLink("Site", "Index", "Home")</p>
<input id="toptext" type="text" />
</header>
<article>
<section id="search">
<div id="middlesearch">
<h2>Search Here</h2>#RenderBody()
</div>
</section>
<section id="mostdesired" ><h2>This is the most section</h2></section>
</article>
</body>
Vertically aligning with CSS is notoriously tricky.
Change the CSS to
#search {
position: relative;
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
position: absolute;
background-color: grey;
width: 700px;
top: 50%;
left: 50%;
margin-left: -350px; /* half the width */
}
and add one line of JQuery to up the div to be correctly centered
$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)
this line can be avoided if you decide to explicitly specify the height of the div at which point you can simply define the top margin in the CSS.
This avoids having to use tables.
The CSS declaration for header isn't closed on line 20
http://www.vanseodesign.com/css/vertical-centering/
Unfortunately, CSS doesn't make it to easy, but it is possible. Since the div height is dynamic, I would recommend the CSS table method. Yes, a total hack, but it does work.
You have to do a little work for block level elements, refer to these examples
http://phrogz.net/CSS/vertical-align/
http://www.vanseodesign.com/css/vertical-centering/
#middlesearch {
display:inline-block;
line-height:500px;
vertical-align:middle;
}