i am trying it get that div displaying 5 in a row and then start a new line and display more
atm all that is happening is the are going under each other.
CODE
< div>Line1< br />Line2< br>Line3< /div>
Thank you
If you want five divs side-by-side per line, the following works:
.cell { padding:0; margin:0; float:left; width:20%; }
.clear { clear:both; }
--
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="clear"></div>
For best results, all divs should have the same height. If they don't, you should place the <div class="clear"></div> after every 5th div.
A <br /> tag will always move to the beginning of the next line. So if you had this (I took the liberty to add a "/" to your second br tag, maybe this was the problem):
<div>Line1<br />Line2<br />Line3</div>
You'd get this:
Line1
Line2
Line3
Is that not what you want? If not, please clarify.
If you want the divs to display side-by-side you'll need to use css floats to do that.
<style type="text/css">
div { float: left }
</style>
Then, you'll need to use a <br clear="all" /> to move down to the next line.
This would mean that
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
Would show up as 12345 with the content all on the same line. Is this what you're looking for?
Related
Hello My question is not how to echo a php variable into a DIV. My question is how to contain it. When I enter text into the DIV it expands and contains text, but the echoed php Variable content from the variable crosses the boundery Vertically at the bottom only. Overflow:hidden works but then it does not expand with the content.
** CSS **
.bottom-menu-body{
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
** DIV **
<div class="card">
<div class="bottom-menu-body">
<?php echo $bidcard; ?> <!-- Bid Card Content from Require: db_ac_bids.php-->
<?php echo $nobids_message; ?> <!-- Bid Card Content from Require: db_ac_bids.php
CSS control via acceptbid css card-->
</div><!-- Bottom Menu body End -->
</div><!-- Card end -->
I am not able to understand the question properly but I guess below css might help you :
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
"text-overflow: ellipsis" this will add "..." ellipsis.
CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }
I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.
Here's some simple html
<div id="page-container">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.
Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.
<?php echo $header_options['header_height'] ?>
How can I do this in jquery?
Here's a basic fiddle to start me off
If i understood you correctly, you can do that in CSS like that:
.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
margin-top:20px;
// or
margin-top: <?php echo $header_options['header_height'] ?>px;
background:red;
}
this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.
Demo
If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this
$('#page-container div.fixed-header:nth-child(1)').each(function(){
$(this).next().css({'margin-top':$(this).height()});
});
Use length to find the div exits or not:
if($('.fixed-header').length > 0){
//do your stuff here
}
And I think it should work just with css:
#page-container .fix-header{
margin: 5px;
}
You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.
#page-container div:nth-child(1)[class='fixed-header']{
background:red;
}
Demo of the above, variation 1, variation 2
Use CSS in the head of the page:
#page-container #header.fixed-header + div {
/* the following should be parsed by php, but
I don't know whether this generates a full CSS
rule, or just the relevant length. Adjust as appropriate */
<?php echo $header_options['header_height'] ?>
}
There's no need for jQuery in here...
You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"
<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>
Btw, you could just set a margin-bottom on #header.fixed-header... ;-)
Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.
If each margin is the same, here is you code
$(".fixed-header").each(function(item) {
$($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});
Your markup should look like this:
<div id="page-container" data-margin-height="50px">
<div id="header" class="fixed-header">header</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
</div>
This is equivalent to the following CSS, if every page-container has the same value as well.
.page-container .fixed-header + div {
margin-top: 50px;
}
You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.
<style>
.page-container .fixed-header + div {
margin-top: <?php echo $header_options['header_height'] ?>;
}
</style>
Another option is to use CSS3 attr, which is not yet supported completely in all browsers.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
.page-container .fixed-header + div {
margin-top: attr(data-margin-height);
}
This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.
I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle:
http://jsfiddle.net/k5V2a/
I have text that I put into a div, which is generated automatically by php..(taken from the database).
But the text stretches over the div.
here is an example of what I want to do:
<div>
<?php
Generate_All_Text_Content_Here();
?>
</div>
I want the div to limit to where the text stretches..say no more than 300px.
I tried to give it width measurement..but it has no influence over the div element
add to your style
div{
max-width:300px;
word-wrap:break-word;
text-overflow:<clip> or <ellipsis>;
overflow:<hidden> or <scroll>;
}
this should really cover everything >.<
Why not do something like this then?
<div style="<?php echo get_text_width(); ?>">
<?php Generate_All_Text_Content_Here(); ?>
</div>
Just set the div width with CSS and text won't be bigger:
div {
max-width: 300px; /*Or simply width: 300px; if you want the div always to be that width*/
}
A question... How can we insert breaks into string and make a multi line string to prevent overflow in axis lengths of an fixed width element?!
Exapmple Code that include the problem:
<div style="width:100px;">
Too Long String...
</div>
I need to be like this one:
<div style="width:100px;">
Too Long String (Line 1st)<br />
Too Long String (Line 2nd)<br />
Too Long String (Line 3rd)<br />
Too Long String (Line 4th)<br />
...
</div>
What kind of client side script should i use for ?!
Use the style property "word-wrap: break-word" u will get a multi lined string without overflow.
regards
This should do it:
<div style="width: 100px; word-break: break-all;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Not sure about your requirement. If using your code, the long text will show as multi-line text and it won't overflow horizontally by default.
Let me show you all code...
The HTML Code:
<table class="tbl">
<tr>
<td><div>Header Codes ans CSS Comes Here</div></td>
<td><p>Too Long String...</p></td>
</tr>
</table>
And The CSS Code:
.tbl {
table-layout:fixed;
width: 568px;
}
.tbl td {
border:1px solid #C93;
}
The result is something like this : http://www.4ul.com/uploads/Capture[1].JPG
And our too long string go out of the table width (if we set size for the p tag, nothing will changes...)
METHOD
The way I would fix this is by putting a p tag within your div and style is so that it has a width, is floated and has display set to block, this should fix your problem, and this does not include any jQuery so it will reduce client load times.
EXAMPLE:
HTML:
<div class="container">
<p>
Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String... Too Long String...
</p>
</div>
CSS:
.container {
float:left;
width:500px;
background-color:#000000;
}
.container p {
float:left;
width:500px;
display:block;
color:#FFFFFF;
}
JSFIDDLE: http://jsfiddle.net/8WP4J/
Source:
General knowledge from using HTML and CSS for similar problems
Hope this helps, any issues, feel free to comment.