I am using media queries to remove indent on li when the screen size is 500 width here the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row" style="margin-left: 2px; margin-right: 1px;">
<div class="media">
<div class="date pull-left">
<p>7<span>June</span></p>
</div>
<div class="media-body">
<p><strong>xxx</strong> xxxx/p>
<p>Key Points:</p>
<ol>
<li>xxx</li>
<li>xxx</li>
<li>xxxx.</li>
<li>sda</li>
<li>dasdaS</li>
<li>ASdaSDa</li>
<li>aSDas.</li>
</ol>
<img src="/static/images/YouTube-icon-full_color.gif">
</div>
</div>
</div>
</body>
</html>
and the corresponding css:
#media (min-width: 600px){
ul{
margin: 0px;
padding: 0px;
}
li{
margin: 0px;
padding: 0px;
}
}
Link to JS bin paste
http://jsbin.com/xoqufugo/9/
My issue is its not working.
you need to do below changes. Here is the demo
change min-width: 600px to max-width: 600px
0l to ol
Related
I'am learning Bootstrap and after some search on stackoverflow i would like to know if it's possible to get a div col into multiple row easily.
here is what i've done so far :
HTML :
<html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>testing</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">1st level with 12 col
<div class="row">
<div class="col-md-8">2nd level with 8 col
<div class="row">
<div class="col-md-4">3rd level with 4 col</div>
<div class="col-md-6 col-md-offset-2">3rd level with 6 col
<div class="row">
<div class="col-md-3 col-md-offset-1">4th level with 3 col</div>
<div class="col-md-5 col-md-offset-1">4th level with 5 colonnes</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">2nd level with 4 col</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="js/boostrap.js" charset="utf-8"></script>
<script src="js/jquery.js" charset="utf-8"></script>
</body>
</html>
</html>
CSS :
body{
padding-top: 10px;
}
[class*="col-"], footer{
background-color: lightgreen;
border: 2px solid black;
border-radius: 6px;
line-height: 40px;
text-align: center;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*--------------------------------------- Responsive ---------------------------------------*/
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
and i've got this :
i would like to understand why the 3rd level with 6 col, 4th level with 3col andthe 4th level with 5 col are displayed in two rows and how i could reproduce this to integrate a psd. ( For example get a div with 3col and 4rows)
Thanks you
EDIT : Answer :
Here is what i've understand, if i want to have multiple a col with multiple row i have to subdivise my template like this :
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row" id="top-row"></div>
<div class="row" id="bottom-row"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" id="quote-2-high"></div>
</div>
</div>
in one row i make two div, each in separate row, to have the main div sized with two row.
Thanks to Jeremy, and Mustapha Aoussar i know right now how to use this and i also know that there is an usefull tools who can help me to see clearly the bootstrap's grid system : http://shoelace.io/
I'm attempting to create a grid using PureCSS and have discovered a behavior I don't understand. I want the left part of the grid to take up 1/3 of the page and the right the remaining 2/3:
# index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test PureCSS</title>
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading" href="#">Test Page</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
</div>
</div>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
<div class="content-wrapper">
<div class="content">
1-3
</div>
</div>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-2-3">
<div class="content-wrapper">
<div class="content">
2-3
</div>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
# base.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
#media (min-width: 48em) {
.content {
padding: 1em;
}
}
In Chrome, which uses Blink, this page renders as expected. But in Firefox, which is Gecko-based, the left 1-3 div gets stacked on top of the right 2-3 div. In the past, problems like this were caused by having a space at the end of a div. However, I've checked my code and it doesn't have any extra spaces. I read somewhere about how these rendering engines handle display:block versus display:inline-block differently so maybe that has something to do with it. But I would think that if PureCSS was developed by Yahoo, they would have factored any rendering engine differences into their framework so that this wouldn't happen.
Most probably its because of the user agent stylesheet try and check if the body doesnt have padding or margin applied to it
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
I am trying to place a div which contains a clickable picture on a div which contains a background. However, this keeps happening:
http://gyazo.com/2144dfe91b46898e125787b2f5249542
It goes below the image and I don't understand why.
here is my code:
!DOCTYPE html>
<html>
<head>
<title>SlammedPK</title>
<link rel="shortcut icon" href="dragonclaws.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<style type"text/css">
#title{
height:100%;
width:100%;
display:inline-block;
}
#forum{
height:10%;
width:10%;
background-image:forum.png;
display:block;
}
</style>
</head>
</body>
<div id="container">
<div id="title" style="position:relative" alt="title">
<img src='fulltitle.png' style='width:100%;height:100%' alt='[]' />
</div>
<div id="forum" style="position:absolute" alt="forum">
<IMG SRC="forum.png" ALT="forum">
</div>
</div>
</body>
</html>
if you could help that would be wonderful.
I made this JsFiddle: http://jsfiddle.net/2c7eQ/
Make both #forum and #title are position: absolute
HTML:
<div id="container">
<div id="title">
div1
</div>
<div id="forum">
div2
</div>
</div>
CSS:
#title{
position: absolute;
border: 1px solid;
background-color: blue;
height:100%;
width:100%;
}
#forum{
position: absolute;
left: 100px;
top: 100px;
border: 1px solid;
background-color: green;
height:10%;
width:10%;
}
First off, your format for the background image is incorrect, you need background-image: url(forum.png); and the same thing for #title. I'm not sure why you give it a background image when you also have an img within it though
As for your issue, you need to give #container position:relative; or position:absolute. Absolutely positioned elements have to be a child or a relatively positioned parent
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.