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.
Related
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.
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.
Preface: Masonry is a JQuery plug in that creates a "brick-style" layout of html pages on one page. Infinite scroll is a plug in that allows for a pintrest-style scrolling of page items.
I have masonary w/ infinite scroll installed here:
http://helpknow.com/black2/
and my problem is this.
I want to position the "container" div to center the entire list of items in the page.
So I use some code like this:
#container {
left:140px; // <---- Positioning
padding:10px;
background: #FFF;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
The problem is when I do that, upon opening the page there is a quick "flickering jump" where all the masonry items move to their position ( you might not be able to see it on refresh, only on initial page load). I don't want this. I want the items to not "flicker". I want them to appear static until the user scrolls, then I want the animation to take place as expected. When I remove the left positioning this problem does not happen (but obviously the items float left and are not centered, which is not what I want). I tried wrapping the main div "container" and other items in a new div container and moving it/them around and was met with the same problem.
Have you tried 2, meaning to initialise Masonry when all your content has been loaded? Now, you are doing it as in 1...
1 This executes, when the DOM has been constructed, before all content has been loaded
$(document).ready(function(){ ... });
$(function(){...}); // short form
2 This executes, when all content has been loaded
$(window).load(function(){ ... });
3 This executes immediately, when it is first encountered by the browser
(function(){ ... })();
The latter is a self-executing anonymous function (known as a closure), which is very handy, but not here, because no content or not the right content may have been loaded when it self-executes.
UPDATE Alternatively, you can fade your #container in, which can sometimes look nice, too. See this fiddle here, which does the same with Masonry's bigger brother Isotope.
I have a div which has position set to fixed. This div is meant to be site's header.
The problem is that it should take 100 % of the width except for leaving a small gap on the right edge, where we show a custom styled scroll-bar. The body of this page has been absolutely positioned and overflow set to scroll to present the custom scroll-bar.
I tried with 100% width, but then it takes 100% of the view-port instead of its parent. I also tried setting margin-right to scroll-bar width but it seems that is not honored. Is there a way to do this without using Javascript?
Let me just say this..
If your width is set to 100%, and you set margin-right: 20px;.. then the 20px is added to the original div.
Aside from that, I don't know what you're talking about without seeing it.
Instead of setting width to 100% I would use something like
#header {
height:30px; /* assumption */
top:0;
left:0;
right:10px; /* assumption */
}