I started to design website using the 960 grid system everything works amazingly apart from the following
<div class="grid_1 pagelink prefix_12"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
<div class="grid_1 page"><p>3</p></div>
<div class="grid_1 pagelink"><p>4</p></div>
I need the above 4 links to be in a container, so that i can have a white background across all for boxes, so I am doing this:
<div id="somecontainer">
... the code above
</div>
I also tried
<div class="grid_4">
... the code above
</div>
But this does not work. If the above had worked I wanted to add this style:
#somecontainer{
background:white;
overflow:auto; /* I added this but not difference */
}
I hope you can help me fix this problem
thanks
Try This
#somecontainer{
width:960px; /* or 100% */
background:white;
overflow:hidden; /* I added this but not difference */
}
Related
I am creating a web page and wanted to use a system similar to foundations/ bootstrap with defined columns and rows. I am happy with what I have so far, however I am not sure how I can center a column within a row, while still using a defined grid system.
I know usually the html is formatted like this:
<div class="column column-6 center">
http://codepen.io/Kiwimoose/pen/dpvEqO
Is what I have so far,
I am just not sure how the "center" tag is usually formatted in foundations. I would like to have the column in the second row centered, as well as others in the future.
Your code is OK, you just have to change the order in CSS:
.column {
position: relative;
float: left;
display: block;
}
.center {
margin:auto;
float:none;
}
Style .center class after . column class and it will work.
BTW, it is a good idea to clean up your code a little bit.
Try
<div align="center">
And then you can customize it in the css that you're doing
In Zurb foundation you can use "-offset-" and "end" class names,
for example
<div class="row">
<div class="large-6 large-offset-3 end columns">6 centered</div>
</div>
docs here
to center properly (with no headaches) with Twitter Bootstrap you can simply set empty divs as follows:
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
centered div in all resolutions
</div>
<div class="col-xs-3"></div>
</div>
Or you can use offset too
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
Any poiinters much appreciated.
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
I completely disagree with the answer. You shouldn't have to use !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
Foundation 6 supports this feature naturally with row expanded. code example:
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Use "Section" as in:
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.
For a true edge-to-edge, full width content, add this to your CSS.
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
Simply add .full class to a .row you wish to extend full width.
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
Just override the max-width property as max-width: initial;, for example,
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).
As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
Just set the
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
If you don't give it the "row" class and put columns inside it works on a 100% width
If you're using sass, this is a better way:
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
yes, just use like this:
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>
I'm getting troubles with this issue for a long time. I believe that it's a quite common problem for float layout and I wish someone would give a "standard" solution.
As title, the problem is about nested floats. Consider the following simple layout:
<div class='parent clearfix'>
<div id='child1' style='float:left; width:500px'>
{ ... child 1 content goes here ... }
</div>
<div id='child2' style='margin-left:501px;'>
{ ... child 2 content goes here ... }
</div>
</div>
Here clearfix is a common technique for auto clearing floated children. The problem is, the layout is broken if child2 contains another clearfix element. For example, if child 2 content is:
<div class='inside clearfix'>
<div class='sub1' style='float-left; width:100px'>
{ ... extra content goes here ... }
</div>
<div class='sub2' style='margin-left:101px'>
{ ... extra content goes here ... }
</div>
</div>
So generally, if we use clear:both inside a floated layout (inside the non-floated element), it also clears the parent container.
I know how to do it if using absolute position and a bit of js, but it's not a good practice.
How to fix it using float?
Thanks!
you can also use overflow: hidden;
<div class="wrapper">
<div class="float"></div>
<div class="float"></div>
</div>
.wrapper{
overflow: hidden;
}
.float{float: left;}
check demo on jsfiddle
While working with floats, i follow a simpler approach of using an extra div with class clear. This is much easier, understandable and less error prone.
Following is what i do :
<div class="parentClass">
<div class="float1">
. . .
</div>
<div class="float2">
. . .
</div>
<div class="clear"></div>
</div>
In CSS, the clear class is like following :
.clear { clear:both; overflow:hidden; }
You can try this approach and I am sure things will pane out good. Best of luck !