When including text in a div , i found a slight margin on top of the text.How to get rid of the margin ?
<html>
<style>
#box{
width:200px;
height:100px;
font-size:50px;
background-color:#ff0000;
color:#ffffff;
}
</style>
<body>
<div id="box">TEXT</div>
</body>
</html>
<html>
<style>
#box{
width:200px;
height:100px;
font-size:50px;
background-color:#ff0000;
line-height:38px; /* reduce line height for desired results */
color:#ffffff;
}
</style>
<body>
<div id="box">TEXT</div>
</body>
</html>
You need to change the line-height. I have it set here to have no space.
#box{
width:200px;
height:100px;
font-size:50px;
line-height: 33px;
background-color:#ff0000;
color:#ffffff;
}
You may use line-height indeed to reduce gap on top and beneath the text, but maybe you should use em values to have this more reliable.
#box {
width: 200px;
height: 100px;
font-size: 50px;
background-color: #ff0000;
line-height: 0.65em;
color: #ffffff;
box-shadow: 0 0 3px black;
}
div:hover {
font-family: courier;
}
span {
vertical-align: top;
font-family: courier;
}
<div id="box">TEXT<span>text</span>
</div>
Related
I have this div :
and I tried making the font-size of the text responsive using this code :
font-size:calc(xx + 1.5vw);
If I make the screen smaller the headers are not vertically aligned :
HTML :
<div id="topsection">
<div id="header1">HEADER 1</div>
<div id="header2">Header 2</div>
</div>
CSS :
#header1 {
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
color: #fff;
margin-left:220px;
font-size:calc(9px + 1.5vw);
}
#topsection {
background-color:#222939;
width:100%;
height:75px;
z-index:1;
position:absolute;
top:10px;
left:0;
color:white;
}
I tried changing the CSS for the headers like this :
#header1 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(9px + 1.3vw);
color: #fff;
}
but now it looks like this :
You need a content div to center in the middle. See the example below. Have only tested this in Chrome.
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
Final code
<!DOCTYPE html>
<html>
<head>
<style>
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
</style>
</head>
<body>
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
</body>
</html>
This is a font glyph issue and is due to the fact that the black gylph character is not aligned directly along the left of the glyph block.
If you see the example below, you can set that there is actual space to the left side of the glyph block before the glyph character.
h1,
h3 {
margin: 0;
margin-bottom: 1px;
margin-left: 150px;
font-family: monospace;
}
h1 {
font-size: 144px;
}
h3 {
font-size: 72px;
}
span {
background: red;
}
<H1><span>H</span></H1>
<H3><span>H</span></H3>
This is a font-design issue...and it's on purpose...so that letters don't automatically bunch up together.
The amount of space is proportional to the font-size and each font so there's no single value you can use to align them.
What works for one font won't work for the next.
Here is a simple HTML file with inline css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
margin-top: 20px;
margin-right: 500px;
margin-left: 500px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
font-family: Arial;
font-weight:bold;
}
</style>
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.
vertical-align:middle; works only when parent has display:table and children display:table-cell
Take a look:
body {
margin-top: 20px;
margin-right: 100px;
margin-left: 100px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
display:table-cell;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
display:table-cell;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
width:100%;
font-family: Arial;
font-weight:bold;
display:table;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
Here is how you do it :
#divA {
display:block;
background: #BB1919;
color:white;
height:100px;
padding:20px;
box-sizing:border-box;
}
.divA {
display:table;
width:100%;
height:100%;
}
.events,
.sections {
display:table-cell;
font-size: 20px;
vertical-align:middle;
}
.divB {
display:table;
width:100%;
height:100px;
background:#f5f5f5;
padding:20px;
box-sizing:border-box;
}
<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
</div>
<h2>If you dont</h2>
<div class="divB">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
The css property vertical-align will align elements on the same line. As you can see in the example below, three divs are centered through the middle because of that property. Vertical-align will not center text inside an element, though.
One way to achieve that without tables is to set the line height property to the same height value of the container. In the example below, the container is 60px tall and so is the text line. This method works if the text is contained in one line only.
div {
display: inline-block;
border: 1px solid black;
vertical-align: middle;
}
.lg {
height: 60px;
}
.sm{
height:40px;
}
.centerTxt{
line-height: 60px;
}
<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>
I am now learning HTML and I have put a relative div in my code.
There are 2 more divs before that one but they don't collide, sadly the first two still take space above the relative one and I want it to be on top of the page.
My code :
.foo {
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
left:540px;
border:5px solid #fff;
top:-50px;
}
.lastpage {
position:relative;
text-align:left;
width:20%;
}
.index {
position:relative;
text-align:left;
width:20%;
}
body {
background-color:lightgray;
text-align:center;
align-content:center;
color: #990099;
font-family: 'Tahoma';
font-size: 15px;
}
<div class="foo">
<br><br>F O O - B A R
</div>
<div class="lastpage">
<form method=get action="http://www.boomy.web44.net/CURRY.html/">
<button type="submit">Last Page</button>(2/2)
</form>
</div>
<div class="index">
<form method=get action="http://www.boomy.web44.net//">
<button type="submit">Index</button>
</form>
</div>
I want the "Foo bar" div to go up and be on the same level as the two buttons
I changed your CSS code :
.foo
{
float:right;
margin-right: 540px;
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
border:5px solid #fff;
top:-50px;
}
.lastpage
{
position:relative;
text-align:left;
width:20%;
float:left;
}
.index
{
float:left;
position:relative;
text-align:left;
width:20%;
}
I added float:right and margin-right to your foo class and float:left to your lastpage and index class.
I think it should work for you !
Try adding the display: inline-block rule to make the divs appear on the same line, or float. By default, a div is block display and two divs won't come on the same line.
Another way of doing this is using the float: left property on the lastpage div to make it stay to the left and align it and the other div on the same line.
Does this solve your problem?
I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the center of the browser.
Thanks in advance
My Html and css code is below
HTML code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="basic1.css"/>
</head>
<body>
<div id="menu">
<img class="imgc" src="img.png" alt="icon"/>
<img class="imgd" src="do.png" alt="do"/>
</div>
<div id="smenu"></div>
<div id="mainbox">
<div class="ibox"></div>
</div>
<div id="menutext">
<ul>
<li><b>???????</b></li>
<li><b>?????</b></li>
<li><b>?????</b></li>
</ul>
</div>
<div id="py">
<pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
<pre class="s">?? ???? ??? ??? <span style="color:#980000;
letter-spacing :+1mm"><b>:3</b></span></pre>
</div>
</body>
</html>
CSS
#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px;
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
Put all the content inside a div, set its class to container:
<div class="container">
...
</div>
Then using css set its margins to auto:
.container{
margin:0px auto;
width: 600px;
}
have a look at this jsfiddle
EDIT
check this new fiddle , the menu css doesn't neet all of what you wrote, should be something like:
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
Put all your page content inside a wrapper div, then give it some relative width (e.g. 50%) and auto horizontal margins.
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
CSS (50% page width, zero top/bottom margin):
#wrapper {
width: 50%;
margin: 0 auto;
}
Put another div around all of your content (so from right after your body start tag and just before body end tag). Call it <div class="container">
Set the following style to that div:
width: 1000px;
margin: auto;
This should center your content.
You can change the width as needed.
You could use fundation3's grid: http://foundation.zurb.com/docs/grid.php
Working solution.
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
</html>
I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.