I'm trying to make an elastic layout which aligns both the left and the right margins with the far left and far right of the page, no matter how many items are shown on that line.
This is my code: http://jsfiddle.net/U2W72/1/
.thumb {
float: left;
width:16%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
background: pink;
height: 200px;
}
.thumb:nth-child(5n) {
margin-right: 0px;
box-shadow:inset 0 0 0 3px red;
}
.thumb:nth-child(5n+1) {
margin-left: 0px;
box-shadow:inset 0 0 0 3px blue;
}
#media (max-width: 1200px) {
.thumb, .thumb:nth-child(1n) {
width:21%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
box-shadow: 0 0;
}
.thumb:nth-child(4n) {
margin-right:0;
box-shadow:inset 0 0 0 3px yellow;
}
.thumb:nth-child(4n+1) {
margin-left:0;
box-shadow:inset 0 0 0 3px blue;
}
}
#media (max-width: 600px) {
.thumb, .thumb:nth-child(1n) {
width:46%;
}
.thumb:nth-child(2n) {
margin-right:0;
box-shadow:inset 0 0 0 3px gray;
}
.thumb:nth-child(2n+1) {
margin-left:0;
box-shadow:inset 0 0 0 3px blue;
}
}
#media (max-width: 400px) {
.thumb, .thumb:nth-child(1n) {
width:100%;
display:block;
margin:0;
box-shadow: inset 0 0 5px 1px;
}
}
#left {
float: left
}
#right {
float: right
}
I believe I am using nth child correctly to remove the margin from the left and right most pink boxes so they align but it doesn't look correct when I run it. Can anyone show me where I am going wrong please?
When you remove the margins from first and last element on the row, total of widths+margins isn't 100%. Example:
if you have 5 boxes with width 16% and margin left and right 2%, then total is 100%. But when you remove 2% margin from first box and 2% margin from last box, then total is 96%. Make sense?
Related
I'm trying to create a responsive web and I'm having trouble to do the media queries. I want a specific div to go on the bottom of some div. I'm new to CSS. Can someone help me about this?
I want the "Upcoming events" and the "Content" of it to go to the bottom of "Latest news" Div. The upcoming events and the content of it are different divs. Within (min-width: 1025px) and (max-width: 1260px).
Here's the original css code of the 2 divs that I want to put in the bottom.
// this is the title div. The "Upcoming Events"
.title2{
background:none repeat scroll 0 0 #FFFFFF;
padding-top: 19px;
padding-left: 15px;
padding-bottom: 5px;
margin-left: -7px;
width: 270px;
box-shadow: 0 0 3px #ccc;
display:block;
}
//here's the content
.sidebar{
background:none repeat scroll 0 0 #FFFFFF;
padding:19px;
width: 270px;
box-shadow: 0 0 3px #ccc;
display:block;
max-height: 374px;
-webkit-font-smoothing: antialiased;
}
//news div
.leftbar{
background:none repeat scroll 0 0 #FFFFFF;
padding:19px;
width: 250px;
box-shadow: 0 0 3px #ccc;
display:block;
max-height:741px;
overflow-y:scroll;
margin-left: 20px;
}
//latest news title div
.title{
background:none repeat scroll 0 0 #FFFFFF;
padding-top: 19px;
padding-left: 19px;
padding-right: 19px;
padding-bottom: 5px;
width: 250px;
box-shadow: 0 0 3px #ccc;
display:block;
margin-left: 20px;
}
my media queries
#media(min-width: 1025px) and (max-width: 1260px){
.img-responsive{
width: 260px;
height:70px;
}
.navbar-default .navbar-right > li > a {
padding: 0 10px;
margin-right:6px;
}
.leftbar{
}
.title{
}
.title2{
}
.sidebar{
}
}
Make the width of the latest news container as 100%
#media (min-width: 1025px) and (max-width: 1260px)
{
.title2, .sidebar{
width : 100% !important;
max-width : 100% !important;
}
}
Media queries are good but time-consuming and it can really mess you up. Instead of the media query go for bootstrap. It's clean and simple to use, all you gotta do is add the class name and bootstrap will do everything for you. For reference check this link
I am trying to get an image to float to the right of my div with a little space around the edges. I want the image to fill the majority of the div but with space for the link 'view project' beneath it. I've tried different floats, widths and even adjusted padding but still cannot get it to work. Can anyone tell me how to rectify this? Many thanks in advance. This is the page link if needed: http://me14ch.leedsnewmedia.net/portfolio/design.html
HTML:
<div id="middle">
<div class="section group">
<div class="block-1">
<h2>Logo Redesign & Style Guide</h2>
<p><h3>This brief involved...</h3></p>
<div class="snapshot">
<img src="portfolioresources/scenelogo.png">
View Project
</div></div>
<div class="block-2">
<h2>TV Idents</h2>
<p>This brief involved...</p>
View Project
</div>
</div>
<div class="section group">
<div class="block-3">
<h2>Web Banners</h2>
<p>This brief involved...</p>
View Project
</div>
<div class="block-4">
<h2>Multiformat Campaign</h2>
<p>This brief involved...</p>
View TV Idents
</div>
</div>
</div>
And the CSS for this particular bit (although inspect element might show other things that are affecting my divs):
/* design page grids */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colu {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.colu:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.colu {
margin: 1% 0 1% 0%;
}
}
#media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
/* style grids */
#middle {
width: 90%;
margin: 0px auto;
padding: 10px;
}
.block-1 {
background-color:#ECECEC;
width: 80%;
margin: 0px auto;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
height: 200px;
padding: 10px;
}
.block-2 {
background-color: white;
width: 80%;
margin: 0px auto;
margin-top: 20px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-top: 2px solid #FADBC8;
border-bottom: 2px solid #FADBC8;
height: 200px;
padding: 10px;
}
.block-3 {
background-color:#ECECEC;
width: 80%;
margin: 0px auto;
margin-top: 20px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
height: 200px;
padding: 10px
}
.block-4 {
background-color: white;
width: 80%;
margin: 0px auto;
margin-top: 20px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-top: 2px solid #FADBC8;
border-bottom: 2px solid #FADBC8;
height: 200px;
padding: 10px;
}
.block-1 img {
height: 140px;
float: right;
clear: both;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snapshot a {
float: right;
text-decoration:underline;
font-family: "Raleway";
}
DO this in snapshot class
<div class="snapshot">
<div class="wrap" ><img src="portfolioresources/scenelogo.png"></div>
View Project
</div></div>
and add this to ur css file to sortify your error
.wrap{
padding:2px;
}
While doing these kinda things on your own is definitely useful, so you can learn the ropes and inner workings first, be sure to use a css framework in the future (like bootstrap) so you can knock these out quickly.
<div class="view-project">
<img ... />
<span>View Project</span>
</div>
In your css:
.view-project{ float: right; width:300px; padding:40px; }
.view-project img,.view-project span{ display:block; }
A suggestion: if you want your image at the right of the div with view project beneath, I think you should contain them in another div. Like this:
<div class="snapshot">
<div>
<img src="portfolioresources/scenelogo.png">
View Project
</div>
</div>
Then float that div right and remove all other floats.
If you want the image on top of view project, set display: block; to your 'a' elements.
You need to at least define a width for snapshot. by making the width of snapshot equal the width of the image, this will leave no room for the link and will force it to drop below the image. Remove any floating on the image and link, and rather float snapshot to the right
I'm having an issue with div overlapping, I believe it's to do with different screen resolutions.
This is my CSS:
#menu {
background: #fff;
width: 790px;
}
#site {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 1075px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 15px 0px #000;
padding: 2px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#social {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
top: 250px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories img {
border-radius: 15px 15px 15px 15px;
}
And this is my HTML:
<div align="center">
<div id="social">
<h3 style="font-size:18px">Follow Us!</h3>
<a href="#">
<img src="logo.png" />
</a>
<a href="#">
<img src="logo2.png">
</a>
</div>
<div id="categories">
<h3 style="font-size:18px">Categories!</h3>
<a href="categories.php">
<img src="gamereviewresized.png">
</a>
</div>
When I visit my site, it looks like this: http://prntscr.com/6v5qaj
It looks like this for someone with a different screen resolution though: http://prntscr.com/6v5qp3
Help would be appreciated on how to prevent overlapping on different resolutions.
Thanks!
Your #site div has a 1075px fixed width and auto left and right margins.
#site {
width: 1075px;
margin-left: auto;
margin-right: auto;
}
Meanwhile, the Game Reviews tab has a fixed-width of 100px.
Consequently, any screen width less than 1275px (where the margin between the left-edge of the screen and the left-edge of #site is narrower than 100px) will lead to the Game Reviews tab overlapping #site.
Suggestions:
1) Give #site a left-hand margin wider than the 100px wide Game Reviews tab (and right-hand margin to match)
2) For #site, change the width: 1075px; declaration to max-width: 1075px; (this will enable the width of #site to shrink when the screen is narrower than 1275px).
Example:
#site {
max-width: 1075px;
margin-left: 120px;
margin-right: 120px;
}
You'll have to use media queries to adjust the height the image , in your case i am guessing the image is :
<img src="gamereviewresized.png">
here is a simple example how you can adjust the height of a img using a media query :
<img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
CSS ::
img{
max-width:400px;
height: auto;
}
#media only screen and (max-width : 480px) {
img{
max-width:200px;
height: auto;
}
}
fiddle here. , reduce the width of the display section to below 480px to see what i mean .
you can study more media queries here.
Basically, I'm attempting to get two divs side by side, here's the following layout I'm attempting to do.
<div id="content">
<div id="search">
</div>
<div id="results">
<h2>Waiting!</h2>
</div>
</div>
Here's the CSS in which is positioning these divs they're side by side but pushed completely to the left of the page when I want them centred.
#content {
}
#search {
float: left;
width: 400px;
height: 350px;
margin: 10px auto;
overflow: auto;
-moz-box-shadow: #555 0 0 8px;
-webkit-box-shadow: #555 0 0 8px;
-o-box-shadow: #555 0 0 8px;
box-shadow: #555 0 0 8px;
}
#results {
float: left;
width: 400px;
height: 350px;
margin: 10px auto;
overflow: auto;
-moz-box-shadow: #555 0 0 8px;
-webkit-box-shadow: #555 0 0 8px;
-o-box-shadow: #555 0 0 8px;
box-shadow: #555 0 0 8px;
}
You can center the container area using margin: 0 auto. Try this -
#content{ margin: 0 auto; width: 90%; }
This might helps.
you have to center the wrapping div to center both of them. try it live here http://jsfiddle.net/dAVub/
#content {
width:800px;
margin: 0 auto;
}
There are many ways of doing this, but the most important thing is that you should set the overflow on your container appropriately when your inner elements float. For example, you could just replace your CSS altogether with:
#content {
overflow:hidden; /* or auto, or visible */
width:820px;
margin-left:auto; /* not necessary by default */
margin-right:auto; /* not necessary by default */
}
#content > div {
float:left;
margin: 10px auto;
-moz-box-shadow:#555 0 0 8px;
-webkit-box-shadow:#555 0 0 8px;
-o-box-shadow:#555 0 0 8px;
box-shadow:#555 0 0 8px;
}
add this to your css
#content {
text-align:center;}
replace float:left with display:inline-block; in #search and #results
Demo
I am trying to make two floated divs with box-shadow to display the shadows outside of their container. It won't display because their parent has overflow: auto set, which cuts off the shadow, but is nevertheless necessary so the parent won't collapse because both child divs are floated. If I set the parent to overflow: visible it collapses, obviously, because the children are floated. Thanks for any help.
JS Fiddle: http://jsfiddle.net/zJGVz/
HTML
<div id='parent'>
<div id='child1'></div>
<div id='child2'></div>
</div>
CSS:
#parent {
margin: 0 auto;
width: 200px;
background: green;
overflow: auto;
}
#child1 {
width: 150px;
height: 200px;
float: left;
background: pink;
box-shadow: 0 0 10px 0 #000000;
}
#child2 {
width: 30px;
height: 200px;
float: left;
margin-left: 20px;
background: blue;
box-shadow: 0 0 10px 0 #000000;
}
You can add a 5px margin to both children on the sides that touch the edge of the parent.
#child1 {
width: 700px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 0 5px 5px;
}
#child2 {
width: 300px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 5px 5px 0;
}
See the JSFiddle.
Try changing the overflow to 'visible'
overflow: visible;