How do I use margin or padding for pseudo element :before to give enough space between image and number
Look here in this link for screenshot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<ul>
<li>city</li>
<li>email</li>
<li>adress</li>
<li>0202020202</li>
</ul>
</div>
</body>
</html>
the code is here
Thanks a lot in advance for your help
Another solution is to show the pic as a background. Then you can positioning easily your icon.
ul li:nth-child(4)::before {
content: '';
background: transparent url(image.png) no-repeat right top;
background-size: contain;
position: absolute;
width: 25px;
height: 30px;
left: -30px;
top: 0;
}
Here in your code
Based on your desired prnscrn
You need to play around with the margin-left of the :before pseudo selector and put bottom on 0. With the below CSS it should result correctly:
Here's a working fiddle.
CSS
li:nth-child(4)::before {
content: url('https://image.prntscr.com/image/RsidxDk_QzytthM_zz4H8Q.png');
position: absolute;
margin-left: -2.7em;
bottom: 0;
zoom: 0.8;
}
Use zoom in this instance to reduce the size and use for margin-left the unit em so it will take the font-size of the element. (Be also aware that there are a lot of errors in your provided CSS).
Related
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
I've currently got this situation - two divs where the 1st is fixed on the left and the 2nd is fluid on the right. I need to switch the HTML position of the two divs, but leave the webpage appearance unchanged.
So,
<div id="fixed"></div>
<div id="fluid"></div>
needs to become:
<div id="fluid"></div>
<div id="fixed"></div>
But when the webpage is displayed, the fluid div needs to be on the right and the fixed on the left. I can't figure this out. Is there a way to do this?
There are various ways to do this. It's best to have both divs inside a container, even if set to width: 100%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
width: 300px;
height: 100px;
background: #111;
position: absolute;
top: 0; left: 0;
}
#fluid
{
height: 100px;
background: #555;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="container">
<div id="fluid"></div>
<div id="fixed"></div>
</div>
</body>
</html>
A modern option is to use flexbox, but it's not reliably supported yet.
Add float: right to #fixed-div.
I've been working on a responsive site and have come to a bit of a problem with Image Maps. It seems that Image Maps don't work with Percentage based co-ordinates.
After a bit of googling I found a JS workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.
However I want the site to work with JS disabled.
So after exhausting those possibilities I decided to look into using relatively positioned Anchor tags over the images to do the same thing. This is a better option anyway IMO.
I've tried to place the anchor tags over the image with percentage based position and size, but whenever I rescale the browser the anchor tags move disproportionately to the image.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.
Any help much appreciated.
You had a few problems with your CSS in the fiddle you posted (as well as a missing closing div tag). After making sure that #block was relatively positioned, not 100% height, and that your anchors were block/absolutely positioned, I was able to get the tags to move with the blocks.
Here is the updated fiddle:
http://jsfiddle.net/wAf3b/24/
CSS
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
</div><!--/content-->
</body>
</html>
One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.
Absolutely-positioned elements are no longer part of the layout, so they cannot inherit relative dimensional properties from their parent. You'll need JavaScript to do what you want.
People who disable JS expect a degraded experience already.
I need some tips about the best way to position one or more image at the bottom of the page or a container div. If possible css only.
The only way I can accomplish that is using jquery :(
Try position: fixed. That will position any block element (div, image) at a fixed location with respect to the page. The element will stay there when you scroll (except on tablet/mobile devices). For example:
div#bottom {
position: fixed;
bottom: 0;
/* And if you want the div to be full-width: */
left: 0;
right: 0;
}
you can use position: absolute for it. Demo: http://jsfiddle.net/R2V4U/
Position: 'absolute' is the answer, however you might want to set your body or a a div container for position: 'relative' to give a point of reference to the image.
I tried using this for footer at the bottom of a document and it worked only when I set my body for position: 'relative'. Having said that, it might not be the best practice to set body like this, so it is best to use a container with relative position for your whole page inside the body.
Had the same kind of problem and everything found on the web was either too complicated, or not not functionnal in some cases. The easiest way I found is like this :
<html>
<div style="width:100%;height:100%;">
<div style="width:100%;min-height:95%;">Content</div>
<div style="height:5%;position: relative;bottom:0px;">Footer</div>
</div>
</html>
Obviously you can extract the css in stylesheet and add "class" or "ID" to the divs.
#mydivid{
position : fixed;
bottom : 0;
}
would do the job.
I know this question is pretty old but I think my answer is the correct one if you don't want element to display over other elements when changing size of window.
So to accomplish this I created div container inside which I stored element I want to display at the bottom of the page, then I used flexbox to justify it.
https://jsfiddle.net/08xrab3w/9/
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
#bottom-of-page-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
}
#bottom-of-page {
border-top: 1px solid #e4e4e4;
width: 100%;
background-color: green;
height: 60px;
}
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
</div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<div id="bottom-of-page-container">
<div id="bottom-of-page"></div>
</div>
</body>
</html>
I have the following code:
<div id="sub-title-div">
Hello world
</div>
#sub-title-div {
background: #FFE640;
position: relative;
top: 0px;
left: 30px;
width: 901px;
height: 137px;
line-height: 13px;
}
I found that if I remove the 'Hello World', the #sub-title-div will shrink and become invisible. Is there an easy method that I can do this more elegantly?
Thank you
If you don't need to support IE6, you can use the min-height property.
#sub-title-div {
min-height: 137px;
}
put when you want to remove text, then div will maintain its height
Use
min-width:901px;
min-height:137px;
if you want to have the DIV have the same dimensions even without content.
It could be your doctype? It doesn't dissapear for me. See the sample page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#sub-title-div {
background: #FFE640;
position: relative;
top: 0px;
left: 30px;
width: 901px;
height: 137px;
line-height: 13px;
}
</style>
</head>
<body>
<div id="sub-title-div">
</div>
</body>
</html>
Use a pseudo-element. This is similar to #iTake's answer, adding an , but it keeps the extra space out of your layout and text selections.
<h1 class="no-shrink"></h1>
.no-shrink::after {
content: '\200B'; /* zero width space */
}