I'm having some troubles making order numbers for images (dynamically).
I have this right now:
The images have width 120px, and the orange circles are placed with margins in a separate div.
<div>
<img src="../IMG_PATH/{{$local[$i]['image']}}"
width="120" class="img_doctor">
</div>
<div class="order">
{{ intval($i+1) }}
</div>
This is my class order:
.order {
width: 27px;
height: 27px;
border-radius: 50%;
line-height: 26px;
text-align: center;
background: #FF8242;
color: white;
position: absolute;
margin: -159px 8px;
font-size: 12px;
font-weight: bold;
font-family: Roboto-Regular;
}
So, I just need to make the circle before the image and placed on the corner, something like this:
Make the image a <div> and put the number as a child:
document.getElementById("changeheight").onkeyup = function(e) {
document.getElementsByClassName('image')[0].style.height = this.value + 'px';
}
document.getElementById("changewidth").onkeyup = function(e) {
document.getElementsByClassName('image')[0].style.width = this.value + 'px';
}
.image {
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
width: 100px;
height: 40px;
border-radius: 5px;
}
.image > span {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: orange;
color: white;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
<div class="image">
<span>1</span>
</div>
<span>Set height to: </span>
<input id="changeheight"><br/>
<span>Set width to: </span>
<input id="changewidth">
ignore the JavaScript and the setheight/setwidth stuff. I'm guessing you will populate this by yourself, so this is just the css.
Try this:
<html>
<head>
<style type="text/css">
.order-wrapper {
position: relative;
}
.order {
width: 27px;
height: 27px;
border-radius: 50%;
line-height: 26px;
text-align: center;
background: #FF8242;
color: #fff;
top: 10px;
left: 10px;
position: absolute;
font-size: 12px;
font-weight: bold;
font-family: Roboto-Regular;
}
</style>
</head>
<body>
<div class="order-wrapper">
<div class="order">
{{ intval($i+1) }}
</div>
<img src="../IMG_PATH/{{$local[$i]['image']}}" width="120" class="img_doctor">
</div>
</body>
</html>
Related
There is link outside Image, want to make whole div area (image) clickable
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
Tricked some css, but not covering whole area clickable.
.desty_block {position: relative;}
.detail {
position: absolute;
top: 95px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Note: After this post, did some dig and here is css
working example
.desty_block h3 {margin: 0 0 0px 0;}
.desty_block h3 a {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 100;
padding-top: 7rem;
}
.desty_block{position: relative;}
Still doubt if it will work on all device ?
Any idea
Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
}
h1 {
font: inherit;
font-weight: bold;
}
#div6 {
z-index: 3;
position: absolute;
top: 30%;
left: 15%;
width: 150px;
border: 1px dashed #009;
background-color: #ddf;
text-align: center;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<a href="http://google.com">
<img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" alt="Avatar" style="width:100%">
<div id="div3">
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</a>
</div>
</div>
</body>
</html>
Wrap the entire div with an anchor tag. Try the following (assuming the desty_block div contains image + text):
<a href="#">
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
</a>
I would like my H2 title to appear like this image is showing
At this moment this is how my code looks like
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
.green-bg { background: #488429; }
.title-border { border-radius: .25rem!important; }
.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }
.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
I am quite confused on how to solve this problem. Any suggestions?
I have added position:relative for the green background div and for the button i have set it to position:absolute aligned it horizontally using left:50% and transform:translateX(-50%) and move it vertically i have given half of the height of the button as top:-35px which will align it vertically half
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
position:absolute;
left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
top:-35px;
}
.green-bg {
background: #488429;
margin:100px 0 0 0;
position:relative;
}
.title-border {
border-radius: .25rem!important;
}
.text-title-center {
text-align: center!important;
color: #fff;
font-size: 41px;
}
.text-title-text-h2 {
color: #fff;
padding-top: 4rem;
padding-bottom: 3rem;
font-size: 32px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="green-bg title-border">
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
Display the button as a block element, adjust margins as needed.
margin: 0 auto -35px auto;
display: block;
position: relative;
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
margin: 0 auto -35px auto;
display: block;
position: relative;
}
.green-bg { background: #488429; }
.title-border { border-radius: .25rem!important; }
.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }
.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
Here you go
.btn-circle.btn-xl {
position:relative;
top: 30px;
left: 270px;
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}
.green-bg { background: #488429; }
.title-border { border-radius: .25rem!important; }
.text-title-center { text-align: center!important; color: #fff; font-size: 41px; }
.text-title-text-h2 { color: #fff; padding-top: 4rem; padding-bottom: 3rem; font-size: 32px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-danger btn-circle btn-xl">YO!</button>
<section class="green-bg title-border">
<h2 class="text-title-center text-title-text-h2">H2 title in section</h2>
</section>
I've added
position:relative;
top: 30px;
left: 270px;
EDIT: this will put it at a fixed position, to get it at the center of the page you can add this:
position:relative;
top: 30px;
left: calc(100% - 50% - 35px); //35px = half the width of the circle.
I was doing some CSS, and my divs keep piling up underneath each other. I tried using position on them but it didn't work. My work is below. The picture I have in it will not be available to you as it is from my computer, but I hope you can get the idea of what my issue is(The sitelingo and Capture12 are the ones piling up):
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
padding-left: 470px;
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
padding-left: 232px;
padding-top: 24px;
}
#barone {
position: fixed;
float: left;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#bartwo {
postition: fixed;
float: right;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#login {
padding-left: 400px;
position: absolute;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="images/Capture12.png" /> </div>
</div>
</body>
</html>
A couple of issues:
You set a position:fixed to #barone. This will position the element relative to the actual screen.
You have elements positioned absolute, when the screen resizes, it will overlap with other elements
A padding left is set on your logo, this makes it out of viewpoint
Maybe you may want something as depicted below
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
/* padding-left: 470px;*/
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
/*padding-left: 232px;*/
padding-top: 24px;
}
#bar_container {
background-color: #0A4076;
}
#barone {
/* position: fixed;*/
height: 70px;
background-color: #0A4076;
display: inline-block;
}
#bartwo {
postition: fixed;
float: right;
height: 70px;
background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
/*padding-left: 400px;
position: absolute; */
vertical-align: middle;
top:0;
}
#login img{
width:100px;
height:100%;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="bar_container">
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>
</div>
</div>
</body>
</html>
I am trying to achieve similiar effect to this:
The header and its subheader are both vertically aligned to the image.
I've written following code:
http://jsfiddle.net/u4zxn4eb/
It works but is it the best way to achieve this?
<div class="wrapper">
<h1>
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
<div class="vertical_align">
Your company's name
<p>Description</p>
</div>
</h1>
</div>
CSS:
body {
background: lightgrey;
}
.wrapper {
background: grey;
width: 100%;
}
h1 {
font-size: 18px;
margin: 0;
position: relative;
top: 35px;
}
.vertical_align {
display: inline-block;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
p {
margin: 0;
}
EDIT
As #chrisbedoya suggested I shouldn't put div inside h1 tag.
Deleted.
Instead of using h1 tag to position the whole, it's better to apply these rules separately:
.vertical_align a,
.vertical_align p {
position: relative;
top: 40px;
}
Well, define "best". If your method is standards compliant and works in all browsers then use it. If you're interested, here's how I'd do it:
<style>
#header {
height: 100px;
margin: 0px;
padding: 0px;
width: 500px;
}
#rectangle {
background-color: #f0f0f0;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
z-index: 1;
}
#square {
background-color: #ff0000;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 20px;
top: 20px;
width: 80px;
z-index: 2;
}
#text {
/* background-color: #00ff00; */
margin: 0px;
padding: 0px;
position: absolute;
left: 120px;
top: 41px;
width: 360px;
z-index: 2;
}
h1 {
font-family: Arial;
font-size: 20px;
line-height: 20px;
margin: 0px;
padding: 0px;
}
p {
font-family: Arial;
font-size: 12px;
line-height: 12px;
margin: 5px 0px 0px 0px;
padding: 0px;
}
</style>
<div id="header">
<div id="rectangle"></div>
<div id="square"></div>
<div id="text">
<h1>Company Name</h1>
<p>Company Tagline</p>
</div>
</div>
Well, this question is way too subjective and better suited for CodeReview. But I thought I'd give you my input.
First, let's clean up the HTML. Get some HTML5 in there as well.
<div class="wrapper">
<header>
<a href="#" class="logo-link">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
</a>
<div class="vertical_align">
<h1>Your company's name</h1>
<h2>Description</h2>
</div>
</header>
</div>
Then make the CSS nice and tidy. We don't need much:
.logo-link {
display: inline-block;
position: relative;
top: 24px;
margin: 0 24px;
}
.logo-link img {
display: block;
}
.vertical_align {
display: inline-block;
vertical-align: top;
}
Here's an example.
I would use a position: relative property to align the image slightly below the header like you have in your image there.
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>​
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
​
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
​CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
​
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>