I am having a problem getting the Circle text to the correct position. Specifically its vertical position. It is supposed to be centered both vertically and horizontally. And that must change.
I'm trying to get a button in the middle of the page. The two other divs will be filled in later.
body {
padding: 0;
margin: 0;
font-family: "Lato", sans-serif;
}
<div style="background-color: grey; position: static;height: 80px">
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
<div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center">
<span style=" background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >⚇</span>
</div>
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
</div>
It's likely an easy fix. Thank you for your time.
You can use the line-height property to make adjustments to vertical alignment in this situation. See snippet below.
body {
padding: 0;
margin: 0;
font-family: "Lato", sans-serif;
}
<div style="background-color: grey; position: static;height: 80px">
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
<div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center">
<span style="line-height:1.2; background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >⚇</span>
</div>
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
</div>
Related
I work with dynamicaly created boxes, and i have issues that text are not fiting inside box.
EX:
My code:
HTML:
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
CSS:
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
}
.desc-box {
color: #000;
}
So my idea was to not showing all text, just end, for example:
I try to use display: flex and justify-content: end; idea was, to add for title and sub title z-index: 1 and for image z-index: 2, and for box overflow: hidden;
But it's not working for me.
This could be done this way using white-space: nowrap; and direction: rtl;
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon>img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
direction: rtl;
white-space: nowrap;
}
.desc-box {
color: #000;
}
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
Remove Height from your in the .box element.
the height should be Auto:
<div class="box" id="box98" style="width: 110px; **height: auto;**">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
I have 4 div, which look something like this
Desired output:
Current code:
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
<div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
<div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
<div style="width: 100%;" class="center aligned">ABC</div>
</div>
Update: This is a part of a progress bar, so both red and yellow width will change
Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
<div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>
</div>
I have a problem with my footer. I tried to use this solution http://ryanfait.com/sticky-footer/. At first it worked fine, but now it doesn't.
I am trying to use this footer solution on my website.
When I use line with:
<div class="push"></div>
The link to the website is too long:
https://jsfiddle.net/yptaufab/
When I erase this div, problem occurs when I zoom in - footer goes to side at one moment: https://jsfiddle.net/w03ca8b3/
After zooming, it seems like the footer is aligned beside the div id="centerinfoleft" and I don't know why. I feel like I tried everything. I would be very grateful for any help.
The .push element needs to go in the .wrapper element.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}
.footer, .push {
height: 40px;
}
.line
{
display:block;
border-bottom:1px solid #1a1aff;
padding:2x;
text-align: center;
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
color: #1a1aff;
}
t5
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
display: block;
text-decoration-color:black;
}
t5:link, t5:visited
{
color: black;
text-decoration-color: black;
}
<div id="main" class="wrapper"
style=" margin-left:auto;
margin-right: auto;
width: 100%">
<div id="head"
style=" background-color: #1a1aff;
height: 100px;
width: 100%">
<div id="insidehead"
style=" margin-left: auto;
margin-right: auto;
height: 100px;
width: 1000px">
<div id="login"
style=" float:right;
background-color: #1a1aff;
height: 100px;
width: 200px">
</div id="login">
</div id="insidehead">
</div id="head">
<div id="centerinfo" style="
margin-left: auto;
margin-right: auto;
height: 300px;
width: 1100px">
<div id="centerinfoleft" style="
margin-left: auto;
margin-right: auto;
height: 300px;
width: 550px;
float:left;"><br>
<span class="line">What is going on?</span><br>
<t5>asdf<br>
asdf</t5><br>
<span class="line">Rules</span><br>
<t5>asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf</t5><br>
</div id="centerinfoleft">
</div id="centerinfo">
<div class="push"></div>
</div id="main" >
<div id="footer" class="footer"
style=" margin-left:auto;
margin-right: auto;
background: #1a1aff;
text-align:center;
width: 100%">
<t2 style="color:white; font-weight: normal;">
index <c style="color:inherit;text-decoration: none;position:relative;top:10px">l<c>
index l
index</t2>
</div id="footer">
Fiddle: https://jsfiddle.net/eze5x9t9/
HTML:
<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
<div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Name</span>
</div>
<div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
<span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Job</span>
</div>
</div>
Screenshot:
Why is there a green space at the end? The fiddle was done in Chrome.
It's a common BUG for the WebKit browsers, no fixing actually.
reference:
https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
https://css-tricks.com/percentage-bugs-in-webkit/
http://www.screenr.com/pvB8
Somehow in Chrome the outer div is exactly one pixel wider than the contained divs.
You could however solve that by not using display: table; and display: table-cell; (if you only did that to make the vertical centering work) like so:
<div style="width: 100%; height: 65px; background: #00CC00;">
<div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 35px; line-height: 65px;">My Name</span>
</div>
<div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
<span style="font-size: 20px; line-height: 65px;">My Job</span>
</div>
</div>
Edit: A second code snippet showcasing the standard method for vertical centering using absolute positioning and transform: translate:
.outer {
height: 65px;
background-color: #00cc00;
display: flex;
}
.inner {
width: 60%;
float: left;
background: #3074A3;
color: #EDEDED;
height: 65px;
text-align: center;
font-size: 35px;
position: relative;
}
.inner + .inner {
width: 40%;
background: #266996;
font-size: 20px;
}
.inner > span {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<span>My Name</span>
</div>
<div class="inner">
<span>My Job<br />Good job!</span>
</div>
</div>
Trying to do simple header for website, [image][text][splitted horizontal section]:
<div style="width: 930px;">
<div style="width: 280px; height: 80px; display: inline; background-color: red;">image</a></div>
<div style="width: 400px; height: 80px; display: inline; background-color: blue;">text</div>
<div style="width: 250px; height: 80px; display: inline; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>
What I see in VS2010 and IE8:
What I see in Chrome and FireFox:
Why? And how to fix it? I need the first variant of course.
Add float: left to your inline elements.
http://jsfiddle.net/tmKaU/1/
I think this is what you are looking for:
<div style="width: 930px;">
<div style="display: block; float:left; width: 280px; height: 80px; background-color: red;">image</a></div>
<div style="display: block; float:left; width: 400px; height: 80px; display: block; background-color: blue;">text</div>
<div style="display: block; float:right; width: 250px; height: 80px; display: block; background-color: green;">
<div style="text-align: right; height: 40px; background-color: gray;">some bar</div>
<div style="text-align: right; height: 30px; background-color: yellow;">some buttons </div>
</div>
</div>