I am trying to add the new twitter button to one of my Wordpress templates. For an example, see here: http://johnkivus.com/2010/08/12/if-you-build-it/. I want the text aligned with the top edge of the button instead of the button. The code section that puts the twitter button in place is as follows:
<div class="postmeta">
<p>Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> · <?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></p>
</div>
the CSS for postmeta is:
.postmeta {
font-size: 11px;
text-transform: uppercase;
margin: 0px;
padding: 5px 0px 0px 0px;
border-top: 1px solid #333333;
}
.postmeta p {
margin: 0px;
padding: 0px;
display: inline-block;
}
I'm far from an expert in CSS, so I've only tried the following things:
- adding "vertical-align: text-top;" to the css
- adding "display: inline-block;" & "vertical-align: top;"
- and, as a complete flyer, style='vertical-align: top' to the button.
What would be the easiest way to get the text aligned with the top of the button?
UPDATE
Based on a suggestion from thomasrutter, I added a style to both the button and the text. This gets me much closer to what I want, however, the elements processed via PHP commands are still showing up aligned with the bottom of the image. The link is the same to see the current state of things: http://johnkivus.com/2010/08/12/if-you-build-it/ however the code is not as follows:
<div class="postmeta">
<p>Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <span style="vertical-align: middle"><?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> · <?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></span></p>
</div>
You need to give both elements next to each other the same value for the vertical-align property.
In this case, where you are aligning a button with some text and the button is a different height to the text, I'd recommend vertical-align: middle which will need to be set on both the button and the text beside it (not on the containing block element, but on the actual inline elements including the button and the span of text beside it).
I don't predict that vertical-align: top would have the effect you desire, but you can certainly try it: you need to add that property to both the button and a span around the text that is beside it.
Related
I would like to align text to the left side and the input box to the right side.
This is how my site looks like and this is how it should be: [PICTURE REMOVED]
However, I did what I wanted by using div tag inside a div tag, so, if I give background colour to it, this is how it looks like:
The problem is, after green (on the grey side) I would like to echo errors. But because of the div width of the green area, I cannot do that. Error goes under input box. So, I wonder how can I be able to show form like I did in pictures but at the same time able to show errors on the right side, as well.
So, the script calls javascript plugin (http://jqueryvalidation.org). And this plugin add error right after input box, when it sees a problem. That's why I am not able to put the errors in another div tag.
error will appear in this class: "label.error". If there is way to make this class "don't care fixed width" in css. That would work.
Basicly what you want to do is create a container <div /> element and put 2 <div /> elements inside it. Since you didn't give any code, I can only give you an example:
#container {
width: 512px;
height: 506px;
border: 3px solid green;
}
#left {
float: left;
width: 250px;
height: 500px;
border: 3px solid red;
display: block;
}
#right {
float: left;
width: 250px;
height: 500px;
border: 3px solid blue;
display: block;
}
<div id="container">
<div id="left">
Form here
</div>
<div id="right">
Errors here
</div>
</div>
This is a UI/UX issue and surprisingly I'm shocked no one mentioned using a table with div's.
Because your picture was removed I can't really compare the UI, but to make this a simple answer for Text to the left and Textbox to the right see below.
(JS is just to show how it does work)
function updateText(){
var txtStrng=document.getElementById("txtTextbox1").value;
document.getElementById("lblText").innerHTML=txtStrng;
}
<form action="" >
<table width="100%" height="71" border="0">
<tr>
<td width="45%"><div align="left"><label id="lblText">Test</label></div></td>
<td width="55%"><div align="right">
<input type="text" name="txtTextbox1" id="txtTextbox1" value="Test" onkeyup="updateText();" />
</div></td>
</tr>
</table>
</form>
I have a web page with an image and title with a description and I want to put another column next to the image and title and text with the same structure.
I have this
echo '<div class="gamedes">';
echo '<img class="miniaturas" src="recursos/miniaturas/coster.png" </img>';
echo '<a class="gamede" href="game.php?name='.$row['name'].'">'.$row['name'].'</a><br>';
echo '<div class="description"><script>document.write("'.$row['description'].'".substring(0,120) + "<br>");</script></div><br><br><br><br>';
echo '</div>';
And this css
.miniaturas {
display: inline;
border-radius: 10px;
float: left;
}
.description {
font-size: 15px;
background-color: #A4A4A4;
display: inline;
border-radius: 3px;
margin-left: 5px;
width: 10%;
}
.gamede{
font-size: 20px;
font-weight: bold;
display: inline;
margin-left: 5px;
}
I want yo put the same structure image, title and description next to the first
I try to put a width to the description but it doesn't work.
Its like this http://jsfiddle.net/Ninjacu/t9r9S/4/
And I want to out the second image next to the first like in two columns
It seems you want something like this:
img | img
title | title
des | des
echo '<div class="gamedes">';
echo '<img class="miniaturas" src="recursos/miniaturas/coster.png" />';
echo '<a class="gamede" href="game.php?name='.$row['name'].'">'.$row['name'].'</a><br />';
echo '<div class="description"> <script> document.write("'.$row['description'].'".substring(0,120)"); </script><br /></div><p>';
echo '</div>';
css:
.gamedes{
width:20%;
float:left;
}
.description{
width:100%;
overflow:hidden;
}
This should work.Give width to the div containing the structure so everything you put inside that div will fall in place.
I'm assuming the question stems from two things - your current layout isn't quite working correctly and you are interested in adding another column to the existing layout. I adjusted your original code and removed the php (it isn't relevant for a layout question), then applied a table-row and table-cell based layout via css (not using an actual table tag). One other thing I did was I used div tags for layout rather than trying to force layout on specific tags such as the "a" tag. Doing this you end up with the following html:
<!-- This is a row -->
<div class="gamedes">
<!-- this is a column -->
<div class="miniaturas"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Google.png/800px-Google.png" /></div>
<div class="gamede">Text for the link</div>
<div class="description">This is a somewhat longer description here probably up to 120 characters</div>
</div>
In the css the key pieces are:
.gamedes { display: table-row; }
.miniaturas { display: table-cell; }
/* etc */
To see the whole thing running, take a look at this JSFiddle: http://jsfiddle.net/hPLNK/4/
So, given this layout, all you have to do to add a new column now is add a new <div> inside of the "gamedes" and set the css display style to table-cell!
Final Note - The original code you provided had a few other issues that I fixed. A <script> tag is for including javascript. You seem to want to include text. An image tag can't have a </img> inside of it. Avoid using <br/> to force a height on a div or area. Instead use css based layouts.
Small PHP Example
In case you need some help getting the PHP back into this example, my recommendation is to put the php code inline. You end up with something like:
<div class="miniaturas"><img src="<? echo($imageUrl); ?>" /></div>
I made the assumption here that your image link is stored in "$imageUrl", but you get the idea. The nice thing about putting php inline like this is it reads a little more cleanly and editing the html becomes much easier. Best of luck!
I'm sure this question has been asked so many times its just not funny but having searched I can't find a solution that fixes my problem just right.
I have several fieldsets on a php page, the content of each one will be a block of text taken from a database. I want to align the text inside the fieldset both vertically and horizontally. The horizontal part is simple with text-align obviously but the vertical alignment is not so simple.
The resulting HTML markup:
<div class="s_container3">
<a href="custom.php?page=19">
<fieldset class="services_title2">
Some Short Text
</fieldset>
</a>
<a href="custom.php?page=18">
<fieldset class="services_title2">
More Short Text
</fieldset>
</a>
<a href="custom.php?page=20">
<fieldset class="services_title2">
Some long text that spills onto the second line
</fieldset>
</a>
<a href="custom.php?page=21">
<fieldset class="services_title2">
More short text again
</fieldset>
</a>
<span class="stretch"></span>
</div>
Below is a link to a jsfiddle I was playing with, it has all extra unrelated CSS stripped out to make sure I didn't have a conflict elsewhere.
jsfiddle example
You can see that the text just sticks to the top of the fieldset. I have tried putting an inner div container and everything else under the sun but I've been staring at this problem for so long it just isn't making sense to me anymore so I'm probably missing a simple solution.
Any help would be greatly appreciated, I'm open to any approach that'll move the text!
If anymore information is needed just ask!
Thanks in advance
You can set line height to your fieldset class, so:
html, body {
height:100%;
}
div {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
div.s_container3 {
width:570px;
text-align:justify;
}
fieldset.services_title2 {
border:none;
font-size:1.3em;
width:215px;
min-height:45px;
vertical-align:middle;
text-align:center;
color:#ffffff;
background-color:#1c86b5;
margin-top:10px;
margin-left:auto;
margin-right:auto;
display:inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 45px;
}
.stretch {
width:100%;
display:inline-block;
font-size:0;
line-height:0;
}
a {
text-decoration:none;
}
http://jsfiddle.net/5H6Lf/
I have two divs floated left so that they appear next to each other. They are both populated with dynamic content so that for some users the left div may have more items and height and for others the right div might be longer.
I want to put a border in between the two divs so that it is border-right on the left div if the left div is longer or border-left if the right div is longer.
My thought is to do this at run time so that the php code checks the # of items in each div first and then proceeds to add the appropriate in line style tags to the appropriate divs. It will probably work but I'm wondering if there's an easier way to do this through css?
What you can do is set the two divs to overlap by their border width, and set a border-right on the leftmost float, and a border-left and position: relative on the rightmost float. Then the line will appear to grow with the longest one, but in actuality it is 2 overlapping borders.
I set up two examples on jsfiddle so you can see them. But I am attaching the CSS here. I used horribly obvious colors just to make it clear what I am showing.
Links to JSfiddle complete code:
http://jsfiddle.net/8nU6K/1/
http://jsfiddle.net/8nU6K/2/
.container{
overflow:hidden;
background-color:red;
width:350px;
}
.left, .right{
padding: 3px;
float: left;
margin: 0;
background-color:white;
width: 150px;
}
.left{
border-right:10px solid green;
}
.right {
position:relative;
left:-10px;
border-left:10px solid blue;
}
Don't try guess how big things will be on the server, that'll just lead to frustration and bugs. An easy client side solution is to do this:
Put a left border on the right box and a right border on the left box.
Make the borders the same width and color.
Add a negative left margin on the right box that has the same width as the border.
Use padding inside boxes to simulate spacing between them.
Demo HTML:
<div class="a">
<ul>
<li>Where</li>
<li>Is</li>
<li>Pancakes</li>
<li>House</li>
</ul>
</div>
<div class="b">
<ul>
<li>No</li>
<li>One</li>
<li>Uses</li>
<li>The</li>
<li>Two</li>
<li>Cent</li>
<li>Stamps</li>
</ul>
</div>
<br style="clear: both;"><br>
<div class="a">
<ul>
<li>No</li>
<li>One</li>
<li>Uses</li>
<li>The</li>
<li>Two</li>
<li>Cent</li>
<li>Stamps</li>
</ul>
</div>
<div class="b">
<ul>
<li>Where</li>
<li>Is</li>
<li>Pancakes</li>
<li>House</li>
</ul>
</div>
And some CSS (the border colors are just for illustration):
.a {
float: left;
border-right: 1px solid red;
padding-right: 10px;
}
.b {
float: left;
border-left: 1px solid green;
padding-left: 10px;
margin-left: -1px;
}
And a live example: http://jsfiddle.net/ambiguous/X8J5p/
I have click-able images in my html page that call a javascript function... however nobody is clicking on them as they do not look click-able... how can I make them click-able without using an tag around it?
Here is an example of my code...
<div id="bvu11" style="margin: 0px 5px; float: left;">
<span id="bviu11">
<img src="/images/icons/favorites_add.png" onclick="favoritesAdd(2,11,'u')">
</span>
</div>
Using CSS
Add a class to your image (ex: clickable-image) and this in your CSS:
.clickable-image
{
cursor: pointer;
}
Have a look at the css cursor property
<span id="bviu11" style="cursor: pointer;">
As well as adding the cursor:pointer, perhaps some styling to your images/buttons would also make them appear to be links before the user even has to hover over them. Try a simple border, or dropshadow/glow on the images to give them a more 3D effect, making them look more "clickable"! Also, adding a hover state (a different styling to the image/button) really helps.
Change
<div id="bvu11" style="margin: 0px 5px; float: left;">
to
<div id="bvu11" class="spanLink">
and add
.spanLink {
margin: 0px 5px;
float: left;
cursor: pointer;
}
to your css.