I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:
The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background.
The problem comes when I try to re-use the grid inside an 'inner' <div> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size).
I tried redefining my grid column sizes inside the .inner class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <div>s inside the .inner container, but obviously if there are more or less than 2 then things start to look wrong.
Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.
thanks
Matt
the 960gs has an .alpha and .omega class for allowing nesting. Usually this removes the leading 10px and trailing 10px margin from the elements you apply it to. You might be able to reverse these and misuse them to give you the padding you need - the overall column widths would add up, but the padding would be on the "wrong" side
<div class="container_12">
<div class="grid_12">
<div class="grid_5 omega">...</div>
<div class="grid_3 alpha">...</div>
</div>
</div>
I haven't tested this though so not sure that it would work
Related
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I'm quite new to CSS and I always try to figure things out on my own, but this one has got me stuck for far too long... A little help would be extremely appreciated. :-)
Basically, what I have to do is a page with a centered container that contains 4 different sections that take 100% of the width of the container. Now, the tricky part is: each of these 4 sections have a different textured background that extends beyond the centered container and take 100% width of the page.
Here's the basic wireframe:
http://i.imgur.com/Qlwjb.jpg
I thought of a few says to do this:
• 1 : Instead of having a main container, just make 4 divs that take 100% width of the page, apply their textured background and then make another 4 divs with a .class that would give them a width and center them. That would solve the issue, but the thing is that I must avoid making additional divs when possible. (I'm a student, you see, and the fewer divs I have, the better for my grades. :-/ )
• 2 : Apply a vertical background-image that would contain all 4 textures to the body and make sure it only repeats itself on the X axis. That's probably the easiest yet dirtiest way to do it: while the 4 sections should have fixed heights, if I ever need to add something to one of them, things would get ugly and I'd have to make another vertical bg-image that fits.
• 3 : Probably the "cleanest" way to do it: apply multiple backgrounds to the body and make them start at different distances from the top so that they don't overlap. But that's where my CSS skills come short: I'm not quite sure how to do that. Also, as I am a student, I've got to try to keep things simple while using "advanced" techniques in order to get better grades. Which means: if I choose to apply multiple backgrounds to the body, I should probably try to use a sprite that contains all 4 backgrounds:
http://i.imgur.com/Awr4L.jpg
...Which would again make things a whole lot trickier to me. I just don't know if it's possible to apply a repeatable background-image and only display a given part of it if the element it's applied to (in this case, the body) doesn't have a defined size. Is there a way to "crop" a bg-image and repeat it without giving a size to the element it's applied to?
Thanks in advance for your help!
I think solution 1 is the way to go. I wouldn't stress too much about having the extra divs - if the design requires each section have its own textured background that spans the width of the page while the content is centered then the extra divs are necessary.
The other options involve too much trial and error (can you ensure the height of the content on one section is not going to extend past the point where the next background has been "magically" positioned?).
I've had to do a similar thing in the past. Here's how:
Create the 4 divs stacked on top of each other spaning 100% width (the default behaviour of a div)
Give each one it's own css class and assign the background image to that class.
For the centered content, create a reusable class (.container) that has the global styling to be applied within each div (width: 960px; margin: 0 auto;)
So your markup will look something like -
<div class="div1">
<div class="container">Content for div 1</div>
</div>
<div class="div2">
<div class="container">Content for div 2</div>
</div>
<div class="div3">
<div class="container">Content for div 3</div>
</div>
<div class="div4">
<div class="container">Content for div 4</div>
</div>
Your css will be something like -
.div1 {
background: url(../img/bgs/div1-bg.jpg) 0 0 repeat;
}
.div2 {
background: url(../img/bgs/div2-bg.jpg) 0 0 repeat;
}
.div3 {
background: url(../img/bgs/div3-bg.jpg) 0 0 repeat;
}
.div4 {
background: url(../img/bgs/div4-bg.jpg) 0 0 repeat;
}
.container {
width: 960px; //based on 960 grid
margin:0 auto; // used to center the container based on it's width
}
Use whatever background positioning and repeat rules you need for your design but that's the general idea.
The goal with css is to try identify the common design patterns and uses classes to try reuse those patterns as much as possible (like the container class above) - rather than doing individual styles for each element.
I highly recommend you read Jonathon Snooks Smacss and this blog by Harry Roberts
Hope that helps :-)
How do I make multiple columns with equal heights that has a border between each section AND keeping it responsive... (see image below). I know you can use a background image if you have two columns but when theres more, the whole responsive part goes going.
EDIT: heres a jsfiddle I've made: http://jsfiddle.net/kF9LA/
What about two bg images, one with a border 1/3 from the left, and one with a border 1/3 right from the right? Then apply them in a pair of containers with background-position:33.3% 0; and background-position:66.6% 0;, respectively.
Similar to using a single image with a border in the middle, and background-position:50% 0;
Edit:
After running a quick test this seems to work, and it's fluid/responsive.
HTML
<div class="container">
<div class="bg1">
<div class="bg2">
<div class="content">...</div>
</div>
</div>
</div>
CSS
.container {width:100%; border:2px solid #000;}
/* Tile a 2x1 image for the border */
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;}
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;}
Edit 2:
Removed height:200px; from .content and added some text content to the demo, to show that the height can grow based on the content. Replaced the two bg images with a single 2x1 image.
You can take a look at the solution from Matthew James Taylor:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I've got a couple of answers in a similar thread here. The best way to do this depends entirely on if you need the user to visually see the divs are the same height. If your final site will look like this mock-up (the only visual cue being the borders), you don't necessarily need to use MJT's method and instead could use a background image, like this.
As stated in the comment in the link above, this method won't work for horizontally fluid layouts, but if you have a fixed-width layout, you can use the background image for as many columns as you like. Just make sure you're math is right :)
However if your layout needs to be completely fluid, MJT's method is best. It requires extra mark-up, but is bulletproof.
The simplest way to achieve this is just to use a table with bordered cells, but if you have a lot of time on your hands, the CSS approach suggested by #nebulousGirl is the way.
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!