Why I can't adjust line to be width 100% - javascript

I wan't to set line full width, from text on left side.
If text have one word with 5 letters to be like this:
and if text have 3 words to be like this:
Can someone help me, here is what I tried to solve my problem, but it's not semantic useful
https://jsfiddle.net/xoty99bc/
<h3>
Lorem
</h3><div class"line">
</div>
h3{
display:inline-block;
width:20%;
}
div{
display:inline-block;
height:2px;
width:80%;
background-color:red;
}

You can use Flexbox and :after pseudo element. Or if you dont want to use :after you can do it like this Demo
h3 {
display: flex;
align-items: center;
}
h3:after {
content: '';
flex: 1;
height: 1px;
background: red;
margin-left: 10px;
}
<h3>Lorem ipsum </h3>

Take this as an idea:
https://jsfiddle.net/86hy152p/
h3{
display:inline-block;
background-color:
}
.line {
display:inline-block;
height:2px;
width:80%;
background-color:red;
}
You can adjust the height / position of the red bar later with margin and padding.

Related

hover element below other element possibly hovered

I have a problem with my css.
i have some element generated by javascript and when i hover them i display another element but i don't know why, the new element displayed is below the others generated element...
this is my css about this problem:
.hiddenTextjob
{
display:none;
background-color:#000;
color:#FFF;
width:170px;
z-index:2!important;
height:55px;
}
.ghost_for:hover > .hiddenTextjob
{
display: block;
background-color:#000;
color:#FFF;
width:170px;
margin-top:-55px;
z-index:1!important;
}
.ghost_for
{
border: 0;
position:absolute;
background-color:blue;
z-index:1!important;
}
.hiddenTextjob is below ghost_for but he must be above...
Thanks by advance
[EDIT] here a jsfiddle to illustrate:
https://jsfiddle.net/95jtx2oL/
when you hover a blue element sometine the black hover is above sometime he is below that make me mad...
.ghost_for:hover {
z-index: 2!important;
}
The above code is enough to fix the issue ^^ jdfiddle
The issue was because of the stacking of HTML. The lower elements will be higher if they are on the same index. So if you can raise the z-index of the hovered element, it's child element will be higher as well.
It looks a bit strange that you set z-index to 1 here.
.ghost_for:hover > .hiddenTextjob
{
display: block;
background-color:#000;
color:#FFF;
width:170px;
margin-top:-55px;
z-index:1!important;
}
The initial value of 2 seems correct. Try to remove z-index from the above code or set it to 2.
I am unsure of your HTML but try this if it works for you:
.hiddenTextjob {
display: none;
background-color: #000;
color: #fff;
width: 170px;
z-index: 2 !important;
height: 55px;
}
.ghost_for:hover > .hiddenTextjob {
display: block;
background-color: #000;
color: #fff;
width: 170px;
margin-top: -55px;
}
.ghost_for {
border: 0;
position: absolute;
background-color: blue;
z-index: -1;
}

Position the siblings when using scaling with transform property

