Edit: This question is about aligning to a baseline. Meaning the base of the characters (the bottom of character 'h'). When including 2 different font sizes of the text 'jh', being able to align them at baseline with div. I could not find any solution for aligning to a baseline grid on the internet. They all stink. Without a Javascript framework or css preprocessor. This makes no sense if the proportion of the font below the baseline is known.
For the code linked below: Change .text2 font-size to 22px, and observe the two text groups are no longer aligned at the baseline (the bottom of the 'h'). Change it back to 32 px and they are aligned. Given the .bottomalign class has em units, both fonts are in arial, and em refers to font size, the descenders of the 'j' would be an equal proportion in both text groups, so any ideas why it dosnt align big genius if you no the answer. will be giving bounty if no one knows this.
http://jsfiddle.net/FX5zq/
css:
.bottomalign
{
position: absolute;
float: left;
bottom: -.24em;
}
.container
{
position: relative;
height: 50px;
overflow: visible;
}
div
{
font-family: arial;
}
.text1
{
font-size: 16px;
}
.text2
{
font-size: 32px;
margin-left: 2px;
color: green;
}
html:
<div class="container">
<div class="bottomalign text1">jh</div>
<div class="bottomalign text2">jh</div>
</div>
My suggestion would be to set the divs to display: inline-block; vertical-align: baseline;. That way, they'll align as you need no matter what size. http://codepen.io/pageaffairs/pen/ucyIt
Edit: second option, mentioned in the note:
http://codepen.io/pageaffairs/pen/jBcxk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: arial;
}
.container div {
display: inline-block;
vertical-align: baseline;
}
.text1 {
font-size: 16px;
}
.text2 {
font-size: 32px;
color: green;
margin-left: 2px;
}
</style>
</head>
<body>
<div class="container">
<div class="text1">jh</div>
<div class="text2">jh</div>
</div>
</body>
</html>
the reason is default line-height varies among different browsers: mozilla is about 1.2, so for the code above to work, it needed a line height reset:
.bottomalign
{
position: absolute;
bottom: -.17em; //arial descends 17% below baseline
line-height: 1;
}
read http://meyerweb.com/eric/css/inline-format.html
Here is a javascript code which will adjust the two divs dynamically. Ignore if you are looking for an answer based on css only:
you will have to remove "bottom: -.24em;" from bottomalign class and use the following script tag
document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px';
Code below:
<html>
<head>
<style>
.bottomalign
{
position: absolute;
float: left;
}
.container
{
position: relative;
height: 50px;
overflow: visible;
}
div
{
font-family: arial;
}
.text1
{
font-size: 16px;
}
.text2
{
font-size: 32px;
margin-left: 2px;
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="bottomalign text1">jh</div>
<div class="bottomalign text2">jh</div>
<script language="javascript"> document.getElementsByClassName("bottomalign text1")[0].style.top = document.getElementsByClassName("bottomalign text2")
[0].clientHeight - document.getElementsByClassName("bottomalign text1")[0].clientHeight - 1 + 'px'; </script>
</div>
</body>
</html>
I've worked out a little something and am very interested to know if this is what you are looking for.
TL:DR;
Here is the fiddle
What I did was make use of display: table-cell;. Using your HTML, I used the following CSS:
.bottomalign {
display: table-cell;
}
.container {
position: relative;
height: 50px;
overflow: visible;
display: table;
}
div {
font-family: arial;
}
.text1 {
font-size: 16px;
}
.text2 {
font-size: 32px;
color: green;
}
I gave the container a display: table; and the bottomalign display: table-cell;
Let me know if this is what you are looking for.
You can do this now, with display: flex and align-self: flex-end:
.container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
height: 24em;
}
.bottom-align {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
-webkit-align-self: flex-end;
-ms-align-self: flex-end;
-o-align-self: flex-end;
align-self: flex-end;
}
.text-1 {
font-size: 1em;
}
.text-2 {
font-size: 2em;
}
I have updated your solution.
Please note that the flexbox specification is still changing, and you will have to use prefixes for now, unless you use a tool like autoprefixer.
Related
How can I position an image on top text. Like in the image given
Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.
.row {
display: flex;
flex-direction: column;
border: solid 1px black;
width: 200px;
height: 80px;
padding: 20px;
background-color: #1e3f5a;
}
p {
margin: 0; /* removes default p margin */
text-align: center;
font-size: 30px;
color: white;
}
img {
align-self: flex-end;
margin-right: 1.5rem; /* optional */
}
<div class="row">
<img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
<p>Dex Activity</p>
</div>
You can also use the position css property for this, you can wrap these two tags with a div and use the css flex methods.
CSS Flex Example:
<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
There is more than one technique.
Here's one, borrowed from w3schools:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
I want to make a website that has a space at the top for a searchbar and then 4 divs in a layout like in
this image
I'm using d3 so the idea would be to represent the data in different ways, but I want the divs to adjust to the window, so something like this:
<div id ="main-bar">
</div>
<div id="view">
<div id="topLeft" class="linked-container" >
</div>
<div id="topRight" class="linked-container">
</div>
<div id="botLeft" class="linked-container">
</div>
<div id="botRight" class="linked-container">
</div>
</div>
But I don't know how to make them adjust to the window size.
I'm not pretty good at web developing so I wanted to know how could I do this in a simple way. Any suggestions?
Thanks in advance.
Edit: People are telling me I should not ask for tutorials, which is true. Anyway thanks for your answers, this is what I ended up doing:
#main-bar{top: 0; left:0; width:100%; min-height: 40px; height:10%; position: fixed; background-color: pink; }
#topLeft{top:10%; left:0; background-color: blue;}
#topRight{top:10%; left: 50%; background-color: red;}
#botLeft{top:55%; left:0; background-color: green ;}
#botRight{top:55%; left:50%; background-color: orange;}
I will look into media queries so I can better adjust the searchbar cause the min-height property is not doing what I want.
the best way to align the divs in css is with flexbox.
Check the flexbox guide here.
This should solve your problem: Working JSfiddle
<div class="wrapper">
<div class="search">Searchbar</div>
<div class="row1">
<div class="aside-1">Data #1</div>
<div class="aside-2">Data #2</div>
</div>
<div class="row2">
<div class="aside-3">Data #3</div>
<div class="aside-4">Data #4</div>
</div>
</div>
.wrapper, .row1, .row2 {
display: flex;
flex-flow: row wrap;
}
.search, .row1, .row2, .aside-1, .aside-2, .aside-3, .aside-4 {
flex: 1 100%;
}
.search {
background: tomato;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
.aside-3 {
background: deepskyblue;
}
.aside-4 {
background: green;
}
#media all and (min-width: 600px) {
.aside-1, .aside-2 { flex: 1 auto; }
.aside-3, .aside-4 { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.aside-1 { order: 1; }
.aside-2 { order: 2; }
.aside-3 { order: 3; }
.aside-4 { order: 4; }
}
body {
padding: 2em;
}
You can use the flex property if you want to adjust the size of your divs. Include the below given css in your stylesheet and you are good to go .
#view{
display:flex;
flex-wrap:wrap;
}
.linked-container{
width:50%;
height:200px;
}
You can check the working example in this jsfiddle link .
Also , for more info on flex css property try out this css-tricks link
You should learn Media queries, it will be helpful. Resize window to see.
EX: What media queries do.
Desktop
Mobile
Based on question,
body {
font-family: sans-serif;
font-size: .9rem;
}
h1 {
text-align: center;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus {
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 95%;
padding: 5px;
padding-bottom: 2cm;
}
/* 1 column: 320px */
.autowide {
margin: 0 auto;
width: 98%;
}
.autowide img {
float: left;
margin: 0 .75rem 0 0;
}
.autowide .module {
background-color: #00B4CC;
border-radius: .25rem;
margin-bottom: 1rem;
}
.autowide .module p {
padding: .25rem .75rem;
}
/* 2 columns: 600px */
#media only screen and (min-width: 600px) {
.autowide .module {
float: left;
margin-right: 2.564102564102564%;
width: 48.717948717948715%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 0;
}
}
/* 3 columns: 768px */
#media only screen and (min-width: 768px) {
.autowide .module {
width: 31.623931623931625%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 0;
}
}
/* 4 columns: 992px and up */
#media only screen and (min-width: 992px) {
.autowide .module {
width: 23.076923076923077%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(4n+0) {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="autowide">
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=1" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=2" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=3" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=4" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
</div>
See here: https://jsfiddle.net/
#main-bar {
height: 50px;
width: 100%;
background: green;
}
#view {
display: flex;
width: 100%;
flex-wrap: wrap;
> * {
flex: 1 0 50%;
height: 200px;
display: block;
&:first-child {
background: red;
}
&:nth-child(2) {
background: yellow;
}
&:nth-child(3) {
background: purple;
}
&:last-child {
background: orange;
}
}
}
Note that this uses flex so you'll need to make some fallbacks/tweaks for specific browsers. I'd usually do this with some PostCSS Autoprofixers to help with browser support.
All the best!
Here is the markup:
<div class="test">
// These links are added with JavaScript
Text 1
Text 2
</div>
<h1>
Here is my CSS:
a {
display: inline-block;
float: left;
// Other properties
}
.test {
display: block;
}
My problem is that the div and heading appear side by side. However, I want the heading to appear below the div.
I assumed that using display:block will solve the issue but it doesn't.
I tried adding a <br> tag after the div but that does not work either.
One thing that works is setting a height on .test. The problem with this is that some other users might set a higher font-size, hence,(rendering the height I set on container useless) for links somewhere else and this will mess up the layout.
EDIT:
I have just control over the div and the elements inside it. There can be anything above or below the div. The heading is just for reference.
JSFiddle
Basically, you have two options:
Make .test establish a new block formatting context, e.g. with overflow: hidden.
This will make it grow vertically to include the floats, and then the floats won't affect the header because it will be below them.
.test {
overflow: hidden;
}
.test {
overflow: hidden;
}
a {
text-decoration: none;
font-size: 1.3em;
padding: 10px 10px 5px 10px;
margin: 10px 3px;
display:inline-block;
float: left;
width: 60px;
text-align: center;
}
<div class="test">
Text 1
Text 2
</div>
<h1>UI am header</h1>
Clear the header. This will force it to be placed below the floats.
h1 {
clear: left;
}
h1 {
clear: left;
}
a {
text-decoration: none;
font-size: 1.3em;
padding: 10px 10px 5px 10px;
margin: 10px 3px;
display:inline-block;
float: left;
width: 60px;
text-align: center;
}
<div class="test">
Text 1
Text 2
</div>
<h1>UI am header</h1>
You can use float:left; clear:left
You need to clear your floats.
.test::after { content: ''; display: table; clear: both; }
https://jsfiddle.net/L5qz7y2p/3/
HTML
<div class="test">
Text 1
Text 2
</div>
<h1>
UI am header
</h1>
CSS
.test {
width:100%;
}
jsfiddle
Edited JSFiddle
I have a div with some random text.I have designed the div as a circle. I want to align the text inside the circle in the center. I can do this manually i mean for a static text i can do this. I want to know if there is any way to do this dynamically. I want to create the circle depending on the text size automatically and positioned the text in the center and aligned.
I have the code here :
<html>
<head>
<title>Test</title>
</head>
<body>
<section class="main">
<div id="greeting">
<p>Hi, This is the greeting part of my site.</p>
</div>
</section>
</body>
</html>
Thank you.
You can use
#greeting{
display: flex;
justify-content: center;
align-items: center;
}
How it works:
justify-content defines where flex items will align according to the main axis (horizontally in our case)
align-items does the same with the axis perpendicular to the main one (vertically in our case).
It works for any element, and it's probably the easiest and shortest way to center something horizontally and vertically
I have solved the problem after doing a lot of searching. I got my one and only clue from here :
Then I have tried a lot of time and finally I have done it. Here is the javascript code:
<script type="text/javascript">
var gr = $('#gr').width();
var grt = $('#greeting').width();
//alert(grt/2.5 >=gr);
if((grt/2.5)>=gr)
{
$('#gr').css({'height':gr+'px'});
}
else{
$('#greeting').css({'width':gr*2.5+'px'});
$('#greeting').css({'height':gr*2.5+'px'});
}
</script>
Here is the HTML code:
<div id="greeting">
<p id="gr">
Hi there this is my greeting part.
</p>
</div>
finally here is the CSS part:
#greeting{
color: #F8F8F8;
margin:5px;
width:0px;
border-radius: 50%;
background-color: #F99793;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#gr{
isplay: flex;
justify-content: center;
align-items: center;
word-wrap:break-word;
}
You can check this out in here.
Easy - use transform. This is CSS3 and remember to prefix the transform property (-webkit-, etc).
Fiddle for you
#greeting{
position: relative;
height:450px;
width:450px;
border-radius: 50%;
background-color: #779EC6;
text-align: center;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}
HTML:
<section class="main">
<div id="greeting">
<p>Hi, This is the greeting part of my site.</p>
</div>
</section>
CSS:
section.main{
display: table;
border: 2px solid #999;
height: 200px;
width: 200px;
background-color: #ccc;
border-radius: 50%;
padding: 7rem;
}
section.main > #greeting{
display: table-cell;
text-align: center;
vertical-align: middle
}
FIDDLE: http://jsfiddle.net/y3699smx/
Set section with class main to display:table; and give display: table-cell; and vertical-align: middle; style to #greeting. If text size will increase in this code, alignment will get adjust accordingly.
See Working example http://jsfiddle.net/guruWork/oc9mrz38/
I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.