I am experiencing a problem with vertical alignment with products on the vape site I'm working on, I can't seem to align the products, reason being mainly is because description length, star rating and price/sale differ by up to 3 lines.
Ideally I would like to align:
top of pics
And
add to cart/choose options
not just one or the other as it is right now.
Here is the vape site I'm working on.
Would anyone be able to help with this?
In the div with the classes box-text box-text-products text-center grid-style-2 I would add another class or add the following to the box-text class.
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: row;
Then add align-self:end to the div's with classes price-wrapper & add-to-cart-button. You might also need to make sure that the overall containing div is set to height of 100%, I think it is the div with the class of col-inner. If you have more questions about using css grid you can refer to CSS Trick Guide to Grid.
Related
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
I have a website which has to be working on all browsers. I am designing a menu like the below image
I made this menu by using the following html and css code
Html
<ul class="menu">
<li><img src="images/ico1.png" alt="home"><span>Home</span></li>
li><img src="images/ico2.png" alt="products"><span>Products</span></li>
<li><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></li>
<li><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></li>
<li><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></li>
</ul>
Css
.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}
It works perfectly in chrome, Ie9, firefox etc. But when i check in Ie8 the menu is collapsed like the below image
How do i rectify this error?
don't have ie8 at my disposal currently, but after looking # your markup/styles here are my thoughts:
1. the misalignment is more than likely margin-padding issues...looks like there is not enough room for the spans on the same line as the icon, and this break is amplifying it because once the spans are pushed off that line, they have margin-top declared, which is just pushing them farther away.
You have a few options here: 1st of all, target the menu in IE8 with conditional comments; illuminate the involved elements (i like to use contrasting bgs/borders/etc., whatever makes each element stand out from the group) and inspect them in F12...if the answer(s) isn't obvious off the bat, start comparing physical pixel sizes to another browser. So if you use Chrome in this case...you can find an element's dimensions by hovering over if Developer Tools are open...how does Chrome's size(s) compare to IE8's size(s)? If they sizes are not disparate, repeat this process for the same elements, only checking positioning, layout, padding, and margins. (# least) One of these should not match up to the other browser. You're going to want to compensate for the user agent rendering differences, and this is achievable using the conditional comments we've already used to target the menu. So lets pretend that all the li elements are vaguely 130px wide...if you notice that they're only 115px in IE, apply 15 more pixels of width to IE8 and only IE8 via the cc's.
i'm rambling bc i suck, but i'll try and wrap this up...your markup example is missing an opening bracket on the second li, prolly want to fix that first before you do anything else.
ditch the padding on the lis. also, apply display:inline to them and make your anchors display:block; float:left...that's a super easy to way to get rid of and/or test margin/padding issues.
i'd also place the icon into the a as background-images...that's me being particular, but that's actually a solution to your problem too...the spans can't collide with the imgs if there are no more img elements in the markup.
another possible easy solution here: the spans are floating left and applying a left margin...simply having the float:right could be a solution; floating them right and ditching the margin-left would be my second attempt, if simply float:right didn't resolve it.
I'm new to fluid grids, btw i'v started learning about diferent types and now trying to build page in cs6 (maybe not the right choice). I have a problem which I didn't have when building pages that are not fluid. I need to create different background images for header and footer that are 100% width and as wide as the screen, not just as wide as media-query, and also to setup the page to be 960 centered.
Are you trying to make the header wider than the rest of the page?
To do so, create different div's in the document. For example, I normally work all of my divs inside a master div, so that my entire page is affected. For example, a page with a main div, header, body, and footer:
#main #header #body #footer. The header, body, and footer are all create inside of the main div. To make everything float in the center of the page at a width of 960px, then you'd simply apply the attribute to the #main div like so:
#main {
width: 960px;
margin: 0;
}
The margin will cause the div to float in the center. It does not have to be any specific value, but you do need a margin to the left and right of the page.
To only float the remainder of the page, create everything else inside of the main div but the header and footer, and set the width of the header to 100%. So you would have the following overall snippet:
#header, #footer{
width: 100%;
margin: 0;
}
#main {
width: 960px;
margin: 0;
}
If you don't already do so, it'd be wise to add some padding on either side so that the images and text don't appear to run into the side of the page (which makes it difficult to read or view). 5px is usually all I add.
I have a jqGrid that has add/edit dialogs with a form that's longer than the dialog height but the dialog won't scroll. I've tried to add an overflow: auto style to the dialog but no effect:
$("div.ui-jqdialog-content").css("overflow", "auto");
Although, if I change auto to scroll, I at least see a scrollbar but still no scrolling:
$("div.ui-jqdialog-content").css("overflow", "scroll");
This at least gives me a small glimmer of hope that I'm on the right track.
There doesn't seem to be any direction from the API documentation to support scrolling:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Does anyone know how to add a working scrollbar to the jqModal dialog window used by jqGrid?
UPDATE
This is a total hack job but I got a scrollbar to appear and function doing the following:
setTimeout(function() {$("#FrmGrid_list").html('<div style="height: 300px; overflow: auto;">' + $("#FrmGrid_list").html() + '</div>');}, 1000);
I attached this to the afterShowForm event. However, this really doesn't solve the problem because it causes other issues with other fields.
I thought I'd share my solution for others to reference.
The form element has a default height: auto; style property which causes the overflow: auto; not to function as desired. To make the overflow scroll, the height needs to be set to a fixed number to constrain the form container and therefore make the overflow necessary.
I attached a css update to the afterShowForm Form Editing event, using the following code:
afterShowForm: function(form) { form.css("height", "300px"); }
Mind you, 300px is an arbitrary number that I selected for testing. That number will be tweaked to fit my needs. It may even be dynamically adjusted on resizing. Who knows.
Also, using Firebug I found that my form id is FrmGrid_list. My grid id is list (e.g. <table id="list"></table> and jQuery("#list").jqGrid({...});). If your grid is named something other than list, the form id (above) should reflect that.
Reference link:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
Your problem sounds strange. Every edit/add dialog has already a scrollable form with the name "FormPost" inside. This form has following style:
position: relative; width: 100%; height: auto; overflow: auto;
I just tested one jqGrid with a lot of controls and can scroll there without any problem.
The reason of the strange behavior which you have is probably that you either forget to include optional jqModal.js and jqDnR.js (see the same http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing page at the beginning) or use the wrong path to the files, so they will be not loaded.
This question is VERY old, but I'll add an answer anyway.
I don't know if this was possible before, but now you can simply use the dataheight property of the dialog (add or edit), to precisely set the height (in pixels) of the inner form. The default is 'auto', and thus it doesn't overflow. Setting the desired height shows the scroll-bar if necessary.
reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing