so i have a page that looks like this:
But i want the lines to be in the shape of a arrows like:
Is this posible???
My current css:
#show_length{
border-bottom: 2px solid black;
width: 99%;
}
#show_length2{
border-bottom: 2px solid black;
width: 20%;
}
And:
<div id="show_length">25m</div>
<div id="show_length2">2.5m</div>
You can do something almost like that using pseudo-elements
#show_length{
border-bottom: 2px solid black;
width: 300px;
}
#show_length:after{
content:">";
position:absolute;
font-weight:bold;
margin-left:265px;
margin-top:2px;
font-size:30px;
}
#show_length2{
border-bottom: 2px solid black;
width: 100px;
}
<div id="show_length">25m</div>
<div id="show_length2">2.5m</div>
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
I'm trying to center a div in the web browser when there is enough space. If not it should be collapsed between 2 divs.
This is the collapsed view
And this would be the expanded view
I've tried so many different things but nothing seems to work right. When I get something that looks right, the filterDiv ends up going over the top of titleDiv or buttonDiv or both.
Here's some code that I started with and should represent the collapsed view when the browser isn't very wide.
<style type="text/css">
.controlsDiv{
background-color:yellow;
border: 1px solid black;
}
.titleDiv{
background-color:Red;
width:25em;
height: 5em;
border: 1px solid black;
}
.filterDiv {
background-color: gainsboro;
width: 600px;
height: 10em;
border: 1px solid black;
}
.buttonDiv{
width:25em;
height:5em;
background-color:green;
border: 1px solid black;
}
</style>
<div class="controlsDiv" >
<div class="titleDiv">
<h2>titleDiv</h2>
</div>
<div class="filterDiv">
<h2>filterDiv</h2>
<h2>Centered in Browser Window</h2>
<h2>titleDiv and ButtonDiv Collapsed</h2>
</div>
<div style:clear:both></div>
<div class="buttonDiv">
<h2>buttonDiv</h2>
</div>
</div>
Thank you in advance!
You can always position absolute required div:
<style type="text/css">
.controlsDiv{
background-color:yellow;
border: 1px solid black;
}
.titleDiv{
background-color:Red;
width:25em;
height: 5em;
border: 1px solid black;
}
.filterDiv {
background-color: gainsboro;
width: 600px;
height: 10em;
border: 1px solid black;
}
#media(min-width: 900px) {
.filterDiv {
position: absolute;
left: calc(50% - 300px);
top: 0;
}
}
.buttonDiv{
width:25em;
height:5em;
background-color:green;
border: 1px solid black;
}
</style>
I have an image centered on the screen that I would like a border around, which when hovered over changes color. I am trying to do this as you can see in the code below, but the problem is that the image just keeps being a link but no border, what is wrong?
html code:
<div id="container">
<div id="content">
<div class="10Img">
<img src="10Pimg.png" alt="10img" style="width:900px; height:200px">
</div>
</div>
</div>
css code:
#content{
padding-bottom: 200px;
position: absolute;
float: left;
left: 50%;
margin-left: -450px;
top: 200px;
}
#container{
height:100%;
}
.10Img{
border: 2px solid grey;
}
.10Img a:hover{
outline: 2px solid black;
}
The main issue is you are starting your class name with a numerical character change 10Img and start it with an alphabetic character.
Ex. i change it from 10Img to aImg
Then you can use
.aImg img {
border: 2px solid grey;
}
or only
.aImg {
border: 2px solid grey;
}
Try this: Demo
a img {
border: 2px solid grey;
}
a img:hover {
border: 2px solid black;
}
See This Demo
.Img{border: 2px solid grey;}
.Img a:hover{
outline: 2px solid black;}
Note: Class Name can not start with integer.
Refer This for Rules regarding naming.
Your css class 10Img doesn't work, because css class names must not begin with a number, see:
Which characters are valid in CSS class names/selectors?
So if you call your class Img10 instead of 10Img it should work.
<div id="container">
<div id="content">
<div class="Img10">
<img src="http://dummyimage.com/900x200/000/fff" alt="10img" style="width:900px; height:200px" />
</div>
</div>
</div>
Also you may want to have the :hover border on the div instead on the a:
#content{
padding-bottom: 200px;
position: absolute;
float: left;
left: 50%;
margin-left: -450px;
top: 200px;
}
#container{
height:100%;
}
.Img10{
border: 2px solid grey;
}
.Img10:hover{
outline: 2px solid black;
}
Here is a working fiddle:
http://jsfiddle.net/k2Ld7yfe/
HTML
<div>
<div class="leftInRow5050 squareTopLeft">1</div>
<div class="rightInRow5050 squareTopRight">2</div>
<div style="clear: both;"></div>
</div>
<div>
<div class="leftInRow5050 squareBottomLeft">3</div>
<div class="rightInRow5050 squareBottomRight">4</div>
<div style="clear: both;"></div>
</div>
CSS
.rightInRow5050{
width:50%;
display: inline-block;
float:right;
}
.leftInRow5050{
width:50%;
display: inline-block;
float:left;
}
.leftInRow5050.squareTopLeft{
height: 35%;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.rightInRow5050.squareTopRight{
height: 35%;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.leftInRow5050.squareBottomLeft{
height: 35%;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
.rightInRow5050.squareBottomRight{
height: 35%;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
Why is the above code failing to create a 2X2 <div> matrix?
It is giving me the standard 1px problem, where the <div>'s fall under one another?
If the div's have a border and that's what's throwing it off, try this:
box-sizing:border-box;
You need to set a width and float for the right divs. See this Demo
.leftInRow5050 {
width:50%;
float:left;
}
.rightInRow5050 {
width:50%;
float:right; /* or left */
}
Edited to add: the code example changed while I was answering :p
I want to add two extra bottom borders in a div so that it looks as attached image:
Do I need to add two additional empty div's for that? I have very basic markup:
<div class="box">
main div
</div>
Here's the basic demo:
http://jsfiddle.net/3TWtF/
Yes, you'll need to add two <div/>s like so: http://jsfiddle.net/UUDd3/ This will provide the most compatible solution.
Add the following HTML:
<div class="box2">
</div>
<div class="box3">
</div>
And the following CSS:
.box2{
border-left: 1px solid brown;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
width: 480px;
height: 10px;
margin:0 10px;
}
.box3{
border-left: 1px solid brown;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
width: 460px;
height: 10px;
margin:0 20px;
}
You can do it without two extra divs but it will require dropping support for IE7 as you will need to use pseudo-elements.
jsFiddle
.box{
border: 1px solid brown;
width: 500px;
height: 100px;
position:relative;
}
.box:after {
display:block;
content:"";
position:absolute;
border:1px solid brown;
width:400px;
left:50px;
top:100px;
height:15px;
}
.box:before {
display:block;
content:"";
position:absolute;
border:1px solid brown;
width:300px;
left:100px;
top:116px;
height:15px;
}