I started learning CSS form w3school.com ,and the problem I found in myself was that I couldn't understand content='' usage.
for example here: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_styles
so can someone explain how to use it? and when should I?
example above is this:(this example is one of CSS examples in responsice web design section)
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>```
The content property, used with ::before ::after pseudo elements, is literally there to insert content that isn't there. Example:
.email::before { content: "email address:"; }
<div class=email>jo#email.com</div>
would render the following:
email address: jo#email.com
The code you have shows content:"" which part of the code commonly used for a clearfix hack. Basically elements after a floating element will flow around it. The following code will stop that from happening.
> `.row::after {
content: "";
clear: both;
display: table;
}`
Delete the code and see what happens to the content.
This page of W3Schools talks about it:
Clearfix
CSS-Tricks has more info about content property
All about the CSS Content property
Related
For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.
Here's an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-wrapper">
<div class="menu">
<div class="nav">
<ul>
<li>EXAMPLE</li>
<li >EXAMPLE</li>
<li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
</ul>
</div>
</div>
<div class="content">
<p id="notice"></p>
<div class="container">
</div>
</div>
</div>
</body>
</html>
CSS:
html,
body {
height:100%;
width:100%;
margin: 0px;
display: block;
}
.site-wrapper {
display: block;
background-color: yellow;
width: 100%;
height: 100%;
}
.nav {
background-color: red;
}
.content {
background-color: blue;
width: 300px;
height: 300px;
}
.menu {
font-weight: 400;
top:50%;
margin-top:-115px;
position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}
ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}
http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.
You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?
For example this will help:
.content {
display: inline-block;
}
You can use this code to set margin for all elements
*{
margin:0;
padding:0;
}
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
What I want is a layout for each list item like:
But what I'm getting is more like:
So I want to:
Put div1 to occupy a specific width, for instance 20px (in percentage would be better...) and is heigth to fill is parent heigth (list item heigth). I already tried put heigth:100% but no effect.
div2 should occupy the rest of the horizontal space with some padding.
How can I manipulate css style to do that?
Below is my code so far:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div1"> </div>
<div class="div2">Some content</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.listItem div {
display: inline-block;
}
.div1{
width: 20px;
}
.div2{
padding: 15px;
}
</style>
Something like this? DEMO
ul {
list-style: none;
padding: 0;
margin: 0;
display: table;
width: 100%;
}
li {
display: table-row;
}
.listItem div {
display: table-cell;
}
.div1 {
width: 10%;
}
.div2 {
width: 90%;
padding: 15px;
}
Using jQuery Mobile 1.3 I used an example using a listview widget from the docs to achieve what I think you are going for.
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li><div class="div1">test</div><div class="div2wr"><div class="div2">test2</div></div><div class="clr"></div></li>
</ul>
<style type="text/css">
.div1, .div2wr{
height:30px;
}
.div1 {
width: 10%;
background:black;
float:left;
}
.div2wr {
width: 90%;
float:right;
}
.div2 {
margin:5px;
height:20px; /* height must be height of div1/div2wr minus div2 margin X2 */
background:blue;
}
.clr{
clear:both;
}
.ui-li-static.ui-li{padding:0px;
}
</style>
The solution that I used was:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div2" style="border-left-color: #{{:CorBack}};">
Some content
</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.div2{
padding: 15px;
border-left-width:15px;
border-left-style:solid;
}
</style>
I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:
<!DOCTYPE html>
<head>
<style>
/*
* A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
* added just to make sure it's not from weird browser padding/margin. Still happens
* if this is removed though
*/
html, body, div, span, p, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height: 1;
}
li {
list-style: none;
}
body {
color: #333;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
line-height: 1.3;
}
/* Some clearfix code from HTML5 Boilerplate */
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div style="padding: 20px; border: solid thin black;">Hello!</div>
<div>
<ul class="clearfix">
<li style="float: left; padding: 5px; border: solid thin black;">There</li>
<li style="float: left; padding: 5px; border: solid thin black;">should</li>
<li style="float: left; padding: 5px; border: solid thin black;">be no</li>
<li style="float: left; padding: 5px; border: solid thin black;">margin</li>
<li style="float: left; padding: 5px; border: solid thin black;">above</li>
<li style="float: left; padding: 5px; border: solid thin black;">this</li>
<li style="float: left; padding: 5px; border: solid thin black;">list</li>
</ul>
<p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
</div>
</body>
</html>
Here's a screenshot of what the problem looks like
So what I'd normally expect to happen here is that there's no margin between the two <div>s, or above the <ul>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <p> is being applied to both the <p>, as well as its containing <div>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <br/>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!
That's correct, you are not using the right clearfix ;-)
This one should fix the issue:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
See:
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
BUT - the elephant in the room that isn't being mentioned is a Firefox float bug which affects at least 3.6-6 (tested). A float container styled with ':after { content:"" }' (where content is empty or any type or whitespace) will duplicate the margin-top of the following element! This only appears to affect Firefox and is clearly a bug.
Simple test case:
<div class="container cf">
<div class="floater"></div>
</div>
<div class="next">
<p>Some content here!</p>
</div>
<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>
http://jsfiddle.net/TjW6c/394/
You're not using the clearfix right. Using positioniseverything's clearfix(a.k.a. pie-clearfix) is usually my solution to all clearfixes:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
You can check it out here: http://jsfiddle.net/WVtYd/