I would like to add a border style of white to the bottom of td-fault table only.
My CSS CODE:
background, body{
background-color: black;
}
table-eng, p{
width: 650%;
font-size: 15pt;
color: #ffffff;
border-bottom-style: none;
}
table-cust, tr{
font-size: 13pt;
color: #4CBB17;
}
td-fault, td{
font-size: 11pt;
color: #ffffff;
border-bottom: 1px solid white;
}
Here is my HTML/PHP:
<html>
<link href="../css/job-board.css" rel="stylesheet">
<div id="backgroud">
<body>
<table>
<td>
<?php
include('connectionDB.php');
$sql = "SELECT * FROM [Support_DB].[dbo].['Job info$'] WHERE [Job Completed?]= 0 AND [Attended by]='James'";
$stmt = $conn->prepare($sql);
$stmt->execute();
$results=$stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<div id='table-eng'>
<table>
<tr>
<th>
<p>James</p>
</th>
</tr>
</table>
</div>
<?php foreach ($results as $row) {
echo "<div id='table-cust'>";
echo"<table>";
echo"<tr>";
echo"<th align='left'>";
echo $row['Customer'];
echo"</th>";
echo"<th>";
echo $row['Job Number'];
echo"</th>";
echo"</tr>";
echo"<tr>";
echo"</div>";
//echo"<div id='td-fault'>";
echo"<td class='td-fault'>";
echo wordwrap($row['Fault'],85,"<br>\n",TRUE);
echo"</td>";
echo"</tr>";
//echo"</div>";
echo"</table>";
//echo"</div>";
//echo"</div>";
}?>
The company Name and job number need to be in white if possible on a continuous line so looks smoother as I nearly had it how I wanted it but I mucked up and couldn't get it correct again.
The reason is because you're missing the . for td-fault in your CSS.
Try the following:
.td-fault {
font-size: 11pt;
color: #ffffff;
border-bottom: 1px solid white;
}
Also table-eng and table-cust is missing # like so
#table-eng and #table-cust
Related
I have a table in html that when hovering over it shows a text.The displayed text has no design, how can I apply some css?
<center>
<div id="container">
<table class="map">
<?php
for ($i=1; $i < 101; $i++) {
echo "</tr>";
for ($j=1; $j < 100 ; $j++) {
$prueba = $i .":".$j;
if ($prueba == '50:50') {
echo "<td onmouseover='' style='cursor: pointer; background-color:#FF0000' title='title css' id=$prueba></td>";
}else{
echo "<td id=$prueba></td>";
}
}
}
?>
</table>
</div>
</center>
<script>
$(document).ready(function(){
$('tr').mouseover(function(){
var valueOfTd = $(this).find('td:first-child').text();
alert(valueOfTd);
});
});
</script>
Image:
http://prntscr.com/vz8dyg
I would like to make the letters bigger, in bold etc.
Thanks!!!
Hi Andoni,
Unfortunately the attribute that triggers the Tool Tip Text on the browser it is hard to customize(title attribute), I can even dare to believe that is not possible to style it, since the way it gets displayed varies from browser to browser, hence, it makes it difficult to display nice looking styling to it, However, you could get use of the pseudo codes such as data-* to create your own style based on that. You will have to feed this pseudo attribute with your php variables or token but here I am posting an example of how to achieve this by using these pseudo custom attributes. I certainly hope this helps with your case, pal!
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.7s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #1C2833;
color: #F4D03F;
font-size: 110%;
position: absolute;
padding: 5px;
bottom: -1.6em;
left: 95%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
border-radius: 10%;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.custom-td {
cursor: pointer;
background-color:#FF0000;
padding: 7px;
color:#FBFCFC;
width:60%;
text-align:center;
font-family:'verdana'
}
<center>
<div id="container">
<table class="map">
<tr>
<td class="custom-td" data-title="title css">Testing this script on stack<b>overFlow</b>
</td>
</tr>
</table>
</div>
</center>
I am having trouble formatting the position of my Nav. I just finished up a basic web-development course and am messing around on my own now (the code is NOT perfect).
I'm sort of trying to format the home page after another site, learning different ways of doing stuff, but I'm having trouble with my Nav1/Nav2 sections. I can't get them to have 0 spacing between the left edge of the page. I formatted everything with a min/max width so to expands nicely when I change the width of the page, but can't for the life of me get it to butt up to the left of the page.
Any help would be great.
Not sure how much to post on here but I'll put most everything I guess.
Here is the site: My Test Page
Index Page:
<?php
include ('top.php');
?>
<main>
<article class="indexIMGArea">
<figure>
<img class="indexIMG" alt="Site Logo" src="pictures/index-e-sports-betting.jpg">
</figure>
<h2>FIRST TIME USER?</h2>
<Table>
<tr>
<th>LIVE GAMES</th>
<th>MATCH DETAILS</th>
<th>CHAMPION ANALYTICS</th>
</tr>
<tr>
<td>Check out stats for your games</td>
<td>Find out the best builds</td>
<td>Add depth to your knowledge</td>
</tr>
<tr>
<td><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></td>
</tr>
</Table>
</article>
</main>
<?php
include ('footer.php');
?>
</body>
</html>
CSS:
html {
background-color: #1f8ecd;
}
body{
padding: 0px;
margin: 0px;
}
/* ========================= Start of Index ==================================*/
.indexIMGArea{
position: relative;
width: 1080px;
margin: 0 auto;
padding: 10px;
}
.indexIMG{
display: block;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.siteLogo{
max-height: 25px;
}
#index table{
width: 900px;
height: 300px;
margin: auto;
background-color: whitesmoke;
text-align: center;
}
/* ========================= End of Index ====================================*/
/* ========================= Start of Nav ====================================*/
.nav1{
margin: auto;
max-width: 1300px;
min-width: 1080px;
margin-bottom: -25px;
font-size: 1.5em;
padding: 0px;
}
.nav2{
background-color: #1d2e51;
text-align: left;
width: 100%;
font-size: 1.5em;
height: 40px;
margin-bottom:10px;
padding: 0px;
}
nav ol li{
display: inline-block;
list-style-type: none;
padding: 5px;
text-align: left;
width: max-content;
}
.navContainer1, .navContainer2{
margin:auto;
min-width: 1080px;
max-width: 1300px;
}
nav a:link, nav a:visited{
text-decoration: none;
padding: 5px;
}
.navTop a:link, .navTopRight a:link, .navTop a:visited, .navTopRight a:visited{
color: whitesmoke;
}
.navBot :link, .navBot a:visited{
color: #1f8ecd;
}
.navBot li:hover{
color:whitesmoke;
border-bottom: 3px solid whitesmoke;
}
.activePage{
border-bottom: 3px solid whitesmoke;
}
.navTop{
float: left;
}
.navTopRight{
float: right;
}
.navContainer1::after{
content: "";
clear:both;
display:table;
}
/* ========================= End of Nav ======================================*/
/* ======================== Start of Footer ================================*/
footer{
font-size: 0.8em;
padding: 2em;
text-align: end;
}
/* ======================== End of Footer ==================================*/
Nav1:
<nav class="nav1">
<div class="navContainer1">
<ol class="navTop">
<li><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ol>
<ol class="navTopRight">
<li><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></li>
</ol>
</div>
</nav>
Nav2:
<nav class="nav2">
<div class="navContainer2">
<ol class="navBot">
<?php
print '<li class="';
if ($path_parts['filename'] == "index") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
print '<li class="';
if ($path_parts['filename'] == "home") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
print '<li class="';
if ($path_parts['filename'] == "home") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
print '<li class="';
if ($path_parts['filename'] == "home") {
print ' activePage ';
}
print '">';
print 'Home';
print '</li>';
?>
</ol>
</div>
</nav>
Top:
<?php
$phpSelf = htmlentities($_SERVER['PHP_SELF'], ENT_QUOTES, "UTF-8");
$path_parts = pathinfo($phpSelf);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test eSports Site</title>
<meta charset="utf-8">
<meta name="description" content="Test page for a potential eSports site">
<meta name="keywords" content="eSports">
<meta name="author" content="John DeMarche">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../appleBottomedJeans/css/custom.css" type="text/css" media="screen">
<?php
$debug = false;
$domain = '//';
$server = htmlentities($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8');
$domain .= $server;
if ($debug) {
print '<p>php Self: ' . $phpSelf;
print '<pdomain: ' . $domain;
print '<p>Path Parts<pre>';
print_r($path_parts);
print '</pre></p>';
}
?>
</head>
<?php
print '<body id="' . $path_parts['filename'] . '">' . PHP_EOL;
include ('nav1.php');
print PHP_EOL;
include ('nav2.php');
print PHP_EOL;
if ($debug) {
print '<p>DEBUG MODE IS ON</p>';
}
print "<!-- End of top.php -->";
?>
I am not 100% sure I understand your problem. But, If I do, you want your Nav to be as close as possible to the left edge of the window.
So, what you currently have is this :
You have a space (in green in the picture) cause by the ol which usually let a place to the numeration (1. 2. 3. 4. ...). To remove the place, you simply have to add a paddling-left: 0 to your ol.navTop in css. You can do the same with your ol.NavBot which will result with this :
I hope it helped you!
By css tried me text-align: right
Or tar
dir = "rtl"
Pal css
Just force her
So
text-align: right! important;
! important This forces the application of the style
I've been fiddling with this for 2 days, and can't seem to get it right. So thought I would ask for a resolution here. (I'm not a css expert and that is where the problem lies.)
So I have the following code:
<table class="demo">
<tr>
<th style="background:#FFFFFF;border:0px solid #FFFFFF;" WIDTH="140">
<img src="https://xxxxxxxxxx.com/images/genesys_logo_1.png" border="0"><BR><BR>
</th>
<th>
<form method="post" action="https://xxxxxxxxxx.com<?php echo $thisPage; ?>" onsubmit="return mysubmit(this);">
<input type="hidden" name="primary" value="<?php echo array_values($p_key)[$i]; ?>">
<input type="hidden" name="archived" value="y">
<input style="float: left; display: block;margin: 42px 0px 0px -1px ;!important;" type="submit" VALUE="✄"/>
</form>
<span style="font-size: 16px; !important;"><?php if(array_values($link_kt)[$i]!="") {?><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?><?php } ?></SPAN>
<BR>
<span style="font-size: 11px; text-align: middle; !important;">PID: <?php if(array_values($link_oa)[$i]!="") {?><?php } ?><?php echo array_values($pid)[$i]; ?><?php if(array_values($link_oa)[$i]!="") {?><?php } ?></span>
<form action="<?php echo $linkUpdate; ?>" method="post">
<input style="float: right; display: block;margin: 6px -1px 0px 0px ;!important;" type="submit" value="✎ " />
</form>
</th>
</tr>
</table>
And the following css:
.demo {
width:100%;
border:0px solid #333333;
border-bottom: 1px solid #333333;
border-spacing:0px;
padding:3px;
border-collapse: collapse;
}
.demo th {
min-width:160px;
max-width:160px;
border:1px solid #333333;
padding:3px;
background:#999999;
font-family: 'Helvetica Neue', sans-serif;
font-size: 14px;
}
It displays the cell like this: Notice the 2 lines of text (in spans above) are NOT centered ... and it is driving me crazy !
I want everything to stay in place when resizing the screen. Right now the buttons are behaving perfectly but I cannot for the life of me get the text to stay centered.
Thoughts ?
I think this is the span that need to be centered
<span style="font-size: 16px; !important;"><?php if(array_values($link_kt)[$i]!="") {?><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?><?php } ?></SPAN>
<BR>
<span style="font-size: 11px; text-align: middle; !important;">PID: <?php if(array_values($link_oa)[$i]!="") {?><?php } ?><?php echo array_values($pid)[$i]; ?><?php if(array_values($link_oa)[$i]!="") {?><?php } ?></span>
For making it centered give both the span a fixed width and margin:0 auto
For example if you want the width for the 1st span to be 1060px then in style add width and margin as:
<span style="font-size: 16px; width:1060px; margin:0 auto;"><?php if(array_values($link_kt)[$i]!="") {?><?php } ?><?php echo $cust_name[$i]; ?><?php if(array_values($link_kt)[$i]!="") {?><?php } ?></SPAN>
I hope this is what you are looking for:)
Not sure what your problem is, but two points which might help:
1.) It's text-align: center , not text-align: middle like in your code (for horizontal centering)
2.) A span is an inline element. To center something inside a span therefore doesn't do anything. You have to center the span inside it's parent, so in this case the table cell around it has to have text-align: center (or in your case actually the th - maybe you should insert a td here in case that doesn't work)
I have the following issue.
I have 2 sets of checkboxes with a title for each. That title is supposed to have a grey background, then the checkboxes area should have no color in the background.
The issue is that if I put only 1 set of checkboxes with its title, the backgrounds work good.
However, when I put the 2nd set of checkboxes, the checkboxes area of the 1st set has a grey background and seems to be inheriting the bg of the title of the 2nd set.
Here is the code. Any clue?
Thanks!
<div class="bgFilterTitles">
<h1 class="filterTitles">COLOR</h1>
</div>
<div class="boxes">
<?php
$colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC");
$colors ->execute();
while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'> ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>
<div class="bgFilterTitles">
<h1 class="filterTitles">PRICE</h1>
</div>
<div class="boxes">
<?php
$prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC");
$prices ->execute();
while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='price' value='".$priceSort[price]."' /><font class='similarItemsText'> ".$priceSort[price]."</font><br />";
}
?>
</div>
Here are the CSSs used:
.boxes {
width: 160px;
float: left;
padding: 10px;
border: 1px solid #C6C6C6;
clear: both;
}
.filterTitles
{
background-color: #F1F1F1;
font-family: Arial,Helvetica,Verdana,Sans-serif;
font-size: 11px;
font-weight: normal;
color: #333;
text-transform: uppercase;
padding: 4px;
border: 1px;
border-color: #C6C6C6;
border-top-style: dotted;
}
I'm not sure if I understood the problem correctly, is this what you were trying to do?
http://jsfiddle.net/mdLVG/
In that case you need to add clear:both; to your .filterTitles CSS class.
Hey, I want to add a likebox beside my header tag (h2) and keep it on the same line. So it appears like: This is the Title LikeBox
However what is happening is the likebox is going starting on a new line like this:
This is the Title
LikeBox
Is there anyone willing to help me with this? If it's possible?
My css is :
.post-details h2 {
border-bottom: 1px solid #E1E1E1;
font-size: 16px;
margin: 0 0 0 0;
padding: 0 0 5px 0;
font-weight: bold;
}
and html code is:
<h2><?php the_title(); ?><h2>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" layout="button_count" show_faces="true" width="50" rel="nofollow"></fb:like>
Thanks for your time.
#jonny h1,h2,h3,<p> they all takes 100% width automatically . So, you have to given float to your h2 tag
.post-details h2 {
float:left;
border-bottom: 1px solid #E1E1E1;
font-size: 16px;
margin: 0 0 0 0;
padding: 0 0 5px 0;
font-weight: bold;
}
#fb-root {
float:right;
}
Use this instead:
<div id="fb-root">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" layout="button_count" show_faces="true" width="50" rel="nofollow"></fb:like>
</div>
<h2><?php the_title(); ?></h2>
Then in your CSS, add:
#fb-root {
float: right;
}