I have html page where I define my style as code in head:
< style type="text/css" style="margin: 0;padding: 0;font-family: Helvetica, Arial, sans-serif;">
* { margin:0; padding:0; }
* { font-family: Helvetica, Arial, sans-serif; }
body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width:100%!important; height:100%; }
a { color:#2BA6CB; }
.btn { text-decoration:none; color:#FFF; background-color:#2a2c2d; padding:14px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display:inline-block; }
table.social { background-color:#ebebeb; }
table.body-wrap { width:100%; padding-top:50px; }
table.footer-wrap { width:100%; clear:both!important; }
.footer-wrap .container td.content p { border-top:1px solid rgb(215,215,215); padding-top:15px; }
.footer-wrap .container td.content p { font-size:10px; font-weight:bold; }
h1,h2,h3 { font-family:Helvetica, Arial, sans-serif; line-height:1.1; margin-bottom:15px; color:#2a2c2d; }
h1 { font-weight:700; font-size:40px; color:#2a2c2e; }
h2 { font-weight:700; font-size:22px; margin-top:25px; }
h3 { font-weight:700; font-size:16px; margin-top:25px; }
p, ul { margin-bottom:10px; font-weight:normal; font-size:14px; line-height:1.4; }
p { color:#6c6f70; }
div.lead p { font-size:17px; font-weight:700; color:#2a2c2d; }
ul li { margin-left:5px; list-style-position:inside; }
.container { display:block!important; max-width:600px!important; margin:0 auto!important; clear:both!important; }
.content { padding:25px; max-width:600px; margin:0 auto; display:block; }
.content table { width:100%; font-size:14px; }
.log-details { background-color:#2a2c2d; color:#FFF; padding:20px; margin-bottom:15px; }
.log-details td { padding-top:2px; padding-bottom:2px; }
th { width:110px; text-align:left; }
#media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important; }
div[class="column"] { width: auto!important; float:none!important; }
table.social div[class="column"] { width:auto!important; }
}
</style>
It is used to send newsletter. Then I have to render this HTML page inside a TextArea on an other page. All good so far.
After I save it to the database when it renders the code into TextArea I have broken css on my primary page. What happens is, it takes css it finds in textarea and adds it to primary page.
This is the tag it adds to header.
< link rel="stylesheet" href="?1409044831" type="text/css">
Can anyone help me to avoid that?
Many thanks!
You have malformed the style tag in your head section, the correct way to structure it is:
<style type="text/css">
.selector {margin: 0;padding: 0;font-family: Helvetica, Arial, sans-serif;
* { margin:0; padding:0; }
* { font-family: Helvetica, Arial, sans-serif; }
body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;}
</style>
The CSS selectors and rules must reside within a properly closed set of <style> tags.
Related
I have two classes, .growImage and .footer. When you hover over a div that contains the image, the image follow the following CSS...
.growImage:hover {
transform:scale(1.5,1.5);
transform-origin:0 0;
}
and it works... but below that CSS is this...
.growImage:hover ~ #footer {
height:1000px;
}
and it is supposed to enlarge the height of the footer as well but it doesn't. Please note I have tried converting both of them to ID'S (#example) and both of them to regular classes (.example), that didn't work. I tried add important! to the changing attribute, that also didn't work. The most confusing thing is, I started a new html webpage and made blank divs that contained nothing and minimal attributes and the code above worked on those so why isn't it working on the current webpage I am working on?
Here is the HTML...
<div class="growImage"><img src="images/familyTree.jpg" width="333px" height="250px"/></div>
<div class="footer">
This is the footer.</div>
Here is the CSS...
.footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
Sorry I should have included this before but this is the rest of the CSS...
#container{
height:920px;
width:960px;
background-color:#000;
margin:auto;
display: block;
float: none;
}
#header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:100px;
width:660px;
font-size:30px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
}
#logo{
height:100px;
width:300px;
float:left;
background-color:white;
}
#body{
height:770px;
width:920px;
background-color:#0081c3;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-left:20px;
padding-right:20px;
padding-top:20px;
float:left;
}
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
html{
/*background-color:#ffd636;*/
background-image:url(images/background.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
a:Link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:bold;
}
img{
border-style: none;
}
.buttonBorder{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ffd636;
}
.buttonSelected{
width:165px;
height:100px;
padding-top:31px;
color:white;
float:left;
border-left: 1px solid white;
box-sizing: border-box;
background-color:#ed3133;
}
.buttonBorder:hover{
color:#ffd636;
background-color:white;
}
td{
width:150px;
}
.growImage:hover{
transform:scale(1.5,1.5);
transform-origin:0 0;
}
.growImage:hover ~ .footer {
height:1000px;
}
I tried with both id and class . it doesn't shows any problem.
But you should implement like this because css scale is not the best idea because its will overlap siblings elements. try to use height: ( If u want to see full image when hovering )or set parent element overflow as hidden
Check here
#footer{
height:50px;
width:960px;
font-size:16px;
text-align:center;
background-color:white;
color:black;
padding-top:27px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
}
/* This rule added just for testing purpose only */
div#footer {
background:green;
transition-duration:.5s;
}
/* overflow avoid overflow of child elements when hovering */
#growImage{
overflow:hidden;
}
#growImage:hover img{
transform:scale(1.5,1.5);
transform-origin:0 0;
transition-duration:.5s;
}
#growImage:hover ~ #footer {
height:1000px;
}
<div id="growImage">
<img src="http://devgene.com/wp-content/themes/devgene/assets/img/tba-mobile.png" width="333px" height="250px"/>
</div>
<div id="footer">
This is the footer.</div>
I am coding a website for my kids and it is also an assignment for a class. I am trying to put an image in the body as a background with having text on top of it. The image finally did show up however the floating box above it is mid page and will not float right to the edge of the page. I am including the .css file. The image file is in the same file as everything else and there is a link to the file.
h1 {
color: green;
text-align: center;
}
h2 {
color: green;
text-align: center;
}
#header {
height:100px;
background:black;
text-align: center;
text color: green;
}
body {
margin:0;
padding:0;
width:100%;
height:1000px;
margin:0;
dislay:block;
color: #000000;
background-image:url('trees.jpeg')
background-repeat: no-repeat;
}
#footer {
height:50px;
background:black;
text color:green;
text-align:left-side;
}
#content {
height:1000px;
}
table {
width:100%;
Height:500px;
}
The link in the page looks like so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="dio.css">
</head>
My homepage is set up differently so I entered the information for the image straight into the page as it is not linked. This is the head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#header {
height:100px;
background:green;
}
</style>
<style>
h1 {
color:black;
text-align: center;
}
</style>
<style>
h2 {
color: green;
text-align: center;
}
</style>
<style>
p {
text color:blue;
}
</style>
<style>
#sidebar {
width:10%;
height:1000px;
float:left;
}
</style>
<style>
#content {
float:left;
}
</style>
<style>
#advertising {
width:10%;
height:1000px;
float:right;
}
</style>
<style>
#footer {
height:50px;
text-align:center;
background:green;
text color:black;
clear: both;
}
</style>
<style>
body {
margin:0;
padding:0;
width:100%;
height:1000px;
margin:0;
dislay:block;
color: #000000;
background-image:url('trees.jpeg')
background-repeat: no-repeat;
}
</style>
</head>
What am I doing wrong? I researched the issue an have been trying different things to no avail.
I see an at the end of the background-image property. Try replacing it with the semicolon.
Also, for your homepage, you can combine the styles under one <style> tag.
I was able to fix the background issue with the following HTML and CSS:
HTML header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="dio.css">
<link href='https://fonts.googleapis.com/css?family=Exo:400,700italic' rel='stylesheet' type='text/css'>
<script src="dio.js"></script>
<script>
window.alert("Welcome to our DIO site!")
</script>
<script>document.getElementById('someId').style.color = '#00FF00';</script>
<style>
body {
height:1150px;
width:1280px;
}
#advertising {
background:olive;
width:20%;
height:1000px;
float:right;
}
#sidebar {
height:1000px;
}
#footer {
height:50px;
width:1280px;
background:black;
text-align:center;
clear:both;
}
p {
font-size: 22pt;
}
#content {
text-align:center;
}
</style>
</head>
and the CSS
h1 {
color:#ADFF2F;
text-align: center;
font-weight: bold;
}
h2 {
color:#ADFF2F;
text-align: lcenter;
font-weight: bold;
}
p, strong, summary, section, h3, p2 {
color:#ADFF2F;
font-weight: bold;
}
a {
font-weight:bold;
text-decoration:none;
}
a, h1, h2, p, strong, summary, section, h3, p2 {
font-family: 'Exo', sans-serif;
}
a:link {
color:#FF69B4;
}
a:active {
color:#e03a3e;
}
a:hover {
color:#e03a3e;
}
header {
height:100px;
width:1280px;
background:black;
text-align: center;
font-weight: bolder;
}
html {
background:url('trees.jpg') #98FB98 no-repeat;
background-size:cover;
}
body {
background:rgba(0,0,0,0.4);
}
#content {
float:left;
box-sizing:border-box;
display:inline-block;
width:60%;
height:1000px;
}
#sidebar {
background:olive;
width:20%;
float:left;
}
table {
width:1020px;
}
table, th, td {
border: 1px solid black;
padding:5px;
border-collapse:collapse;
color:#00FF00;
font-weight: bold;
}
thead {
background: #3056A0;
color: white;
font-weight: bold;
}
table > caption {
font-weight: bold;
}
tfoot {
font-size: 0.75em;
text-align:right;
font-weight: bold;
}
tbody tr:nth-child(even) {
background: #808000;
font-weight: bold;
}
tbody tr {
background: #808000
font-weight: bold;
}
footer {
height:50px;
width:1280px;
background:black;
text-align:center;
clear:both;
}
#salesDetails, #contactList {
border: 1px solid #999999;
margin: 15px;
padding:15px;
}
label {
width:150px;
display: inline-block;
vertical-align: top;
}
input {
width:200px;
}
.formRow {
margin-bottom:10px;
}
I have a bunch of inline-blocks which I want to wrap when the browser window is shrunken. They look like this:
[nav element 1] [nav element 2] [nav element 3] [nav element 4]
This is a {h1} header.
When the browser is resized, I want them to wrap, which they do. But they overwrite the header on the next line:
[nav element 1] [nav element 2] [nav element 3]
[nav element 4]eader.
I've tried separating the header with paragraphs and linebreaks. Nope.
I've tried putting a "clear:both" on the {h1} style. Nope.
I've tried putting a {div} around the {h1} with a "display:block" and/or a "clear:both". Nope.
I want the page content to move down when the nav bar wraps.
Any hints?
My code and its results can be seen at criv.com/test
EDIT
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
position: absolute;
top: -1px;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}
<div class="nav">
2014 peony list
bloom calendar
photo gallery
peony<br />how-to's
peony<br />tales
<br />visit
<span class="clearfix">contact/ order</span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email peonies#criv.com, or phone 603.837.9800.</p>
<p>Review <b>the 2014 bloom season</b> in pictures!</p>
</span>
Remove position absolute from it. If you want nav to push 1px to top then you can use margin-top:-1px
Here is working code.
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}
<div class="nav">
2014 peony list
bloom calendar
photo gallery
peony<br />how-to's
peony<br />tales
<br />visit
<span class="clearfix">contact/ order</span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email peonies#criv.com, or phone 603.837.9800.</p>
<p>Review <b>the 2014 bloom season</b> in pictures!</p>
</span>
I'm trying to make a navigation bar for my website, but the 'info' button will not stay inside the parent. Here is my HTML:
<div id="header">
<div id="homeB">
HOME
</div>
<div id="infoB">
INFO
</div>
</div>
<div id="main"></div>
And my CSS:
#header {
height:11%;
width:70%;
background:violet;
margin-left:15%;
}
#main {
height:100%;
width:70%;
background:blue;
margin-top:1%;
margin-left:15%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:inline-block;
}
#homeB {
width:20%;
height:100%;
background:red;
}
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
#infoB {
width:20%;
height:50px;
background:red;
float:right;
left:64.2%;
}
#infoBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
Could someone clear up why this is not working?
Thanks, I'm not great at a lot of HTML and CSS elements, so any extra help would be appreciated too :)
Give float: left; to the #homeBTEXT and also clear the #header!
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
float:left;
}
#header {overflow: hidden;}
Preview
Fiddle: http://jsbin.com/setipusabihu/1
This is the HTML Can someone please help me? I can't remove the little margin above the navigation.
I've already tried padding:0px and margin-top:0px
<body>
<div id="wrap">
<div class="top_portion">
<img src="img/icbox.png">
</div>
<div id="welcome">
<h1>Welcome to my blog about the married life</h1>
<h3>Ain't much to see here for now!</h3>
</div>
<div id="navigation">
<ul>
<li><a href="#Home">Home</li>
<li><a href="#About">About</li>
<li><a href="#Pictures">Pictures</li>
</ul>
</div>
</div>
</body>
</html>
AND THIS IS THE CSS Sorry it's been a while since I've been back to this website
body {
background-color:white;
font-family: 'Josefin Slab', serif;
}
.top_portion {
width:800px;
height:200px;
background-color:#e2e2e2;
margin:auto;
text-align:center;
border-top:5px;
border-bottom:5px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#30474b;
}
.top_portion img {
padding-top:35px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
}
#welcome {
font-family:sans-serif;
margin:auto;
background-color:#e2e2e2;
width:800px;
}
#navigation {
text-align:center;
}
#navigation li {
list-style-type:none;
display:inline;
}
ul {
margin-top:0;
}
ul a {
padding-right:20px;
text-decoration:none;
}
ul a:hover {
text-decoration:underline;
}
It is the h3
Margin:0; does the trick.. Where did you aply the margin:0; earlier?
h3 {margin:0;}
In your case you should change your #welcome h3 to:
#welcome h3 {
margin: 0;
}
DEMO
Try This:
I think its because of the default behavior of Heading.
Style:
html, body
{
padding: 0;
margin: 0;
}
#welcome h3 {
margin-top:0px;
margin-bottom:0px;
text-align: center;
}
/*Or you can try
#welcome h3 {
margin:0;
text-align: center;
}*/
Here is the Demo
I have changed these things in your query
#navigation {
text-align:center;
margin-top:0px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
margin-bottom:0px;
}
workingFiddle
Since you want to remove margin from the top for your navigation bar you could possibly try this:
#navigation {
margin-top: 0px;
border-top: 0px;
}
As, you are including list in your navigation it may eat up some of your space too. Try including this:
#navigation li {
margin-top: 0px;
}
Possibly, you can also try for:
#welcome h3 {
margin: 0px;
margin-bottom: 0px;
}
H3, because this would hold just the line above your navigation bar