i'm trying to get images that im echoing to display inline-block/horizontal but instead whatever i do they are just listing down/vertically. how can i fix this?
here's my code:
<div class="profile_photos_area">
<?php
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\"><br>\n";
};
}
?>
</div>
.profile_photos{
margin-top:0px;
border:#ccc 1px solid;
width: 170px;
height: 150px;
display:inline-block;
position:relative;
}
.profile_photos_area{
width:665px;
height:350px;
background:#000;
margin-left:-193px;
display:inline-block;
overflow:hidden;
}
Did you look at the html your code generate? Look at the asterisks :
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\">******<br>******\n";
br. br!
It is html, and it means... break line! Just remove that.
demo
Related
I'm not sure where I'm going wrong with my CSS.. any help would be appreciated..
the CSS
#commentbox {
float: left;
margin-top: 10px;
background-color: #FFFFF0;
display: block;
width: 450px;
border: 1px solid #999999;
padding: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
text-align: left;
}
#commentbox .commenter_name {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
color: #660000;
float: left;
padding-left: 5px;
display: block;
}
#commentbox .comment_content {
display: block;
float: left;
clear: both;
white-space: pre-wrap;
}
This is my Form Textarea
<textarea name="vt_comment" cols="50" rows="5" wrap="hard" class="nontextarea" ></textarea>
This is the code that displays the Comment
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name">
<?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?> commented
</div>
<!--Show Comment -->
<div class="comment_content">
<?php echo $row_cmnts_disp['vt_comment']; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
This is how it gets stored in the DB
1st Line of the Comment
2nd Line of the Comment with just a Line break
Double Line Break
and this is how it is displayed on the site (with spaces in the front of the 1st line)
Swami Donanandha commented
hello
hello
hello
hello
as displayed online
whatever changes I try, I'm not able to remove the spaces before the 1st line of the comment, unless I remove the white-space:pre-wrap setting in the CSS...and if i do that the line breaks vanish displaying just one long sentence....
Swami Donanandha commented
1st Line of the Comment 2nd Line of the Comment with just a Line break Double Line Break
Have you tried removing the white-space: pre-wrap attribute and echo'ing a HTML break tag at the end of each comment?
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name"><?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?>
commented
</div>
<!--Show Comment: Added Break Tag Below-->
<div class="comment_content">
<?php echo "<p class='comment'>" + $row_cmnts_disp['vt_comment'] + "</p><br>"; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
The reason your comments concatenate into one long string after removing the white-space attribute is because of the float: left attribute in the .comment_content class. Updating the class to the following should fix the long string problem you have;
#commentbox .comment_content {
display: block;
}
I sorted it out... by adding the nl2br clause before the DB insert
$vt_comment = nl2br($_POST['vt_comment']);
and removing the white-space:pre-wrap from the CSS
Though I still don't have a clue why the extra spaces were getting added earlier :-)
Text going out of the div.Nothing I have tried seems to work.Example the word red going out of the div.
I have 2 divs floating next to each other shown with green and red borders.Div 1 has images coming from a databse. Div 2 which I have named #index wraps around div class='board' blue border as shown in the image,which holds the description coming from MYSQL database.
Code on index.php:
<div id="index">
<?php
$select = "SELECT * FROM products LIMIT 0,20";
$query = mysqli_query ($conn,$select);
while ($row = mysqli_fetch_assoc($query)){
$B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
$M = $row['Model'];$Id = $row['Id'];
echo "<div class='board' style='word-wrap: break-word;'><a href =
'redirect.php?id=$Id'><h2>     
".$B." ".$P." ".wordwrap($D,28,"<br>\n",TRUE)." ".$M."</h2>
</a></div>";
}
?>
</div>
CSS:
#index {
border:solid 1px red;
position:relative;
float:left;
width:59%;
height:100%;
word-wrap:break-word;
}
div.board {
width:480px;
}
.board {
background:white;
position:relative;
border-radius:15px;
border-color:#0033FF;
border-width:2px;
border-style:solid;
margin-top:31px;
width:480px;
height:195px;
padding-left:0px;
margin-left:0px;
word-wrap:break-word;
white-space:normal;
}
<div id="index">
<?php
$select = "SELECT * FROM products LIMIT 0,20";
$query = mysqli_query ($conn,$select);
while ($row = mysqli_fetch_array($query)){
$B = $row['Brand']; $P = $row['Product']; $D = $row['Description'];
$M = $row['Model'];$Id = $row['Id'];
echo "<div class='board' ><a href = 'redirect.php?id=$Id'>
<h2>".$B." ".$P." ".$D." ".$M."</h2></a></div>";
}
?>
</div>
CSS:
#index {
position:relative;
top:15px;
float:left;
width:482px;
height:100%;
}
.board {
background:white;
position:relative;
border-radius:15px;
border-color:#0033FF;
border-width:1px;
border-style:solid;
margin-top:29px;
height:198px;
padding-left:18px;
padding-right:0px;
margin-left:0px;
float:left;
word-wrap: break-word;
}
I'm trying to align two divs horizontally. Having tried about 15 different approaches, I still don't manage to get it working.
$html .= '<div class="fotoLinks">';
$html .= ' <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .= $this->text;
$html .= '</div>';
With corresponding CSS (div.alinea is a wrapper div):
div.alinea
{
float: left;
width: 100%;
margin-bottom: 15px;
}
div.tekst
{
float: left;
}
div.fotoLinks
{
float: left;
margin-right: 15px;
height: 100%;
}
I hope to get some inspiration for a new approach.
Try
display: inline-block;
Instead of float: left;
EDIT:
A method you can try, but is less supported, for your wrapper div, set:
display: table;
And for your inner divs:
display: table-cell;
You have to define the width for your text div and image div, since as is it inherits the parent elements width of 100%. There are a ton of others ways/answers, but this would have you tweak the least amount of code to get it to work right.
This works for me:
<html>
<head>
<style>
.ftext {
border: 1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="ftext">
This is the left text.
</div>
<div class="ftext">
This follows to the left.
</div>
</body>
</html>
It floats the right text beside the left text.
In the CSS for div.tekst, put in clear:both.
Just give the 'tekst' div a left-margin. I didn't test this so I'm not sure that alone will fix it without adjusting something else.
I am using yii framework for my development . I wrote CSS and able to align my <input tags in html properly and I am using the same CSS for yii and the alignment is messed up . Could some help me on this ?
I wanted it to be displayed like below
Here is the yii code I have
<div id="gender">
<label>Gender :</label>
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array('separator'=>'')); ?>
</div>
CSS
<style type="text/css">
div#gender {
margin-top:20px;
margin-left:200px;
}
div#gender label
{
font-weight: bold;
font-size: 0.9em;
float:left;
margin-left:2px;
text-align:left;
width:100px;
}
</style>
and it is coming as below image
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array(
'labelOptions'=>array('style'=>'display:inline'), // add this code
'separator'=>'',
)); ?>
Looks like you might need
div#gender input
{
float:left;
}
add this css code somewhere (to the end of css/main.css, for example):
input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }
I really dont know what to do.
I made a really simple guestbook, its ok and all, but when showing the comments
the text spills out from the div
I was trying with pre but didnt work
here is the css
.guestbook_content {
width: 100%;
height: 100%;
background: #FFE4E1;
padding: 5px;
font-size: 12px;
margin-bottom: 10px;
}
#box {
width: 628px;
height: 438px;
background: #fefefd ;
overflow-y: scroll;
overflow-x: hidden;
}
the html and php
<div id='box'>
<div id='box_title'></div>
<div id="box_text">
<?php
if(isset($_POST['mehet'])) {
$message= '';
$the_name= mysql_real_escape_string(strip_tags($_POST['nev']));
$comment = mysql_real_escape_string(strip_tags($_POST['comment']));
$date = date('Y.m.d H:i:s');
if(!empty($comment) && !empty($the_name)) {
//mysql_query("INSERT INTO vendeg (name, comment, date) VALUES ('$the_name', $comment', '$date')") or die(mysql_error());
mysql_query(" INSERT INTO guesstb(the_name, comment, date) VALUES ('$the_name', '$comment', '$date') ");
}else {
$message= '<b><font color="darkred">Pleasse fill out all inputs</b></font>';
}
}
?>
<?php echo $message; ?>
<form action='<?php echo the_permalink();?>' method='POST'>
<label for='nev' class='gbl'>Name:</label>
<input type='text' name='the_name' id='the_name' class='gbi'>
<label for='comm' class='gbl'>Comment:</label>
<textarea name='comment' id='comm' rows='5' cols='60' class='gbt'></textarea>
<input type='submit' class='submit' value='Beküld' name='mehet'>
</form>
<?php
$result = mysql_query("SELECT * FROM guesstbORDER BY date DESC");
while($row = mysql_fetch_array($result))
{
?><div class='guestbook_head'><span>sent by:</span> <b><?php echo $row['nev']; ?></b> <span> - date:</span> <?php echo $row['date']; ?> </div><?
?>
<div class='guestbook_content'><?echo $row['comment'];?></div>
<?
}
?>
could please someone could give me hint
.guestbook_content {
width: 100%; <-- drop this rule
height: 100%;
padding: 5px;
}
#box {
width: 628px;
}
You gave child div width: 100% + padding 5px, which makes = 100% of parent div :628px + 5px left padding + 5px right padding so child div is 638px wide. Just drop 100% width on child. All you need is padding.
Here is jsfiddle with your situation: http://jsfiddle.net/crg2U/2/
And here is with droped 100% width on child : http://jsfiddle.net/crg2U/3/