I have used HTML5 template to build a simple web site http://glassta.com , however from past one week i am struggling with a css issue. From attached image you can see there is a gap in right hand side and bottom. Can you please help me to identify the html element creating that gap and how to fix it. Please let me know if you require any other information. Web site url - http://glassta.com
Okay, your problem is when the page loads, there is a massive height that pops up. I'm guessing it's the carousel items that's stacked underneath each other. This causes the vertical scroll bar to appear. The carousel then initializes but is taking the width of the viewport that contains the scroll bar. After the INIT the scroll bar hides and you're left with the space it took up.
I haven't used that library yet so I'm not sure how you'd go about fixing the issue. Maybe place an overflow: hidden; on the body tag.
Thank you for providing valuable clues, i looked into master slider documentation http://www.masterslider.com/doc/#quickstart and found the slider height is controlled by javascript not css.
I have modified javascript width and height to solve the problem. This javascript will in your index.php page.
slider.setup('masterslider', {
width: 1400, // slider standard width
height: 620, // slider standard height
space: 1,
layout: 'fullwidth',
loop: true,
preload: 0,
instantStartLayers: true,
autoplay: true
});
Related
I have been looking for a Latest Firefox-like tab written using css but cannot find one.
Sorry, to make sure I am clear, I am trying to replicate the look in order to use it in a web application or a website
if you can have already a script (css) for tabs try to just play with the border radius:
border-radius: [first corner value]px [second corner value]px [third corner value]px [fourth corner value]px;
PS (Hint)
The values in CSS can even be negative
Hope this [tries to] help
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.
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.
I am trying to compile a pinterest style layout for my site. And have accomplished it, other then the load times. I have set about to get the load of my site as fast as possible.
To do so, I have come across the lazy load script (as can be found here: http://www.appelsiini.net/projects/lazyload) which essentially loads the site first, and then the images, thus speeding up the usability of the site on load, similar to what pinterest does..
The issue I have been having is, while the script works, because we have a box around each image to style and present it, and undefined sizes on the images, the layout comes out all messed up every time. Essentially, the image sizes are always surprising the layout once they load.
What is the best way about going about fixing this problem? What does pinterest do? Similar to them, we have images of all shapes and sizes, that will be added dynamically to our site by users via both php and javascript, so simply figuring out all the sizes of each image ourselves is not something we can do.
Thanks for your help!
Pinterest most likely has measured the images and stored the image dimensions in there database. Then simply output the height within the img tag, width is not dynamic as its set by CSS
First a set rule in css controls the width of the image (this wont change):
.pin .ImgLink img
{
max-width: 192px;
opacity: 1;
}
.PinImageImg
{
min-height:75px;
background-color:#f2f0f0
}
and then the HTML markup of each img tag controls the height (this changes for each image):
<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />
This way there is no popping of layout as each image is loaded by javascript.
I am trying to export some dynamic content into a PDF file with a small bit of page formatting.
I'd like to have the PDF pages have a small padding with a border and then inside that border, a small company logo should appear up the top right on each page.
Now the issue is that because the content is dynamic, the number of pages and content per page can vary. This means I can't manually create a DIV with a border and an image inside because the content could be more or less pages depending on what gets exported.
I'm trying to find a way to create a 'page background' for each PDF page and then in this background I would then draw up the borders and the logo and then have all the content superimposed on this customer background.
Is this even at all possible with DOMPDF? Or are there any alternatives that may provide a little more customisation like this?
jfoucher's method could be what you need, but if you need an HTML content and/or a logo on each page, you could also use DOMPDF from the SVN trunk, and use fixed positionning, like if the "CSS position fixed" example here.
This is indeed possible with dompdf.
What I do is simply set the following CSS properties (or similar) on the body:
body{
background-image:url('/assets/img/bg_pdf.jpg');
background-repeat:no-repeat;
background-position: 15px 1450px;
}
In this case, I am using it for a page footer, but change these values according to your needs. The pixels values are obtained by trial and error... The background is an actual image, which you'll have to create in an image editor.