I have this site My Site. If you try to resize the window you will see the image resizing. I want the page to work exactly as this one : Template
I am tried with no result the min-width and text-wrap in the following code :
.wrapper-style1
{
background-image: none;
background-color: #eae5e5;
min-width:70%; \\I changed that with some pixels but nothing changed.
}
I tried to put some classes that inherit from .wrapper-style1 like : .wrapper-style1 a img and with minimum size and it did not work.
Looks like you need to set a div to hold your elements and images. That div needs to have a fixed width (say 400px) to prevent all the elements getting squashed up together.
Related
Here is my project (1000px x 1230px). I want this element taken from my project (this header picture originally has 1500px x 354px) to:
1. be inserted with background-image property
2. that background-image to be direct child of body tag and
3. so that height and width would scale proportionally along with scaling the browser window.
If it was possible to carry out the above operation the paramerers would be width:100% hight:19.19% but when I enter hight:19.19% the image does not show at all, QUESTION: WHY IS THAT SO? I inserted background-image into section tag and this is how it seems to somehow work (but I do not know why it works):
section.super {
position:relative;
padding-top:11.8%;
padding-bottom:11.8%;
background: url(header.jpg);
background-size:100% 100%;
margin: 3% auto 0;
}
If I insert a div or article inside the given section tag above and specify width and height with % for background-image inside this div or article, the height WOULD WORK. But as a direct child of body tag the height does not work, why is that?
I know that there is an alternative IMG TAG but it will not work in rensponsive layouts where in different page sizes I will want substitute different .jpg (for instance) files (with higher and lower size) in which case I would need to paste different images to the same element in mobile styles, in tablet styles and deskop styles.
Although I am not sure i completely understand your problem, have you tried to use:
background-size:cover;
instead of:
background-size:100% 100%;
?
on your file css you should put:
body {
background-image: url("http://s12.postimg.org/ymlx2m65n/header.jpg");
}
http://primoburgers.herokuapp.com/
I am working on this website. It looks fine on my laptop, but when I load it onto a bigger desktop monitor, it has a red bar under the html tag at the bottom of the page. This red bar shows under all of the pages. Does anyone know how to remove this?
Thank you for taking the time to look at this!
You need to set your html and body elements to height: 100% first.
After that set top-pic-wrapper to height: 85% or so. % height wont take effect till the other parent elements also have a height set for them.
No need to define a height for your menu pic class.
Just change your class below
.heightMenuPic {
height: auto;
}
http://sorgalla.com/projects/jcarousel/
Above is the carousel application i'm using (one of the more popular open source ones at the moment) and I can't figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page - when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.
That carousel uses <img> tags which means you'd either have to specify each width in the markup like this:
<img src="..." height="..." width="170" />
or use the img selector in the CSS file, something like this:
.jcarousel-skin-tango .jcarousel-item-horizontal img {
width: 170px;
}
Either way, you'd also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:
ul#carousel {
width: 99999px;
}
The carousel would stop at the last image anyway, but at least you'd know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.
i have an dynamic image gallery to display, using PHP...
My PROB
the style & positioning should be that if there is not enough space for a whole div, like in the image above, then the DIVs in the row should position them like the following
centered and equi distant...
here is JS-Fiddle basic template set, if somebody wants to try something on jsFiddle
If you wanted to achieve this with just CSS, the code would be as so:
#div {
clear:both;
width:500px
}
.img {
display:block;
width:150px;
height: 50px;
float:left;
}
As far as I remember, that's it..
Good luck!
Never "clear" the float (at least until the end of the grid).
Enclose each img in its own DIV with the float:left style,
Important: Give each of those DIVs the same HEIGHT (slightly larger than the largest photo), otherwise if the images are different heights you will get some weird floating.
Optional: If your images are different widths, and you want a nice 'grid pattern', then you can give all the DIVs a width property.
Beware of the effects of margins on overall height/width.
Also note that if you use the standard meta viewport tag on your pages to format them for narrow mobile screens, this will shove all your images into columns to fit that screen without shrinking them unbearably (provided something else doesn't make the page wide).
#div {
width: 220px;
height: 215px;
float: left;
}
you can achieve all of that simply with css width property for div
#div {
width:500px;
}
We implemented almost the same here
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
here also , you can switch between grid view and normal view , all we are playing around is with divs width
http://www.allposters.com/-st/Animal-Posters_c622_.htm
Google had the same problem with their image search... they had to overcome it with fancy scripting. Looking at the source, each row of images is a <ul> inside a <span>, and each image is in an <li>. Then when you resize the window, the images get moved from one <ul> to another. That's the best method they could come up with, apparently.
So, using jQuery:
blocksPerRow = Math.floor($('#container').width() / blockWidth);
$('.row ul').each(function () {
while ($(this).children('li').size() > blocksPerRow)
($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
while ($(this).children('li').size() < blocksPerRow)
($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});
I think that should do it. Add that to $(window).resize() as well as the document ready event.
In my page there's only one image. Kind of 1500x3000 px.
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?
One way to do it would be to perform some calculations to find out what width would cause the length to be exactly one page, and then set your width in the CSS accordingly.
If I understand this right, could you do
.OnePageImage { height: 100%; width: 600px; }
Where 600px (the width) is the total width of the page. Then the image would fit on one page (albeit with some distortion potentially). You could also add a css page break style to a div before and after the image, which is done like this:
.break { page-break-after:always; }
Then the code would look like this:
<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>
The only thing that limited the print output to a single page for me was setting the height in cm of a container element that wrapped the entire page, and also setting it's overflow to hidden. For some reason this didn't seem to work on the body element.
body > section {
padding:0 !important;
margin:0 !important;
height:25.7cm !important;
overflow:hidden !important;
}
Incidentally, I had hoped that setting page-break-inside to avoid on the body or the container element might have been the solution to limiting to a single print page but that doesn't seem to have any effect at all.
Ok sorry for putting the "solution" as a comment:
What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far