I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
Related
I am trying make it as a name of table besides table name red color dashes is there i want to append this dashes dynamically based on screen size . on both sides of my text . sorry for my bad English. give me a Suggestion how to make it ?
.container{
width:100%;
height:30px;
background:blue;
text-align:center;
}
.container span{
color:#fff;
}
.container .dashes{
display:inline-block;
width:5px;
height:5px;
background:red;
vertical-align:middle;
}
<div class="container">
<div class="dashes"></div>
<span>Name</span>
<div class="dashes"></div>
</div>
Just set the .dashes width as per your screen size using media-query.
.container{
width:100%;
height:30px;
background:blue;
text-align:center;
padding-top: 10px;
}
.container span{
color:#fff;
}
.container .dashes{
display:inline-block;
width:200px;
height:0;
background:red;
vertical-align:middle;
border: 2px dashed blue;
}
<div class="container">
<div class="dashes"></div>
<span>Name</span>
<div class="dashes"></div>
</div>
I have a problem connecting 2 divs with dotted line, and I was trying to do this with ::after and ::before but without success. You can check my structure at:
JS fiddle code
and image of what I want to achieve:
Is this possible? If yes, then what should I add or change in my code?
Thanks.
Best regards,
Using :before/:after and border-radius you can achieve this (strictly with css). I included an example below.
https://jsfiddle.net/m3zoz34f/8/
.box-top-right{
position: relative;
}
.box-top-right:after{
content: ' ';
border-bottom-right-radius: 175px;
width: 106%;
position: absolute;
border-bottom: 2px solid red;
right: 0;
bottom: -175px;
height: 185px;
border-bottom-style: dashed
}
.box-bottom:before{
content: ' ';
width: 66%;
border-top: 2px solid red;
height: 135px;
position: absolute;
top: -125px;
border-top-left-radius: 150px;
border-top-style: dashed;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
Please check below:
P.S.: No Js, Just Css
.container{
position:relative;
}
.line{
position:absolute;
left:65px;
top:250px;
right:0;
width:420px;
border-bottom: 1px solid #000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(-45deg);z-index:1;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="container">
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="line">
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
</div>
please fiddle I work on for you ... its little advance JS
but you can reuse it every where .
https://jsfiddle.net/m3zoz34f/6/
if you want to add new lines over here in html add
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0">
<path id="myNewPath" d="M0 0" stroke-width="0.3em" style="stroke:#555; fill:none; " />
##### over here add new <path like the one up and put special name ID
</svg>
</div>
then in the JS
function connectAll() {
// connect all the paths you want!
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
}
see this
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
#myNewPath : path name you put in html
#fromLine : ID or class of the first block
#toLine : ID or class of second block ....
and you can link as much blocks as you want
its responsive BTW .
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}
I have made a jQuery script in which you can hide or show one of divs (first one) on click of button hide
The code looks like this in script:
$('.hideButton').click( function() {
var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
$('.first').animate({ width: toggleWidth},200);
if ( $('.first').width() == 10 ){
$(".content").attr("hidden",false);
}
else if ( $('.first').width() == 100 ){
$(".content").attr("hidden",true);
}
});
HTML:
<div class="contain">
<div class="row">
<div class="navigation">
navigation
</div>
<div class="advert">
advert
</div>
</div>
<div class="row">
<div class="main">
main
<br/>
<button class="hideButton">hide</button>
<br/>
<div class="first">
1
</div>
<div class="second">
2
</div>
<div class="third">
3
</div>
</div>
</div>
</div>
CSS:
.row{
margin-left:0px;
}
.navigation{
height:100px;
background-color:orange;
width:400px;
display:inline-block;
}
.advert{
height:100px;
background-color:lime;
width:200px;
display:inline-block;
}
.main{
width:600px;
height: 300px;
background-color: magenta;
}
.first{
width:100px;
height:80%;
background-color: yellow;
display:inline-block;
}
.second{
width:100px;
height:80%;
background-color: blue;
display:inline-block;
}
.third{
width:100px;
height:80%;
background-color: red;
display:inline-block;
}
And best way is that you see it in jsfiddle: http://jsfiddle.net/dzorz/EhjeA/
Now I have a issue with other two divs. When I click the hide button and first div gets animated, other two divs on animation, both skip to the end of first div and when the animation is done they get back in place.. It is really annoying and I don't know how to solve it...
I just need that one div that gets hidden on click of button and that he does not affect anything else...
Is this example fixable or maybe you could suggest me some nice jQuery plugin that does the same?
Instead of displaying these 3 as inline-block, remove the display and float them left instead using float: left in your CSS.
JSFiddle Demo
.first{
width:100px;
height:80%;
background-color: yellow;
float: left;
}
.second{
width:100px;
height:80%;
background-color: blue;
float: left;
}
.third{
width:100px;
height:80%;
background-color: red;
float: left;
}
You can wrap the offending divs in a wrapper with a fixed width: http://jsfiddle.net/EhjeA/1/
.wrapper {
display: inline-block;
width: 100px;
}
<div class="wrapper">
<div class="first">
1
</div>
</div>
Try adding this to your CSS:
.first,.second,.third {
vertical-align: top;
}
During the animation, the overflow is set to overflow: hidden which causes the other inline elements to shift down. Adding the vertical-align: top should fix the issue.
Updated fiddle: http://jsfiddle.net/EhjeA/3/
The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page.
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
min-height:100%;
position: relative;
}
.formContainer{
width:30%;
height: 100px;
background-color:#fff;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
position:absolute;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
<footer class="footer">
</footer>
</div>
</body>
You should move footer tag out of the div
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">
</footer>
DEMO
Add height:100% to html and body, then only your container takes height 100% and leave your html code as it is.
html, body{
height:100%
}
DEMO 2
P S - I think .body in your CSS is a mistake, it should be only body
What you need is Sticky Footer, there are couple of ways to implement it.
http://css-tricks.com/snippets/css/sticky-footer/ (using CSS)
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/ (using jQuery)
try this
http://jsfiddle.net/WPYCJ/
.footer{
position:fixed;
width:100%;
bottom:0;
height:60px;
background-color:#333;
}
Try this. Thanks
CSS
.body{
background: #00b7ea; /* Old browsers */
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
height: 100%;
}
.container{
height:90%;
background-color:#fff;
}
.formContainer{
width:100%;
height: 100px;
margin:auto;
padding-top: 0;
border-radius:5px;
box-shadow:5px 5px 55px #9999;
padding-bottom:60px;
}
.footer{
width:100%;
bottom:0;
height:5%;
background-color:#333;
}
HTML
<body class="body">
<header class="header">
</header>
<div class="container">
<div class="formContainer">
</div>
</div>
<footer class="footer">test
</footer>
</body>
I Had the same problem, I used this code :
<script>
var top = $(document).height() - $("footer.main-footer").height() ;
$("footer.main-footer").css('top' , top);
</script>
Change .main-footer to your footer's class.