I'm getting link address from db and it's showing on a div box with html h3 tag which class name is .images. This css class images width is 210px. But unfortunately this link address is going to outside the box.. It's should be within the box. Could you tell me what is the wrong in my css code ?
Css code:
.images{
max-width:210px;
float:left;
position:relative;
margin:15px 30px 15px 0;
border:0px #000 solid;
}
.images h3 a{width:210px !important; height:auto;}
.images img{
margin:0;
padding:5px;
border:1px #ccc solid;
}
pho code:
while($res = mysql_fetch_array($iamges)){
echo "<div class='images'>";
$image = $res['image'];
$directory = "galary_images/";
$link = inputvalid($res['link']);
echo "<h3><a href='$link' target='_new'>$link</a></h3>";
if(empty($link))
{
echo "<img src='$directory/$image'>";
}
else
{
echo "<a href='$link' target='_new'><img src='$directory/$image'></a>";
}
echo "</div>";
}
Since the link has no spaces in between, they cannot be broken into seperate lines. you can use code like this :
$link = "long link";
<a href = "long link">echo (strlen()<=10)?$link:substr($link, 0 ,7)."...";
</a>
Say link is http://stackoverflow.com/questions/20198005/text-is-going-to-outside-of-box-css-issue,
it will display something like this : http://stackoverflow.com on the name of the link but will send you to the same place.
Have you tried setting an
overflow:hidden
in your css for .images?
Related
How can I get a opacity background box without causing my other div boxes to go transparent. Here is the code I am using to get my opacity box around the current boxes on the page but the code causes all div boxes to become transparent. How can I fix this issue.
<style>
#background
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
</style>
<div id="background">
<?php
require "../login/config.php";
$host='';
$db = '';
$dbuser = '';
$dbpass = '';
$conn = mysql_connect($host, $dbuser, $dbpass,$db);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('');
if(isset($_POST['submit'])) {
$name=$_POST["element_1"];
$stdatemm=$_POST["element_2_1"];
$stdatedd=$_POST["element_2_2"];
$stdateyy=$_POST["element_2_3"];
$endatemm=$_POST["element_3_1"];
$endatedd=$_POST["element_3_2"];
$endateyy=$_POST["element_3_3"];
$staddr=$_POST["element_4_1"];
$addr2=$_POST["element_4_2"];
$city=$_POST["element_4_3"];
$state=$_POST["element_4_4"];
$zip=$_POST["element_4_5"];
$desc=$_POST["element_5"];
//$file=$_FILES['element_6'];
$link=$_POST["element_7"];
$stdate=$stdatemm."/".$stdatedd."/".$stdateyy;
$endate=$endatemm."/".$endatedd."/".$endateyy;
$user=$_POST["postuser"];
if(($_FILES['element_6']['size']) > '0') {
$fileName = $_FILES['element_6']['name'];
$tmpName = $_FILES['element_6']['tmp_name'];
$fileSize = $_FILES['element_6']['size'];
$fileType = $_FILES['element_6']['type'];
if($fileName != "")
{
if(move_uploaded_file ($tmpName, '../login/image/'.$fileName))//image is a folder in which you will save image
{
$query = "INSERT INTO MOdeals (fname,stdate,endate,addr1,addr2,city,state,zip,name,size,type,content,link,description,user) VALUES('" . mysql_real_escape_string($name) . "','$stdate','$endate','" . mysql_real_escape_string($staddr) . "','" . mysql_real_escape_string($addr2) . "','$city','$state','$zip','" . mysql_real_escape_string($fileName) . "','$fileSize','$fileType','" . mysql_real_escape_string($content) . "','$_POST[element_7]','" . mysql_real_escape_string($desc) . "','$user')";
} } } else
$query = "INSERT INTO MOdeals (fname,stdate,endate,addr1,addr2,city,state,zip,name,size,type,content,link,description,user) VALUES('" . mysql_real_escape_string($name) . "','$stdate','$endate','" . mysql_real_escape_string($staddr) . "','" . mysql_real_escape_string($addr2) . "','$city','$state','$zip',' ','0',' ',' ','$_POST[element_7]','" . mysql_real_escape_string($desc) . "','$user')";
$q2=mysql_query($query) or die('Error, query failed'. mysql_error());
if($q2) {
echo ""; } else {
echo "error";
}
}
//mysql_set_charset("UTF8");
$result = mysql_query("SELECT * FROM MOdeals ORDER BY stdate DESC");
$data = mysql_query("SELECT stdate FROM MOdeals ORDER BY id ASC");
$y=1;
$result2 = mysql_real_escape_string($result);
echo "<div id='left' style='min-height:700px;margin-top: 2px;'><table style='-moz-border-radius: 15px;border-radius: 15px;border-bottom:1px solid gray;background-color:white;float: left;text-align: left;margin: auto;width: 75%;'><tr style='font-weight:bold;'><td></td> <td>Title</td><td>Start Date</td><td>City</td></tr>";
//header('Content-type: text/html; charset=utf-8');
//print_r(mysql_fetch_array($result));
while($row = mysql_fetch_array($result))
{
$abcd = $row['fname'];
echo "<tr><td><img src='../login/image/".$row['name']."'style='width: 145px;height: 154px;'></td>";
echo '<td><form action="deals.php" method="get" style="margin:0px;"><input type="hidden" value="';
echo $abcd;
echo '" name="name"><input type="submit" style="background-color: white;border: none;color: #FF0000;text-decoration: underline;" name="submit2" value="';
echo $abcd;
echo '"></form><br/>';
echo "</td><td>".$row['stdate']."</td>";
echo "</td><td>".$row['city']."</td></tr>";
$y++;
}
echo "</table></div>";
echo "<div id='right' style='margin-top: -695px;-moz-border-radius: 15px;border-radius: 15px;background-color:white;height:49px;'><div style = 'margin-top: -95px;margin-left: -85px;margin-right: -85px;'><p><div class='center'>
<img src='../../pictures/addeals.jpg' width='100%' height='100%'>
</div></div></div>";
echo "<div id='right2' style='margin-top: -455px;margin-bottom: -455px;-moz-border-radius: 15px;border-radius: 15px;background-color:white;height:49px;'><div style = 'margin- top: -95px;margin-left: -85px;margin-right: -85px;'><p><div class='center'>
<img src='../../pictures/win.jpg' width='100%' height='100%'>
</div></div></div>";
?>
</div>
</div>
Change these:
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
To this:
background-color: rgba(255, 255, 255, 0.6);
Note that for IE8 support, the best way to achieve the above would be to use a repeated 1x1 pixel transparent PNG image as a background.
Create a div for the background, a div for the content, and a wrapper for both. Set the content and background to fill the wrapper, using a position of absolute, and width/height set to 100%. Then layer the content on top of the background using left of and top to that of the background's own value. If you do not want to absolutely position the wrapper, you can set it's position to relative.
It works by creating two separate layers, so that opacity changes to the background layer will not effect the content layer.
Here is the code:
<div class="wrapper">
<div class="background"></div>
<div class="content">Hello World!</div>
</div>
<style>
body { background-color:#000 }
.wrapper { height:200px; left:50%; margin:-100px 0 0 -100px; position:absolute; top:50%; width:200px }
.wrapper > .background,
.wrapper > .content { height:100%; left:0px; position:absolute; top:0px; width:100% }
.wrapper > .background { background-color:#fff; filter:alpha(opacity=60); opacity:0.6 }
</style>
View the example: http://jsfiddle.net/ZbTWE/show/
Edit the example: http://jsfiddle.net/ZbTWE/
Just having a couple of css issues which havn't been able to figure out so I left it back to the default css.
Below is the application showing image sliders: Application
My question is how to get the Prev and Next links to be displayed on either side of the image outside the image slider rather than in the slider as it is overlapping over the images?
My other question is below the sliders it contains the slider numbers 1 2 3 so we know which image is first second and third in sliders and select them. My question is how to separate the numbers so they are not too close together?
Below is CSS for Prev and Next links:
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
Below is css for the numbers bottom of images:
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
HTML and jquery:
<div id="banner-image_<?php echo $key; ?>">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-image_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>
The answer to the second part of the question is to add padding to
ol.bjqs-markers li{display:inline;}
As shown here: http://jsfiddle.net/uYXkA/
I will answer the first part after the OP posts the HTML.
EDIT:
All right, it looks like jquery creates it's own css for your prev and next. We can get around this- just add this to your css:
ul.bjqs-controls.v-centered li.bjqs-prev a {
left: -40px;
}
And:
ul.bjqs-controls.v-centered li.bjqs-next a {
right: -40px;
}
Next you will likely want to shift the images as a whole. To do this just change the css for div.lt-container. If you add
margin: 0 auto;
width: 50%;
it will become centered.
It won't look very pretty, but it will work.
I am trying to delete the some elements from the html style="" attribute.
<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>
I want to cut this HTML so it will delete
position element, and background element.
Example:
<div style="color: red; top:0; left: 0;">Hey</div>
How can I do that on Regex?
A simple regex could be:
/background:.*?;|position:.*?;/
If you'd like to check only inside the style attribute in a tag, try the following PHP test code:
<?php
$str = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
echo preg_replace('/(<.*?style=.*?)background:.*?;|position:.*?;(.*?")/','$1$2',$str);
?>
You also asked to match the case when the attribute doesn't have a semicolon (unique attribute, last attribute). To match the case without semicolon, we should assume that is either the only attribute or is the last one. In both cases we'll have the following regexes working:
position:[^;]*?("|')
background:[^;]*?("|')
Basically, I'm asking to match the keyword position: or background: followed by any char except the semicolon, repeated zero or more times until a quote (single or double) is found.
This covers the case we called "without semicolon".
The following code should be working for all cases, it's not optimized and is only for clarity and example. It consist of a chain of calls:
$str = preg_replace('/(<.*?style.*?)(position:[^;]*?)("|\')/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(background:[^;]*?)("|\')/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(position:.*?;)(.*?")/','$1$3',$str);
$str = preg_replace('/(<.*?style.*?)(background:.*?;)(.*?")/','$1$3',$str);
echo $str;
try something like (untested though, so not quite sure wether the expressions are correct, though it should give you enough leadway to solve the rest of the problem)
<?php
$pattern = array();
$replacement = array();
$pattern[0] = '/position: [a-zA-Z]+;/';
$pattern[1] = '/background: #[a-zA-Z0-9]+;/';
$replacement[0] = '';
$replacement[1] = '';
$input_html = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
echo preg_replace($pattern, $replacement, $input_html);
?>
something like this should work:
$tag = '<div style="color: red; background: #000; position: fixed; top:0; left: 0;">Hey</div>';
$tag = preg_replace('/background:\s?#[0-9a-zA-Z]{3,6};\s?/', '', $tag);
that would only be for the background attribute, you would then do another for the color attribute.
$tag = preg_replace('/position:\s?[a-zA-Z];\s?/', '', $tag);
For the future, you could try to use Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files or similar apps, try googling CSS combine/compress, they regroup all your repeated selectors and stuff.
Also I recommend to use a linked css file, that way you can organize your classes much better
Here is what I am currently doing.
PHP echo's out the recent post in the database for a username with:
echo '<div id="userblock">test</div>';
echo '<span class="userpost">' . $str . ' - posted by <b>' . $username . '</b></span><br /><br />';
I then want to have it so when the test is hovered over you see the users profile/stats/information appear directly to the left of the post.
Here is what I have for CSS so far and I am in no way shape or form good at styling. So I would love your input.
div#userblock {
display:none;
}
span.userpost:hover div#userblock {
background-color:#efefef;
height:150px;
width:150px;
}
Here is how you can do this with jquery: http://jsfiddle.net/surendraVsingh/sT66P/1/
Jquery Code:
$('.userpost').hover(function(){
$(this).prev("#userblock").show();
//$(this).prev("#userblock").toggle(); //if you want to toggle show/hide of div//
});
CSS Code
#userblock {
background:#999;
display:none;
}
.userpost{
background-color:#efefef;
height:150px;
width:150px;
}
For that #userblock must be nested within .userpost.
Something like..
echo '<span class="userpost"> <div id="userblock".. /> </span>';
And then use the following CSS:
#userblock {
display:none;
}
.userpost:hover #userblock {
display:block;
}
Here is a little css problem
The code:
printf( '<div id="replyto">Reply to</div>
<a class="replytolink" href="%1$s">%2$s %3$s</a>',
$parent_link, $parent->comment_author, $parent->comment_date );
The css:
#replyto {
float: left;
}
.replytolink {
float: left;
}
is output
Reply to"Comment author Date"
How can I output it
Reply to "Comment author Date"
with correct spacing between text and link?
From a semantic point of view, using a floating div followed by an anchor isn't the best choice possible of tags in this case.
Personally, I would replace that div with a span, then you wouldn't need to float them, and so word spacing would work as usual..
Try this:
.replytolink {
padding-left:5px;
float: left;
}
Example: http://jsfiddle.net/RTFb7/
Add a padding-right to #replyto:
#replyto {
float: left;
padding-right:5px;
}
Add a space?
printf( '<div id="replyto">Reply to </div><a class="replytolink" href="%1$s">%2$s %3$s</a>', $parent_link, $parent->comment_author, $parent->comment_date );
Or add padding-right: 2em on #replyto.
Solution by Lucius:
printf( '<span>reply to %2$s %3$s</span>', $parent_link, $parent->comment_author, $parent->comment_date );
Neat. No CSS is required. Give the <span> tag an ID if needed. The extra blank space after "reply to " is now output.