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.
Related
I try to center the social media buttons in a <div>, but it keeps on aligning left.
echo '<div class="socialWrapper">';
echo '<div class="fb-like" data-href=" ' . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></div> ';
echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<div class="g-plusone" data-size="medium"></div>';
echo '</div>';
CSS file
div.socialWrapper{
margin:auto;
width:100%;
text-align:center;
}
try div.socialWrapper{display: flex; justify-content: center; flex-direction: row;}
The parent <div>, socialWrapper, has a width of 100%, and will only appear centered by using margin: 0 auto if you give it a width of less than 100%.
<div> is a block-level element (its default behaviour is to be display as a block, so new elements will appear on a new line). Use <span> instead, because it is an inline element.
This means the nested <div> elements will need to be explicitly set as display: inline-block. (text-align: center will only be applied to elements whose default behaviour is display: inline, I think).
HTML/PHP
echo '<div class="socialWrapper">';
echo '<span class="fb-like" data-href=" ' . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></span> ';
echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<span class="g-plusone" data-size="medium"></span>';
echo '</div>';
CSS
div.socialWrapper{
margin: 0 auto;
width: 50%;
text-align:center;
}
I made a CodePen demo for you:
See the Pen Social toolbar by Yvonne Aburrow (#vogelbeere) on CodePen.
I manage to center social icons through following code in css:
.wrapper{
margin: auto;
display: flex;
justify-content: center;
flex-direction: row;
max-width: 200px;
try this it worked for me.
(I set max-width to 200px because it suits to me best, you can use
different number or dont need to use att all but in that case icons are spreaded al the way through div width.)
Good Day,
I am working on a table that will display data from MySQL using PHP which is pretty much working. My goal is to display this as a simple Identification Card using the data I have from MySQL.
I would consider myself a rookie when it comes to CSS and I need to understand why my display is not going as I wanted.
I did some research online and found this
http://jsfiddle.net/gajjuthechamp/cbEDJ/1/
It is working and I got the display that I wanted but for some reason the first column is shrinking. I tried changing the row width to 50% unfortunately it is doing the same thing. Kindly see image and my code below.
CSS Display Table Row Side by Side
<style>
table {
width: 100%;
}
table tr {
display: inline
}
table tr:nth-child(odd) {
position: relative;
}
table tr:nth-child(odd) td {
position: absolute;
top: 100%;
left: 0;
}
table tr:nth-child(even) {
display: block;
width: 50%;
margin-left: 50%;
}
</style>
I also tried changing the values from top, left, margin-left, and width but first still shrinks. Could no wrap also cause this issue? Any info or suggestion is highly appreciated.
#EdCottrell
I finally got it working thanks a lot for the advised. I use div and it automatically work as I wanted it to be.
CSS for div
<style>
body {
margin: 0;
}
div#card:nth-child(odd) {
width: 50%;
background: lightblue;
display: inline-block;
}
div#card:nth-child(even) {
width: 50%;
background: orange;
display: inline-block;
float: left;
}
.parent {
font-size: 0;
margin: 0;
}
.font {
font-size: 16px;
}
</style>
HTML for div
<div id="card">
<center><b>EMPLOYEE INFORMATION CARD</b></center>
<br><b>Name: <?php echo $row ['EMPLOYEE_NAME']; ?></b>
<br><b>Address:</b> <?php echo $row ['EMPLOYEE_ADDRESS']; ?>
<br><b>Date of Birth:</b> <?php echo $row ['BIRTHDATE']; ?>
<br><b>Polling Place:</b> <?php echo $row ['POLLING_PLACE']; ?>
<br><b>Precint No:</b> <?php echo $row ['PRECINT_NUMBER']; ?>
<br><b>Cluster No:</b> <?php echo $row ['CLUSTER_NUMBER']; ?>
</div>
Below code works as I expected. Every thing is perfectly styling.
<style>
.letter-spacing{
width: 400px;
background: red;
text-align: center;
letter-spacing: 20px;
}
</style>
<div class="letter-spacing">
<img src="icon1.png">
<img src="icon2.png">
</div>
However, if I render the "div" using document.write, "letter-spacing: 20px;" doesn't work. The interesting thing is red background and center alignment still work.
<style>
.letter-spacing{
width: 400px;
background: red;
text-align: center;
letter-spacing: 20px;
}
</style>
<script>
document.write('<div class="letter-spacing">'+
'<img src="icon1.png">'+
'<img src="icon2.png">'+
'</div>');
</script>
Is there anybody knows why?
it's because you write it like this
document.write('<div class="letter-spacing">'+
'<img src="icon1.png">'+
'<img src="icon2.png">'+
'</div>');
which will resulting in this HTML
<div class="letter-spacing"><img src="icon1.png"><img src="icon2.png"></div>
which doesn't contain any space, thus letter-spacing: 20px; not working.
Different with the one you write directly in HTML with a new line which considered as a space.
If you want to have the same results, then change it to this
document.write('<div class="letter-spacing">'+
'<img src="icon1.png"> '+ // Note the space before '
'<img src="icon2.png">'+
'</div>');
It is very strange, but I could fix it in some hard way like this
document.write('<div class="letter-spacing"> '+
'<img style="margin-right: 20px;" src="icon1">'+
'<img src="icon2">'+
'</div>');
But if I set a class in css it does not work. Thats really strange
I've created an page where users can view images along with the image description although I'm having some issues with the CSS for the description. The description is retrieved via PHP and is shown as a echoed variable. The issue with this is that the descriptions seems to carry on along one single line when it should be carrying on within the div.
As shown below, it displays along one line when it should be wrapping below to the same width as the text area below the description.
I've tried changing the width of the .desc class to a set pixel width of 290px instead 100% (should still take the 290px from the image-desc class container) but I'm having no luck.
My current CSS:
.image-info {
width: 290px;
display: inline;
float: right;
}
.image-info .desc {
text-align: justify;
width: 290px;
margin: 10px 0px;
}
and the HTML:
<div class="image-info">
<? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
← Back to Gallery
<div class="desc"><? echo $desc; ?></div>
<? if(empty($_SESSION['user'])) { } else { print '<i class="icon-chevron-down"></i>Options<br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post"> <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post"> <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
</div>
It seems that your content go beyond the limit when there is no white space in the word
so just add word-wrap:break-word; to imageInfo class
here is your css
.image-info {
width: 290px;
display: inline;
float: right;
word-wrap:break-word;
}
Take a look here in fiddle
Add the new CSS 3 word-break property:
word-break: break-word; /* Will prevent text from bleeding outside container */
Use the CSS3 word wrap
word-wrap:break-word;
This will force the text to go down
Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
And this (stripped down) HTML:
<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
<img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>
the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS display: block.
How can I center an image without using a parent div? I don't want the whole area clickable.
Background:
You can read this topic. It is about Wordpress and the built in editor. He automatically generates the class aligncenter on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.
in aligncenter class add text-align:center
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
I'm not familiar with wordpress, but you might want to try setting the image's and the anchors's css 'display' property to 'inline-block'.
If you are limited in changing the document's DOM, another option is adding an 'onClick' attribute to the image.
This will allow you to run some function once the image is clicked.
So, for example, if you want to redirect to another page:
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
And in the page's header:
<script type='text/JavaScript'>
var myRedirect = function(){
window.location.href = 'Some other location';
}
</script>
Notice the style='cursor:pointer', which changes the mouse's cursor to a 'hand' cursor.
To avoid an additional div container or even JavaScript, you can make the anchor display as a block:
.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<img src="logo.png" alt="Logo" />
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
<div class="megaman">
<img src="img/megaman.jpg" alt="megaman">
</div>
img {
height: 125px;
width: 200px;
}
.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn't figure it out without using a div.
The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image...
<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>
Second answer:
paste this in functions.php
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
// only do this on center
if($align == 'center') {
$html = str_replace('aligncenter', '', $html);
$html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
}
return $html;
}
Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.