I am trying to style this text and for some reason, I can't figure out why my styling isn't working. I'm not new to html and css so I really don't know why nothing I try is working. It was working before I made a few changes to my css but now when I do add styling to it it's not working
here is my css:
.text-size{
margin-top:20px;
font-size: 27px;
border-bottom: 1px solid #DBDBDB;
font-weight: bold;
}
.row{
margin-top: 10px;
}
.mission{
font-size: 20px;
}
.space{
margin-top: 15px;
}
.btn{
margin-top: 15px;
}
.btn-primary{
color: #000 !important;
background-color: #7ed321 !important;
border-color: #7ed321 !important;
font-family: Arial Rounded MT Bold;
font-weight: bold !important;
}
.line{
overflow: hidden;
text-align: center;
}
.who-we-are{
font-family: Roboto Condensed;
font-weight: bold;
font-size: 25px;
margin-top: 15px;
display: inline-block;
padding: 0 15px;
position: relative;
}
.who-we-are:before,
.who-we-are:after {
background: #ddd;
content: "";
display: block;
height: 1px;
position: absolute;
top: 50%;
width: 96%;
}
.who-we-are:before {
right: 100%;
}
.who-we-are:after {
left: 100%;
}
.our-work{
margin-top: 20px;
}
.view-btn{
margin-top: 20px;
}
.inner-caption{
background-color:rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
.carousel-caption{
right: 15% !important;
left: 57% !important;
top: 12% !important;
}
.btn-shadow{
-webkit-box-shadow: 6px 3px 10px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 3px 10px -5px rgba(0,0,0,0.75);
box-shadow: 6px 3px 10px -5px rgba(0,0,0,0.75);
}
.carousel-head{
font-family: Roboto Condensed;
font-weight: bold;
}
.carousel-body{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.part2{
background-color: #EEEEEE;
// width:100%;
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;
}
.resize-image{
border: 3px solid #000;
padding: 0 !important;
margin-bottom: 10px;
margin-top: 10px;
}
.program-item{
margin-bottom: 25px;
}
.col-xs-12{
padding:0 !important;
}
h3 {
font-size: 24px;
font-weight: bold;
font-family: Roboto Condensed;
}
.program-text{
font-family: Roboto Condensed;
font-weight: bold;
font-size: 25px;
}
this is what I am trying to style:
h3 {
font-size: 24px;
font-weight: bold;
font-family: Roboto Condensed;
}
here is my html:
<h3 class="zip-text text-center">We have partnered with Zip Zap Zop: Improv for Kids! Click here to learn more</h3>
<img class="center-block" src="/wp-content/themes/creativeforces/images/zip.jpeg" alt="" />
I also tried adding styling to the .zip-text class and still won't work
any help would be appreciated!
Are you sure your markup pre/post this snippet of html is complete (no missing closing tags)? Although it looks correct from what I can see via the browser pic, some browsers may assume the correct markup.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Hello guy's i have small problem in this design,
this is in my laptop , i want all to looks like that:
[the icons must be in top left not in the center this is in tablet
this is the problem:
also this in i need to appear in left:
i need the 2nd and 3rd pictures to look like the first one and thank you .
the code not allow me to put it here
so i can send it to you to see .
my regards friends
the icons is out of the box !
the blue line need to edit
can you pls try this. i add parent div for max width and icon position changed
css
.panel {
margin-bottom: 20px;
background-color: #F7FAFE;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
}
.panel-default {
padding: 10px;
border-color: #ddd;
}
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.mostPopular {
margin-bottom: 20px;
}
.mostPopular .headText h3 {
font-weight: 700;
margin: 0;
padding-bottom: 17px;
font-size: 17px;
width: auto;
float: left;
margin-right: 10px;
max-width: 275px;
color: #27ae60;
}
.headText {
text-align: center;
width: 100%;
display: inline-block;
}
.headText h2 {
color: #27ae60;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.mostPopular #pop {
font-size: 100%;
position: relative;
top: -15px;
}
.mostPopular p {
font-family: franklin-gothic-urw-cond, 'Helvetica Condensed Bold', Helvetica, Arial, sans-serif !important;
border-bottom: 3px solid #929292;
color: #768696;
padding: 12px 0 10px;
margin-bottom: 0;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
.mostPopular li {
border-bottom: 1px solid #ddd;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
padding: 7px 0;
position: relative;
}
.mostPopular li .index {
color: #4e5daf;
display: block;
font-size: 14px;
float: left;
line-height: 18px;
width: 25px;
font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.mostPopular li a {
text-align: left;
color: #505d69;
font-family: franklin-gothic-urw-cond, 'Helvetica Condensed Bold', Helvetica, Arial, sans-serif !important;
font-size: 13px;
font-weight: 700;
display: block;
line-height: 18px;
width: 100%;
}
.mostPopular li .count {
width: 40px;
color: #4e5daf;
display: block;
float: right;
font-size: 14px;
font-weight: 700;
line-height: 25px;
font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
}
.headLine {
border-radius: 0px 0px 20px 20px;
width: auto;
height: 0px;
overflow: hidden;
background: #eee;
-moz-box-shadow: 0 -1px 0 #83b755, 0 -2px 0 #4b8424;
background: none;
border-top: none;
border-bottom: 6px solid #3c81de;
position: relative;
top: 10px;
margin-bottom: 15px;
}
.mostPopular #pop {
font-size: 100%;
position: relative;
top: -15px;
}
.mostPopular li .index {
color: #4e5daf;
display: block;
font-size: 14px;
float: left;
line-height: 18px;
width: 25px;
font-family: franklin-gothic-urw-cond, "Helvetica Condensed Bold", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.thumbnaidl {
border-bottom: 3px solid #27ae60;
background: #FFFFFF !important;
margin-top: -25.7px;
padding: 2px;
flex-direction: row;
height:23px;
}
.t11img {
width: 23px;
position: absolute;
right: 6px;
display: flex;
}
The below code is setup as a form login button and text input, I have added a (now functioning) button inline with the other form pieces, live preview and live view in Dreamweaver both show everything working and aligning great. Upon uploading to the live site the new button shoots up to the top and "fuses" with the header menu. Any advice on how I can get it to stay where it is?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Login Form</title>
<style>
/* NOTE: The styles were added inline because Prefixfree
* needs access to your styles and they must be inlined if
* they are on local disk! */
/* Change the white to any color ;) */
input: -webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
body{
margin: 0;
padding: 0;
font-family: Arial;
font-size: 10px;
}
.body{
width: auto;
height: auto;
z-index: 0
}
.header{
position: absolute;
top: 100px;
right: 192px;
z-index: 2;
}
.header div{
float: left;
color: #ffffff;
font-family: 'Avant Garde', 'Avantgarde', 'Century Gothic', CenturyGothic, sans-serif;
font-size: 16px;
font-weight: 200;
width: 700px;
height: 26px;
background: rgba(26,26,26,.3);
border: 0px solid #660033;
border-radius: 0px;
padding-left: 6px;
padding-top: 5px;
}
.header div span{
color: #5379fa !important;
}
.login{
position: absolute;
right: 20px;
width: 640px;
z-index: 2;
}
.login input[type=text]{
width: 200px;
height: 20px;
background: rgba(255,255,255,1);
border: 0px solid #660033;
border-radius: 0px;
color: #660033;
font-family: 'Exo', sans-serif;
font-size: 12px;
font-weight: 400;
padding: 0px;
}
.login input[type=password]{
width: 200px;
height: 20px;
background: rgba(255,255,255,.4);
border: 6px solid rgba(169,0,86,0.8);
border-radius: 2px;
color: #660033;
font-family: 'Exo', sans-serif;
font-size: 12px;
font-weight: 400;
padding: 0px;
margin-top: 10px;
}
.login input[type=submit]{
width: 100px;
height: 25px;
background: #660033;
border: 1px solid #F2F2F2;
cursor: pointer;
border-radius: 0px;
color: #ffffff;
font-family: 'Exo', sans-serif;
font-size: 12px;
font-weight: 400;
padding: 2px;
margin-top: 10px;
}
.login input[type=submit]:hover{
background: #510028;
}
.login input[type=button]:active{
opacity: 0.8;
}
.login input[type=text]:focus{
outline: none;
border: 1px solid #660033;
}
.login input[type=password]:focus{
outline: none;
border: 1px solid rgba(255,255,255,0.6);
}
.login input[type=button]:focus{
outline: none;
}
::-webkit-input-placeholder{
color: #660033;
}
::-moz-input-placeholder{
color: #660033;
}
.enroll-btn {
position: absolute;
right: 195px;
width: 150px;
z-index: 2;
height: 15px;
background: #660033;
border: 1px solid #F2F2F2;
cursor: pointer;
color: #ffffff;
font-family: 'Exo', sans-serif;
font-size: 12px;
font-weight: 400;
padding:4px;
margin-top: 10px;
text-align: center;
text-decoration: none;
}
.enroll-btn:hover {
background-color: #510028;
}
</style>
<script src="js/prefixfree.min.js"></script>
<body>
<script src="https://tether.netteller.com/citizensebank/login.js"></script>
Consumer Enroll Now
</body>
</html>
I was trying to get this look for my email page:
However, I am stuck. Tried to do it with border. I guess it failed too. The icon on the upper left side is an image, rest should be css and html. I only managed to get this far: https://jsfiddle.net/ru9L8c56/4/
CSS code:
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
padding: 10px;
}
.flexibleImage {
height: auto;
}
.bottomShim {
padding-bottom: 20px;
}
.imageContent,
.imageContentLast {
padding-bottom: 20px;
}
.nestedContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}
/*////// GENERAL STYLES //////*/
body,
#bodyTable {
background-color: #F5F5F5;
}
#bodyCell {
padding-top: 40px;
padding-bottom: 40px;
}
#emailBody {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-collapse: separate;
border-radius: 4px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #202020;
font-family: PT Sans;
font-size: 20px;
line-height: 125%;
text-align: Left;
}
p {
color: #202020;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
text-align: Left;
}
.textContent,
.textContentLast {
color: #404040;
font-family: Helvetica;
font-size: 16px;
line-height: 125%;
text-align: Left;
padding-bottom: 20px;
}
.textContent a,
.textContentLast a {
color: #2C9AB7;
text-decoration: underline;
}
.nestedContainer {
background-color: #E5E5E5;
border: 1px solid #CCCCCC;
}
.emailButton {
background-color: #2C9AB7;
border-collapse: separate;
border-radius: 4px;
}
.buttonContent {
color: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
line-height: 100%;
padding: 15px;
text-align: center;
}
.buttonContent a {
color: #FFFFFF;
display: block;
text-decoration: none;
}
.emailCalendar {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
.emailCalendarMonth {
background-color: #2C9AB7;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.emailCalendarDay {
color: #2C9AB7;
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
line-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
Help with the red parts in the image would be awesome. TY.
Creating the shape you want will take more than just border-radius, you can target specific corners of the div to have curves with this syntax:
border-radius: 45px 0 0 0;
or
border-radius: 0 45px 0 45px;
etc.
each number defines a different corner.
To add the slanted corners you'll need to add an :after element to the div/td, something along the lines of this:
div:after{
content: "";
position: absolute;
border-left: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right: 45px solid red;
}
What I need to know is how to make my CSSconfigured for div/element collision detection. Now, I realized that other questions asking for collision detection is kind of the opposite of what I need; to NOT fix it but to create it, and this is what I mean; I need to have, for example, a #altnav element, which is a sidebar, that will continually reach until it hits the #footer element using a min-height: 100% tag. What it currently does is just reach down until 100%, but stops at a certain point in my page (http://www.thehideout.somee.com/games.html to see what I mean). Another example is my #wrap element with a border-left: 2px solid #000000; tag reaches past the #footer element; which I need it to stop at the footer element. So what I'm asking is how can I make the elements detect if it's colliding with another element, and to stop at that element. Priority is key; I would rather have the sidebar with footer fixed first than the #wrap and border tag. Here's the CSS code for the key elements, followed by the whole css incase another #element is causing this.
#wrap {
width: 760px;
margin: auto;
}
#altnav {
margin-top: 35px;
margin-bottom: 10px;
float: right;
width: 190px;
border-left: 2px dashed #000000;
border-bottom: 2px dashed #000000;
min-height: 100%;
background: orange;
}
#altnav p {
color: black;
font-family: terminal;
font-size: 14px;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#altnav h2 {
text-align: center;
color: black;
font-family: terminal;
font-size: 18px;
}
#body {
padding-top: 50px;
width: 570px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#footer {
width: 730px;
height: 60px;
clear: both;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
Full StyleSheet
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background-position: center;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
#font-face {
font-family: 'karmatic_arcaderegular';
src: url('fonts/ka1-webfont.eot');
src: url('fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ka1-webfont.woff2') format('woff2'),
url('fonts/ka1-webfont.woff') format('woff'),
url('fonts/ka1-webfont.ttf') format('truetype'),
url('fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
#wrap {
width: 760px;
margin: auto;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: orange;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: orange;
text-decoration: underline;
}
#altnav {
margin-top: 35px;
margin-bottom: 10px;
float: right;
width: 190px;
border-left: 2px dashed #000000;
border-bottom: 2px dashed #000000;
min-height: 100%;
background: orange;
}
#altnav p {
color: black;
font-family: terminal;
font-size: 14px;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#altnav h2 {
text-align: center;
color: black;
font-family: terminal;
font-size: 18px;
}
#body {
padding-top: 50px;
width: 570px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
width: 730px;
height: 60px;
clear: both;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
Unfortunately my knowledge of CSS is fairly limited, I currently have a theme, although I would like the right hand captions e.g. Contact and About to be aligned to the right so the two captions will always appear on the right hand side of the page.
Any help would be appreicated, I have identified the container in CSS - "right"
The template is located here:
http://themeforest.net/item/cleanfolio-dark/22659
CSS Code:
body {
background: url(../images/bg.png) repeat;
font: 12px Arial, Helvetica, Sans-Serif;
padding: 0;
margin: 0;
}
#container {
width: 1165px;
}
/* ---- Standard Elements ---- */
a {
color: #BBBBBB;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
h1, h2, h3, h4, h5 {
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bolder;
color: #FFFFFF;
padding: 0;
margin: 0px 0px 0px 0px;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
p {
line-height: 1.8em;
padding: 0;
margin: 0 0 5px 0;
}
/* ---- Header ---- */
#header {
background: url(../images/blue/header_bg.png) repeat-x;
height: 130px;
}
.header_title {
float: left;
background: url(../images/blue/header_titlebg.png);
width: 370px;
height: 110px;
padding: 20px 0px 0px 30px;
}
.header_title h1 {
font-size: 47px;
font-weight: bolder;
color: #FFFFFF;
padding: 0;
margin-bottom: -4px;
}
.header_title span {
font-size: 10px;
color: #71b3f0;
}
/* ---- Left Side Elements ---- */
#left {
float: left;
width: 840px;
margin-right: 25px;
}
.portfolio_section-top {
background: url(../images/topdivider.png) no-repeat;
width: 790px;
height: 280px;
padding: 30px 10px 0px 30px;
}
.portfolio_section {
background: url(../images/divider.png) no-repeat;
width: 790px;
height: 280px;
padding: 30px 10px 0px 30px;
}
.portfolio_section-top img, .portfolio_section img {
background: #111111;
padding: 15px;
border: 1px solid #222222;
}
.portfolio_section-top h1, .portfolio_section h1 {
margin-bottom: 5px;
}
.portfolio_section-top small, .portfolio_section small {
font: 10px Arial, Helvetica, Sans-Serif;
color: #666666;
text-transform: uppercase;
line-height: 2em;
}
.portfolio_section-top p, .portfolio_section p {
font: 12px Arial, Helvetica, Sans-Serif;
color: #999999;
margin-top: 10px;
line-height: 1.8em;
}
.button_bg {
background: url(../images/blue/button_bg.png) repeat-x;
height: 14px;
font: 10px Arial, Helvetica, Sans-Serif;
color: #FFFFFF;
text-transform: uppercase;
padding: 5px 10px 5px 10px;
}
.tdmarginright td {
padding-right: 30px;
}
.tdmarginright2 td {
padding: 10px 17px 0px 0px;
}
.footer {
margin-left: 30px;
color: #666666;
}
/* ---- Right Side Elements ---- */
#right {
float: right;
width: 300px;
margin-top: 30px;
}
.sidebar_title {
background: url(../images/sidebar_titlebg.png);
width: 283px;
height: 38px;
padding: 12px 0px 0px 17px;
}
.sidebar_bg {
background: url(../images/sidebar_bg.png) repeat-y;
width: 268px;
color: #666666;
padding: 0px 15px 15px 17px;
}
.sidebar_bottom {
background: url(../images/sidebar_bottom.png) no-repeat;
width: 300px;
height: 1px;
margin-bottom: 30px;
}
Don't know if this is too obvious, but--
The CSS looks alright,
Just note that it's #right -- not .right -- so obviously in your html you'll be using div id not div class
You would use
<div id="right">content here</div>
not
<div class="right">content here</div>
hope this helps.
If you're still having problems, you should contact the vendor from where you purchased the template.