I want to create a button bar on top of the page, with div containers that contain images to use them as flat button. My problem is that I cannot get the alignment correctly.
Is there an additional way to highlight the last clicked button, so that you can see which button on the buttonbar is active without using javascript?
Here is my first approach:
<html>
<head>
<title>
</title>
<style>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0,0,0,0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.buttonBar {
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<div id="firstButton" class="flatBtn2" />
<div id="secondButton" class="flatBtn2" />
<div id="thirdButton" class="flatBtn2" />
</div>
</div>
</body>
</html>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0, 0, 0, 0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
background-color: transparent;
border: none;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:focus {
background-color: #eee;
}
.buttonBar {
float: left;
}
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<button id="firstButton" class="flatBtn2" >Button 1</button>
<button id="secondButton" class="flatBtn2" >Button 2</button>
<a id="thirdButton" href="#" class="flatBtn2">A 3</a>
</div>
</div>
First of all if you want to use button, then you should you the <button> tag and add the background image through css. You can also manipulate the states in css, what you are seacrhing for is :focus and :active, so you have two rules for your buttons. The normal button rule with the main background-image and an other rule button:focus, button:active where you can load an other image or do something else.
See fiddle for a working example. I added the needed styles at the end of your css.
Hope this helps!
Related
In my chat, I would like to have a text message displayed in the balloon for one button and an image from my gallery for the other button. The programming for the text works. How do I get this with the picture?
My HTML Code is this one:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm" >
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<img id="Bildverschicken" src="baseline_image_black_18dp.png">
<p>
<input type ="button" id="theButton" value="Nachricht absenden!"
onclick="document.getElementsByClassName('Chat_Bubble')[0].textContent=document.getElementById('textField').value"/>
</p>
<input type="button" id="Button_Bilder" value="Bild verschicken!"
onclick="document.getElementsByClassName('Chat_Bubble')[0].imageContent=document.getElementById('Bildverschicken').value"/>
<h3><div id="div"></div></h3>
</form>
</div>
Can someone help me? Thanks!
#charset "UTF-8";
.Webview{
height: 600px;
width: 380px;
}
.message_container{
height: 80%;
width: 100%;
border:5px solid green;
}
.Chat_Bubble{
box-sizing: border-box;
float: left;
width: auto;
max-width: 80%;
position: relative;
clear: both;
background: #95c2fd;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd));
background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
border: solid 1px rgba(0,0,0,0.5);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
margin-bottom: 20px;
padding: 6px 20px;
color: #000;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 5px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0,0,0,0.5);
bottom: 0px;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #bee2ff; /* arrow color */
bottom: 1px;
left: -5px;
}
.bubble-alt {
float: right;
}
.bubble-alt:before {
left: auto;
right: -7px;
}
.bubble-alt:after {
left: auto;
right: -5px;
}
.bubble p {
font-size: 1.4em;
}
}
.send_container{
height: 20;
width: 100%;
}
.send_container input{
width: 70%;
height:20%
border:2px solid #1CE615;
}
.send_container button{
width: 30%;
height:20%;
}
.send_container Button_Bilder{
width: 10%;
height:10% ;
}
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm" >
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<img id="Bildverschicken" src="baseline_image_black_18dp.png">
<p>
<input type ="button" id="theButton" value="Nachricht absenden!"
onclick="document.getElementsByClassName('Chat_Bubble')[0].textContent=document.getElementById('textField').value"/>
</p>
<input type="button" id="Button_Bilder" value="Bild verschicken!"
onclick="document.getElementsByClassName('Chat_Bubble')[0].imageContent=document.getElementById('Bildverschicken').value"/>
<h3><div id="div"></div></h3>
</form>
</div>
Okay here is the style sheet code: I want the ButtonTrans.png to be across each button on top auto fitting the size of the button.
.ButtonPanel {
position: absolute;
top: 0px;
left: 770px;
width: 500px;
height: 44px;
font-size: 12px;
font-weight: bold;
margin: 0px !important;
padding: 0px !important;
}
.functionbutton {
padding: 8px 4px;
margin: 6px 6px;
background: #3292aa;
background: -webkit-linear-gradient(top, #3292aa 0, #017795 100%);
background: linear-gradient(to bottom, #3292aa 0, #017795 100%);
border-color: #017795;
box-shadow: none;
color: #fff;
border-radius: 7px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.functionbutton:hover {
background: #33a3c0 !important;
background: -webkit-linear-gradient(top, #33a3c0 0, #038eb2 100%) !important;
background: linear-gradient(to bottom, #33a3c0 0, #038eb2 100%) !important;
box-shadow: none !important;
border-color: #038eb2 !important;
}
.toolbutton {
padding: 8px 4px;
margin: 6px 6px;
background: #f8f8f8;
background: -webkit-linear-gradient(top, #f8f8f8 0, #f2f2f2 100%);
background: linear-gradient(to bottom, #f8f8f8 0, #f2f2f2 100%);
border-color: #ccc;
box-shadow: 0 1px 0 0 #fff inset;
outline: 0;
border: 1px solid #ccc;
text-decoration: none;
border-radius: 7px;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
}
.toolbutton:hover {
background: #fdfdfd !important;
background: -webkit-linear-gradient(top, #fdfdfd 0, #fafafa 100%) !important;
background: linear-gradient(to bottom, #fdfdfd 0, #fafafa 100%) !important;
border-width: 1px !important;
border-style: solid !important;
}
And here is the HTML for the actual buttons within the page. I want the ButtonTrans.png to be the same size as each button and reside directly on top of the button to give the effect the button was clicked. I can not change any of the server side code currently so this will have to be the fix for now. I have attached a image of what I am looking for. I picture i have attached has style="postions:absolute;height:30px;width100px:" values added.
and idea of what I am trying to do
<asp:Panel ID="ButttonPanel" runat="server" CssClass="ButtonPanel">
<div class="toolbutton">
<label id="FlatPDFLbl">PDF</label>
<asp:ImageButton ID="FlatPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Flat PDF from Template" TabIndex="-1" OnClick="FlatPDFBtn_Click"></asp:ImageButton>
</div>
<div class="toolbutton">
<label id="FullPDFLbl">Fillable PDF</label>
<asp:ImageButton ID="FullPDFBtn" runat="server" runat="server" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Create Fillable PDF from Template" TabIndex="-1"
OnClick="FullPDFBtn_Click"></asp:ImageButton>
</div>
<div class="functionbutton">
<label id="SaveLbl">Save</label>
<asp:ImageButton ID="SaveBtn" CssClass="SaveBtn" runat="server" commandname="Launch" ImageUrl='<%# "App_Themes/" + Session["Theme"] + "/Images/ButtonTrans.png"%>' ToolTip="Save changes to this customer" TabIndex="-1" OnClick="SaveBtn_Click"></asp:ImageButton>
</div>
</asp:Panel>
I'm quite new to CSS and need some help make a mobile edge using CSS.
How can we draw the mobile device edge using CSS? This is what I have tried but unable to do so.
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 2px 2px #555555;
margin: 1px;
outline: #666666 solid 2px
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
This is what it should look like :
How do we do that?
I would double up on your box-shadow declaration instead of trying to wrangle outline:
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
width: 20%;
height: 40%;
font-size: 41px;
padding: 10px 20px 10px 20px;
border: solid #616161 1px;
text-decoration: none;
position: absolute;
box-shadow: 0px 0px 0px 1px #666666, 0px 2px 2px #555555;
margin: 1px;
}
.mobile:hover {
text-decoration: none;
}
<div class="mobile"></div>
The 0px 0px 0px 1px #666666 syntax gives the shadow zero blur and a 1px offset, essentially replicating a 1px stroke.
Try this one
*,
*:after,
*:before {
box-sizing: border-box;
}
.mobile {
background: #E0E0E0;
background-image: -webkit-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -moz-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -ms-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: -o-linear-gradient(top, #E0E0E0, #AEAEAE);
background-image: linear-gradient(to bottom, #E0E0E0, #AEAEAE);
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
text-shadow: 0px 0.5px 0px #fff;
font-family: Courier New;
color: #555555;
font-size: 41px;
border: solid #616161 1px;
text-decoration: none;
box-shadow: 0px 1px #555555;
margin: 1px;
display: flex;
}
.mobile:hover {
text-decoration: none;
}
<div style="width: 210px; height: 45px; border: solid #000 1px;" class="mobile">
<div style="width: 210px; height: 45px; border: solid #fff 1px; " class="mobile">
<div style="width: 200px; height: 40px;" class="mobile">
</div>
</div>
</div>
I am trying to make the background color of the div: content2 the same as that of div: sidebar. However the background color does not show for content2 but it does for sidebar.
Also i am trying to make the header and footer bars transparent but it does not seem to work.
This is my css code
body {
background-image: url('background.jpg');
background-size: 100% 100%;
padding: 0px 0px 0px 0px;
font-size: 13px;
position: relative;
min-height: 400px;
}
#footer {
float: left;
height: 20px;
width: 100%;
border: 1px solid black;
text-align: center;
padding: 30px 0px 20px 0px;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
background: linear-gradient(top, #A9A9A9, #7A7A7A);
background: -ms-linear-gradient(top, #A9A9A9, #7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
position:relative;
z-index:999;
//transparency
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
#content2 { //sign in page
background-color: #EEE;
float: left;
margin: 38px 20px 38px 200px;
height: 370px;
width: 550px;
border: 1px solid black;
padding: 15px;
padding-top: 20px;
font-size: 18px;
}
#sidebar {
background-color: #EEE;
float: left;
margin: 38px 200px 38px 20px;
height: 300px;
width: 250px;
border: 1px solid black;
padding: 15px;
}
#menucontainer{
width: 79.5%;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 6px 6px 4px 270px;
height: 60px;
line-height: 25px;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
background: linear-gradient(top, #A9A9A9, #7A7A7A);
background: -ms-linear-gradient(top, #A9A9A9, #7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
z-index:999;
}
#menu-bar {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
}
And this is my html code
<div id="menucontainer">
<ul id="menu-bar">
menu
</ul>
</div>
<div id="content2">
content 2
</div>
<div id="sidebar">
side bar
</div>
<div id="footer">
footer
</div>
</body>
Can anyone please help me with this? Thanks
It's because you used the // to comment a single line in CSS. You can just use the pair /* and */ to comment in CSS. So all the following CSS is discarded. Check this Demo
replace comment "//sign in page" with "/*sign in page */" .
add opacity in header and footer div #footer and #menucontainer
#menucontainer {
opacity: 0.5;
}
or change in background style code like this
#menucontainer {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(169, 169, 169, 0.8)), to(rgba(124, 124, 124, 0.8)));
background: -moz-linear-gradient(top, rgba(169, 169, 169, 0.8), rgba(124, 124, 124, 0.8) ); }
and for background in content 2 add background property in class #content2
#content2 {
float: left;
margin: 38px 20px 38px 200px;
height: 370px;
width: 550px;
border: 1px solid black;
padding: 15px;
padding-top: 20px;
font-size: 18px;
background: #ccc;
}
and delete those things from your code
//transparency
//sign in page
the // is valid only if you are writing and .scss file (sass), that's usually the comment syntax for javascript also.
the standard css comment syntax is /* your comment here */
It is working correctly.
But the thing is comments inside style tag should be done through this fashion /* -- */
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url('background.jpg');
background-size: 100% 100%;
padding: 0px 0px 0px 0px;
font-size: 13px;
position: relative;
min-height: 400px;
}
#footer {
float: left;
height: 20px;
width: 100%;
border: 1px solid black;
text-align: center;
padding: 30px 0px 20px 0px;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
background: linear-gradient(top, #A9A9A9, #7A7A7A);
background: -ms-linear-gradient(top, #A9A9A9, #7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
position:relative;
z-index:999;
/*transparency*/
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
#content2 {
background-color: #EEE;
float: left;
margin: 38px 20px 38px 200px;
height: 370px;
width: 550px;
border: 1px solid black;
padding: 15px;
padding-top: 20px;
font-size: 18px;
}
#sidebar {
background-color: #EEE;
float: left;
margin: 38px 200px 38px 20px;
height: 300px;
width: 250px;
border: 1px solid black;
padding: 15px;
}
#menucontainer{
width: 79.5%;
text-align: center;
margin: 0px 0px 0px 0px;
padding: 6px 6px 4px 270px;
height: 60px;
line-height: 25px;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
background: linear-gradient(top, #A9A9A9, #7A7A7A);
background: -ms-linear-gradient(top, #A9A9A9, #7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
z-index:999;
}
#menu-bar {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
}
</style>
</head>
<body>
<div id="menucontainer">
<ul id="menu-bar">
menu
</ul>
</div>
<div id="content2">
content 2
</div>
<div id="sidebar">
side bar
</div>
<div id="footer">
footer
</div>
</body>
</html>
JS Fiddle:
http://jsfiddle.net/zRS84/
How can I style an hr tag?
#footer hr
{
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
This doesn't work in firefox. I even tried background:, but that didn't work. Is there some other way to make it work?
Its working
you need to just use hr in div with your css id footer. As like below
<div id="footer">
<hr />
</div>
Try background: instead of background-image:
See here for a working example in Firefox:
http://playground.genelocklin.com/gradient-hr/
You need to specify the height of the <hr />
look this
Well, you could try making a div like so:
CSS:
div.hr{
background-image:url('yourimage.jpg');
height: 5px;
width: 400px; /*About the size of the content area that you are putting it in*/
margin-left: auto;
margin-right: auto;
}
HTML:
<div id="hr">
</div>
Have any questions?
EDIT:
With taking a look at Charlie's answers, you could try something like this:
<div id="footer">
<hr id="footer" />
</div>
#footer
{
height:10px;
background-color: black;
padding: 0px
}
.myhr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
hrshadow {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
/****************************/
Newhr {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
Newhr:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
.hrstyle {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
.hrstyle:after {
content: "ยง";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
/****dashed line *****/
.dash_hr {
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}