I am outputting two tables inline with a parent div just surrounding the content with a border. Both tables are output from a form submission that then generates the tables and outputs them using PHP. When the tables output, both are inline, however, they are outside of the bottom border of the parent div. I want them to both be output and be within the parent div's border but I can't seem to do it. I've tried using display, overflow and height properties but nothing seems to work. The following is my code and current output.
Code in HTML body:
<div class="main-body">
<form id="formFilter" method="POST" action="portal.php">
<label for="dateInp">Search a Date:</label>
<input type="date" name="dateInp" value="yyyy-mm-dd" min="2022-01-01" max="2030-12-31">
<input type="submit">
</form>
<?php
//Run function to create table if user has applied filter. If not then to load all data.
if(isset($_POST['dateInp'])) {
echo filterTable($conn);
} else {
echo createTable($conn);
}
?>
</div>
PHP function called that generates and returns tables:
External stylesheet code for parent div:
.main-body {
border-style: solid;
padding: 20px;
margin: 10px;
width: 80%;
margin: auto;
height: auto;
}
This is the output i'm getting:
I need both tables to just be within the border that it is currently displaying outside of, but I can't figure out how to do that. Any help is very appreciated thank you!
I have tried using:
display:inline-block;overflow:scroll;height: fit-content;
Nothing seems to work for me. I was hoping that the content would be output within the border instead it is just outside of it, with the top of the table bordering the bottom width of the parent that it should be within.
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 want to dynamically generate the text within 'content' of a CSS pseudo class in the proper way. I have filled a working jsfiddle with my example so far. This picture shows better how I want to achieve this:
This is the relevant code (it's in the fiddle also):
[part of] index.php:
<div class="checkbutton">
<input type="checkbox" value="None" id="slideThree" name="check"/>
<label for="slideThree"></label>
</div>
[part of] style.css:
.checkbutton:before
{
content: 'Hombre';
float: left;
width: 60px;
text-align: center;
/* 28 es la altura total */
font: 12px/28px Arial, sans-serif;
color: CornflowerBlue;
z-index: 0;
font-weight: bold;
}
I want to be able to reuse that code for two purposes:
Dynamically and internally translate it with PHP.
Different buttons with similar style.
This means, I want to be able to create a similar button but with different names, or just translate it without extra markup. I have no idea how to do this properly. Here's why:
The CSS is in a unique .css file, separated from the content. Obviously, this doesn't execute php.
It's not possible to have CSS pseudo elements inside inline styles
No JavaScript. While this could be achieved with javascript, I prefer to avoid it where possible.
How can I achieve it? I find it odd that I need to use CSS for
As long as you have the ability to set the content you want as an attribute, you can make use of the attr() function to abstract your styles:
http://tinker.io/bda2e
.checkbutton:before {
content: attr(data-checked);
}
<div class="checkbutton" data-checked="Hombre" data-unchecked="Mujer">
<input type="checkbox" value="None" id="slideThree" name="check"/>
<label for="slideThree"></label>
</div>
Custom attributes with the prefix of data- are a part of HTML5: Embedding custom non-visible data with the data-* attributes
After writing the question and how much trouble it took me to find a solution, I post it in case someone finds it useful. It's in this fiddle and the relevant code here:
[part of] index.php:
<div class="checkbutton">
<input type="checkbox" value="None" id="slideThree" name="check" checked />
<label for="slideThree"></label>
<!-- Now this can be generated with PHP -->
<span class = "leftcheck"><?= "Hombre"; ?></span>
<span class = "rightcheck"><?= "Mujer"; ?></span>
</div>
[part of] style.css:
.checkbutton .leftcheck
{
position: absolute;
left: 0px;
width: 50%;
text-align: center;
line-height: 28px;
color: CornflowerBlue;
}
Of course, if you have a better method, please write it as an answer.
Please help me with the display of my webpage.
The image below shows three text boxes with their respective names above.
Please how can I use CSS to make them display infront of each other i.e on the same (single) line, and each header center aligned on it's box ?
Each box header is generated from the database (php/mysql), while the text box is added inside the loop that generates the header.
Image
Thank you.
UPDATE
this is the code I'm using to generate this display
<form action="<?php echo htmlentities($_SERVER['SCRIPT_NAME']) ?>" method ="post">
<?php
while($row=mysql_fetch_assoc($query)){
echo $row['senatorial']."</br>" ;?>
<?php } ;?>
<input type="hidden" name="action" value="submit" />
<input type='submit' name='submit' class='OpenInput_Btn' value='Create' title='Register Constituency' />
</form>
<?php
}
?>
CSS
.consistuency{
display: inline;
margin-left: 90px;
font-size: 15px;
font-family: Calibri:
}
label {
width: 8em;
float: left;
display: block;
font-size: 1.1em;
color: Beige;
}
I'm assuming you want the textboxes with their headers next to each other in a single line, so just as bfavaretto said, use divs.
Add div tags to this code in the while loop:
<label for='name'></label>
<input type='text' name='constituency' class='OpenInput_Text' />
</br>
If you know exactly how many rows will be returned from the db table then you can set the div widths to a percentage, in this case something like %30.
Otherwise you can count the numbers of rows returned and use this value to calculate a percentage/width for the divs and then set it with inline css.
Assuming you want to keep your labels as they are, wrap each label/field pair in a div, give those divs a class name (say, "fieldWrapper") and give that class display: inline-block;:
.fieldWrapper {
display: inline-block;
}
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.