I've been searching everywhere, how to make a html/css resonsive S shaped dotted line like this
So, far it has been the bain of my existence.
I'm trying to avoid SVG at all costs, althought i've also searched how to do it in SVG.
Can someone help me?
hr.style-seven {
height: 150px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 130px 0px 0px 0px;
border-top: 1px dashed #8c8c8c;
margin-right:130px;
}
hr.style-seven:before {
display: block;
content: "";
height: 150px;
margin-top: -151px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 0px 0px 130px 0px;
margin-left:130px;
margin-right:-130px;
border-bottom: 1px dashed #8c8c8c;
}
.box{ height: 500px; margin-top:200px;}
<body class="box">
<hr class="style-seven"/>
</body>
Demo
I find two html line break entries inserted between my div element and table elements. I don't know how to get rid of them. The unwanted space is labelled red in the attached screenshot.
My relevant table stylings are as follows:
table {
font-family: 'Arial';
margin: 25px auto;
border-collapse: collapse;
border: 1px solid #eee;
border-bottom: 2px solid #00cccc;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
.alt { background: #D0FFFF; color: #FFFFFF; }
table tr:hover {
background: #f4f4f4;
}
table tr:hover td {
color: #555;
}
table th, table td {
color: #5C5456;
border: 1px solid #eee;
font-size: 12px;
border-collapse: collapse;
}
table th {
background: #00cccc;
color: #fff;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
table th.last {
border-right: none;
}
Basically this is code I lifted elsewhere from the net as I'm not very knowledgeable with CSS yet.
My code has:
$dumpout .= "<div><p class=\"pi\">Dear ....</p></div>
<div><table>
<thead>
<tr>
{the rest of the stuff} ";
So clearly I do not have line breaks in the code. How can I get rid of this space?
Also what code can make the table expand and fill out the entire width of the screen as opposed to the little middle section? Please note, even though I display in browser to troubleshoot, the final output is being sent in an email.
Remove the lines saying and you will be done
- <body>
+ <div>
- <div>
<br>
<br>
- <table>
+ <thead>
In this code you are using break tags which causes for new line. Just remove tags and it will be fine
I have a page here:
http://www.simplypsychics.com/psychicprofile.php?pin=4439
and at the bottom I am using buttons. But my site has a standard button style which I use in the following way:
View all our great psychics
The CSS applied to it is this:
.placementtext_button {
background-color: #9a3ba8;
background-image:url(headerbuttons2.jpg);
border-radius:5px;
margin: 10px 10px 10px 10px;
color:#5c5c5a;
font-family:"Century Gothic", sans-serif !important;
font-size:14px !important;
padding:8px !important;
vertical-align: top;
line-height:33px;
text-align:center;
text-decoration:none;
-webkit-text-size-adjust:none;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
}
.placementtext_button:hover {
background-color: #494949;
background-image:url(headerbuttons2.jpg);
border-radius:5px;
margin: 10px 10px 10px 10px;
color:#f8c7ff;
font-family:"Century Gothic", sans-serif !important;
font-size:14px !important;
padding:8px !important;
vertical-align: top;
line-height:33px;
text-align:center;
text-decoration:none;
-webkit-text-size-adjust:none;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
}
but my PHP buttons look completely different. See this image to explain:
http://i61.tinypic.com/102jck1.jpg
and I tried to modify the CSS to appear the same but it isn't working.
Does anyone know where I am going wrong?
This is the CSS for the button:
form input[type="submit"] {
background-color: #9a3ba8;
border-radius: 5px;
margin: 10px 10px 10px 10px;
color: #5c5c5a;
font-family: "Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif !important;
font-size: 14px !important;
padding: 8px !important;
vertical-align: top;
line-height: 33px;
text-align: center;
text-decoration: none !important;
-webkit-text-size-adjust: none;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
}
Try this:
form input[type="submit"] {
background-color: #9a3ba8;
border-radius: 5px;
margin: 10px 10px 10px 10px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif !important;
font-size: 14px !important;
padding: 0px !important;
vertical-align: top;
line-height: 33px;
text-align: center;
text-decoration: none !important;
-webkit-text-size-adjust: none;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
letter-spacing: -1px;
font-weight: bold;
color: #ffffff;
border: none;
}
ssergei's on the right track. The key, in this case, is border: none;.
This could also all be consolidated a lot more; there's no need to repeat styles that aren't changing during a hover state. And, if possible, it's best to style similarly styled selectors together (separated by commas) to keep your code cleaner and smaller.
.placementtext_button,
form input[type="submit"] {
background-color: #9a3ba8;
border-radius: 5px;
border: none;
margin: 10px 10px 10px 10px;
color: #ffffff;
font-family: "Century Gothic", CenturyGothic, AppleGothic, 'Muli', sans-serif !important;
font-size: 14px !important;
padding: 8px !important;
vertical-align: top;
line-height: 33px;
text-align: center;
text-decoration: none !important;
-webkit-text-size-adjust: none;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);
}
.placementtext_button:hover,
form input[type="submit"]:hover {
background-color: #494949;
color:#f8c7ff;
}
how to get the notification number badge in ajax like Facebook. cant post a picture here but i think people know what am i talking about. its like when you log in to Facebook, if you have new messages you will get a little number on the top right corner of the icons next to search bar. i'm currently found this piece of code in charge of creating that number but i cant go any further from that. here is the code i found.
<span class="jewelCount" id="notificationsCountWrapper">
<span id="notificationsCountValue">1</span>
<i class="accessible_elem"> Notifications</i>
</span>
You want something like that?
Here is the css & jquery solution, if you like. DEMO http://jsfiddle.net/yeyene/DfSda/1/
Add <span class="ballons"></span> inside your button, and replace the dynamic count value.
.ballons {
float:right;
margin:-20px 8px 0 0;
line-height:30px;
padding:0 10px;
border-radius: 30px;
border:3px solid #fff;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
background:red;
color:#fff;
text-align:center;
-moz-box-shadow: 1px 1px 3px 3px #ccc;
-webkit-box-shadow: 1px 1px 3px 3px #ccc;
box-shadow: 1px 1px 3px 3px #ccc;
}
i have a gamimng section on my site that allow the user to display a quick status of their stats using colors (blue, red, and green).
i want to generate something like this based per user. i have this so far:
<style>
.box2 {
height: 20px;
background: blue;
float:left;
width:120px;
}
.box3 {
height: 20px;
background: green;
float:left;
width:30px;
}
.box1 {
height: 20px;
background: red;
float:left;
width:140px;
}
</style>
<div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
should i put the css directly in the page? what will be the best way to implement this using php?
You can always use a generated file using PHP and include it as your CSS file like:
<link rel="stylesheet" type="text/css" href="/css/userstats.php" />
Then in this file you can use the current session to find out the user stats then generate using PHP. Don't forget the put the header:
header("Content-type: text/css");
Example php:
background: #<?php echo $colorX; ?>; // assuming the $colorX is HEX
You can also if you prefer use .htaccess to rewrite the file so it looks less obvious like:
RewriteEngine On
RewriteBase /
RewriteRule ^css/userstats.css$ /path/to/generatedfile.php [L,NC]
So you can use:
<link rel="stylesheet" type="text/css" href="css/userstats.css" />
example code:
<style>
div.bar {
height: 25px;
}
div.bar div {
display: block;
float:left;
height: 25px;
margin: 0;
padding: 0;
position: relative;
}
div.bar div.red {
background: #DD3030;
-webkit-box-shadow: -5px 0px 8px 2px #DD3030;
-moz-box-shadow: -5px 0px 8px 2px #DD3030;
box-shadow: -5px 0px 8px 2px #DD3030;
width:140px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
z-index:10;
}
div.bar div.blue {
background: #3388DD;
-webkit-box-shadow: 0px 0px 8px 2px #3388DD;
-moz-box-shadow: 0px 0px 8px 2px #3388DD;
box-shadow: 0px 0px 8px 2px #3388DD;
width:120px;
z-index:5;
}
div.bar div.green {
background: #1CAD32;
-webkit-box-shadow: 5px 0px 8px 2px #1CAD32;
-moz-box-shadow: 5px 0px 8px 2px #1CAD32;
box-shadow: 5px 0px 8px 2px #1CAD32;
width:30px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 8px 8px 0px;
border-radius: 0px 8px 8px 0px;
z-index:10;
}
</style>
<div class="bar">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
jsfiddle: http://jsfiddle.net/g9Vrx/
If the colors are fully customizable, then the best way is to either generate the CSS each time the page loads per user, or generate it once when the user changes the colors in his preferences, and store it in a cache or db. Then just extract it and use it.
Again, if the colors are fully customizable (not like a couple of predefined colors) you should include the CSS in the HTML page since modifying external CSS files with PHP is rather complicated and unnecessary.