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/
Related
My question is this how do I make it work that the elements that are inside a div style=background-image work correctly when the screen gets smaller. In my case it seems that one of the elements inside the image box keeps the same height.
#main_article_box {
width: 728px;
height: 374px;
border: 1px solid #f8f8f8;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#main_article_text {
margin: 280px 3px 10px 3px;
height: 90px;
background: #ffffff;
border: 1px solid #f8f8f8;
background: #ffffff;
background: -moz-linear-gradient(#ffffff, #cccccc);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(1, #ffffff));
background: -webkit-linear-gradient(#ffffff, #cccccc);
background: -o-linear-gradient(#ffffff, #cccccc);
background: -ms-linear-gradient(#ffffff, #cccccc);
background: linear-gradient(#ffffff, #cccccc);
/*-moz-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow: 0 1px 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px #f8f8f8;
box-shadow: 0 1px 1px #f8f8f8;*/
opacity: 0.8;
filter: alpha(opacity=80);
}
#main_article_title {
font-size: 23px;
letter-spacing: -1px;
text-transform: uppercase;
text-shadow: #333;
font-weight: bold;
margin: 8px;
}
#main_article_short_text {
font-size: 14px;
width: 530px;
font-weight: bold;
margin: -2px 0 0 8px;
color: #333333;
}
#media only screen and (max-width: 460px) {
#main_article_box {
width: 100%;
height: auto;
}
#main_article_text {
width: 98%;
height: auto;
}
#main_article_title {
font-size: 16px;
}
#main_article_short_text {
font-size: 11px;
}
}
<div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg); no-repeat center; background-size: 100% auto; ">
<div id="main_article_text">
<div id="main_article_title">Main Article Title for this post
</div>
<div id="main_article_short_text">
<p>This is some intro text the article below title. This is some intro text the article below title.</p>...
</div>
</div>
</div>
I removed some styles only for me to understand the code. Is this solution correct for you?
.wrapper {
position:relative;
width:728px;
max-width:100%;
}
.wrapper:after {
content: ' ';
clear: both;
display: block;
}
#main_article_box {
float:left;
width:100%;
height:auto;
border:0 none;
padding-top:51.37%;
background-size:cover;
}
#main_article_text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 3px 3px 3px;
height: 90px;
background: #ffffff;
border: 1px solid #f8f8f8;
background: #ffffff;
background: -moz-linear-gradient(#ffffff, #cccccc);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cccccc),color-stop(1, #ffffff));
background: -webkit-linear-gradient(#ffffff, #cccccc);
background: -o-linear-gradient(#ffffff, #cccccc);
background: -ms-linear-gradient(#ffffff, #cccccc);
background: linear-gradient(#ffffff, #cccccc);
/*-moz-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow: 0 1px 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px #f8f8f8;
box-shadow: 0 1px 1px #f8f8f8;*/
opacity:0.8;
filter:alpha(opacity=80);
}
#main_article_title {
font-size: 23px;
letter-spacing: -1px;
text-transform:uppercase;
text-shadow: #333;
font-weight: bold;
margin: 8px;
}
#main_article_short_text {
font-size: 14px;
width: auto;
font-weight:bold;
margin: -2px 0 0 8px;
color: #333333;
}
#media only screen and (max-width: 460px) {
#main_article_box {
width: 100%;
height: auto;
}
#main_article_text {
width: 98%;
height: auto;
}
#main_article_title {
font-size: 16px;
}
#main_article_short_text {
font-size: 11px;
}
}
<div class="wrapper">
<div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg);">
<div id="main_article_text">
<div id="main_article_title">Main Article Title for this post</div>
<div id="main_article_short_text"><p>This is some intro text the article below title. This is some intro text the article below title. </p>...</div>
</div>
</div>
</div>
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!
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 building a departmental website and am running into a unique issue with my dock panel resizing incorrectly, but only with Chrome.
When I change the information inside the center of my dock panel to be something taller it expands correctly, but never resizes back down to fit shorter material. It works perfectly in firefox, IE and Spartan, but not in Chrome. It appears that it is setting the bottom-padding for the center instead of resizing the element.
Here's a link to 3 images on imgur that show the differences.
View post on imgur.com
Here's my code for creating the center container:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>
<g:HTMLPanel>
<g:DockPanel styleName="my-DockPanel">
<g:Dock direction="NORTH">
<g:HorizontalPanel width="750px" styleName="page-header">
<g:cell horizontalAlignment="ALIGN_LEFT">
<g:HTML>
</g:HTML>
</g:cell>
<g:cell horizontalAlignment="ALIGN_CENTER">
<g:Image url="Resources/Images/CSDepartment_Banner.gif" />
</g:cell>
</g:HorizontalPanel>
</g:Dock>
<g:Dock direction="SOUTH">
<g:HorizontalPanel styleName="page-footer">
<g:HTML>
</g:HTML>
<g:HTML>
<DIV align="center">
The Department of Computer Science
<br />
<br />
<br />
<br />
<br />
Last modified: July 1, 2015
<br />
<br />
</DIV>
</g:HTML>
<g:cell horizontalAlignment="ALIGN_RIGHT">
<g:HTML>
</g:HTML>
</g:cell>
</g:HorizontalPanel>
</g:Dock>
<g:Dock direction="EAST">
<g:VerticalPanel width="100%" height="100%">
</g:VerticalPanel>
</g:Dock>
<g:Dock direction="WEST">
<g:VerticalPanel width="100%" height="100%">
<g:Label>
</g:Label>
</g:VerticalPanel>
</g:Dock>
<g:Dock direction="NORTH">
<g:HorizontalPanel width="100%">
<g:cell horizontalAlignment="ALIGN_CENTER">
<g:MenuBar ui:field="navigationBar"></g:MenuBar>
</g:cell>
</g:HorizontalPanel>
</g:Dock>
<g:Dock direction="CENTER" width="1260px" height="100%">
<g:ScrollPanel height="auto">
<g:DeckPanel ui:field="deckPanel" height="100%">
</g:DeckPanel>
</g:ScrollPanel>
</g:Dock>
</g:DockPanel>
</g:HTMLPanel>
</ui:UiBinder>
And here's the CSS for the entire page:
#CHARSET "ISO-8859-1";
/**
* This file is linked through the index.html file
*/
body {
/*background-color: #CCCCCC !important;*/
background-color: #fff5ec;
font-family: "Garamond Premier Pro", "Myriad Pro", "Verdana",
"Times New Roman";
}
/*Adds a drop shadow at the top of the page and stays there.*/
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
z-index: 100;
}
.my-dockPanel {
margin: 0;
padding: 0;
}
.my-dockPanel {
margin: 0px;
padding: 0px;
}
.my-DockPanel td {
padding: 0px;
margin: 0px;
}
.my-DockPanel {
height: 100%;
width: 100%;
border-spacing: 0px;
font-color: white;
}
.page-footer {
height: auto;
width: 1260px;
background-color: #003366;
padding: 0px;
margin: auto;
color: #FFF;
}
.page-header {
height: 100px;
/* display: block; */
margin-left: auto;
margin-right: auto;
}
.blog-title {
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: #555555;
}
.blog-panel {
border-top: 1px solid black;
padding: 2px;
margin-bottom: 6px;
}
.my-ScrollPane {
width: auto;
padding: 0px 0px 0px 0px;
min-height: 641px;
}
.gwt-MenuBar {
cursor: default;
}
.gwt-MenuBar .gwt-MenuItem {
cursor: default;
}
.gwt-MenuBar .gwt-MenuItem-selected {
/* background: #666; */
background: #335685;
color: #0cf;
}
.gwt-MenuBar-horizontal {
/* background: #222222; */
background: #003366;
border-radius: 55px 55px 0px 0px;
-moz-border-radius: 55px 55px 0px 0px;
-webkit-border-radius: 55px 55px 0px 0px;
border: 1px solid #000000;
}
.gwt-MenuBar-horizontal .gwt-MenuItem {
padding: 0px 10px;
vertical-align: bottom;
font-weight: bold;
color: #E0E0E0;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator {
width: 1px;
padding: 0px;
margin: 0px;
border: 0px;
border-left: 1px solid #bec7cc;
background: #000;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
width: 1px;
height: 1px;
background: #000;
}
.gwt-MenuBar-vertical {
margin-top: -5px;
margin-left: 0px;
padding-left: 2px;
/* background: #4D4D4D; */ /*background: #194775;*/
background: #003366;
color: #E0E0E0;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
opacity: 0.9;
}
.gwt-MenuBar-vertical table {
border-collapse: collapse;
}
.gwt-MenuBar-vertical .gwt-MenuItem {
padding: 4px 14px 4px 1px;
}
.gwt-MenuBar-vertical .gwt-MenuItemSeparator {
padding: 2px 0px;
}
.gwt-MenuBar-vertical .gwt-MenuItemSeparator .menuSeparatorInner {
height: 1px;
padding: 0px;
border: 0px;
border-top: 1px solid #bec7cc;
background: #222;
overflow: hidden;
}
.gwt-MenuBar-vertical .subMenuIcon {
padding-right: 4px;
}
.gwt-MenuBar-vertical .subMenuIcon-selected {
/* background: #666; */
background: #335685;
}
.gwt-MenuBarPopup {
margin: 0px 0px 0px 3px;
}
.gwt-MenuBarPopup .menuPopupTopCenter {
background: url(images/hborder.png) 0px -12px repeat-x;
}
.gwt-MenuBarPopup .menuPopupBottomCenter {
background: url(images/hborder.png) 0px -13px repeat-x;
-background: url(images/hborder_ie6.png) 0px -13px repeat-x;
}
.gwt-MenuBarPopup .menuPopupMiddleLeft {
background: url(images/vborder.png) -12px 0px repeat-y;
-background: url(images/vborder_ie6.png) -12px 0px repeat-y;
}
.gwt-MenuBarPopup .menuPopupMiddleRight {
background: url(images/vborder.png) -13px 0px repeat-y;
-background: url(images/vborder_ie6.png) -13px 0px repeat-y;
}
.gwt-MenuBarPopup .menuPopupTopLeftInner {
width: 5px;
height: 5px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupTopRightInner {
width: 8px;
height: 5px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupBottomLeftInner {
width: 5px;
height: 8px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupBottomRightInner {
width: 8px;
height: 8px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupTopLeft {
background: url(images/corner.png) no-repeat 0px -36px;
-background: url(images/corner_ie6.png) no-repeat 0px -36px;
}
.gwt-MenuBarPopup .menuPopupTopRight {
background: url(images/corner.png) no-repeat -5px -36px;
-background: url(images/corner_ie6.png) no-repeat -5px -36px;
}
.gwt-MenuBarPopup .menuPopupBottomLeft {
background: url(images/corner.png) no-repeat 0px -41px;
-background: url(images/corner_ie6.png) no-repeat 0px -41px;
}
.gwt-MenuBarPopup .menuPopupBottomRight {
background: url(images/corner.png) no-repeat -5px -41px;
-background: url(images/corner_ie6.png) no-repeat -5px -41px;
}
* html .gwt-MenuBarPopup .menuPopupTopLeftInner {
width: 5px;
height: 5px;
overflow: hidden;
}
* html .gwt-MenuBarPopup .menuPopupTopRightInner {
width: 8px;
height: 5px;
overflow: hidden;
}
* html .gwt-MenuBarPopup .menuPopupBottomLeftInner {
width: 5px;
height: 8px;
overflow: hidden;
}
* html .gwt-MenuBarPopup .menuPopupBottomRightInner {
width: 8px;
height: 8px;
overflow: hidden;
}
.blog_image {
padding: 1px;
margin: 0px 20px 0px 20px;
border: 0px solid #021a40;
/* width:300px; */
/* height:auto; */
}
.staff-image {
padding: 1px;
margin: 0px 20px 0px 0px;
border: 0px solid #021a40;
width: auto;
height: 200px;
}
.staff-information {
width: 1260px;
height: 230px;
/* border: 20px solid #021a40; */ /* margin: 0px 0px 25px 0px; */
border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-top: 2px solid #000000;
border-left: 2px dashed #000000;
border-right: 2px dashed #000000;
}
.staff-information-west {
/* background-color: #000000; */
font-weight: bold;
margin-left: auto;
margin-right: auto;
width: 315px;
}
.staff-information-east {
margin-left: auto;
margin-right: auto;
width: 315px;
horizontal-align: left;
}
.featured-item-1 {
border-left: 3px solid #003366;
border-top: 3px solid #003366;
}
.featured-item-2 {
border-left: 3px solid #003366;
border-right: 3px solid #003366;
border-top: 3px solid #003366;
}
.featured-item-3 {
border-right: 3px solid #003366;
border-top: 3px solid #003366;
}
.featured-title {
width: 406px;
text-transform: uppercase;
padding-left: 10px;
}
.featured_image {
/* padding-left: 10px; */ /* margin: 0px 0px 0px 10px; */
width: 130px;
height: 130px;
-webkit-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
-moz-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
}
.featured-body {
width: 216px;
height: auto;
font-size: 15px;
padding-left: 15px;
}
.myButton {
-moz-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
box-shadow: inset 0px 1px 0px 0px #7a8eb9;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad
), color-stop(1, #5972a7));
background: -moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: -webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: -o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: -ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad',
endColorstr='#5972a7', GradientType=0);
background-color: #637aad;
border: 1px solid #314179;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 28px;
font-weight: bold;
padding: 32px 76px;
text-decoration: none;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7
), color-stop(1, #637aad));
background: -moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: -webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: -o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: -ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7',
endColorstr='#637aad', GradientType=0);
background-color: #5972a7;
}
.myButton:active {
position: relative;
top: 1px;
}
.html-clicked {
background: url("Resources/Images/Widgets/things.png") repeat scroll 0 0
transparent;
height: 68px;
list-style: none outside none;
margin: 0;
line-height: 63px;
padding-left: 25px;
color: #fff;
font-family: georgia;
font-weight: bold;
font-size: 13px;
cursor: pointer;
}
.html-unclicked {
background: url("Resources/Images/Widgets/things.png") repeat scroll 0
-66px transparent;
height: 68px;
list-style: none outside none;
margin: 0;
line-height: 63px;
padding-left: 25px;
color: #23438a;
font-family: georgia;
font-weight: bold;
font-size: 13px;
cursor: pointer;
}
This is the last major issue holding me back from pushing this to production (besides making new images). I've been chasing my tail on this one for 3 days now, and am finally giving up.
Ok, I got it working, but it caused another issue that I had to fix. The entire problem above had to do with my CSS for .my-DockPanel
Before:
.my-DockPanel {
height: 100%;
width: 100%;
border-spacing: 0px;
font-color: white;
}
After:
.my-DockPanel {
height: auto;
width: 100%;
border-spacing: 0px;
font-color: white;
}
This created a new issue with certain pages sliding to the left, but all I had to do was set their width to be static. Problem solved!
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;
}