Hi am trying to do the below design how can i add the below shape and add a content to it?
I have looked for a solution in the internet but cant find one.
Please see my code below
.q{
background: #f5f5f5;
padding: 20px;
border-radius: 30px;
moz-border-radius: 30px;
webkit-border-radius: 30px;
margin-bottom: 5px;
cursor: pointer;
}
.q:hover{
font-size: 25px;
box-shadow: 10px 5px 24px -6px rgb(84 172 235 / 72%);
-webkit-box-shadow: 10px 5px 24px -6px rgb(84 172 235 / 72%);
-moz-box-shadow: 10px 5px 24px -6px rgba(84,172,235,0.72);
background: #3c98cb;
color: #ffffff;
}
.blue{
}
.contentp {
display: none;
}
.q:hover .contentp {
display: block;
}
<div class="q">
<div class="blue">
Is it simple and easy to use?
</div>
<div class="contentp">
Webex is designed with a clean User Interface and emphasis on simplicity, based on how users collaborate today. It is optimised for high-quality video and audio, for a smooth, fast experience.
</div>
</div>
Related
I am trying to create a reusable div css class that I can use to highlight quotes in articles I am writing on my campaign website. When debugging in Visual Studio using Chrome (or Firefox) I get the desired result:
As you can see there is a silver border, but padding around it.
My CSS class is:
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: silver;
outline-width: 1px;
outline-offset: -10px;
text-align: center;
}
However, in Internet Explorer no padding on the border occurs. Seems like outline-offset is ignored.
Link to article on my website
How can I get a cross-browser class set up that will produce the desired result?
outline-offset is not supported in Internet Explorer.
You could use a combination of outline and border to achieve the same effect.
Here border is used for the silver line and outline is used for the white space surrounding the element.
body {
background: #fffacf;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: white;
outline-width: 10px;
text-align: center;
border: 1px solid silver;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Another option is to use box-shadow instead of border or outline. This allows you to have as many "borders" as you like.
body {
background: #e6e6e6;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
text-align: center;
margin: 30px 0;
box-shadow: 0 0 0 1px silver,
0 0 0 10px white;
}
.crazy-border {
margin: 50px 10px;
box-shadow: 0 0 0 2px red,
0 0 0 4px white,
0 0 0 6px orange,
0 0 0 8px white,
0 0 0 10px gold,
0 0 0 12px white,
0 0 0 14px green,
0 0 0 16px white,
0 0 0 18px blue,
0 0 0 20px white,
0 0 0 22px purple;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
<div class="articleQuote crazy-border">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Try nested divs.
HTML:
<div class="article-quote-outer">
<div class="article-quote-inner">
{text goes here}
</div>
</div>
CSS:
.article-quote-outer {
padding: 12px;
background-color: white;
}
.article-quote-inner {
border: 1px solid silver;
padding: 15px;
}
Example:
JSFIDDLE
If the desired result is no white space surrounding the silver border, delete the line:
outline-offset: -10px;
we are developing hybrid mobile application using dojo 1.10.3 .
all devices text field is coming UI is good except iPhone environment text field inside top portion unwanted property(black color border and shadow) coming that is not looking good.
In that input field we are not able to find it what is that exactly property
we are taking some input fields and adding css properties like below
.textbox{
margin: 0px auto 0px auto;
font-size: 12px;
font-weight: bold;
text-indent: 10px;
color: rgba(23, 82, 117, 1.0);
display: block;
width: 85%;
height: 34px;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
background-color: white !important;
outline: none !important;
-webkit-box-shadow: inset 0px 0px 0px 0px transparent;
-moz-box-shadow: inset 0px 0px 0px 0px transparent;
box-shadow: inset 0px 0px 0px 0px transparent;
}
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
and textfeild default css code in iphone.css like below
.mblTextBox {
height: 22px;
border-width: 1px;
border-style: inset;
font-family: Helvetica;
font-size: 13px;
border-color: #9cacc0;
border-radius: 5px;
}
i am attaching screen shots Please find my problem easily understand
we want like this
enter image description here
actual problem below like this
enter image description here
Try adding: -webkit-appearance: none; to all input elements in CSS.
The input below should appear the same on all browsers (including mobile Safari)
input[type=text] {
-webkit-appearance: none;
border: 1px solid black;
border-radius: 0px;
outline: none;
width: 200px;
margin: 0px;
padding: 4px;
}
<input type="text" />
Edit:
It seems that you're problem could also be solved via this way: https://davidwalsh.name/input-shadows-ipad
Edit 2:
I've tried the example below multiple times and it should definitely work. If not, you're using some CSS rules that might override one (or more) of the rules from the example.
Result on iPhone Simulator:
ul.examples {
list-style: none;
padding: 0px;
font-family: Arial;
}
.textbox {
margin: 5px 0px 10px 0px;
display: block;
width: 100%;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
outline: none !important;
}
.example:last-child .textbox {
-webkit-appearance: none;
color: red;
}
<ul class="examples">
<li class="example">Your example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
<li class="example">My example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
</ul>
I'd think this would be easy, so I am sure I am missing something simple.
I have a button I am trying to style on my website.
Here is the css used to style it.
button.popmake-contact-us {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 30px;
position: relative;
font-family: 'Special Elite', 'Inconsolata', 'Droid Sans', serif!important;
font-size: 20px;
background-color: rgb(247, 210, 104);
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
border-color: #EDE5B1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: -2px -2px 0px rgba(95, 91, 77, 0.13);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);}
.contact_popup_button {position: fixed;bottom: 0px;right: 0px;z-index: 9999;}
And this is the HTML for the button.
<footer>
<!--copyright info-->
<p class="footer-copyright">© Copyright 2015 | Sporting Life Bar . All Rights Reserved. </p>
<!--Form Submission Button-->
<div class="contact_popup_button" style="cursor: pointer;"><button class="popmake-contact-us" style="cursor: pointer;">Contact Us</button></div>
I can practice styling it within Chromes Inspeciton tools, but once I add it to the style.css file in the child theme..it goes back to the default style. I can't figure out WHY it is doing this!
The website in question I've got live on the staging site if you want to take a look at that. http://staging.sportinglifebar.com/
The button is kept at the very bottom right of the website. Praying someone can help point me in the correct direction!
If it is helpful, I am using the wordpress plugin "Popup Maker" to style the form and create to pop up. You have to define a class for the button to activate the popup.
You have a mistake in your selector
.popmake-contact-us input[type="button"] {
font-family: helvetica;
color: #666666;
font-size: 12px;
border:3px solid;
border-color: #000;
}
will look an input with type= button with a parent class of popmake-contact-us
So what you want is a button with a class
button.popmake-contact-us{ ..style..}
My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.
The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.
Here are some screencaps
Here is a link to the test page: testsite
And here is the code:
<?php include("includes/header.html");?>
<div id="content">
<div id="toolbar" class="dropshadow" style="background-color: #181818">
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
<hr noshade color = "#373737"/>
<ul>
<li>
<a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
<img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
<h3>Our Vehicles</h3>
</a>
</li>
<li>
<a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
<img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
<h3>Shipping</h3>
</a>
</li>
<li>
<a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
<img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
<h3>Financing</h3>
</a>
</li>
<li>
<a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
<img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
<h3>Insurance</h3>
</a>
</li>
<li>
<a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
<img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
<h3>Auto Locator</h3>
</a>
</li>
</ul>
</div>
<div id="searchbox" class="dropshadow">
</div>
<div id="advsearch" class="dropshadow">
</div>
<div id="links" class="dropshadow" style="background-color: #181818">
</div>
</div>
</div>
<div id="bannerads" class="dropshadow">
</div>
Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.
#charset "utf-8";
/* CSS Document */
#bannerads{
margin: 9px 0px 5px 6px;
float: left;
width: 728px;
height: 90px;
padding: 6px 128px;
background-color: #e9e7e4;
}
#toolbar{
float: left;
width: 984px;
height: 150px;
position: relative;
z-index: 1;
margin: 0px 6px 0px 6px;
background-color: #181818;
background-image: url(../images/toolbar.png);
background-position:right top;
background-repeat:no-repeat;
}
#toolbar hr{
float: left;
width: 600px;
margin: 4px 300px 0px 30px
}
#toolbar ul{
list-style:none;
padding:0;
}
#toolbar li{
float: left;
margin: 10px 0px 0px 31px;
}
#toolbar a{
color: #e9e7e4;
}
#toolbar a:hover{
color:#e9e7e4;
text-decoration:underline;
}
#searchbox{
float: left;
clear: both;
width: 446px;
height: 402px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#toolbar li h3{
color: #e9e7e4;
font-size: 13px;
margin-top: 4px;
margin-bottom: 10px;
text-align:center;
}
#advsearch{
float: left;
width: 446px;
height: 242px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#links{
float: left;
width: 446px;
height: 132px;
background-color: #181818;
margin: 8px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#arrow{
margin-left:-93px;
width: 68px;
height: 135px;
float: left;
position: relative;
}
.header1{
color: #e9e7e4;
font-size: 28px;
margin: 8px 0px 0px 30px;
float: left;
}
.header2{
color: #e9e7e4;
font-size: 16px;
float:left;
margin: 22px 0px 0px 220px;
}
#showinvheader{
color: #e9e7e4;
font-size: 14px;
margin-bottom: -2px;
text-align:center;
}
Lastly, here is the css sheet I'm using for compatibility with ie:
/* CSS Document */
.Navigation{
border: solid #181818 1px;
margin: -15px 5px 0px 5px;
}
.bigbox{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
.smallbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#banner{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#headerimg{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#contentbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads2{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#toolbar{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#featured{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#searchbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#advsearch{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#links{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.
If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.
Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php
Ok, sorry it took so long for me to write this...
The reason the code was malfunctioning was that a header tag didn't get closed.
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
So, if you're experiencing a similar problem make sure your tags are all closed.
I'm trying to make a header that goes outside the borders of my sidebar and has a shadow image that makes it look like it is a book-mark.
Something similar to this: http://inelmo.com/images/img2.png
Right now I tried my best, but it is not looking correct. here is my code for sidebar and header That I think should work to make this effect, but it isn't.
HTML
<!-- Sidebar -->
<aside id="sidebar">
<!-- header div -->
<div id="sideProfile">
<!-- Span with image background -->
<span id="sideHshadow"></span>
</div>
</aside>
CSS
#sidebar {
padding: 15px;
width: 400px;
}
/*Span with shadow image to make it look like a bookmark */
#SideHshadow {
height: 6px;
width: 12px;
margin: 0 0 -6px 0;
float: right;
background: url("../images/sidebar_header_shadow.png") no-repeat;
}
#sideProfile {
background:#333333;
border-bottom: 1px solid #2d2d2d;
height: 50px;
width: 400px;
margin: 0 -12px 0 0;
box-shadow: 0 1px 2px #77bee6;
-moz-box-shadow: 0 1px 2px #77bee6;
-webkit-box-shadow: 0 1px 2px #77bee6;
-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;
}
Anyone knows how to make it look like in example? Thnx
Here is the #sideHshadow background image file: http://inelmo.com/images/sidebar_header_shadow.png
Here's a pure CSS version: http://jsfiddle.net/bcZKh/2/
Code below:
<div id="list">
<div class="item selected">Nationwide Coverage Area</div>
<div class="shadow"></div>
</div>
body {margin:40px}
#list {width:200px;border-radius:8px;min-height:200px;background:#E6E5E0;padding:20px 0;position:relative}
.item {color:#fff;font-size:0.8em;line-height:24px;font-family:sans-serif;text-indent:24px;margin-right:-12px;margin-left:-12px;position:relative;z-index:1}
.item.selected {background:#C74312;border-radius:4px;border-bottom-left-radius:0}
.shadow {border-color:transparent #733411 transparent transparent;border-width:12px;border-style:solid;height:0;width:0;position:absolute;top:32px;left:-24px;z-index:0}