I am implementing the CSS transform property over a division and have a use case of moving the siblings which are located next to it as per the scaling.
I tried adjusting the positions but did not work and thought this is how the transform functions. I might be wrong so want to give a one more try here.
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
transform: scale(5);
transform-origin:top left;
z-index:0;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
z-index:1 /*Not sure why I had to do this too*/
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>
Please take a look at this playground where the child element is just staying there but I need it to move towards the right
https://codepen.io/frank-underwood/pen/jOOmLJO?editors=1100
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
transform: scale(5);
transform-origin:top left;
z-index:0;
}
.childA:hover + .childB {
transform: translateX(calc(22rem * 4));
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
z-index:1
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>
I'm not sure how much you're wanting to move it, or where.. Here is code to make it move on the hover of your scaling element. I'm using the adjacent CSS combinator to make this happen. When you're hovering ChildA, the adjacent ChildB can be given a set of properties.
As for why you had to put a z-index on .childB was because transforms create a new stacking context. Even though .childA comes before .childB in your HTML, the transform essentially brings .childA to a new layer. Therefore, you have to set .childB's z-index.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Here's some reading about stacking context. It's really important to understand how these work and what creates new ones.
edit You can calc the translate based off the element your hovering and it will consistently move. I added 2rem to the width because you have 1rem of padding on either side. 22rem * 4 instead of 5 because scale(1) = 22rem.
If you are able to adjust your html structure you can easily do this:
.parent{
display:flex;
}
.leftDiv{
background:yellow
}
.childA{
padding: 1rem;
background: lightblue;
position:relative;
}
.childA:hover {
transform: scale(2);
transform-origin:top left;
z-index:0;
}
.childA:hover .childB {
transform: scale(0.5);
transform-origin:top left;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
position:absolute;
left:100%;
top:0;
bottom:0;
white-space:nowrap;
}
<div class='parent'>
<div class='leftDiv'>I will just stay here</div>
<div class='childA'>Child A scales
<div class='childB'>I want to move when scaled</div>
</div>
</div>
Transform affect like absolute position, so you increase width and with calc method you can set how times it increas;
.parent{
display:flex;
}
.childA{
padding: 1rem;
width: 20rem;
background: lightblue;
}
.childA:hover {
width: calc(20rem * 5);/*here you can change 5*/
transform-origin:top left;
}
.childB {
border: solid 1px;
color:white;
padding: 1rem;
background: red;
}
<div class='parent'>
<div class='childA'>Child A scales</div>
<div class='childB'>I want to move when scaled</div>
</div>

Text moves down when using mouseover to show a span

Hey i have created a HTML file which is showing a span onmouseover with java script but the text which is under it is going down. I don't know how can i solve this problem.Please Help me Here is My Code with HTML,CSS and some javascript
<html><body><style>.Category{
background-color: rgb(77, 178, 236);
padding: 8px 12px;
width:10px;
height:500px;
margin:4px;
font-family: 'Roboto Condensed',sans-serif;
color: white !important;
z-index: 1;
}
.fblike
{
display: none;
position:relative;
top:-25px;
right:-600px;
width:20px;
}</style>
<div id="content"><div id="content1" onmouseover="document.getElementById('fblike').style.display = 'block';" onmouseout="document.getElementById('fblike').style.display = '';"><span class="Category">How TO</span> <span id="fblike" class="fblike">Utkarsh</span><br><br><div class="image">Utkarsh</div></div><hr>
</body></html>
If you position:absolute; your .fblike it won't disrupt flow of the other elements. Because it's position:relative; it will.
See the fiddle here: http://jsfiddle.net/A6afY/
.Category{
background-color: rgb(77, 178, 236);
padding: 8px 12px;
width:10px;
height:500px;
margin:4px;
font-family: 'Roboto Condensed',sans-serif;
color: white !important;
z-index: 1;
}
.fblike
{
display: none;
position:absolute;
/* commented so easier to show the fix
top:-25px;
right:-600px; */
width:20px;
}
#content1 {
/* absolute positioned elements must have positioned parents */
position: relative;
}
You need to position the .fblike class as absolute and then modify the top and right properties in the css to suit.
I have shown this here: http://jsfiddle.net/drfjy/
Use id #fblike instead class .fblike ,and change position absolute and set the top and left edge.
Try this code:
DEMO
#fblike
{
display: none;
position: absolute;
width: 20px;
top: 5px;
left: 100px;
}
You are trying style.display which won't consume space when the value is set to none.
If it is set to block the space will be consumed and it will be displayed.
You can try style.visibility for achieving what you need.

Center an element

How can I center a div that is holding other elements. As default it seems that the div has the width of its parent tag, in this case body. What I want to do is center the div, do I need to set the width of it myself pixel by pixel? or is there an easier way of doing this.
Image of what Im talking about
In the picture you can see Ive set the width of div #container to 250px to center it with margin: 0 auto; but now its bigger than table which means the children of #container isn't in the exact center.
DEMO 1
<div id="container">
</div>
#container{
display:table;
margin:0 auto;
}
DEMO 2
<div id="container">
<span id="form">
</span>
</div>
#container{
text-align:center;
}
#form{
display:inline-block;
text-align:left;
}
How bout setting top and left 50%, fixing the position and margins=size of your div?
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -your size;
margin-left: -your size;
}
You could try percentages rather than px
<style>
#container{
width:30%;
/* width:250px; will still be ok */
}
#container table{
width:100%;
/* This will make the table stretch or squash to fill the container */
/* You could also try */
margin: 0 auto;
/* This will center the table inside the div*/
}
<style>
Set the parent div to text-align: center; and the div containing the content to display: inline-block;
In your case:
body {
text-align: center;
}
#container {
display: inline-block;
}

Centring the whole web page (on a really wide site)?

I have a web page that is wide (3078px) and pretty long too (1540px).
The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself).
When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.
I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.
Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on.
Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)
HERE IS THE CSS:
body {
margin:0px;
padding:0px;
text-align: center;
background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:1024px;
height:768px;
background:transparent;
border:1px red solid;
}
#above {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#below {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#mainbox {
margin: 0 auto;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:1540px;
background:transparent;
}
AND THE HTML:
<div id="mainbox">
<div id="above">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div id="below">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</div>
There is a JS fiddle too: http://jsfiddle.net/KyMet/
A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?
You need to use some query to pull this of.
EDIT
DEMO
$(function(){
//total width of your wrapper
var totalWidth = $('#mainbox').outerWidth(true);
//width of the user browser
var width = window.innerWidth;
//calculate the middle
var middle = (totalWidth - width) / 2
window.scrollTo( middle, 0 );
});
YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this
body {
margin: 0 auto;
padding: 0;
text-align: center;
background: #222;
overflow: scroll;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin: 0;
padding: 0;
float: left;
display: block;
width: 1024px;
height: 768px;
border: 1px red solid;
}
#box2 {
background-color: aqua; /* only for demo */
}
#above {
margin: 0px;
padding: 0px;
display: block;
}
#below {
margin: 0px;
padding: 0px;
display: block;
}
#mainbox {
padding: 0;
width: 3078px;
height: 770px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom:1;
}
You would have to use jQuery scrollto library
http://demos.flesler.com/jquery/scrollTo/

Categories