So I think the solution I need is to extend the wrapper div to the right of the page without wrapping. If I set the width to width: 100vw or width: 100%, all of the content within the div move below all the other content.
looks kinda weird but here's the fiddle: https://jsfiddle.net/8u3Lzjxw/
what happens if you set width to 100% or 100vh
wrapper should extend to cover all highlighted in green. The height is not a problem as it's not being interfered with.
Relevant HTML:
<div class="active-sockets">
<h1 class="active">Active Sockets</h1>
<div class="wrapper">
<div class="socket">
<h2 class="socket-name">Lorem Ispum</h2>
</div>
</div>
</div>
CSS:
.wrapper {
display: inline-flex;
flex-wrap: nowrap;
float: left;
margin: 0;
width: 100%;
}
.socket {
background-color: rgb(24, 24, 24);
margin: .2em;
padding: .8em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
width: 100%;
margin: 0;
margin-top: 1em;
}
.active-sockets {
float: left;
margin: 1em;
height: 100vh;
}
.active {
background-color: rgb(24, 24, 24);
color: white;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: .5em;
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
width: 100%;
}
there are several ways to structure a page like this. To keep inline with what you have, there are a couple CSS properties that need to change in your fiddle.
Since the side-bar has a width of 2em, then the margin of the active sockets needs to be at least 3em. And also, if you want it to snap to the top, then remove the top margin. This is what the style will look like:
.active-sockets {
float: left;
margin: 0 1em 1em 3em;
height: 100vh;
width: 100%;
}
you also want to take away the padding of the side bar:
.side-bar {
background-color: rgb(24, 24, 24);
padding: 0;
width: 2em;
height: 100%;
position: relative;
float: left;
}
Related
I need to make the sticky header in css.
But I got a problem. When I scroll through the google chrome browser page the content in the sticky section jerks. This is annoying. Moves literally 1 pixel but catches the eye.
I have the same task as in this example which I found on stack overflow. You may not notice this bug right away.
But this is clearly visible if you zoom in on the element or look at a monitor with a low expansion. The elements are literally jumping around. I want the elements not to move when the page is scrolled.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
position:relative;
}
#import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
letter-spacing: 3px;
margin: 0;
padding-left: 10px;
padding-top: 10px;
color: #fff;
font-weight: 100;
}
.header {
width: 100%;
height: 50px;
position: sticky;
top: 0px;
}
.header:nth-of-type(1){
background-color: dodgerblue;
}
.header:nth-of-type(2){
background-color: rebeccapurple;
}
.header:nth-of-type(3){
background-color: chartreuse;
}
.content {
width: 100vw;
height: 100vh;
background: linear-gradient(70deg, orange, crimson);
padding-top: 50px;
}
.header-2{
top: 50px;
}
.header-3{
top: 100px;
}
<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-2"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-3"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>
I would like to have text inside the element to be aligned such that it begins from the bottom of the page. I want it so that as I increase or decrease the width of the div, the text fills up the bottom first before the top.
I want to look like the following design from adobe illustrator:
Instead, it looks like the following:
the code used in the second image is below:
<style media="screen">
*{
font-family: 'Heebo', sans-serif;
}
.big-intro-text{
font-size: 100px;
width: 100%;
position: absolute;
}
.big-intro-text div{
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
</style>
<div class="big-intro-text" align = "center">
<div>home of the zebras</div>
</div>
* {
font-family: 'Heebo', sans-serif;
}
.big-intro-text {
font-size: 100px;
width: 100%;
position: absolute;
}
span {
display: block;
}
.big-intro-text div {
border: solid 1px green;
text-align: left;
color: gray;
max-width: 800px;
height: auto;
display: inline-block;
vertical-align: text-bottom;
}
<div class="big-intro-text" align="center">
<div><span>home<span> of the zebras</div>
</div>
Try this code.
You could add a large amount of margin on the top, and reduce the div height.
Sorry about the old answer, I did not understand the question.
I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.
The issue is with the h5 text not appearing within the div (id=text). if anyone could advise please! Thank you for reading this and taking your time to help!
<div id="footer">
<div id="instagram">
<div id="text">
<h5>Please follow our instagram for future updates !</h5>
</div>
<div id="insta-logo">
<div>
<a class="whitelink" href="https://www.instagram.com/craftyclams/" id="insta"></a>
</div>
</div>
</div>
</div>
CSS code for footer:
Where the div is positioned:
From what I see, your text is inside the div. I set up a jsfiddle for you: https://jsfiddle.net/vfakqg90/
Next time, please provide your CSS, not as a screenshot. I typed your CSS out fully.
If you can, provide your full HTML and CSS so I can take a further look. For now, I don't see a problem according to the jsfiddle I put together for you. The CSS you provided as a screenshot is below for others:
div#footer {
width: 100%;
height: 7%;
background: url("footerbg.jpg");
background-size: 100% 100%;
min-width: 1380px;
background-repeat: no-repeat;
}
div#instagram {
width: 80%;
height: 100%;
margin: 0 auto;
display: table;
table-layout: fixed;
}
div#instagram div#text {
width: 70%;
height: 100%;
padding-top: 15px;
display: table-cell;
}
div#instagram div#text h5 {
font-family: BRUX, serif;
color: #fff;
text-align: center;
font-size: 1.7em;
}
h5 a {
font-family: BRUX, serif;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 3px;
}
div#instagram div#insta-logo div {
width: 100%;
height: 100%;
padding-top: 30px;
}
#insta {
background: url("logo/insta_icon.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: block;
height: 90%;
text-indent: 100%;
white-space: nowrap;
width: 70%;
max-width: 250px;
max-height: 250px;
}
I have a parent container(like a pop-up), in which I have a child element appended to parent container. The child element is a div which has some text. I want to center the text inside the div, so that the text remains center aligned in the child div, but the text should align itself vertically as it grows beyond 3-4 lines. I am able to align text vertically as it grows, but when it still is a small text it should be center vertically, which is not happening. I have tried lot of css properties in the child class.
Any help will be good.
.parentclass {
position: absolute;
top: 110px;
left: 165px;
width: 470px;
height: 260px;
text-align: center;
background-image: url(../images/Notification_BG.png); }
.childclass {
position: relative;
position: inherit;
width: 430px;
height: 192px;
left: 50%;
top: 50%;
margin-left: -215px;
margin-top: -96px; /* Negative half of height. */
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: white; }
Thanks
KK
have u used vertical-align:middle; ?
try this :
.childclass {
display: table-cell;
vertical-align: middle;
text-align: center;
}
This link will definitely help you:
vertically-center-text-in-a-100-height-div
Use your parentclass display as table and the childclass display as a table-cell and vertical-align:middle will work surely
html
<div class='parentclass'>
<div class='childclass'>Text which is more than two or three lines</div>
</div>
Css
.parentclass {
height: 260px;
text-align: center;
display:table;
}
.childclass {
vertical-align: middle;
width: 430px;
top: 50%;
text-align: center;
text-overflow: -o-ellipsis-lastline;
border: 1px solid blue;
font-family: Arial;
font-size: 28px;
color: black;
}
See this fiddle for demo