This question already has answers here:
inline-block element with no text renders differently
(4 answers)
Closed 6 years ago.
<html>
<head>
<style>
.nav
{
height: 45px;
}
.btn-return
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
.btn-menu
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nav">
return
</div>
</body>
</html>
<html>
<head>
<style>
.nav
{
height: 45px;
}
.btn-return
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
.btn-menu
{
display: inline-block;
width: 43px;
height: 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nav">
return
problem
</div>
</body>
</html>
the html code is all same except there are some characters between . I want to kown why the result is not same when there are some characters
between .it's so stranger!,i think for a long time ,but i can't find the reason.
do you want to display buttons in one row?
try this to Put buttons in one row
<html>
<head>
<style>
.nav
{
height: 45px;
}
.btn-return
{
display: inline;
width: 43px;
height: 100%;
border: 1px solid red;
}
.btn-menu
{
display: inline;
width: 43px;
height: 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nav">
return
</div>
</body>
</html>
Related
I've been struggling with this for hours and cannot find the solution. I've made a simple layout to display two pairs of gauge+thermometer visualizations to show the temperatures uploaded by ESP8266. The basic layout is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Description.
</div>
</div>
</div>
</body>
</html>
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
}
When <div class="below_gauge2"> is removed from the HTML the layout is exactly how I would like it to be. However, after adding that DIV, the green div moves up so it is not anymore vertically aligned with the second green div at the right.
What can be done so <div class="below_gauge2"> would be displayed below the left green DIV, but in a such way the green DIV would stay where it was before adding the <div class="below_gauge2">?
check this fiddle
#inner {
vertical-align: middle;
display: table-cell;
//added
position: relative;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
//added
position: absolute;
left: 0;
right: 0;
margin: auto;
}
I have a html
<style>
.container {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
margin: 0 auto;
border: solid 1px black;
}
.sub-container {
display: flex;
flex-direction: column;
flex-grow: 1;
//height: 100%;
margin: 5px;
border: solid 1px yellow;
}
.red-block {
margin: 5px;
border: solid 1px red;
}
.green-block {
flex-grow: 1;
margin: 5px;
border: solid 1px green;
overflow-y: auto;
}
.blue-block {
margin: 5px;
border: solid 1px blue;
}
</style>
<div class="container">
<div class="red-block">HEADER</div>
<div class="sub-container" > <!-- Polymer module -->
<!-- shady dom -->
<div class="green-block">
<div style="height: 500px;">CENTER</div>
</div>
<div class="blue-block">FOOTER</div>
</div>
</div>
Example on Plunker
As you can see the content is outside of main block (black border).
If I remove (yellow border) then the result will be ok.
But I use Polymer.js and when I add my dom-module to the page I get excess div (sub-container) which breaks my layout.
How to make sub-container do not effect on layout?
use flex-basis: 0; for the div to force fit inside the container.
add flex-basis:0; to .green-block class to get the desired effect
http://plnkr.co/edit/Xj6fe8
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>
.container {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
margin: 0 auto;
border: solid 1px black;
}
.sub-container {
display: flex;
flex-direction: column;
flex-grow: 1;
//height: 100%;
margin: 5px;
border: solid 1px yellow;
}
.red-block {
margin: 5px;
border: solid 1px red;
}
.green-block {
flex-basis: 0;
flex-grow: 1;
margin: 5px;
border: solid 1px green;
overflow-y: auto;
}
.blue-block {
margin: 5px;
border: solid 1px blue;
}
.traitor {
height: 500px;
}
</style>
<div class="container">
<div class="red-block">HEADER</div>
<div class="sub-container">
<!-- Polymer module -->
<!-- shady dom -->
<div class="green-block">
<div class="traitor">CENTER</div>
</div>
<div class="blue-block">FOOTER</div>
</div>
</div>
</body>
</html>
Comment if this is not what you are asking about!
Now I get it work.
One needs to add to sub-container:
height: 0px;
flex-grow: 1;
Due to height: 0px; element will not depend on a big children elements.
http://plnkr.co/edit/bbqsTJiguBXFlzySpLRu?p=preview
Simple code.jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navTitle">1</div>
<div class="subNav subNav1">test1</div>
<div class="subNav subNav2">test2</div>
<div class="subNav subNav3">test3</div>
<div class="subNav subNav4">test4</div>
</div>
</div>
<div class="container">
</div>
<div class="left">
<div class="leftEles leftEle1"></div>
<div class="leftEles leftEle2"></div>
<div class="leftEles leftEle3"></div>
<div class="leftEles leftEle4"></div>
<div class="leftEles leftEle5"></div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
And CSS.
body{
overflow: hidden;
font-size: 20px;
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: #0092C7;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 50px;
width: 200px;
bottom: 0;
border-right: 1px solid #C0C0C0;
}
.container{
position: absolute;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
}
.leftEles{
width: 100%;
height: 50px;
background-color: #F4F3DE;
border-bottom: 1px solid #C0C0C0;
cursor: pointer;
}
.leftEles:hover{
opacity: 0.7;
}
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
}
.navTitle{
border-left: 1px solid #C0C0C0;
}
.subNav{
border-bottom: 1px solid #C0C0C0;
background-color: rgba(0,146,199,0.7);
cursor: pointer;
}
.subNav:hover{
color: #FFFFFF;
}
I'm curious why the hover and cursor effect on .subNav won't work!
Simple and silly question. Help me, many thx!
Your effect was not working because of .container is overlapping .header
Use z-index css on .header:
z-index: 2;
Complete css of .header
.header{
width: 100%;
height: 50px;
z-index:2;
background-color: #0092C7;
position: relative;
}
UPDATED DEMO
.container is positioned over navigation, has higher natural z-index (in code is after navigation).
To place navigation over container, set to navigation position: relative (only positioned elements (excluding position: static;) works with z-index) and higher z-index than 1.
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
position: relative;
z-index: 2
}
http://jsfiddle.net/4b2d0fyv/3/
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
This CSS arrow works fine in chrome but breaks in IE. What's the best way to figure out how to make it work in IE9?
<html>
<head>
<style>
.nav {
padding: 0;
width: 115px;
}
.box {
width: 100px;
height: 50px;
background-color: green;
float: left;
padding: 0;
}
.arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid green;
float: right;
padding: 0;
}
</style>
</head>
<body>
<div>
<div class="nav">
<div class="box"></div>
<div class="arrow-right"></div>
</div>
</body>
</html>
Maybe because you don't have a DOCTYPE and IE renders it in quirks mode.
<!DOCTYPE html>