BEFORE YOU SAY THIS IS A DUPLICATE
I have tried the margin-top: 0px;
<html>
<head>
<style>
html, body {
padding: 0px;
margin: 0px;
}
body {
font: 22px trebuchet ms;
}
button {
color: white;
font: 18px verdana;
background-color: #aef731;
border-style: solid;
border-bottom-color: #96d626;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
div.title {
padding-left: 15px;
color: white;
background-color: #96d626;
}
cat.indent {
padding-left: 30px;
}
img.slgm {
border-style: solid;
border-color: #000000;
border-width: 4px;
float: left;
position: relative;
top: 30px;
left: 30px;
}
div.txt1 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
float: right;
position: relative;
top: 30px;
right: 30px;
padding: 5px;
width: 600px;
}
div.txt2 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
width: 400px;
position: relative;
top: 200px;
left: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="title"><h1>60 Second Science!</h1><cat class="indent">Molecules of Solids, Liquids and Gases</cat></div>
<img src="SLGM.png" class="slgm">
<div class="txt1"><h3>Introduction</h3>Solids, liquids and gases all have different molecular structures. Today, we will explore each form of matter's molecules.<br><h3>Solids</h3>Solids(left) have a very compact structure. The molecules squish together and barely vibrate.<br><h3>Liquids</h3>Molecules in liquids(center) can move freely but stay bond together causing them to have a definite volume, but not a definite shape.</div>
<div class="txt2"><h3>Gases</h3>Gases(right) have no definite shape or volume. This is because their molecular structure is very spacious. The particles have broke free of each other. Therefore, the gas can expand.</div>
</body>
</html>
So when I run this code, the div with the class "txt2" has a bunch of space at the top. Could someone please help? I have also tried removing padding at the top, rewriting the code, etc. I need this done very soon so any response helps!
:D
The problem is that your div.txt2 has the rule top: 200px, which would explain the extra height. I've changed this to top: 30px to match the height of your other <div> in my example.
Also note that many of your elements have a fixed width of several hundred pixels. This won't scale on mobile devices, and you should consider using percentage-based values instead.
<html>
<head>
<style>
html,
body {
padding: 0px;
margin: 0px;
}
body {
font: 22px trebuchet ms;
}
button {
color: white;
font: 18px verdana;
background-color: #aef731;
border-style: solid;
border-bottom-color: #96d626;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
div.title {
padding-left: 15px;
color: white;
background-color: #96d626;
}
cat.indent {
padding-left: 30px;
}
img.slgm {
border-style: solid;
border-color: #000000;
border-width: 4px;
float: left;
position: relative;
top: 30px;
left: 30px;
}
div.txt1 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
float: right;
position: relative;
top: 30px;
right: 30px;
padding: 5px;
width: 600px;
}
div.txt2 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
width: 400px;
position: relative;
/*top: 200px;*/
top: 30px;
left: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="title">
<h1>60 Second Science!</h1>
<cat class="indent">Molecules of Solids, Liquids and Gases</cat>
</div>
<img src="SLGM.png" class="slgm">
<div class="txt1">
<h3>Introduction</h3>Solids, liquids and gases all have different molecular structures. Today, we will explore each form of matter's molecules.<br>
<h3>Solids</h3>Solids(left) have a very compact structure. The molecules squish together and barely vibrate.<br>
<h3>Liquids</h3>Molecules in liquids(center) can move freely but stay bond together causing them to have a definite volume, but not a definite shape.</div>
<div class="txt2">
<h3>Gases</h3>Gases(right) have no definite shape or volume. This is because their molecular structure is very spacious. The particles have broke free of each other. Therefore, the gas can expand.</div>
</body>
</html>
Related
I have been trying hard without success to add a little triangle under my square to act as a pointer like this:
My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
edit: code of the triangle
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #555;
}
</style>
Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.
Example:
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
#triangle-down {
position: absolute;
top: 40px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid blue;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
See my codepen here: https://codepen.io/anon/pen/bvXOab
You could add another div for the triangle like
<div id='triangle'></div>
Css For the triangle...
#triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid blue;
}
However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders
I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div
#slider_marker1::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid green;
z-index: 100;
}
I want to make a speech bubble and I'm almost achieving my goal. Just a simple thing that is driving me crazy.
Check HERE to see my code and what I need.
I tried this:
HTML:
<div class="date">
03 Fev 14
</div>
CSS:
.date{
display: block;
width: 50px;
font-weight: 400;
background-color: #00a1e0;
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
padding: 10px 15px;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 20px;
}
.date:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 6px 0;
border-color: #00a1e0 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 0px;
}
As you can see, at the moment I have a triangle with two angles of 45degrees, and I want it to have an angle of 90degrees on top aligned to the left.
How can I achieve this without the use of an additional image?
You need to add the last value for border-width. Try this:
.date:after {
border-width: 10px 10px 0 0;
}
.date {
display: block;
width: 50px;
font-weight: 400;
background-color: #00a1e0;
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
padding: 10px 15px;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 20px;
}
.date:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 0 0;
border-color: #00a1e0 transparent;
display: block;
width: 0;
z-index: 1;
top: 100%;
left: 0px;
}
<h3>What I want: (image)</h3>
<img src="http://i.imgur.com/wlyK9EN.png">
<br>
<br>
<h3>What I have:</h3>
<div class="date">
03 Fev 14
</div>
On this page the box-shadow style doesn't seem to appear, however this has only been an issue since the hyperlinks have been added. Please see the code.
The box-shadow seems to work fine in Chrome and this issue is mainly in Internet Explorer.
The box-shadow is around the DIV ID="container".
Thanks for your help!
Here is the HTML for the page..
`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="images/logo.png">
</div>
<div id="title">
<h1>FOOTBALL MANAGER</h1>
<h2>HOME</h2>
</div>
</div>
<div id="nav">
Home
How To Install
Where To Buy
About Us
Contact Us
</div>
<div id="mheading">
<h4>Heading</h4>
</div>
<div id="fmlogo">
<p>fmlogo</p>
</div>
<div id="footer">
<span>
Copyright 2013 Top Notch Multi-Media
</span>
<span id="update">
Site last updated at 22:15 23 November 2013
</span>
</div>
</div>
</body>
</html>
`
And the CSS..
'
#charset "utf-8";
body {
height:1100px;
background-color:#999; /*needs defining in house style */
margin:0px;
padding:0px;
}
h1 {
font-family: Verdana;
font-size: 53px;
text-shadow: 1px 1px 7px #000;
}
h2 {
font-family:Verdana;
font-size:35px;
text-shadow: 1px 1px 7px #000;
}
h3 {
font-family: Verdana;
font-size: 20px;
}
h4 {
font-family:Verdana;
font-size:35px;
margin: 0px;
}
#container {
width:950px;
height:1100px;
margin:0 auto;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000;
/*order goes Horizontal offset, Vertical offset, Blur radius, Spread distance, Color */
box-shadow:0px 0px 100px 10px #000;
}
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position:absolute;
top: 15px;
left: 315px;
}
#nav {
position:relative;
height: 60px;
margin: 0 auto;
background-color:#CF6;
border-style: solid;
border-color: black;
border-bottom-width:2px;
border-top-width:2px;
border-right-width:1px;
border-left-width:1px;
text-align: center;
}
a {
position: relative;
top: 3px;
display: inline-block;
margin: -3px;
height: 56px;
width: 188px;
background-color: #E39734;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
font-family: Verdana;
font-size: 20px;
line-height: 55px;
}
#button {
position: relative;
top: 3px;
display: inline-block;
margin: -3px;
height: 56px;
width: 188px;
background-color: #E39734;
border-style: solid;
border-width: 2px;
border-color: #000;
text-align: center;
font-family: Verdana;
font-size: 20px;
line-height: 55px;
}
.button:hover {
background-color: #BD7E2D;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #636363;
}
#logo {
position:absolute;
height:130px;
width:340px;
top:17px;
left: -10px;
border-style: solid;
border-width:0px;
border-color:black;
}
img {
width: 100%;
}
#mheading {
position:relative;
top: 10px;
left: 5px;
width: 940px;
height: 50px;
border-style: solid;
border-width: 1px;
border-color: #000;
text-align:center
}
#fmlogo {
position: relative;
margin: 0px;
top: 649px;
margin: 0 auto;
width: 940px;
height: 100px;
border-style: solid;
border-color: #000;;
border-width: 1px;
text-align: center;
}
#footer {
position: relative;
margin: 0px;
top: 659px;
width: 940px;
height: 30px;
background-color: #9F3;
border-style: solid;
border-color: black;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
padding-left: 5px;
padding-right:5px;
padding-top: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
}
#update {
float: right;
}
'
What version of IE are you using? If it's IE 9 or below you have to use the following within your container class css declaration:
border-collapse: separate;
Look the answer I found here:
http://blog.mi-ernst.de/2013/04/06/ie9-ie10-css-shadow-not-rendered/
Yesterday I got the problem that IE does not render the box-shadow
property. After a while a figgured out that the property
“border-collapse: collapse;” for a surrounding table prevents the
rendering. I got the property inherited from a stylesheet of a JS
Framework. After manipulating my css to the following configuration:
.shadowed {
-moz-box-shadow: 0 0 5px 5px #DDD;
-webkit-box-shadow: 0 0 5px 5px #DDD;
box-shadow: 0 0 5px 5px #DDD;
border-collapse: separate;
}
I want to have two buble speech togethers and and with the some extra information.
Image below
This is my code for doing this:
I have a demo for this here: http://jsfiddle.net/pZh4w/
<style>
.bubble
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.test
{
margin-bottom: 0px;
margin-left: 850px;
}
.test1
{
margin-bottom: 20px;
margin-left: 850px;
}
.tes
{
margin-bottom: 0px;
margin-left: 250px;
}
.tes1
{
margin-bottom: 20px;
margin-left: 250px;
}
</style>
Thanks for your help.
Here is something to get you started.
I would suggest the following HTML:
<div class="bubble">
<p>First paragraph</p>
<div class="caption">
<h1>By PEDE</h1>
<h2>From Belgrade,MT</h2>
<h3>September 25,2013</h3>
</div>
</div>
and start with the following CSS:
.bubble-panel {
display: inline-block;
border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble {
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
}
.caption {
border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 0px;
right: 0px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: center;
margin: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/rcNN6/
The net result gives something like:
The speech bubble decoration (the little triangular bit that sticks out) can be built
by following the ideas presented at: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The trick is to wrap the bubble and caption texts in a inline-block wrapper of fixed height. These can then form a 2x2 grid if the screen is wide enough.
I'm trying to create a tag shape with the css only so that it looks like:
I'm trying following but unable to use the border for the triangle area.
HTML:
Test
CSS:
a{
float: left;
height: 35px;
position:relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before{
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 18px 18px;
}
JSFiddle:
http://jsfiddle.net/Sac3m/
You could rotate a square instead, although i doubt the results will be great cross-browser
Modified code:
a {
float: left;
height: 35px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:after {
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<a></a>
(Latest IE, Firefox and Chrome seems OK with it)
Update
If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:
a {
float: left;
height: 36px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before {
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 19px 19px;
}
a:after {
content: "";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 18px 0 18px 18px;
}
<a></a>
The below code helps to create a tag shape. It works in all major browsers.
#swc {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height: 65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background: #f3f3f3;
transition: background 0.3s;
}
#swc:after {
position: absolute;
content: "";
right: -19px;
width: 1px;
height: 0px;
border-left: 18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#swc:hover {
background: green;
color: #ffffff;
}
#swc:hover:after {
border-left-color: green;
}
<span class="pricetag-right" id="swc">Tag Content!</span>
We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.
.tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
border-radius: .25em 0 0 .25em;
padding: 0.1em 0.6em 0.1em 0.3em;
background-color: #e5ecf9;
line-height: 1.2em;
}
.tag:after {
content: "\25CF";
position: absolute;
display: inline-block;
height: 1.2em;
width: 1.17em;
transform: rotate(45deg);
color: white;
text-indent: 0.3em;
line-height: 1em;
text-shadow: 0 0 1px #333;
background-color: #e5ecf9;
border-radius: 0.33em 0.33em 0.33em 1em;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 #c8d7f2 transparent transparent;
}
<h1 class="tag">my-tag</h1>
A couple things to note:
The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.
The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.