I am showing 5 results on a html page using divs and absolute position. I have used display:table-cell; and display:flex; for center positioning of image and text.
What i have problem is with for some reason after creating a parent div for each result, giving it a border, for some reason eben though i use absolute position there seems to be some uniform space between results. I see the borders in the right place, but the result contents are shown out of place.
See here:
https://www.dropbox.com/s/deeycdr32ejcftd/proferror.jpg?dl=0
Something is spacing out the results wringly. When I take out the parent container labelled profile[1 to 6] then it does work.
heres the php which is echoing the HTML:
echo "<div id='results' style='position:absolute;left:0px;top:0px;'>"
(while loop)
echo "<div id='profile".$profileid."' style='border-style: solid;position:absolute;left:0px;top:".$yy."px;width:320px;height:50px;'>";
echo "<div id='pic".$profileid."' style='display:table-cell; vertical-align:middle; text-align:center;background-color: #434345;position:absolute;left:0px;top:".$yy."px;width:50px;height:50px;overflow: hidden;'>";
echo "<a href='http://rafnet.co.uk/click/php/requests.php?from=".$username."&to=".$row["username"]."'><img style='max-height: 100%;' src='http://rafnet.co.uk/click/images/".$row["image"]."' /></a></div>";
echo "<div style='color:#0d00ff;display:flex; align-items: center; justify-content: center;position:absolute;left:50px;top:".$yy."px;width:270px;height:30px;overflow: hidden;'>".$name."</div>";
echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";
$yy+=60;$profileid+=1;
(end of while loop)
echo "</div>"
echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";
Try taking away the second </div> at the end of this line
I managed to fix this issue. What I realised after some work was that all the divs inside the parent div "profile" were being positioned relative to its position.
so for those divs i changed
top:".$yy."px;
to
top:0px;
ref to css are you saying i shoudlnt use the style attribute to define things? Are you saying i should place the css in the head section and assign them using the id or class? I just using the style attribute as i can see without referencing to what element it applies to
Related
I've searched through various forum posts on Overflow-x:scroll, which explain how to implement it, and in most cases the same fix has resolved the OP's issue.
However, I have followed these posts and still cannot seem to resolve my issue, please help!
I am creating an image preview pane (Large image, list of thumbnails), and I am trying to place the thumbnails in a scrollable DIV horizontally, but am striking out over and over again.
With my current code I have set the width to 200px, but despite the presence of overflow-x, the div is still showing all of the thumbnails across the screen.
#Thumbview { position:relative; height:100px; width:200px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
My PHP is as follows for this small bit:
<div id="ThumbView">
<?php
// Create a slide-able thumbnail view.
$piclist = explode(", ", $datafiller['PictureList']);
foreach ($piclist as $thumbnail) {
echo "<img src=\"./Images/Inventory/" . $_GET['carid'] . "/thumbnails/" . $thumbnail . "\">";
}
?>
</div>
I have attempted to enclose each IMG in a DIV, with no luck, change display types on both the container and the children to various inline elements. Still no change. Ideas?
Your id names should match (care about the V)
<div id="ThumbView">
#ThumbView
is this what u need?
http://jsfiddle.net/x96hq47c/
So I've looked around quite a bit for an example to this but I couldn't find anything for what exactly I am trying to do.
I'm building a blog with the front page having a bunch of posts in order like this -
http://prntscr.com/1vjoun
The blogs vary in size based on how much text is in them -
http://prntscr.com/1vjozq
When you hover over a blog I am trying to make a small bar appear inside of the blog that overlaps the text at the bottom so that I can have some options appear, such as 'Like' 'Favorite' 'Feature' or w/e and this is where my problem comes in.
echo "<div class='blogpost' id='" . $row['blogid'] . "'>";
echo "<h3 class='blogheader'>" . $row['blogheader'] . "</h3>";
echo "<p class='blogbody'>" . $row['blogbody'] . "</p>";
echo "<div class='blogextras'></div>";
echo "</div>";
I create the 'blogextras' div that will hold the options mentioned above.
.blogextras {
position:relative;
height:35px;
width:100%;
background:#333;
}
I give it some style.
$(".blogpost").hover(function(){
$(".blogpost").css("overflow", "auto");
$(".blogextras").show();
$(".blogextras").css("position", "absolute");
});
$(".blogpost").mouseleave(function(){
$(".blogpost").css("overflow", "hidden");
$(".blogextras").hide();
$(".blogextras").css("position", "relative");
});
Add some jQuery.
But my final result makes the 'blogextras' div appear below where I want it to be (about 35 pixels) -
http://prntscr.com/1vjppq
I also tried not changing it's position from relative to absolute and this does give a kind of desired result except it makes the boxes re-size which I don't want it to do.
I want the 'blogextras' div to appear at the bottom of the visible text area every time no matter the size of the 'blogpost' div.
Sorry if I haven't been discriptive enough or haven't given enough code just post a comment if you want to see more.
Your .blogpost container needs a relative position so that you can position your .blogextras bar exactly within that container. You also need to give the .blogextras bar a higher z-index so that it overlaps the .blogpost content:
.blogpost {
position:relative;
overflow:hidden;
/* Other CSS */
}
.blogextras {
position:absolute;
z-index:10;
bottom:0;
left:0;
display:none;
height:35px;
width:100%;
background:#333;
}
$(".blogpost").hover(function(){
$(".blogextras").fadeIn();
});
$(".blogpost").mouseleave(function(){
$(".blogextras").fadeOut();
});
Untested, but that should give you ~ what you need.
I have a basic php echo statment as belows which echos a thumnail 70*70 but it echos a new line everytime. Is there anyway to stop this?
echo "<div class='imageIcon'><a href='index.php?menu=GaleriaYVideo&catAll=$var_catergoryAll&image=".$var_showImageAll."'><img src=".$var_showImageIcnAll." ></a></div>";
Basically i want to echo all my thumbs so there on the same line.
Any help well appreciated!
You're wrapping your output in a block-level div element. Remove that, or set display:inline or display:inline-block and they will all be inline. Or float the elements and give them a width.
You probably don't have width and height set to the class.
Set something like
.imageIcon {
width:70px;
height:70px;
float:left;
}
you should add .imageIcon {display:inline;} to your style
It's not the echo that's causing the new line, it's the div element
Okay, so I've been able to define the standard text color according to a database value by using this code:
<?php
echo '<div style="color: ' . $result->properties->fcolor . ';';<br />
echo 'background: ' . $result->properties->bgcolor;<br />
echo '">MY CONTENT</div>'
?>
The color that's set by
$results->properties->fcolor
works nicely, except for a:link, a:hover, a:visited, and a:active. Because it's only defining "color", the browsers default to their own link colors.
My users choose from a selection of background and font colors and Chrome's default blue link color doesn't exactly work with a dark purple background... Is it possible to set up a
<style type=text/css>
inside of my PHP file and have it reference the
$result->properties->fcolor
value that the normal part of the script pulls from my database?
This is my first big site so I'm not positive about anything but I vaguely remember enabling PHP in my external CSS file using .htaccess and it didn't successfully pull in the value of
$result->properties->fcolor
as far as I could tell.
What am I doing wrong?
Thanks in advance - amazing community here! :)
IF I'm you, I would create external css for links just to define rules not color.
for example if your links are inside div, what you can do is just define to use color of div
div a { color: inherit; }
div a:HOVER { color: inherit; }
so when you define your color to div through php logic your links inside div will inherit that color.
If you experience any problems with this add important to property so color of div will be used
div a {color: inherit !important; }
YOu can set you link colors via internal css
<style type="text/css">
a:link { color:#f00;}
a:visited { color : }
a:hover {}
a:active { }
</style>
Note:
1 orders are very important .
2 use hex value instead of color name.
Hi have you tried using " instead of ' and \" instead of "?
echo "<div style=\"color: " . $result->properties->fcolor . ";";
echo "background: " . $result->properties->bgcolor;
echo "\">MY CONTENT</div>";
And, you seem to be missing a semi colon at your 3rd echo.
I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.
My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....
<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...
and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)
Is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!
My PHP file
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">";
echo "<li>" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</li></ul>";
}
My CSS file
#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">;
echo "<li><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></li></ul>";
}
Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.
As an example
span.psuedo-col {
display: inline-block;
width: 10em;
overflow: hidden;
}
Or you could use
`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */
The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.
Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:
#sidebar li {
float:left;
width:33%; /* three columns with equal width */
}