Why is the "Input Status" div block got offset in its parents.
I did try toggle all its css attributes in the web inspector, it seems nothing fix the offset. Where did it come from?
Please have a look this demo: http://jsfiddle.net/pengyanb/Lfvnr9y1/
.containing_tab {
width: 100%;
height: 40pt;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
I toggled all its css attribute in the web inspector,
Because the vertical-align property for inline elements defaults to baseline. Just change that to top:
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
vertical-align:top;
}
jsFiddle example
remove the height from the .containing_tab
.containing_tab {
width: 100%;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
Related
.score{
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
.score p span{
padding-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I want to move my text down a little bit but it's not working, putting padding in .score just makes it bigger and nothing happens if I put it in .score p span.
Nepotech's answer is correct. An other way is useing line-height for .score:
.score {
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
line-height: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
Just Use margin-top to p element
Note: I have changed color to blue, for better understanding!
.score{
font-size: 20px;
text-align: center;
background-color: blue;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
p{
margin-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I have the following. However, I've been trying to get the blue title area to expand with the outter div and the arrow to be aligned in the middle. I have an outer div set at 25% just so the text wraps.
.breakingNewsRec {
width: 100%;
background: #FFF;
position: relative;
border: solid 2px #6A7791;
}
.breakingNewsRec>.bn-rec {
width: auto;
display: inline-block;
background: #6A7791;
position: relative;
margin-right: 20px;
}
.breakingNewsRec>.bn-rec>h2 {
display: inline-block;
margin: 0;
padding: 0 20px;
line-height: 40px;
font-size: 0.8em;
color: #FFF;
box-sizing: border-box;
}
.breakingNewsRec>.bn-rec>span {
position: absolute;
right: -10px;
top: 10px;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #6A7791;
}
.breakingNewsTown {
width: 100%;
height: 40px;
background: #FFF;
position: relative;
border: solid 2px #74936A;
}
.breakingNewsTown>.bn-rec {
width: auto;
height: 40px;
display: inline-block;
background: #74936A;
position: relative;
margin-right: 20px;
}
.breakingNewsTown>.bn-rec>h2 {
display: inline-block;
margin: 0;
padding: 0 20px;
line-height: 40px;
font-size: 0.8em;
color: #FFF;
height: 40px;
box-sizing: border-box;
}
.breakingNewsTown>.bn-rec>span {
width: 0;
position: absolute;
right: -10px;
top: 10px;
height: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #74936A;
}
<div style="width: 25%">
<div class="breakingNewsRec">
<div class="bn-rec">
<h2>Recreation News</h2><span></span>
</div>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj
<img src="imgs/slides/slide2.jpg" width="25%">asdfljas dflkjsdf alskdjf asdfl</div>
<div class="breakingNewsTown">
<div class="bn-rec">
<h2>Town News</h2><span></span>
</div>fareveae vasev</div>
</div>
Using display:table-cell this is very easy to accomplish:
#news {
width: 50%;
}
#news .item {
border-width: 1px;
border-style: solid;
}
#news .item h2 {
color: white;
font-size: 100%;
white-space: nowrap;
position: relative;
border-color: inherit;
}
#news .item h2:after {
content: '';
display: inline-block;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent;
border-left-color: inherit;
vertical-align: middle;
position: absolute;
left: 100%;
}
#news .item h2,
#news .item div {
display: table-cell;
vertical-align: middle;
padding: 0 1.5em;
}
.style1 { border-color: #697791 }
.style1 h2 { background: #697791 }
.style2 { border-color: #74936a }
.style2 h2 { background: #74936a }
<div id="news">
<div class="item style1">
<h2>Recreation News</h2>
<div>
<p>fdsasdf asdif ksd jfkasjdfasj dfla sjdflj asdfljas dflkjsdf alskdjf asdfl</p>
</div>
</div>
<div class="item style2">
<h2>Town News</h2>
<div>
<p>fareveae vasev</p>
</div>
</div>
</div>
I am not sure exactly what you are trying to achieve, but it sounds like something like this:
which would just be applying width:100%; to .bn-rec
EDIT
Regarding your comment - I think I understand then. How about surrounding the text in a <div> and making both <div> tags display:inline-block; and restricting their width by %. Then increasing the margin of the arrow, also by a % like I did here:
https://jsfiddle.net/030y329m/
Is that closer to what you were thinking?
Have a couple of questions:
How can I do to have my request div and my Languages Div right to the bottom with the red line no matter the size of the divs above them.
How can I make the Name and Rating divs to be align vertically to the middle of the picture?
Here is my code, JSFiddle (https://jsfiddle.net/samuvk/jejjzjjq/1/) and the result
This is my desired result:
I would really appreciate any help.
#menucontainer {
border: 1px red solid;
overflow: auto;
}
.middledividermenu {
width: 39%;
float: left;
border: 1px green solid;
overflow: auto;
}
.pictureleft {
padding: 0.5em 0.5em 0.5em 0.5em;
width: 19%;
float: left;
border: 1px green solid;
overflow: auto;
}
.rightdivider {
width: 40%;
float: left;
border: 1px green solid;
overflow: auto;
}
.namemiddledivider {
width: 70%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 1.8em;
}
.description {
width: 99%;
float: left;
border: 1px blue solid;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
color:grey;
}
.request {
width: 99%;
float: left;
border: 1px blue solid;
text-align: center;
}
.littlepicture {
width: 15%;
float: left;
border: 1px blue solid;
}
.languagecallout {
padding: 0em 0.5em 0em 0.5em;
width: 10%;
float: left;
border: 1px blue solid;
}
.name {
width: 20%;
float: left;
border:1px solid blue;
vertical-align: middle;
}
.rating {
width: 57%;
float: left;
border:1px solid blue;
height:50%;
}
.personrating {
width: 99%;
float: left;
border:1px solid yellow;
vertical-align: middle;
}
.languages {
width: 99%;
float: left;
border:1px solid blue;
}
I edited your fiddle https://jsfiddle.net/jejjzjjq/5/
Use position:relative and position:absolute
Even though your structure is a bit messy, I didn't take time to change it, i only added a few stuff. You really need to review your code entirely!
Does this help? It shows the effect of the spaces between the top divs and the bottom div in a container.
Other notes: I believe that the regular flow of content goes from the top to the bottom and if you want to put a specific piece of content on the bottom or take it out of the regular flow you can use position absolute.
vh is used in my code to get the height so it could fit into the window / view-port nicely.You could make the height to pixels or whatever.
*{
box-sizing:border-box;
}
.container{
height: 100vh;
border-bottom: 3px red solid;
position: relative;
}
.name, .rating, .language, .request{
width: 45%;
border:1px solid blue;
height: 20vh;
}
.name, .request{
float: left;
}
.rating, .language{
float: right;
}
.bottom{
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="name">Name</div>
<div class="rating">Rating</div>
<div class="bottom">
<div class="request">Request</div>
<div class="language">Language</div>
</div>
</div>
On this page the box-shadow style doesn't seem to appear, however this has only been an issue since the hyperlinks have been added. Please see the code.
The box-shadow seems to work fine in Chrome and this issue is mainly in Internet Explorer.
The box-shadow is around the DIV ID="container".
Thanks for your help!
Here is the HTML for the page..
`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="images/logo.png">
</div>
<div id="title">
<h1>FOOTBALL MANAGER</h1>
<h2>HOME</h2>
</div>
</div>
<div id="nav">
Home
How To Install
Where To Buy
About Us
Contact Us
</div>
<div id="mheading">
<h4>Heading</h4>
</div>
<div id="fmlogo">
<p>fmlogo</p>
</div>
<div id="footer">
<span>
Copyright 2013 Top Notch Multi-Media
</span>
<span id="update">
Site last updated at 22:15 23 November 2013
</span>
</div>
</div>
</body>
</html>
`
And the CSS..
'
#charset "utf-8";
body {
height:1100px;
background-color:#999; /*needs defining in house style */
margin:0px;
padding:0px;
}
h1 {
font-family: Verdana;
font-size: 53px;
text-shadow: 1px 1px 7px #000;
}
h2 {
font-family:Verdana;
font-size:35px;
text-shadow: 1px 1px 7px #000;
}
h3 {
font-family: Verdana;
font-size: 20px;
}
h4 {
font-family:Verdana;
font-size:35px;
margin: 0px;
}
#container {
width:950px;
height:1100px;
margin:0 auto;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000;
/*order goes Horizontal offset, Vertical offset, Blur radius, Spread distance, Color */
box-shadow:0px 0px 100px 10px #000;
}
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position:absolute;
top: 15px;
left: 315px;
}
#nav {
position:relative;
height: 60px;
margin: 0 auto;
background-color:#CF6;
border-style: solid;
border-color: black;
border-bottom-width:2px;
border-top-width:2px;
border-right-width:1px;
border-left-width:1px;
text-align: center;
}
a {
position: relative;
top: 3px;
display: inline-block;
margin: -3px;
height: 56px;
width: 188px;
background-color: #E39734;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
font-family: Verdana;
font-size: 20px;
line-height: 55px;
}
#button {
position: relative;
top: 3px;
display: inline-block;
margin: -3px;
height: 56px;
width: 188px;
background-color: #E39734;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
font-family: Verdana;
font-size: 20px;
line-height: 55px;
}
.button:hover {
background-color: #BD7E2D;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #636363;
}
#logo {
position:absolute;
height:130px;
width:340px;
top:17px;
left: -10px;
border-style: solid;
border-width:0px;
border-color:black;
}
img {
width: 100%;
}
#mheading {
position:relative;
top: 10px;
left: 5px;
width: 940px;
height: 50px;
border-style: solid;
border-width: 1px;
border-color: #000;
text-align:center
}
#fmlogo {
position: relative;
margin: 0px;
top: 649px;
margin: 0 auto;
width: 940px;
height: 100px;
border-style: solid;
border-color: #000;;
border-width: 1px;
text-align: center;
}
#footer {
position: relative;
margin: 0px;
top: 659px;
width: 940px;
height: 30px;
background-color: #9F3;
border-style: solid;
border-color: black;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
padding-left: 5px;
padding-right:5px;
padding-top: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
#update {
float: right;
}
'
What version of IE are you using? If it's IE 9 or below you have to use the following within your container class css declaration:
border-collapse: separate;
Look the answer I found here:
http://blog.mi-ernst.de/2013/04/06/ie9-ie10-css-shadow-not-rendered/
Yesterday I got the problem that IE does not render the box-shadow
property. After a while a figgured out that the property
“border-collapse: collapse;” for a surrounding table prevents the
rendering. I got the property inherited from a stylesheet of a JS
Framework. After manipulating my css to the following configuration:
.shadowed {
-moz-box-shadow: 0 0 5px 5px #DDD;
-webkit-box-shadow: 0 0 5px 5px #DDD;
box-shadow: 0 0 5px 5px #DDD;
border-collapse: separate;
}
I've the following divs in my document:
<div class="bill-header">
<div class="bill-header-info"><span>Bill No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Table No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Room No</span></div>
<div class="vline"></div>
<div class="bill-header-info"><span>Amount</span></div>
</div>
I'm using the following CSS to make them sit on one line:
.bill-header {
height: 30px;
background-color: darkgrey;
padding-left: 10px;
}
.bill-header-info {
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
}
How can I make them appear with same distance in between them?
Fiddle
Do you mean like this? http://jsfiddle.net/3Zv2y/2/
Make these changes:
.bill-header-info {
width:23%;
text-align:center;
}
Add margin: 0 5px in your .vline:
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top: 3px;
border-left: 1px solid gray;
margin:0 5px;
}
This will give a margin of 5px in both left and right of your vline element.
JSFiddle
use width property in css for exapmle
.bill-header-info {width:22%;}
Updated Fiddle
As long as there are always four items in a row, you can use a "fixed" percentage value:
.bill-header {
height: 30px;
width: 100%;
background-color: darkgrey;
}
.bill-header-info {
float: left;
width: 24.6%;
text-align: center;
padding-top: 5px;
}
The important parts are the width and text-align properties in .bill-header-info
.bill-header-info {
text-align:center;
width:23%;
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 3px;
}
.vline {
width: 2px;
height: 80%;
display: block;
float: left;
margin-top:3px;
margin: 0 5 3 3px;
border-left: 1px solid gray;
}