First question, so be forgiving if you can:
Using PHP I've created a site where users enter info and it is saved to database. Users then style each entry (font, size, color, and location). A string is saved into the database for each parameter, and then I use PHP to echo out a DIV with the custom styling:
echo "<div id=\"customized\"";
if(isset($backtype)){if($backtype == "image") {echo "style=\"background-image:url('".$backurl."');
background-repeat: no-repeat; background-size: 400px 200px\"";}}
if(isset($backtype)){if($backtype == "color"){echo "style=\"background-color:".$backcolor."\"";}}echo ">";
if($namepos !== ""){echo "<div id=\"".$namepos."\" style=\"font-family:".$namefont."; font-size:".$namesize."; color:".$namecolor.";\">".$name."</div>";}
After getting strings from database this becomes:
<div id="customized" style="background-image:url('raptor.gif'); background-repeat: no-repeat; background-size: 400px 200px ">
<div id="3_1" style="font-family:Courier New; font-size:20pt; color:#f80a8c;">Text here</div></div>
When this DIV is created all the inline styling works, but the location it display is supposed to be dictated by the $namepos, which echoes out "3_1".
I have an external CSS as follows
#customized {
border: 1px solid grey;
margin: 3px;
position: absolute;
top: 7%;
left: 1%;
width: 400px;
height: 200px;
}
#3_1{
position: absolute;
white-space: nowrap;
top:10%;
left:5%;
}
The final output completely ignores this CSS for the div that is produced by doing echo $namepos, but works perfectly fine for the containing div id=" customized".
I fear that I already know the answer and that it just doesn't work for the dynamically named DIV, but I'm an amateur and if this is true then it's a serious setback, so I come here hoping for a savior.
Any help would be greatly appreciated.
It was the DIV starting with a number, wouldve never figured that out. much thanks for speedy reply. will now sleep without debugging nightmares.
Related
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
I am still a novice and would appreciate any assistance you can provide.
I am trying to prevent an HTML table from exceeding the length of the page. I am currently parsing a csv with PHP and looping the array information into an HTML table.
The table is to be shown on a static 1080p screen so the table itself needs to resize by shrinking cells instead of going off the page horizontally or vertically. I dont mind how squashed the cells become as they are colour coded with CSS.
I have too many lines of code to post here so I will just post my CSS style code which I have attempted to use to contain my table.
<style>
html,body {
background-color: #F4F4F4
margin: 0;
padding: 0;
height: 100%;
border: 0;
}
table{
height:100%;
width:100%;
overflow: hidden;
white-space: nowrap;
}
td {
border: 1px solid black;
resize: both;
overflow: hidden;
}
th {
resize: both;
overflow: auto;
}
</style>
I have tried different variations of the above to no avail e.g. overflow settings, resize settings etc this is just my current test.
I do not care whether I have to use HTML, CSS, Javascript, JQuery or PHP for this. I would rather not have to completely start over however.
Try to include this for your tags:
td.wordbreak {
word-break: break-all;
width: NNNpx;
}
This should sort the problem of cells spiting out your table horizontally.
Replace the NNN by a number in pixels, that could be a fraction of the total you need.
So let's say you had only 2 columns, it would be:
table {
table-layout: fixed; width: 100%;
}
td
{
word-break: break-all;
width: 540px;
}
try to use
table {
table-layout: fixed;
width: 100%;
}
For more check Fixed Table Layouts.
Hope this will help.
I am using WAMP. I want to take background image URL from my database and want to show this in div class 'box'. I tried it by followed way but couldn't succeed. the last background image is appearing on each box while I want to show different images. Code I am using is
<?php
$feild_set = get_all_feilds();
while($feild = mysql_fetch_array($feild_set)) {
$url = $feild['background_image_url'];
echo "<style>
.box {
width: 300px ;
height: 100px;
background-image: $url;
background-visibility: visible;
border: 1px #00FF33;
margin-bottom: 10px;
display: inline-table;
margin-right: 10px;
}
</style>";
echo "<div class=\"box\">";
echo "<a href=\"content.php?feild=" . $feild['id'] . "\" ><block_holder>{$feild['menu_name']}</block_holder></a>";
echo "</div>";
}
?>
Thanx in advance
Try this:
<?php
echo "
<style>
.box {
width: 300px ;
height: 100px;
background-visibility: visible;
border: 1px #00FF33;
margin-bottom: 10px;
display: inline-table;
margin-right: 10px;
}
</style>";
$field_set = get_all_feilds();
while ($field = mysql_fetch_assoc($field_set)) {
echo '
<div class="box" style="background-image:'.htmlspecialchars($field['background_image_url']).';">
<a href="content.php?feild='.htmlspecialchars($field['id']).'">
<block_holder>'.htmlspecialchars($field['menu_name']).'</block_holder>
</a>
</div>';
}
?>
What have I done?
Placed the declaration of the .box CSS class outside the loop so it is only output once
Changed mysql_fetch_array() to mysql_fetch_assoc() as it is less confusing and more efficient
Removed the background-image: property from the .box class
Added a background-image: property to an inline style= attribute for each div and wrapped the URL of the image in url() (this has been undone as it seems the URLs are stored in the database with this already done
Passed data from the database through htmlspecialchars() before outputting it
Corrected the spelling of feild to field where it can be done without breaking the rest of your code
Some general indentation and quote tidying and readability fixes
As it was, your CSS .box class was declared more than once. Because of the cascading nature of CSS, only the values used in the last declaration would have been used - each declaration of a property overrides the last, which is why you were only seeing the last image. You also would not need to declare those details more than once - the whole idea of a class is that you can declare it once and use it multiple times. If you want element-specific properties, use IDs or inline styles (preferably IDs, but I have used inline styles here for simplicity).
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic
I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg
I'm pretty much done coding but the only thing I don't know how to do is the footer overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)
The footer is simply a div with nothing in it:
<div class="footer"></div>
And here's the stylesheet:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
margin-bottom: 20px;
}
I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.
div#footer {
position: absolute;
bottom: 0px;
z-index: 9001;
}
div#content {
position: relative;
}
Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.