<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
}
</style>
</head>
<body>
<div>The property allows to Create Chess Boxes.</div>
how to repeat the above div rounded boxes until reach max width specified or according to table width or resolution & go down to next line and until reach max-height of the screen or as specified (time-table time) so that there is no need to scroll both width wise & height wise ? help needed
You can't - PHP as a server side component has no notion of browser dimensions. You need to handle something like this client-side using JavaScript.
To get your boxes to fill the width of the browser, use float: left in your css. To dynamically add boxes until they fill the page, copy the div using element.cloneNode(true), and continue until the bottom point of the div is below the bottom point of the container.
For example, something like this: jsfiddle.net/rUUuW/1/
It's a little easier with jQuery: jsfiddle.net/rUUuW/2/
Related
I can't find the answer to this question but it must have been done before.
I have four lines of small images forming "keys" in a sort of kyboard layout (see link):
http://bestmarketingnames.com/Tbanneredit_v53.php
In order to improve SEO the client would like me to use css to create buttons rather than the images that are being used presently.
The client likes the fact that the buttons (or keys) line up perfectly with the vertical margin on the left side and right side of the container. For this reason I assume the css/php/mysql must either store width information for the keys or an appropriate percentage must be used that will cause the buttons resize approriately to fill cause the images to exactly fill the container div. Also, if possible, the client would prefer that the keys somewhat match the total width of the words in them.
I am generating the dynamic parts of the page with php/mysql, and am using a single mysql table with 5 columns.
Is there an easy way to use css to create the buttons? I would prefer to not have to store the css button image widths in the database, but if I have to I can.
Thanks in advance
Tom
Check working DEMO http://jsfiddle.net/yeyene/UfVhD/3/
Calculation
button counts in each row = ( number of your buttons/4 )
then,
each button width = ( your content width/button counts in each row) - ( button counts in each row * left right margin 2px )
CSS
ul#myButtons {
background:#d6d6d6;
padding:5px;
float:left;
width:920px;}
ul#myButtons li {
list-style:none;
float:left;
width:100px;
margin:1px; /*Try deleting this float float:left; */
}
ul#myButtons li a {
display:block;
background:#aaa;
color:#444;
padding:2px 6px;
font:normal 12px Arial;
text-decoration:none;
text-align:center;
margin-bottom:1px;
}
ul#myButtons li a:hover {
background:#f0f0f0;
}
HTML
<ul id="myButtons">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<!-- links go on -->
</ul>
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
It's my first time asking here (I have visited the site several times, but never asked). Well, let's go to the question:
It happens that I'm developing a live image resizer (I know it already exists, but I'm doing my own for my own projects). It has three parameters: the image path (obviously), the size I want to resize and the extra margin I want to add. The idea is to resize the image inside a box with square dimentions. The problem is, the size I want to resize depends on the size of the outer box. For example, I have this HTML code:
<div class="image_outer_box">
<img width="300px" height="199px" style=" margin: 65.5px 15px;" src="img.jpg">
</div>
The properties of "image_outer_box" are the following:
.image_outer_box
{
height: 330px;
width: 330px;
border:solid 1px #737373;
}
The function I call is this:
liveResize($img, $size, $extramargin);
The problem here is when I send the $size, since I must be aware of the CSS properties of "image_outer_box" in order to make the right resize. And, as you can see, it's not only a matter of the size specified in "image_outer_box" but the margin I want to add. Actually, I wanted to add 15px of extra margin for the image and resize the image inside 300x300.
It's not critical to have a way to get the CSS attributes from this particular class, but it would help if I (and other developers) can apply the function without being aware of the CSS attributes of the container where the image will be placed.
If there's a way to make it, I would be great.
Thanks! (for the other times I came here to search a solution and I found it!!!)
EDIT: I found a way that doesn't require to get the CSS properties, but still I would like to have info for this matter. Thanks for those who tried to help 'til now!
Do you want to actually store the resized image, or are you just trying to display it resized? If the latter is the case, the following solution might help:
HTML
<div class="image_outer_box" style="background:url('img.jpg') no-repeat; background-position:50% 50%; background-size:100%;">
</div>
CSS
.image_outer_box
{
margin:10px;
height: 330px;
width: 330px;
border:solid 1px #737373;
}
Of course, this doesn't allow you to manually set the width and height of the image, since that depends on our CSS entirely. Change the CSS, and the size of the image will automatically change as well. I like this method quite a bit, but it won't get very far if you want to store the image or if you want to be able to set the image size manually.
I think in order to be aware of the CSS and change according to the current client side state of the image you should (I mean I would recommend) use Javascript and maybe if you want to keep the function call it over AJAX.
So I have a div that I want to be:
100% width (of viewport) - 150px
How would I show this in CSS or Javascript?
Container of your div must be position:relative (or absolute...but not default), and div style must be like this:
position:relative;
width:auto;
margin:0px 150px 0px 0px;
You can use jQuery $(window) selector to get the viewport width and change the width of the div you want
var width = $(window).width();
$("div").css("width", width-150);
You may want to go look up the CSS style
box-sizing: border-box;
Normally, the 100% is calculated for the size of the insides, which is utterly useless if your box contains any sort of padding or border whatsoever. With box-sizing, it is calculated for the outside of the border to be that size. Incredibly useful for making % sized divs with non-zero padding and border line up properly.
Heres everything put together...
http://toomanyprojects.weare88.com/uploads/fixed-col-fluid-col/
I am trying to make a grid that takes up 100% of the width of the browser window, firstly i am not sure on how to go about this grid and secondly I am wanting a div to have a random position within that grid, but will only fill the position if it is not occupied already.
I guess my question is, how would I go about it and if its even possible.
I'm guessing I would need a db to log all positions?
ps: When I say grid I don't mean 960 grid or any of them framework grids i'm just wanting a simple square grid
although i'm looking for each square to be 15px by 15px and the 'border' to be only 1px
Thanks for your help.
EDIT: All answers were great and all were acceptable I have chosen the one I have because it is the one that works best for what I want to do and the one that I used, I'm not saying that the others didn't work because they worked just as well. My initial requirements were for a fluid grid but have since changed which has made the answer I picked to be easier to integrate within my project.
Thank you everyone for your help!
You can set a <div>'s position with CSS:
#div1 {
position: absolute;
left: 100px;
top: 100px;
width: 15px;
height: 15px;
}
should work. Then, knowing each div's coordinates via their left/top (store those somewhere) as well as how big they are, you can check for "collisions" when placing a new one with some simple math.
For example, to check if a single div New collides with an Existing one you can check if any of New's corners is within the Existing's square, for example:
if LeftNew >= LeftExisting AND LeftNew <= (LeftExisting + WidthExisting) then collides
if TopNew >= TopExisting AND TopNew <= (TopExisting + HeightExisting) then collides
To get you started:
<html>
<head>
<title>Grid</title>
<style>
TABLE {
border-collapse : collapse;
border : 5px solid black;
background-color : #ffff99;
}
TD {
border : 5px solid black;
width : 30px;
height : 30px;
background-color :white;
}
TD.selected {
background-color : gray;
}
</style>
</head>
<body>
<table class="alerts">
<?
$columns = 6;
$column = rand(0,$columns-1);
$rows = 10;
$row = rand(0,$rows-1);
for($y=0;$y<$rows;$y++) {
echo '<tr>';
for($x=0;$x<$columns;$x++) {
if($x == $column && $y == $row) {
echo '<td class="selected"> </td>';
} else {
echo '<td> </td>';
}
}
echo '</tr>';
}
?>
</table>
</body>
</html>
Returns something like this:
You can use this JS to create the grid and ID each square.
w = $(document).width();
t = w/15;
for(j=0;j<t;j++){
for(i=0;i<t;i++){
$('body').append("<div id='grid_"+j+"x"+ i+"'class='gridsquare'></div");
}
}
After that you could make an AJAX call to a PHP script (passing the number of squares per row) which does the following:
Fills in the occupied squares (if necessary)
Generates a random grid location, checks to see if it is taken, and then displays it in the appropriate grid.
The problem here is that since you are dealing with a variety of browser widths, your 15px squares will result in different sized grids for different browsers, therefore you can't really log your positions to a database, since each grid size will result in different locations.
EDIT
Forgot to add
CSS:
.gridsquare {
height: 15px; width: 15px; float: left; border: 1px solid black;
}
JSFiddle:
http://jsfiddle.net/9KaKj/
Here's my overall idea (sorry, but too short on time to show you the whole thing):
Make a container div with the desired height and width; from your explanation I figured 100% both, covering the whole screen.
Prompt the server asking it for a list of stuff you want to show in your div in json format (use json_encode() in your php.)
Get the area of your container div in pixels, dissect it into squares by simply dividing its length and height by the amount of items you want displayed AND don't forget to take into account the 1px border. That's the size of each of your smaller grids.
In your JavaScript, make an array called grids. 0-pad it to the amount of grids necessary.
Loop over the amount of items you want. Inside a do-while loop, mock up a random number, and check if such a grid member already exists. If not, get out of loop, and...
Create a new div (with a class of say grid), make its contents a member of the previously fetched json object (since you'll get an array of items, the random number generation will make sure nothing gets fetched twice.) Append this div to the container div. The style is obvious, we covered it in the 3rd step.
That's it...not too complex, and without flashing white dots.
Edit: Couldn't help myself and made a short example in jsfiddle: http://jsfiddle.net/tgwnV/
Note that I didn't have time to make it a square-shape (or pretty for that matter), but hopefully you catch my drift.