What is the minimalist syntax for these two classes?
.sortable1Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; margin: 0px 5px 0px 0px }
.sortable2Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; }
What is I style by their ids?
.sortable1Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; margin: 0px 5px 0px 0px }
.sortable2Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; }
the minimalist sintax for your two class is
.sortable1Wrapper, .sortable2Wrapper { width:190px; height:200px; border: 1px solid #eee; float:left; }
.sortable1Wrapper { margin: 0px 5px 0px 0px }
Related
I have a page whos players update their stats
for each stat I have a cell, with description and (+) whos give them the option for chose which one to update, but when you trying to click the whole table is going left
its no script whos do it or something like that
this is how its need to be
this is the result after click\hover
I moved position: absolut
but still, nothing happened
position: static;;
}
.titlestat {
right:20px;
position:absolute;
margin-top:-3px;
margin-right:40px;
right:20px;
}
.substat {
right:20px;
font-size:12px;
margin-top:22px;
margin-right:40px;
position:absolute;
right:20px;
}
.upstat {
right:20px;
font-weight:600;
font-size:24px;
background:rgba(0,0,0,0.3);
padding:3px 10px;
padding-top:2px;
border:solid 1px #693b23;
box-shadow:0px 0px 0px 1px #000,0px 4px 3px
rgba(255,255,255,0.15);
color:#fff;
margin-top:0px;
margin-right:153px;
text-decoration:none;
border-radius:6px;
transition:0.3s;
-webkit-transition:0.3s;
-moz-transition:0.3s;
right:20px;
}
.upstat:hover {
background:rgba(0,0,0,0.4);
box-shadow:0px 0px 0px 1px #000,0px 4px 4px
rgba(255,255,255,0.35);
text-shadow:0px 0px 16px #fff,0px 0px 16px #fff;
}
.statsupdiv {
background:url(../img/code/chatbg.jpg);
width:472px;
margin-right:10px;
padding:10px 0px;
border-right:solid 1px #693b23;
border-left:solid 1px #693b23;
border-bottom:solid 1px #693b23;
box-shadow:1px 0px 0px #000,-1px 0px 0px #000,0px 1px 0px #000;
margin-bottom:8px;
font-weight:bold;
font-size:16px;
}
.stats1 {margin-right:-240px;margin-top:0px;}
.stats2 {margin-right:2px;margin-top:0px;}
.stats3 {margin-right:-240px;margin-top:80px;}
.stats4 {margin-right:2px;margin-top:80px;}
Good day,
I have two buttons with an up and down arrow, as shown in my picture below.
The corresponding html code is the following :
[...]
<tr>
<td class="tablerows" height="40">lab01 - Températ. pièce [T1]</td>
<td class="tablerows"><input id="lab01" type="text" name="country" class="resizedTextbox" value="20" readonly>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
</td>
</tr>
[...]
Edit, thanks to your help. However, I am still not able to align all my elements, as I would like
The linked CSS is the following :
td{
vertical-align:middle;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:25px;
vertical-align:-1px;
line-height:auto;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 50px;
height: 20px;
padding: 5px 5px 5px 5px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
vertical-align:text-top;
text-align:center;
font-size:18px;
}
progress {
background-color: #0061a7;
border: 0;
height: 18px;
border-radius: 9px;
}
What I am basically trying to do is to have a 'good' vertical alignment (in my example, we can see that it's not very well aligned).
Before annoying you - and risking a negative downvote - I tried to google my problem, but I could not find the issue that I am having. Am I missing a property or did I set it incorrectly ?
Thanks for your hints
Use this css, removed height and width and added box-sizing
box-sizing: border-box;
padding:10px;
.myButton {
-moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
box-shadow: inset 0px 1px 0px 0px #54a3f7;
background-color: #3e12cc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 18px;
text-decoration: none;
text-shadow: 0px 1px 0px #154682;
box-sizing: border-box;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-up"></i>
I was able to align it with
vertical-align:-6px;
Try this it should work. Please share a codepen going forward, so that its easier for others
Add line Height for .myButton
line-height:25px;
You need vertical-align:middle. Try it and tell me if works, otherwise, you can add padding-top: for separete it from top.
Thanks all for your very quick replies. The solution provided by Gowtham Shiva helped me a lot, although many other ones that I upvoted are perfect.
Finally, here is the contents of my css file :
td{
vertical-align:middle;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 5px 10px 5px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:25px;
vertical-align:-6px;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 40px;
height: 20px;
padding: 5px 5px 5px 5px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
vertical-align:text-top;
text-align:center;
font-size:18px;
}
progress {
background-color: #0061a7;
border: 0;
height: 18px;
border-radius: 9px;
}
Hope this post will help someone in a similar situation.
Have a good week-end.
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}
Hello i have made a template and a whole role playing game with over 400 pages of coding now users have told me the page does not work in i.e . I have viewed my website in firefox and chrome and works fine. But when i view it in i.e it shows a messed up page.
I have tried using
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
But does not work / help i also have scroll bars ( when logged in ) And if your shuffle over to the left or right of the page by using left or right keys on the keyboard the slidey bar does not slide down.
So is there anyways to make my template work in i.e and stop users from pressing left and right e.g the template from moving left to right ?
Here is my css
html
{
background: url(../images/background.png);
background-color: transparent;
}
body {
width: 1000px;
margin: auto;
padding: 0;
text-align: center;
color: #000000;
font-family: verdana;
font-size: 0.7em;
}
.auction_box
{
display:inline-block ;
}
div.container
{
width:100%;
height:100%;
position:absolute;
margin:auto;
}
div.holder
{
width:990px;
background-color:#d7f7f7;
height:100%;
margin:auto;
margin-top:0px;
background-image:url('../images/swampertbackground.png');
background-repeat:no-repeat;
background-position:bottom center;
}
#container{
height: 100%;
width: 1000px;
background-color: #d7f7f7;
position: fixed;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-left: solid #25a5a6 2px;
border-right: solid #25a5a6 2px;
overflow-y: auto;
overflow-x: auto;
}
div.banner
{
height:125px;
width:700px;
display:block;
position:absolute;
margin-top:2px;
margin-left:140px;
background-color:#FFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border: solid #25a5a6 1px;
background-image:url('../images/banner.png');
box-shadow: 3px 3px 3px #4b8384;
}
ul , li
{
margin:0px;
padding:0px;
list-style:none;
}
div.left_navigation
{
position:absolute;
margin-left:5px;
margin-top:150px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
width: 152px;
}
div.leftside2_navigation
{
position:absolute;
margin-left:5px;
margin-top:280px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
width: 152px;
}
div.left_navigation2
{
position:absolute;
margin-left:5px;
margin-top:330px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.clans
{
position:absolute;
margin-left:5px;
margin-top:410px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation3
{
position:absolute;
margin-left:5px;
margin-top:525px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation4
{
position:absolute;
margin-left:5px;
margin-top:620px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation5
{
position:absolute;
margin-left:5px;
margin-top:680px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.left_navigation6
{
position:absolute;
margin-left:5px;
margin-top:750px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
li.header
{
width:150px;
height:14px;
background-color:#54c0c1;
border:1px #188c8d solid;
border-top-left-radius:7px;
border-top-right-radius:7px;
background-image:url('../images/header.png');
border-left:2px #188c8d solid;
color:#FFFFFF;
font-weight:900;
}
li.links
{
width:150px;
height:16px;
background-color:#c1f9fa;
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
color:#074647;
}
li.links:hover
{
background-color:#FFFF00;
color:#296584;
font-weight:bold;
text-shadow: 1px 2px 2px #0096ff;
}
li.footer
{
width:150px;
height:9px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
background-image:url('../images/header.png');
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
}
div.centerboxholder
{
position:absolute;
top:150px;
margin-left:165px;
width:661px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
div.centerbox
{
position:absolute;
width:661px;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
li.chead
{
width:660px;
height:14px;
border-top-left-radius:7px;
border-top-right-radius:7px;
background-image:url('../images/header.png');
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
border:1px #188c8d solid;
color:#FFFFFF;
font-weight:900;
box-shadow: 0px 0px 3px #4b8384;
}
li.ccontent
{
width:659px;
background-color:#c1f9fa;
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
color:#000;
font-size:0.9em;
border-right:1px #188c8d solid;
box-shadow: 3px 3px 3px #4b8384;
}
li.cfoot
{
width:659px;
height:9px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
background-image:url('../images/header.png');
border-bottom:1px #188c8d solid;
border-left:2px #188c8d solid;
border-right:1px #188c8d solid;
box-shadow: 3px 3px 3px #4b8384;
}
div.right_navigation
{
position:absolute;
margin-left:834px;
top:150px;
box-shadow: 3px 3px 3px #4b8384;
border-top-left-radius:7px;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
}
table
{
padding:0px;
margin:0px;
border: 0px;
font-size:0.9em;
font-weight:bold;
color:#000;
}
td
{
border:1px #188c8d solid;
width:200px;
text-align:center;
}
#textfield
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
}
#gender
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
width:110px;
padding:0px;
}
#gendertop
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
}
#genderbottom
{
color: #000000;
font-family: verdana;
font-size:1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
}
#button
{
background-color:Transperent;
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
width:100px;
padding-top:0px;
margin:0px;
height:16px;
padding-bottom:5px;
}
#Avatar
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border:1px #188c8d solid;
border-radius:5px;
width:110px;
}
#changer
{
color: #000000;
font-family: verdana;
font-size: 1em;
font-weight: bold;
background-color:#e2fffc;
border-bottom:1px #188c8d solid;
}
li.topper
{
height:12px;
border:1px #188c8d solid;
border-top-left-radius:5px;
border-top-right-radius:5px;
background-image:url('../images/header.png');
}
li.bottomer
{
border:1px #188c8d solid;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-image:url('../images/header.png');
height:12px;
}
#button:hover
{
cursor:pointer;
}
a:link { color:#296584; text-decoration:none;display:block;}
a:visited { color:#296584; text-decoration:none;}
a:hover { color:#296584; text-decoration:none;text-shadow: 1px 2px 2px #0096ff;}
a:active {color:#296584; text-decoration:none; background-color:}
My website url is pokemontoxic.net so everyone cna view it in i.e and see what i mean. Thanks
You've got your doctypes wrong. At the top of your pages, change this:
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
to this:
<!doctype html>
<html>
Or, at least swap their places.
1st:
Emulate7 will tell all IE browsers to pretend to act as if they're IE7. Just remove these lines:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
and instead, add the below code, which means your site supports IE7:
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
2nd:
In your CSS, you have div.container and div.holder, the dot stands for a "class", but you have <div id="container"> and <div id="holder">. So either you change the CSS to div#container and div#holder OR change the attribute id to class, like this <div class="container"> and <div class="holder">
I am trying to make something like an horizontal label:
But there is a condition, should be an unique div. Probably with canvas is possible, however i have preference by css.
#msg {
border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 10px solid transparent;
height: 0;
width: 100px;
background-color: rgba(0,0,0,.8); margin-left:20px;
}
demo
You can accomplish this with some border hacks, positioning, and the :before psudo-element.
http://jsfiddle.net/VQcyD/
#msg {
width:100px;
height:40px;
background:red;
margin-left:40px;
position:relative;
}
#msg:before {
content:"";
position:absolute;
border-bottom: 20px solid transparent;
border-right: 20px solid red;
border-top: 20px solid transparent;
height: 0px;
width: 0px;
margin-left:-20px;
}