I am trying to write a basic layout out for calculator. How come when i try to run the web page, it's all empty !! Not sure which one is overriding the code. can some one help me out
This is my html code.
<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/calculater.css"/>
</head>
<body>
<div id="screen_one">
<div id="numberholder"></div>
<div id="numholder">
<ul>
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="num">0</li>
<li class="num">+</li>
<li class="num">-</li>
<li class="num">=</li>
<li class="num">/</li>
<li class="num">*</li>
</ul>
</div>
</div>
</body>
</html>
and this is my css.
body,html{
height:100%;
width:100%;
padding:0;
margin:0;
}
#numberholder{
position: absolute;
top: 0;
left: 0;
width:100%;
height:10%;
}
#numholder{
position:absolute;
top:10%;
left:0;
height:90%;
font-size:0;
}
.class{
display:inline-block;
width:33.3%;
height:20%;
font-size:13px;
text-align:center;
}
<!doctype>
<html>
<head>
<style>
body,html{
height:100%;
width:100%;
padding:0;
margin:0;
}
#numberholder{
position: absolute;
top: 0;
left: 0;
width:100%;
height:10%;
}
#numholder{
position:absolute;
top:10%;
left:0;
height:90%;
font-size:1em;
}
.class{
display:inline-block;
width:33.3%;
height:20%;
font-size:13px;
text-align:center;
}
</style>
</head>
<body>
<div id="screen_one">
<div id="numberholder"></div>
<div id="numholder">
<ul>
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="num">0</li>
<li class="num">+</li>
<li class="num">-</li>
<li class="num">=</li>
<li class="num">/</li>
<li class="num">*</li>
</ul>
</div>
</div>
</body>
</html>
------------------------------Output-------------------------------
1
2
3
4
5
6
7
8
9
0
+
-
=
/
*
Change the below css
#numholder {
font-size: 0;
}
To
#numholder {
font-size: 12px;
}
or remove the below css code from your css
#numholder {
font-size: 0;
}
Remove font-size:0; in #numholder or change it to higher number:
Example - font-size:1em;
Fiddle
you made the font-size:0
font-size:0;
Related
This question already has answers here:
inline-block vertical positioning issue
(2 answers)
Closed 3 years ago.
I just started learning html and css, and i have a problem with this menu.
When you hover on an element it should higlight it by expanding padding and changing the border color (in the code this is made in a strange way but it because initially it was meant to have a caption written in the "li" ) but when you hover on an element other 4 element go down for some reason.
I already tried to messing around with margin, paddings and position
nav #MotherList{
list-style-type:none;
margin:0px;
padding:0px;
text-align:center;
}
li.navoptions {
width:103px;
height:93px;
padding:0px;
border-radius:4px;
margin-left:5px;
margin-right:5px;
position:relative;
top:4px;
color:black;
text-align:center;
background-color:red;
display:inline-block;
}
.navoptions:hover{
background-color:white;
padding:2px;
position:relative;
top:2px;
margin-left: 3px;
margin-right: 3px;
}
.navoptions div {
width:100px;
height:90px;
border-radius:4px;
margin-left:auto;
margin-right:auto;
position: relative;
top:1.5px;
background-color:yellow;
background-size:100px 90px;
background-repeat: no-repeat;
text-indent: -999999px;
}
#nav1{
background-image:url("../images/nav1.png");
}
#nav2{
background-image:url("../images/nav2.png");
}
#nav3{
background-image:url("../images/nav3.png");
}
#nav4{
background-image:url("../images/nav4.png");
}
#nav5{
background-image:url("../images/nav5.png");
}
<header>
<ul class="MainList">
<li class="MainListMember">Home</li>
<li class="MainListMember">Products</li>
<li class="MainListMember" id="Dave" onclick="window.location.href='td.html'">Logo</li> <!-- Broken <a href> -->
<li class="MainListMember">Contacts</li>
<li class="MainListMember">Infos</li>
</ul>
</header>
<nav>
<ul id="MotherList">
<li class="navoptions"><div id="nav1">opt 1</div></li>
<li class="navoptions"><div id="nav2">opt 2</div></li>
<li class="navoptions"><div id="nav3">opt 3</div></li>
<li class="navoptions"><div id="nav4">opt 4</div></li>
<li class="navoptions"><div id="nav5">opt 5</div></li>
</ul>
</nav>
A copy of the project: http://www.mediafire.com/file/blgdejll656uy8y/test_project.rar/file
there are comments in there, some may be wrong
Are you looking for this?
Give me some info and ill update my answer.
.navoptions:hover{
background-color:white;
border: 1px solid red;
padding: 50px;
}
.navoptions {
width:100px;
height:90px;
float: left;
border-radius:4px;
margin-left:5px;
margin-right:5px;
position: relative;
top:1.5px;
border: 1px solid black;
background-color:yellow;
background-size:100px 90px;
background-repeat: no-repeat;
text-indent: -999999px;
}
#nav1{
background-image:url("../images/nav1.png");
}
#nav2{
background-image:url("../images/nav2.png");
}
#nav3{
background-image:url("../images/nav3.png");
}
#nav4{
background-image:url("../images/nav4.png");
}
#nav5{
background-image:url("../images/nav5.png");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<header>
<ul class="MainList">
<li class="MainListMember">Home</li>
<li class="MainListMember">Products</li>
<li class="MainListMember" id="Dave" onclick="window.location.href='td.html'">Logo</li> <!-- Broken <a href> -->
<li class="MainListMember">Contacts</li>
<li class="MainListMember">Infos</li>
</ul>
</header>
<div id="MotherList">
<div class="navoptions" id="nav1"></div>
<div class="navoptions" id="nav2"></div>
<div class="navoptions" id="nav3"></div>
<div class="navoptions" id="nav4"></div>
<div class="navoptions" id="nav5"></div>
</div>
I have a problem with pseudo-elements (: before,: after,: last-child) in the IE7 browser.
In fact I wanted to draw a tree that looks like this capture (IE11):
but when I execute my index on (IE7) gives me rendering wrong :
For information i have already used Selectivizr (It’s a JavaScript library that allows you to take advantage of CSS3 selectors ) but not working for me !
This code is just an example looks like my project structure where i use (struts2, dojo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tree</title>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
<link href="demo1.css" rel="stylesheet">
</head>
<body>
<div class="test">
<div>
+
Label A
</div>
<ul class="recherche_non_rendu">
<li>
<div class="test">
<div>
+
Label A1
</div>
<ul class="recherche_non_rendu">
<li>
<div class="test">
<div>
+
Label A11
</div>
</div>
</li>
<li>
<div class="test">
<div>
+
Label A12
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
And my style css :
.test ul {
padding:0;
margin: 0;
margin-left:6px;
list-style:none;
background: #fff;
color:#000;
position:relative;
}
.test ul:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
border-left:1px solid #000;
}
.test li {
margin:0;
padding:0 16px;
line-height:2em;
font-weight:bold;
position:relative;
}
.test li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid #000;
margin-top:-1px;
position:absolute;
top:1em;
left:0;
}
.test li:last-child:before {
background:white;
height:auto;
top:1em;
bottom:0;
}
Any help will be appreciated.
I have a very simple vertical bar chart made solely by css:
it is made of list items:
<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;">40</li>
<li style="height:20%;">10</li>
<li style="height:40%;">20</li>
<li style="height:10%;">5</li>
</ul>
with the help of css:
.graph {
width:100%;
height:250px;
position:relative;
background-color:gray;
}
.graph li{
bottom:0;
width:5%;
text-align:center;
background-color:#9FC;
list-style:none;
position:relative;
border-style:solid;
border-width:1px;
display:inline-block;}
the problem is that the bars are upside-down. How could I make them right way up?
thanks
Your li elements should be positioned absolute. However you need to set margin for each element. I used it by adding left property:
<ul class="graph">
<li style="height:50%; ">25</li>
<li style="height:80%;left:20%">40</li>
<li style="height:20%;left:40%">10</li>
<li style="height:40%;left:60%">20</li>
<li style="height:10%;left:80%">5</li>
</ul>
And in CSS i modified this:
.graph li {
position:absolute;
}
DEMO
i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me
css:
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 85px 0px 85px;
border:2px solid #4c4c4c;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<html>
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >Home</li>
<li class="menu">contact us</li>
<li class="menu">pay</li>
<li class="menu" id="menuitem4" >plans</li>
</ul>
</div>
</div>
</body>
</html>
jsfiddle
Set the width of the .menu in percentage so the li's are responsive.
JSFIddle
HTML
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >
Home
</li>
<li class="menu">
contact us
</li>
<li class="menu">
pay
</li>
<li class="menu" id="menuitem4" >
plans
</li>
</ul>
</div>
</div>
</body>
CSS
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 0px 0px 0px;
border:2px solid #4c4c4c;
width:20%;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
You can try using percentage width values for width of your li elements.
.some-class {
width: 25%
}
I've made some changes on jsfiddle just to show it is possible with this kind of implementation.
If you are concerned about mobile devices. Take a look at meta tags with device-width.
You can add:
ul {
white-space: nowrap;
}
to prevent wrapping -> jsfiddle
EDIT: I have found this code, which appears to be sorta working the way I want it to. You can check it out live at EDIT - I still can't get it to sit within my #main div though! I've tried using both 100% and 990px within #menu span for width - neither seem to work.
<div id="menu">
<ul>
<li>Menu item 1</li>
<li>Menu item 3</li>
<li>Menu item 2</li>
</ul>
<span></span>
</div>
#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
END EDIT
I have a menu I'm having some issues with - mainly horizontal issues :)
Basically, when you view the website in Chrome, the menu is centered the way I want it to be.
When you view the website in FireFox, the menu is 5-10px short on the right side.
And when you view it in Internet Explorer, the menu is not sitting left and is overflowing off of the right side of the page.
View it for yourself at: EDIT (Keep in mind, index2.php here, not the original index)
So my question is:
How can I style/code this menu correctly to fit within my parent div?
I did look through previous topics with similar questions, however, was unable to make anything work. Thank you in advance :)
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EDIT </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#sliderwrapper {width:635px;}
#control {
text-align:right;
margin-top:5px;
}
#control a {
background:#87e7fa;
padding:0 5px;
color:#FFFFFF;
text-transform:uppercase;
text-decoration:none;
margin-left:5px;
}
#control a.active {background:#265db9;}
#control a span {visibility:hidden;}
.sexyslider-control span {display:none;}
.sexyslider-title {
font-weight:bold;
color: #FFFFFF;
}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sexyslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").SexySlider({
width : 981,
height : 500,
delay : 3000,
strips : 18,
autopause : false,
<!--navigation : '#navigation',--!>
control : '#control',
direction : 'left',
effect : 'fade'
});
});
</script>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.gif" alt="" /></div>
<div id="main">
<ul>
<h2><li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li></h2>
</ul>
<div id="sliderwrapper" class="clearfloat">
<div id="slider" style="width:100%">
<img src="images/slide1.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide2.jpg" alt="" " />
<img src="images/slide3.jpg" alt="" "/>
<img src="images/slide4.jpg" alt="" "/>
<img src="images/slide5.jpg" alt="" "/>
<img src="images/slide6.jpg" alt="" "/>
</div>
<div id="control" style="margin-top:10px; margin-right:-347px;"></div>
</div>
</div>
<div id="footer"><img src="images/footer.gif" alt=""/></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
background-color: #87e7fa;
font-size:100%;
text-align:center;
}
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
background:url('images/bg.gif') repeat-y;
width:1200px;
}
#header {
width:1200px;
height:358px;
}
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:left;
}
#footer {
clear:both;
width:1200px;
height:354px;
}
h2 {
font-family:soos_font;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
ul
{
list-style-type:none;
margin:10 0;
padding:0;
}
li
{
display:inline;
width:100%;
margin:0 auto;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#87e7fa;
text-align:center;
padding:7px;
text-decoration:none;
text-transform:uppercase;
border-radius:5px;
margin:0 auto;
}
a:hover,a:active
{
background-color:#3650a2;
}
I have update you css
css
#main {
width:990px;
height:100%;
margin:0 auto;
text-align:center;
}
#main ul{
list-style-type:none;
margin:0;
padding:0;
}
#main li{
display:inline-block;
/*width:100%;*/
margin:0 3px;
}
html
<div id="main">
<ul>
<li>Home</li>
<li>Meet Our Team
<li>Office Information</li>
<li>First Visit</li>
<li>Dental Topics</li>
<li>Office Tour</li>
<li>Contact Us</li>
</ul>
<br style="clear:both;"/>
</div>
here is the jsFiddle File
Also don't wrap li in to h2, this is not a valid code.