div.test{width:100px;height:100px;border:1px solid red;}
The css will create a box with 100px width and 100px height .
How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?
How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?
Use a pseudo element to draw the horizontal line absolutely positioned relative to the parent.
div.test {
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.test::after {
content: '';
border: 1px solid black;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
<div class="test"></div>
Position the <hr> accordingly.
div.test{width:100px;height:100px;border:1px solid red;}
hr {
position: relative;
z-index: -1;
margin-top: -50px;
width: 100px;
margin-left: 0px;
}
<div class="test"></div>
<hr>
What if you gave your hr a margin-top of 50%?
CSS
#line{
margin-top:50%;
}
HTML
<hr id="line" />
hr {
margin-top: -50px;
width: 100px;
margin-left: 0px;
}
Related
Hello is it possible to make a image have a slanted right side border.
.fh {
border-right: 180px solid transparent;
}
<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>
So what I basically want is this http://prntscr.com/glcq2l but with the image instead.
One possible solution is to have a div which you rotate and set overflow hidden. There is a wrap around it, just in case you want to use it it makes it easier to place the image.. fiddle to play around here (I left the borders just to help understand whats going on)
(The background image on the body is just there to show that the cut off corner is transparent and not a border or anything like that.)
body {
background-image: url(https://i.stack.imgur.com/xxGZk.jpg);
}
* { box-sizing: border-box; }
.wrap {
position: relative;
width: 400px;
height: 200px;
border: solid 2px black;
overflow:hidden;
}
.fh {
position: relative;
top: -5px;
left: -250px;
width: 600px;
height: 700px;
transform: rotate(45deg);
overflow: hidden;
border-top:solid 1px red;
border-bottom:solid 1px red;
border-left:solid 1px orange;
border-right:solid 1px lime;
}
.fh img {
position: absolute;
margin: -30px 0px 0 30px;
top: 0px;
left: 0px;
border:solid 2px green;
width: 400px;
height: 200px;
transform: rotate(-45deg);
}
<div class="wrap">
<div class="fh">
<img src="http://lorempixel.com/400/200/sports/1/" >
</div>
</div>
A lot of answers and possible solutions can also be found here: Cut Corners using CSS of course they need to be tweaked to your request.
I am trying to have a vertical line for a news feed and i am looking for a solution to make its height equal to the screen when scrollbar reach bottom of the screen dynamically as items in the news feed will be loaded dynamically on scroll.
I tried using 100vh and 100% but then height is fixed to the height of the viewport.
Here is the div :
<div class="verticalLineFeed">
</div>
CSS for the div :
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
margin-top: 65px;
}
Any idea for doing this in css3 or jquery will be helpful
Code Snippet :
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
Use a wrapper and set it to position: relative
.wrapper {
position: relative;
}
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="wrapper">
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
</div>
Or set position: relative to the body (haven't tested this on all browsers though)
body {
position: relative;
}
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
I have got a way to do this
$(document).ready(function() {
function setHeight() {
windowHeight = $('.main').innerHeight();
$('.verticalLineFeed').css('height', windowHeight);
};
setHeight();
$('.main').resize(function() {
setHeight();
});
});
Code Snippet :
$(document).ready(function() {
function setHeight() {
windowHeight = $('.main').innerHeight();
$('.verticalLineFeed').css('height', windowHeight);
};
setHeight();
$('.main').resize(function() {
setHeight();
});
});
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg
I recently tried out the div with different shape like triangle trapezoid etc.
HTML:
<div class="triangle">HI nice to meet you guys</div>
CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Previously, the content appears properly when the div is a square (height and width are 100px).
When I style the div to look like a triangle, then the content oveflows.
How can I make this one as proportional in order to appear properly inside the div.
See fiddle: http://jsfiddle.net/7qbGX/2/
Any suggestion would be great.
try this: LINK
.triangle{
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.triangle p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Your Height and width is 0. You won't fit any text into it. It will either overflow or you can set overflow to "hidden", but than you will not see anything cos the div have the size 0.
your div is invisible to see in your actual div try to give background-color to that div.
[see demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
background-color:red;
}
.triangle p {
text-align: center;
top: 40px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
This is for displayed text properly, you need to mentioned width property as follows:-
<div style="width: 10em; word-wrap: break-word;">
Some longer than expected text with antidisestablishmentarianism
</div>
for Horizontal scroll you can put overflow-x:hidden its up to you dear.