My text/header is not showing over my image which I'm trying to use as a background to this webpage. This is the code I have right now:
HTML:
<body id="body">
<div id="navbar">
<h1 id="name">Lorem ipsum</h1>
<img class="backgroundimg" src="leaf.jpg" alt="A leaf"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="buildings.jpg"/>
</div>
<div class="backimg">
<img class="backgroundimg" src="squares.jpg"/>
</div>
</body>
CSS:
body {
background-color:black
}
backgroundimg {
position:relative;
width:1175px;
}
name {
position:absolute;
color: white;
z-index;
}
Any tips?
P.S. I took out the '#' and '.' to the appropriate names in CSS.
Use z-index to show the text over image.
You can use z-index, like Anil Panwar said(https://stackoverflow.com/a/34374513/4900669)
#name {
position:absolute;
color: white;
z-index: 10;
}
https://jsfiddle.net/08voh0fp/
Add this to your css file
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
adjust top,left and width according your need,
let me know if this helped
Related
This is the html part:
.bild{
height:100px;
width: 100px;
}
<div class = "wrapper">
<img class = "bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo" >
</div>
They do not seem to "understand" each other, as the image does not change.
The example with the picture you gave works. It could be that you have not noticed any difference. Here is another example where I colour a text with a class:
.color {
color: red;
}
.colorHeader {
color: red;
}
<p class="color">This text is red!</p>
<h1 class="colorHeader">This header is red!</h1>
you could also change this:
.color {
color: red;
}
.colorHeader {
color: red;
}
to this:
.color, .colorHeader {
color: red;
}
You have some extra spaces in your HTML, but the output still works as defined in your CSS. I recommend specifying the desired width or height and using auto on the other in this case.
.bild {
height: auto;
width: 200px;
}
<div class="wrapper">
<img class="bild" src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="the google logo">
</div>
I am trying to use CSS to obtain consistent spacing between my images that are listed in the skills section of the HTML code. This is the Code:
.skilllogos {
height: 100px;
width: 100px;
}
.jslogo {
padding-left: 14px;
}
<div class="skill-row">
<img class="skilllogos" src="images/html.svg" alt="html-icon">
<img class="skilllogos" src="images/css3.svg" alt="css-icon">
<img class="skilllogos jslogo" src="images/javascript.svg" alt="javascript-icon">
</div>
Adding the padding to the jslogo does seem to solve the problem (that is how i tried to fix it) but it seems like I'm putting on duck tape to fix the issue and there is probably a better way to do this. If I change the height and width of the images then the spacing will become inconsistent again, it's sort of hard coded and I do not want that. If you haven't guessed already, I am very new to web development so your help is very much appreciated! Thank you!
I think this is what you're looking for
.skilllogos {
height: 100px;
width: auto;
}
.skilllogos:not(:last-of-type) {
padding-right: 14px;
}
<div class="skill-row">
<img class="skilllogos" src="images/html.svg" alt="html-icon">
<img class="skilllogos" src="images/css3.svg" alt="css-icon">
<img class="skilllogos" src="images/javascript.svg" alt="javascript-icon">
</div>
try this
instead of adding padding-left add padding to all
body{
background :#111;
margin:20px auto;
text-align:center;
}
.skill-row{
padding:10px;
background:#fff;
}
.skill-row img{
padding:14px;
border:1px solid #111;
}
<div class="skill-row">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+HTML+5+" alt="html-icon">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+CSS+3+" alt="css-icon">
<img class="skilllogos jslogo" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+JS+5+" alt="javascript-icon">
</div>
Added border to know the space bwteen images by adding js logo only instead add all logo by
.skilllogos {
height: 100px;
width: 100px;
border:2px solid #111;
padding:14px;
}
<div class="skill-row">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.png&text=+HTML+5+" alt="html-icon">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.png&text=+CSS+3+" alt="css-icon">
<img class="skilllogos jslogo" src="https://dummyimage.com/100x100/de4242/fff.png&text=+JS+5+" alt="javascript-icon">
</div>
i have made 5 hyperlinks in html file but i want to give space between them
how should i do it a little help!
thank you!
<body>
<div class="back">
<div class="image">
<img src="comp.jpg" alt="background image" style="width:100%; height:100%">
</div>
<h3 class="name" style="color: #d9d9d9">
ASHUTOSH KUMAR SINGH
</h3>
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
<div class="myimg" align="middle">
<div class="circle" align="middle">
</div>
<img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>
</div>
</div>
this is my css file: in the code below i have made a class of link in which i
cascaded it. i want to give some equal space between them so that it look neat.
html,body{
margin:0;
}
div.link{
font-size: 25px;
position: fixed;
/*text-space: 100;*/
margin-top:500px;
margin-left: 250px;
}
.back{
height: 100%;
width: 100%;
margin: 0;
}
.image{
position: fixed;
}
.myimg{
position: absolute;
margin-top:100px;
margin-left: 500px;
}
.myimage{
border: 2px solid rgba(114, 114, 114, 0.55);
border-radius: 100%;
}
.circle{
border: 2px ;
border-radius: 100%;
background-color: black;
}
.name{
position: fixed;
margin-top:420px;
margin-left: 530px;
}
I think the most easiest way you're looking for is:
.link a {margin-right:10px;}
the only problem with this is that all link elements get now a margin-right, from the first to the last one.
if you want to exclude the last element to have no margin right, add an additonal:
.link a:last-child{margin-right:0px;}
remember that in css you can perfectly nest css selectors
html body .back .link a{some-css-rule}
by the way, the more specific a selector is, the more important it will be when the browser analyses them)
<div class="some_class" id="some_id" style="color:grey;">sometext</div>
#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}
the color will be grey, because inline selectors have more weight than selectors with ID, which have more weight than selectors with classes, which have more weight than selectors with html containers.
This is called CSS specifity
CSS-specifity calculator by keegan.st
CSS specifity explained by css-tricks
Try to avoid custom CSS-Styles in your HTML-File and include them in your CSS-File. You can use padding or margin in your CSS-File, see this link for the difference.
YourHTMLfile.html
<head>
<link rel="stylesheet" href="YourStyleFile.css">
</head>
<body>
...
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
</body>
YourStyleFile.css
.link a {
padding: 16px;
color: white;
}
EDIT: make sure to create a CSS-File and add it to your <head> section of your HTML-File. They both have to be in the same directory. Another reason why my code may not work for you is that maybe you have another CSS-File which overrides the .link class.
Wrap them in a div and style the div with word-spacing: 10px; :)
here's what I'm using
<h1>Red to Violet</h1>
first .
second .
<div id="section">
<div class="innersections">
<a name="one"></a>
(text)
</div> <hr>
<div class="innersections">
<a name="two"></a>
(text)
</div></div>
I want it so that when I click a link, it doesn't take the page up and I can't see the title 'red to violet' but I can see the second 'innersections' if I clicked 'second'.
note; I can only use css/html codes.
Use id with element you want to navigate to.
<h1>Red to Violet</h1>
first .
second .
<div id="section">
<div class="innersections">
<a id="one" name="one"></a>
(text)
</div> <hr>
<div class="innersections">
<a id="two" name="two"></a>
(text)
</div></div>
If you wnat the h1 header to remain at the top, you can use position:fixed;top:0.
Here is a JSFiddle that illustrates this: http://jsfiddle.net/VZjdN/ (I've made some small changes to your HTML. If you don't want to use an HTML5 header tag, you can use a div.)
The full CSS is:
header {
position: fixed;
top: 0;
background: white;
width: 100%;
}
.innersections {
padding-top: 5em;
}
And the modified mark-up:
<body>
<header>
<h1>Red to Violet</h1>
first. second.
</header>
<div id="section">
<a name="one"></a>
<div class="innersections" style="padding-top:6em">
<h2>Inner 1</h2>
<div style="height:800px"></div> <!-- filler -->
</div>
<hr>
<a name="two"></a>
<div class="innersections" style="padding-top:4em">
<h2>Inner 2</h2>
<div style="height:800px"></div> <!-- filler -->
</div>
</div>
</body>
SOLVED
http://jsfiddle.net/GPRVX/
.section {
margin-top: 8em;
}
.fix {
height: 7em;
top:0; left: 0;
position: fixed;
background: white;
margin: 0;
padding: 0.5em;
width: 100%;
}
.innersections {
padding: 0.5em;
}
.section a:before {
display:block;
content:"";
height:8em;
margin:-8em 0 0;
}
I'm trying to build a small website that is one page with 5 stacked divs within the body. The first and second div are fine but all the divs after that(3, 4, and 5) all repeat the unique background image when the site is viewed in IE9. The site works fine in FF 20.0.1, IE10, IE 10 compatibility, and IE9 compatibility so this issues appears to only show up in IE9. I have taken everything out of the CSS and html except for just those 5 containers and find that I can't pinpoint the issue causing the background images to duplicate in the 3rd, 4th, and 5th div. I've also repeated the second div and it also duplicates the background in the second instance. If anyone has any insight as to what I am missing I would greatly appreciate it.
Also, I have played with no-repeat and other ideas I found while searching for a solution but nothing has worked for me at this point.
CSS:
* {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
font-family: Myriad, Arial, Helvetica, sans-serif;
}
p {
margin-bottom: 1em;
}
a {
color: #60789c;
text-decoration: none;
}
a:visited {
color: #60789c;
}
img {
border: 0;
}
body {
margin-bottom: 0px;
margin-top: 0px;
}
div#content {
margin: auto;
padding: 0;
width: 900px;
}
div#SectionOne {
Background-image: url(../images/section1.jpg);
height: 707px;
width: 100%;
}
div#SectionTwo {
Background-image: url(../images/section2.jpg);
color: #FFFFFF;
height: 1159px;
width: 100%;
}
div#SectionThree {
Background-image: url(../images/section3.jpg);
height: 668px;
width: 100%;
}
div#SectionFour {
Background-image: url(../images/section4.jpg);
height: 1385px;
width: 100%;
}
div#SectionFive {
Background-image: url(../images/section5.jpg);
height: 1165px;
width: 100%;
}
And this is the HTML:
<body>
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo" />
</div>
<div id="SectionThree">
<a name="SectionThree"/>
</div>
<div id="SectionFour">
<a name="SectionFour"/>
</div>
<div id="SectionFive">
<a name="SectionFive"/>
</div>
</div>
</body>
Close your a tags like this <a name="SectionXXX"></a> rather than this <a name="SectionXXX" />
HTML
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo"></a>
</div>
<div id="SectionThree">
<a name="SectionThree"></a>
</div>
<div id="SectionFour">
<a name="SectionFour"></a>
</div>
<div id="SectionFive">
<a name="SectionFive"></a>
</div>
</div>
All I can suggest with what you've posted is that you change Background-image to background-image ... but that's a long shot.
Also your <a> elements are incomplete; and the name attribute is out of date now. Use IDs instead. That is, if you want to link to one of those divs, use this:
Go to Section Five
Then just get rid of those as in the divs altogether.