I have a php script that returns a list of small images (like thumbprints) that are displayed based on search criteria.
I'd like these images to be displayed on after another until they reach approx 45% across the screen and then if there are more images than will fit in the space, the images continue on to a new line.
I have used CSS to set the following within a div.
.example {
Float: left;
Width: 45%;
}
But the images continue beyond the 45%.
If I used the style overlap:scroll; or overlap:hidden, the images stop at 45% and either you can scroll to see the others or they are hidden.
How can I make the images continue onto a new 'line'.
I've tried word-wrap without success.
Thanks for your help.
the way you describe it it should work just fine.
I made a jsfiddle DEMO
images are by default displayed as inline elements, if the elements are not images try using display:inline on them or display:inline-block.
Try adding display:inline-block; to the element.
Related
I've recently started a new job at an Audio Visual company and they've asked me to develop an application that allows users (without authentication) to upload images to a display page and have it automatically scroll through.
I chose the only carousel I've ever found helpful but my issue is that the landscape images are not vertically aligned with the portrait images.
My code is set up so that the uploaded image is sent through to a database and then retrieved to display automatically in the carousel so each image has it's own individual div tag.
The page itself won't load without database connection and doesn't work in JSFiddle because of the PHP elements within.
Also here are screenshots of my issue:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
I want image 2 to display in the center of the page and everywhere I look for the correct information I don't seem to find what I'm looking for.
Please help me, I would very much appreciate it!
AlexJamesDean.
You can add position to image div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
i am making a group type page thing, and i have a div on the side of my webpage, which gets its members from the database, and so when there is like 5 members showing, i would like no scrollbars on the side but if the box fills up say with 15 members, i would like scrollbars to appear in the div box. I was wondering how is that achieved with html, css or php (simplest way possible).
Whatever DIV you are using to contain this content make sure you change the overflow attribute to auto and then it is just a matter of making the height of the DIV tall enough so that it won't show a scroll bar when 5 peoples names are in the box, make it so when about 15 or so names are in the box it will be full therefore the scroll bar will automatically appear...
It should look something like this:
.currentmembers{
width: 100px;
height: 500px;
overflow: auto;
}
Using overflow: scroll; will also leave a horizontal scroll bar which I'm assuming you don't want so overflow: auto; will be the most appropriate. Also the height of your DIV will depend on the font sizes that the names will be in, the smaller the font size the more you will be able to fit in that one box before the scroll attribute comes into play.
I was wondering how I could recreate this table from this image. For my class project we are supposed to redesign this page, however I have no idea how to implement anything like that. It seems almost as if someone embedded an excel spreadsheet in the page.
Use a table header to add the blue background to the top row with CSS.
th { background: some blue-ish color}
Add a fixed width div (the table should be inside this div) and use overflow: scroll; for the scrollbar effect.
Rowspan for the first column.
Pretty basic CSS stuff, do you need to add functionality too or just the CSS?
I have a contact form displayed in an iframe in an overlay div that I have adjusted to fit the div within the guidelines of the div dimensions. There are no scrollbars showing when the div first appears. Then I fill out the form, hit send, and there is a moment right after I hit send that the vertical scrollbar appears, obviously while the form is sending, and then the scrollbar disappears again after I get the confirmation screen.
Now I don't really know where to start, except that I believe my css is good. I have two css files attached to my contact.php. I also have a process_form.php and three javascript files (two of which are jquery references). I don't want to paste all of them here because of all the code. Like I said, I have went through the css up and down, but I am not as experience with js or php to see if it is something in the code there. If anyone can point me in the right direction as to where to look, that would be great. If you want me to post a certain section of code, I will. But like I said, I don't want to just post random code here. In the image above, the top screenshot is before I hit submit, the second image down is seconds after hitting send, and then the last image is my confirmation. The scrollbar is only vertical for a second. And I have already applied the following class to my iframe, which does not help:
.restrict{
width: 700px;
height: 380px;
overflow-y: hidden;
}
What is peculiar about that also, is that I had to adjust the width of all the elements in my contact form perfectly to get it to fit into my display div because the vertical scrollbar kept showing anyways with the above class. So I am not sure why the overflow property wasn't working before I adjusted the width in my css of my elements, but I could not get rid of that vertical scrollbar until I got my form to fit inside my display div.
Any suggestion as to how I can just get the vertical scrollbar not to show up at all would be great if it is too difficult to examine my code to find the problem in the first place.
Instead of using css you can use html to hide scroll bars. Like this-
<iframe scrolling="no"></iframe>
I hope this helps.
Currently I am dynamically generating 1-(N) images via php GD based on user form input, and then posting into an iframe, that displays the image.
But theres a couple of problems:
Iframes seems to be a drag when styling.
The user dont seem to be able to "rightclick->saveas" the images properly when in iframes.
So are there any better methods for doing this?
Use a fixed size div element with overflow: scroll set on it.
For example:
#container {
width: 600px;
height: 300px;
overflow-y: scroll; //vertical scrolling only
}
It behaves in the same manner as an iframe, but allows you better control of both content via javascript and styling via CSS.