Simple Zurb foundation 5 code with image in div class:
`<header class="row">
<div class="large-4 columns">
<img alt="Bar chart" src="analytics.gif" />
<figcaption>Figure Caption Here
</figcaption>
</div>
<hgroup class="large-2 columns">
<h1>Heading1</h1>
<h2>Heading2</h2>
</hgroup>
<nav class="large-6 small-12 columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Meet the team</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</header>`
But when div class is replaced by figure:
<figure class="large-4 columns">
<img alt="Bar chart" src="analytics.gif" />
<figcaption>Figure Caption Here
</figcaption>
</figure>
Now due to figure tag layout breaks, figure tag displaces. Any solution ?
My assumption without having a live site to look at your code would be that you haven't removed the margins off of the figure element added by default by most browsers.
Default figure styling on webkit
figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
Foundation by default includes normalize.css which sets figure elements to display:block;, however it does not remove the default margins applied to it. Try this:
Potential fix
figure{
margin:0;
}
Had the same issue and used:
figure{
margin: 1em 0;
}
Added the 1em for top and bottom margins and the removed the 0 from the left and right.
Otherwise you can go into Foundation 5 and make modifcations there to the normalize.css file:
bower_components > foundation > css > normalize.css > line 165
Related
Im using bootstrap grid but Im with some doubts.
I want to have a header where i have a logo at left some links at right. And below this header I want to have a menu that occupies the same with of the content above.
I have this in this example: https://jsfiddle.net/v529b4mz/1/, and it is working. But there are 2 issues:
For example if the size of the screen is 1920px I have some white margins around content and if the screen is resized the space around decreases and there is some point that the media querie changes and when the media querie change there are again more white space around, but i Would like to not have too much space. So, I would like to have less space around when the media queries change so the content can occupy more space.
Do you know how to do this?
For example if I want to have this menu with background-color green in this example: https://jsfiddle.net/v529b4mz/1/ in all media queries except for the extra small media query where I want to hide this menu and show a mobile one. How to do that in a way that its not necessary decrease too much the font size or the padding of the list items, or both but instead utilize the white space around so the list items appear legible up to the small media query?
And, there are some margins between the list elements, do you know why?
Note: The header and section elements are just to give a full width background color to the bootstrap containers.
HTML:
<header style=background:yellow;>
<div class="container">
<div class="row">
<div class="col-2" style="background-color: orange">
Logo
</div>
<div class="col-10 d-flex justify-content-end" style="background-color: pink; ">
Links
</div>
</div>
</div>
</header>
<section style="background:pink;">
<div class="container">
<div class="row" style="background-color: green">
<div class="col-12">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
</section>
CSS:
*{
box-sizing:border-box;
}
ul{
display: flex;
align-items: center;
list-style:none;
justify-content:space-between;
}
ul li{
padding:20px;
border:1px solid gray;
}
You're using .container which creates a fixed width grid between 2 given breakpoints.
You can replace it by .container-fluid which is... well fluid :)
Note that you'll have to set manually some padding on the section parent: can be a fixed padding in rem, em or px or proportional to the width of the viewport with vw unit (100vw = the width of the viewport) or a mix of them depending of the resolution.
Relevant documentation (Bootstrap 4.0 as seen in your fiddle)
Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.
Updated Fiddle
<section style="background:pink;">
<div class="container-fuild">
<div class="row" style="background-color: green">
<div class="col-12">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
</section>
I've been doing some learning lately and bootstrap has been part of that. I have a simple (but long) web page that I thought would be good to use scrollspy with but I just couldn't get anything to work right. I figured I'd start with something that worked, but still had troubles. The primary problem is that the text and the scrollspy were overlapping. I figured maybe it was something I messed up.
So...
I created an out of the box MVC 4 site. Courtesy of someone else on SO I found this trivial example http://jsfiddle.net/panchroma/rWYQu/ and replaced the content of the About.cshtml page with the html code, added a section just before that to accommodate the css data. This is what I have:
#{
ViewBag.Title = "About";
}
<style>
.content section {
background-color: pink;
margin-bottom:20px;
height:750px;
}
</style>
<div class="container">
<div class="row">
<div id="side-nav" class="span3">
<ul class="nav nav-list affix">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
<div class="span9 content">
<section id="one">
Section 1
</section>
<section id="two">
Section 2
</section>
<section id="three">
Section 3
</section>
<section id="four">
Section 4
</section>
<section id="five">
Section 5
</section>
</div>
</div>
</div>
Behold! I got exactly what I was getting with my previously edited page: overlapping scrollspy and content. The working sample when dropped in a virgin MVC4 app doesn't work correctly. I'm not exactly sure what the fix is (I'm still learning).
What's the fix?
Ok, I fixed it on your fiddle.
http://jsfiddle.net/c8gp5oa4/4/
remove the width 140px; in nav-tab, expand a little bit and manage small screen with max-width
ul.nav-tabs {
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
max-width:150px;
width:100%;
}
and change the bootstrap columns to fit screen :
<div class="col-xs-3" id="myScrollspy">...
<div class="col-xs-9">...
I have creating one web page using html5
Here is my code:
<header>
<img src="img/logo.png" alt="logo">
<hr class="hr-style">
<h1>The Articles</h1>
<nav>
<ul>
<li>Home</li>
<li>Articles</li>
</ul>
</nav>
</header>
<section>
<article class="article">
<img src="img/articles.png" alt="articles" />
</article>
<aside class="aside">
<img src="img/agencies.png" alt="agencies" />
</aside>
</section>
<footer>
</footer>
This is my JSfiddle i tried: please see this what i tried,
http://jsfiddle.net/3jet0dfu/
I need like this:
I'm new to HTML5, i need to know how to align the page using html5 tag.
To start with, you need to contain your content with a width.
Have an example!
In this example I am giving the body a width the same as your logo image (939px). margin: 0 auto; will center the page. Your question is too broad to give you an exact solution.
body{
margin: 0 auto;
font-family: Raleway, sans-serif;
width: 939px;
}
It would be better to replace the <hr> with a border. For example:
<img src="" alt="" id="logo">
#logo {
border-bottom: solid 2px #CCC;
padding-bottom: 50px;
}
I have also done a crude CSS reset to remove the default margins; they can then be easily controlled by adding them back to each element. You can also use a CSS Reset or CSS Normalise (do some research on the ideal solution for you)
* {
margin: 0;
padding: 0;
}
box-sizing: border-box is also brilliant if you want to use percentages.
Here is an excellent run-down on box-sizing.
* {
box-sizing: border-box;
}
This simple change gives you most of your desired layout. Now you need to change the width and add margins / padding as needed.
I am using Twitter Bootstrap. And i have used span8 and span 4 in a row. Is there anyway to remove the leading margin-left:20px from the first span of the row without needing to over ride it manually ?
That 20px margin you see on your #mainContent area is due to the setup of the bootstrap grid, which uses a container of 940px, it is supposed to be removed by the .row container with a margin-left:-20px property. In your setup, your content area is working just the way it was designed too, but your top pageHeader and mainNav sections are not appropriately inserted into the grid, you just have divs inside the .row top sections that are not being contained within the proper containers of the grid.
To fix this you can just insert all of your pageHeader and mainNav elements inside a .span12 container and everything should stack accordingly.
Fixed markup
<header class="row" id="pageHeader">
<div class="span12">
<div id="logo">Logo</div>
<div id="userDetails">userDetails</div>
</div>
</header>
<nav id="mainNav" class="row">
<div class="span12">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Blog</li>
<li>Idea Exchange</li>
</ul>
</div>
</nav>
Also, quick tip, you can switch your mainNav background color to the proper grid container of .span12 simply by targeting it like so:
nav#mainNav .span12 {
background: url("../images/nav_bar_bg.png") repeat-x scroll 0 0 transparent;
height: 45px;
overflow: hidden;
}
you can add a class in your css with an !important:
example:
.no_margin{
margin:0px !important;
}
and add that class to your html when required.
(sorry for my bad english xD)
there is also small less utility at
http://getkickstrap.com/extras/#single-view
called flushspan
By using "row" or "row-fluid" class as parent of your span class
<div class="row">
<div class="span3">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Blog</li>
<li>Idea Exchange</li>
</ul>
</div>
</div>
I do not know how to describe the problem, hence please visit the link.
In this (A), the white background is rendered nicely, but if I added
<!-- Problem here -->
<ul class="thumb2"><li>
<a href="/malaysia/ceiling-lights/8044-f610-255" title="">
<img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li></ul>
<!-- Problem here end -->
Then the page become (B), the white background disappears.
How do I solve the problem?
The problem is that all of the thumbnails are "floated." See the CSS "float" property. Floated elements do not take up page space. To fix that, you can use some sort of CSS "clearfix" after all of the thumbnails.
The quickfix for this is to add:
<br style="clear: both;" />
After all of your thumbnails.
Another option is something like:
.spacer
{
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
And then you can add:
<div class="spacer"></div>
Nowadays, crazy hip developers are using something like:
http://www.webtoolkit.info/css-clearfix.html
just add
<div style="clear: both;"> </div>
after the </ul>
The problem you are having has to do with your floated image elements. CSS can have difficulty calculating the height of a div that contains floated elements.
JUST Replace your current code with the below codes. It will 100% work
<style type="text/css">
.clearfix {
clear:both;
}
</style>
<ul class="thumb2"><li>
<a href="/malaysia/ceiling-lights/8044-f610-255" title="">
<img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li>
</ul>
<div class="clearfix"></div>