Bourbon/Neat has a neat feature that provides automatic rows (http://neat.bourbon.io/examples/) but I cannot get this feature to become responsive. In my example I use 4 columns for large screens, and 3 columns for medium screen. The 4-columns layout show up nicely, every 4th div wraps to a new row. When I reach the media query point, the layout breaks apart. The divs wrap unexpectedly.
the sass:
#import bourbon/bourbon
#import neat/neat
$medium-screen: new-breakpoint(max-width 992px 12)
.content
border: 1px solid blue
.child
+span-columns(3)
+omega(4n)
border: 1px solid red
+media($medium-screen)
+span-columns(4)
+omega(3n)
border: 1px solid green
Some example html:
<head>
<meta charset="utf-8" />
<!-- Standard Meta -->
<link rel="stylesheet" type="text/css" href="sass.css">
</head>
<body>
<div class="content">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3 <br> foo </div>
<div class="child">child4 </div>
<div class="child">child5</div>
<div class="child">child6</div>
<div class="child">child7</div>
<div class="child">child8</div>
<div class="child">child9</div>
<div class="child">child10</div>
</div>
</body>
</html>
Does someone know when if the 'automatic' row feature can be used with media queries, and if yes how to do it?
The problem comes from the Neat way to clear floats.
When you're over 992px, Neat uses this CSS:
.content .child:nth-child(4n+1) {
clear: left;
}
And when you're under 992px, it uses this CSS:
#media screen and (max-width: 992px) {
.content .child:nth-child(3n+1) {
clear: left;
}
}
Neat doesn't "cancel" the clear: left on .content .child:nth-child(4n+1). You then have a clear: left on the 4th and on the 5th element. To avoid this problem, you'll need to encapsulate every +omega() in it's own media query.
Here is a Sass example to fix the issue:
#import bourbon/bourbon
#import neat/neat
$large-screen: new-breakpoint(min-width 993px 12)
$medium-screen: new-breakpoint(max-width 992px 12)
.content
border: 1px solid blue
.child
+span-columns(4)
border: 1px solid green
+media($medium-screen)
+omega(3n)
+media($large-screen)
+span-columns(3)
+omega(4n)
border: 1px solid red
You can use this to fix the problem;
https://github.com/joshfry/omega-reset-for-bourbon-neat/tree/master/dist
Related
I am creating a website about UFC and need help with my image positioning I have 3 images and want to place them in a horizontal arrangement across the screen but am having trouble doing this.I have created a div around each of the images to try and position them but cannot seem to get the result that I want, any help would be great.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.html">
<link rel="stylesheet" type="text/css" href="topfightercss.css">
<h1><u>Top Fighters</u></h1>
</head>
<body>
<div id="demetrious">
<img src="dem.png" alt="Demetrious Johnson"> <p> Demetrious Johnson is the
rank 1 pound for pound fighter in UFC,<br>he is from Kentucky USA and is
aged 31 and stands at 5'3 (160cm)<br>he weights 56kg (125lb) and has a reach
of 66" with a leg reach of 34".<br>He has a record of 27 wins 2 losses and 1
draw and is the curent<br> flyweight champion. </p>
</div>
<div id="connor">
<img scr="connor.png" alt="Connor Mcgegor">
</div>
<div id="daniel">
<img scr="daniel.png" alt="Daniel Cormier">
</div>
</body>
</html>
CSS
html {
background: url(pg2background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
color: aqua;
text-align: center;
font-size:24pt;
}
.demetrious {
position: relative;
top: 8px;
left: 12px;
width: 450px;
height: 300px;
opacity: 0.3;
}
p {
color: aliceblue;
}
.connor {
position: center;
top: 8px;
right:12px;
}
.daniel {
position: relative;
}
You can set up a container div with class .container with a fixed width of x pixels, x = 3 * image width, because you have three images. Only use this if you want the images to stay horizontally aligned when the browser window is smaller than the width of 3x
.container{
width: x px;
}
Then give a shared class to your image divs, let's call it .imgClass. Now turn them to float;
.imgClass{
float:left;
}
EDIT: This means your topfightercss.css css file should include something like this:
.container{
width: 300 px; //Three times 100px = 300px
}
.imgClass{
float:left;
width: 100px; //All pictures are 100px wide. Not required.
}
And your html file:
<div class="container">
<div class="imgClass"> <img><p>...</p> </div> <!-- demetrious -->
<div class="imgClass"> <img><p>...</p> </div> <!-- connor -->
<div class="imgClass"> <img><p>...</p> </div> <!-- daniel -->
</div>
i am trying to build a responsive website using bootstrap and dreamweaver.
I would like to place an image in my navbar, and place a text link over the image. Im having some trouble getting the text to sit over the image.
Any help would be greatly appreciated.
Here is the source code:
</head>
<body>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="files /button images/swirl 1 11.svg" alt="" width="130" class="d-inline-block align-top">
Tom
</a>
</nav>
Here is my own css sheet i linked to override bootstarps:
body{
background-color:#F00;
}
nav a{
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: transparent;
font-style: normal;
}
In that case, you need to add a bit of custom css like so:
.navbar-brand {
background: url("https://placeimg.com/130/40/animals") no-repeat center;
background-size: cover;
min-width: 130px;
}
Replace that with your SVG and you should be good to go.
That creates a background image for the element with the navbar-brand class.
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.
This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.