This is the HTML code:
<body>
<div id="container">
<img src="images/coffeebackground1.jpg" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
This is my CSS code:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index:100;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: red;
z-index:1000;
position: relative;
color: red;
}
What I did was I put an image as a background and I want to put the topnav div lying on top of the background image. However, it seems like my code is not working.
The text is not visible because both the background color and the foreground color are set to red, so the element just appears as a red block.
Additionally, the text doesn't appear above the image because it is positioned as relative which means it will be positioned relative to its natural position according to the layout. As you haven't specified an offset in the CSS, it actually just appears in its normal position, which is just below the image.
If you change the position to absolute then its position will be relative to #container instead which I think makes more sense in this case. You can then move it to be above the image by setting a position, like this:
#topnav {
background-color: white;
z-index:1000;
position: absolute;
left: 100px;
top: 20px;
color: red;
}
Background and font color are same, that's why its not appearing
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index: 100;
position: relative;
}
#container img{
top:20px;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: white;
z-index: 1000;
position: absolute;
color: red;
top:0;
}
<body>
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
Remove position relative from #container and set position absolute in #topnav.
or
Remove img tag from #container and set background image on #container in css like that:
`
background: url("images/coffeebackground1.jpg");
background-repeat: no-repeat; //if you don't want to repeat image
background-size: auto; //try others parameters to fit your background
*{
margin:auto;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
z-index:100;
top:20px;
position: relative;
}
#topnav {
z-index:1000;
position: absolute;
left: 10px;
top: 10px;
color: #FFF;
font-family:arial;
font-size:30px;
}If you want to change position of 'Home' please change #topnav:{ left: 70px}. If you want to increase more please left: 80px.. and so on. If you want to decrease please less #topnav{ left:30px.. and so on.}
Related
I want my text to appear over an image, at the bottom of the image. I can get it to work but when I scale the page, the text moves out of the div (below the image). I want it to stay in the same place when i scale the page.
HTML
<div class="header">
<img src="images/ct.jpg" class="info-image">
<p class="HeaderText">Canterbury Tales<p>
</div>
CSS
.info-image {
width:100%;
position:relative;
}
.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
}
website: explorecanterbury.co.uk
the div can be found by clicking on canterbury tales building
You have a few problems:
You need to close <p> with </p>.
Use position: relative on the .header.
Like this?
.header {
position: relative;
width: 500px;
}
.info-image {
max-width: 100%;
position: relative;
display: block;
}
.HeaderText {
position: absolute;
top: 50%;
text-align: center;
left: 0;
right: 0;
transform: translate(0, -50%);
font-size: 3em;
margin: 0;
padding: 0;
}
<div class="header">
<img src="//placehold.it/500" class="info-image">
<p class="HeaderText">Canterbury Tales</p>
</div>
Preview
Give the image a lower z-index then the text:
.info-image {
width:100%;
position:relative;
z-index: 1;
}
.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
z-index:2;
}
If that doesn't work, try giving the image a position of absolute, and the text a position of relative.
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/
I am currently centring an image horizontally and vertically using:
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
html:
<body>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
</body>
This has been working fine however I have now added a header:
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
If I resize the window or the window isn't set at the perfect size this centered image will overlap the header. What I really want is it to be centered vertically between the bottom of the header and the bottom of the window. I tried adjusting top/bottom on the centered img but didn't have any luck. Could someone give me some pointers on how to go about this please?
I think you need something like following:
body{
padding:0;
margin:0;
}
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto;
}
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
top:0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
<div id="header"></div>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
Check Fiddle. Hope it helps.
Just add div tag before and use some styles example
<body>
<div>
<p><img src="sample.png" alt="test"></p>
</div>
</body>
Style
div{display: inline-table;text-align: center}
div p{display: table-cell;vertical-align: middle;}
And use padding-top: {header height should be placed here}px
for example if header height is 50px;
div{padding-top: 50px}
So, in my HTML, I've put an Image which is responsive (changes size when browser window is changed). Now, on the top of it, I want to put my title (or you can say text). But the image is only appeared as a strip. It is displayed as a whole when you re-size the window very small. And when I change my text's position to absolute over the image which position is relative, everything disappears.
Here's my HTML:
<style>
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.candh_container .large-header {
background-image:url('http://i.imgur.com/vkfDo1I.jpg');
}
.main-title {
/* position: absolute; */
margin: 0;
padding: 0;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
}
.container_candh .main-title {
text-transform: uppercase;
font-size: 4.2em;
font-family:Montserrat;
}
</style>
<div class="candh_container">
<div class="large-header">
<h1 class="main-title">Candh Inc.</h1>
</div>
</div>
Here's the fiddle : http://jsfiddle.net/ysksx5nu/
The problem is, that you used your image as a background, so it won't take any space. You have to scale the image itself to 100% width, and specify no height, so the ratio is kept.
<style>
.bg_image {
width: 100%;
}
.candh_container {
position: relative;
}
.main_title {
position: absolute;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
z-index: 1;
width: 100%;
top: 0px;
}
</style>
<div class="candh_container">
<img src="http://i.imgur.com/vkfDo1I.jpg" class="bg_image" />
<h1 class="main_title">Candh Inc.</h1>
</div>
Check this: http://jsfiddle.net/ysksx5nu/1/
I want to add an icon over the image. I am trying following, but it doesn't seem to work:
HTML:
<ul>
<li>
<div class="icon">
<img src="image.jpg" />
</div>
</li>
</ul>
CSS:
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
background : url("icon_quick.gif") no-repeat;
border: 1px solid red;
z-index: 2;
overflow: hidden;
}
Demo:
http://jsfiddle.net/tqw4V/
No markup modifications necessary. Your content image (painting) stays in the markup, and the decorative image (smiley) stays part of the CSS.
http://jsfiddle.net/tqw4V/6/
ul{
margin: 0;
list-style: none;
/*position: relative; */
}
.icon{
/*z-index: 2;
overflow: hidden;*/
position: relative;
}
.icon:before {
background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
height: 100px;
width: 100px;
content: '';
position: absolute;
}
You can better change your HTML, since you're adding an inner child on top of the background, which pushes it away.
HTML
<ul>
<li>
<div class="icon"></div>
<img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
</li>
</ul>
CSS
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
width:100px; height:100px;
background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
z-index: 2;
overflow: hidden;
position:absolute;
}
JSFiddle.
Here is one way to do it: http://jsfiddle.net/tqw4V/1/
Unfortunately, it requires modifying your markup, but it works. The idea is to have the overlay image be a separate element that you position absolutely over your main element. This works a lot better if the main element is not, itself, absolutely positioned.
HTML:
<ul>
<li>
<div class="icon">
<img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
<div class="overlay"></div>
</div>
</li>
</ul>
CSS:
ul{
margin: 0;
list-style: none;
position: relative;
}
.icon{
border: 1px solid red;
z-index: 2;
overflow: hidden;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
z-index: 4;
}
}
Just replace the images. Replace their positions. The smiley face should go to the html, and the other to the css. Then by height and width you can set the size of the container. Hope I've helped.