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>
Related
How would I go about adding a sticky footer to the bottom of my page that isn't fixed. I made the mistake of adding the footer to my website last. The footer would be on top of an absolute positioned image. I tried using the absolute position, min-height solution but it didn't work. The footer isn't at the bottom of the total page (it will be at the bottom of the page of the initial starting position). Here is the HTML code and CSS code. I'm not sure where the issue/conflict and I have tried scanning and looking in the code but can't see it. HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Home </title>
<meta name="description" content="A music review website">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="homepage">
<header>
<a href="index.php">
<img class="banner"
src="Pictures/second_banner_image_blue.jpg">
</a>
</header>
<nav>
<a class="homelink" id="activehome" href="index.php">Home</a>
<a class="reviewasonglink" href="Review_a_song.php">Review a
song</a>
<a class="reviewslink" href="Sort_by_rating.php">Reviews</a>
<a class="faqlink" href="faq.php">FAQ</a>
<a class="contactlink" href="contactpage.php">Contact us</a>
<form method="get" action="search.php">
<input type="text" name="q" class="searchbox"
placeholder="Search for a song, album or artist here...">
<input type="image" name="Search"
src="Pictures/magnifyingglass.png" class="searchbutton">
</form>
</nav>
<a href="Review_a_song.php"><img class="homepic1"
src="Pictures/concert_edit.jpg"></a>
<a href="Review_a_song.php"><p class="hometitle1">Review your
favourite music</p></a>
<a href="sort_by_rating.php"><img class="homepic2"
src="Pictures/songreviews_edit.jpg"></a>
<a href="sort_by_rating.php"><p class="hometitle2">Read
comprehensive reviews</p></a>
<a href="faq.php"><img class="homepic3"
src="Pictures/questions_edit.jpg"></a>
<p class="hometitle3">Questions?</p>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: opensans; src: url('fonts/OpenSans.tff');
font-family: roboto; src: url('fonts/Roboto.tff');
font-family: robotobold; src: url('fonts/RobotoBold.tff');
font-family: headings; src: url('fonts/adamcg.otf');
}
html {
position: relative;
min-height: 100%;
}
body {
margin:0px;
padding: 0px;
height: 100%;
overflow-x: hidden;
background-attachment: fixed;
}
.homepage {
background-attachment: scroll;
}
.homepic1 {
height: 100%;
width: 100%;
position: absolute;
cursor: pointer;
}
.homepic2 {
height: 80%;
width: 100%;
position: absolute;
cursor: pointer;
transform: translateY(500px);
}
.homepic3 {
height: 100%;
width: 100%;
position: absolute;
cursor: pointer;
transform: translateY(972px);
}
header {
height: 86px;
}
a {
text-decoration-line: none;
}
.background {
display: block;
height: 100%;
}
a:visited {
color: currentColor;
}
h1 {
margin-left: 53px;
margin-top: 80px;
color: white;
font-family: opensans, sans-serif;
}
h2 {
margin-left: 46px;
text-decoration-line: underline;
color: white;
position: absolute;
transform: translateY(428px);
font-family: opensans, sans-serif;
}
h4 {
font-size: 30px;
font-family: opensans, sans-serif;
}
.review_content{
margin-left: 53px;
transform: translateY(50px);
color: white;
font-family: opensans, sans-serif;
}
nav {
width: 100%;
height: 40px;
background-color:white;
border: 0.5px solid black;
z-index: 1;
position: fixed;
}
nav a{
width:11.4%;
float: left;
text-align: center;
height: 30px;
padding-top: 10px;
color: black;
}
.homelink {
margin-left: 0px;
}
.hometitle1 {
color: black;
margin-top: 90px;
font-size: 65px;
position: absolute;
font-family: headings, sans-serif;
margin-left: 200px;
font-weight: 600;
text-shadow: 2px 2px 6px #565656;
cursor: pointer;
}
.hometitle2 {
color: black;
margin-top: 0px;
font-size: 65px;
position: absolute;
font-family: headings, sans-serif;
color: #16308d;
margin-left: 190px;
font-weight: 600;
text-shadow: 3px 3px 6px #0f2163;
transform: translateY(600px);
cursor: pointer;
}
.hometitle3 {
color: black;
margin-top: 0px;
font-size: 65px;
position: absolute;
font-family: headings, sans-serif;
color: #510000;
margin-left: 440px;
font-weight: 600;
text-shadow: 2px 2px 6px #450000;
transform: translateY(1070px);
cursor: pointer;
}
.reviewasonglink, .reviewslink, .contactlink, .faqlink, .homelink {
transition: 0.4s;
font-size: 16px;
text-decoration: none;
font-family: opensans, sans-serif;
}
.reviewasonglink:hover, .reviewslink:hover, .contactlink:hover,
.faqlink:hover, .homelink:hover {
background-color: #404040;
color:#e6e6e6;
}
#activesortbyrating, #activereviewasong, #activecontact, #activefaq,
#activehome {
background-color: #5e5e5e;
color:#e6e6e6;
}
#activesortbyrating:hover, #activereviewasong:hover, #activecontact:hover,
#activefaq:hover, #activehome:hover {
background-color: #404040;
color:#e6e6e6;
}
.banner {
z-index: 1;
position: fixed;
}
.searchbox {
float: right;
width: 230px;
margin-right: 80px;
padding: 5px;
height: 29px;
}
input::placeholder {
color: black;
font-size: 12.8px;
font-family: opensans, sans-serif;
}
input[name="q"] {
font-family: opensans, sans-serif;
border: none;
padding-bottom: 0px;
border-bottom: 0.8px solid black;
}
textarea:focus, input:focus{
outline: none;
}
.formentries {
margin-top: 80px;
margin-left: 53px;
color: white;
font-family: opensans, sans-serif;
}
.warning {
font-weight: bold;
}
.formentry {
font-size: 20px;
font-weight: bold;
font-family: opensans, sans-serif;
}
.searchbutton {
float: right;
width: 35px;
height: 35px;
transform: translateX(273px);
font-family: opensans, sans-serif;
}
input[type="radio"] {
position: absolute;
font-family: opensans, sans-serif;
}
textarea {
border: 1px solid black;
border-radius: 5px;
background-color: lightgray;
font-family: opensans, sans-serif;
}
select {
background-color: lightgray;
}
.formbox {
font-size: 20px;
font-family: opensans, sans-serif;
border: 1px solid black;
background-color: lightgray;
border-radius: 5px;
font-family: opensans, sans-serif;
}
.contactform {
padding-left: 53px;
margin-top: 25px;
font-size: 19px;
font-weight: 600;
color: white;
font-family: opensans, sans-serif;
}
.contactinfo {
padding-left: 53px;
margin-top: 70px;
color: white;
font-family: roboto, sans-serif;
}
.contactentry {
font-size: 18px;
font-family: opensans, sans-serif;
border: 1px solid black;
background-color: lightgray;
border-radius: 5px;
font-family: opensans, sans-serif;
}
.contactmessage {
font-size:15px;
font-family: opensans, sans-serif;
}
.searchtitle, .searchartist, .searchalbum {
color: white;
transform: translateX(53px);
font-family: opensans, sans-serif;
}
.searchtitle {
font-weight: bolder;
font-size: 18px;
text-decoration-line: none;
padding-top: 20px;
}
.FAQ {
margin-left: 53px;
margin-top: 80px;
margin-right: 30px;
color: white;
font-family: opensans, sans-serif;
}
.genreoptions {
max-width: 960px;
margin-left: 45px;
margin-top: 70px;
position: absolute;
border-spacing: 1;
}
.ratingoptions {
max-width: 960px;
transform: translateX(45px);
margin-top: 277px;
position: absolute;
border-spacing: 1;
}
.reviews th {
font-weight: 400;
background: #024457;
color:white;
}
.reviews {
max-width: 960px;
margin-left: 44px;
margin-top: 520px;
position: absolute;
margin-bottom: 10px;
}
.genreoptions thead th {
font-weight: 400;
background: #8a97a0;
color: #FFF;
}
.ratingoptions thead th {
font-weight: 400;
background: #8a97a0;
color: #FFF;
}
.ratingoptions tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
.genreoptions tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
.reviews tr {
background:white;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
.ratingoptions tr:nth-child(even) {
background: #e8eeef;
}
.genreoptions tr:nth-child(even) {
background: #e8eeef;
}
.reviews tr:nth-child(even) {
background:#e0ebfc;
}
th, td, tr {
padding: 8px;
font-weight: 300;
font-family: opensans, sans-serif;
}
.circle {
width: 17px;
height: 17px;
float: right;
padding-left: 25px;
}
input[type=radio]{
visibility: hidden;
position: absolute;
}
label > input + img{
cursor:pointer;
filter: brightness(0%);
transition: all 0.5s ease;
}
label > input:checked + img {
filter: brightness(100%);
}
label {
cursor: pointer;
display: block;
font-family: opensans, sans-serif;
}
.genreoptions, .ratingoptions td {
width: 33%;
}
.reviews tbody tr:hover td {
background-color:#d4d5d6;
}
.genreoptions tbody td:hover {
background-color: lightgray;
}
.ratingoptions tbody td:hover {
background-color: lightgray;
}
.reviews th, td {
cursor: pointer;
text-align: left;
}
.sortinfo {
position: absolute;
color: white;
transform: translate(45px, 468px);
font-family: opensans, sans-serif;
}
.filterbutton {
position: absolute;
transform: translate(45px, 405px);
width: 180px;
height: 30px;
border-radius: 20px;
background-color:white;
border: 0.5px solid midnightblue;
cursor: pointer;
font-family: opensans, sans-serif;
}
.body {
margin-top: 5px;
margin-left: 8px;
font-family: opensans, sans-serif;
}
.noreviewsinfo {
position: absolute;
transform: translate(45px, 420px);
color: white;
font-size: 30px;
font-family: opensans, sans-serif;
}
.submitbutton {
height: 30px;
width: 80px;
font-size: 16px;
margin-top: 8px;
margin-bottom: 8px;
background-color:steelblue;
color: black;
border: 0.5px solid black;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 0 1px #27496d;
font-family: opensans, sans-serif;
}
.submitbutton:hover {
filter: brightness(70%);
font-family: opensans, sans-serif;
}
.nosearchresults {
color: white;
margin-left: 53px;
margin-top: 5px;
font-size: 17px;
font-family: opensans, sans-serif;
}
footer {
height: 30px;
width: 100%;
background-color: gray;
border: 1px solid black;
}
My body on my site is smaller on all edges for some reason, i have no idea why, here is my site to preview what the spaces / edges are doing: csgodice.co.uk, here is my css code, if you need my html i will edit it and add the html but i think its the css:
CSS:
#font-face{
font-family: "coolvetica"; /* You can name the font whatever you like here */
src: url('fonts/coolvetica rg.ttf') format('truetype'); /* Font directory and format */
}
#header {
margin-right: 50px;
height: 6%;
width: 100%;
border-radius: 3px;
background-color: #FA5858;
}
#logo {
height: 60px;
width: 250px;
}
#steamLogon {
float: right;
margin-top: 0px;
}
#navbar {
float: right;
margin-top: 13px;
margin-right: 100px;
}
#navbar a {
margin-left: 50px;
height: 20px;
width: 70px;
display: align-block;
font-weight: 200;
font-size: 22px;
text-align: center;
text-decoration: none;
color: white;
font-family: coolvetica;
}
#navbar .dropdown {
margin-left: 50px;
height: 20px;
width: 70px;
display: align-block;
font-weight: 200;
font-size: 22px;
text-align: center;
text-decoration: none;
color: white;
font-family: coolvetica;
}
.logout {
font-family: coolvetica;
background-color: #e6e6e6;
font-weight: 300;
height: 25px;
width: 160px;
border: 2px solid #f2f2f2;
}
.logout:hover {
font-family: coolvetica;
font-weight: 300;
font-size: 14px;
color: #262626;
height: 25px;
width: 160px;
background-color: #FA5858;
border: 2px solid #f2f2f2;
}
.account {
font-family: coolvetica;
font-size: 14px;
color: #262626;
height: 20px;
margin: auto;
width: 153px;
background-color: #e6e6e6;
border: 2px solid #f2f2f2;
}
.account:hover {
font-family: coolvetica;
font-size: 14px;
color: #262626;
height: 20px;
width: 153px;
background-color: #FA5858;
border: 2px solid #f2f2f2;
}
/* Dropdown Button */
.dropdown-content {
display: none;
border-radius: 3px;
position: absolute;
height: 45px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown-toggle:hover .dropdown-content {
display: block;
}
#diceholder {
height: 50%;
width: 85%;
margin: auto;
margin-top: 100px;
background-color: #404040;
}
/* Account.php */
.trade-url {
display: align-block;
font-family: coolvetica;
font-size: 24px;
color: #1a1a1a;
margin-top: 50px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
I assume you mean that the body has a margin and you'd like to remove it - if so, try adding this CSS:
body {
margin: 0;
}
I'm trying to create a button that looks like this:
The tricky part is getting the number to 'fit' inside of the button. This is how I have my button set up:
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
This is my CSS:
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
border-radius: 2px 0 0 2px;
}
Setting the height and width of the number seems unnecessary, and I can't get the number to line up properly unless I get into extremely specific positioning which is not ideal. Where am I going wrong here?
Plunk:
http://plnkr.co/edit/0WUs3Y2axmOvfB7TswCb?p=preview
Try to this Define your .textclass position:relative;overflow:hidden; and .numberclass line-height:30px; as like this
/* Styles go here */
.textclass {
width: 90px;
position:relative;
overflow:hidden;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
or you just define button into span tag as like this
.textclass {
width: 90px;
position:relative;
overflow:hidden;
display:inline-block;vertical-align:top;text-align:center;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 30px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:30px;
width: 30px;
line-height:30px;
border-radius: 2px 0 0 2px;
}
<div>
<span class="textclass"><span class="numberclass">33</span>Text</span></div>
Just give position: relative; to .textclass and line-height: 30px; to .numberclass
Updated Plunker
try this (replace it)
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 9px;
top: 8px;
height: 20px;
padding-top: 9px;
width: 30px;
border-radius: 2px 0 0 2px;
}
you can try this one:
.textclass {
width: 140px;
position:relative;
overflow:hidden;
height: 40px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 15px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 30px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
height:40px;
width: 40px;
line-height:35px;
border-radius: 2px 0 0 2px;
}
DEMO HERE
Please, see the working plunker with completely auto adjusting height of the number part. You do not even need to apply the line-height.
HTML
<button type="text" class="textclass">
<span class="numberclass">
<span class="container"><span class="inner">33</span></span>
</span>
Text
</button>
CSS
.textclass {
width: 90px;
height: 30px;
position: relative;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
color: #FFF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 30px;
border-radius: 2px 0 0 2px;
display: block;
}
.container {
display: table;
height: 100%;
text-align: center;
width: 100%;
}
.inner {
display: table-cell;
height: 100%;
vertical-align: middle;
}
change in .numberclass class
/* Styles go here */
.textclass {
width: 90px;
height: 30px;
background-color: #FFF;
border: 1px solid blue;
color: blue;
font-size: 10px;
line-height: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: 2px;
padding-left: 20px;
}
.numberclass {
background-color: blue;
border-radius: 1px 0 0 1px;
color: #fff;
left: 8px;
padding: 8px;
position: absolute;
top: 9px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<button type="text" class="textclass"><span class="numberclass">33</span>Text</button>
</div>
</body>
</html>
I published a working version of my site to my wwwroot folder, but when I open the website some of the design is missing.
I looked in devTools (sources) in chrome and noticed that there are parts of my css that are missing, when I open the css manualy from the wwwroot folder I see that the parts are actualy there.
What might cause a selective css load?
The missing part of my css file:
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
The whole css file as published to the wwwroot folder:
.menu_item {
color: #FFFFFF;
border-top: 4px solid #B6B5B5;
display: inline-block;
font-family: Arial;
font-variant: small-caps;
font-weight: normal;
padding: 5px 2px 0px 2px;
text-decoration: none;
/* font-weight: bold; */
letter-spacing: 2px;
margin: 5px;
}
#Top {
border-bottom: chocolate 8px solid;
/* margin-bottom: 3%; */
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
a {
text-decoration: none;
color: #5E5E5E;
}
#Logo {
color: #5E5E5E;
font-family: 'Reenie Beanie', cursive;
display: inline-block;
margin-right: 3vw;
background: url(http://www.elinorart.com/Gallery/latest%20artworks/slides/93.jpg) no-repeat, #5E5E5E;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
font-size: 70px;
margin: 5% 0;
}
h1:hover {
color: chocolate;
}
a:hover, a div:hover {
color: chocolate;
}
#menu_bar {
display: inline-block;
}
#contact_text {
width: 50%;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
/* font-weight: 600; */
font-size: 16px;
/* font-family: -webkit-pictograph; */
color: #5E5E5E;
/* letter-spacing: 0px; */
}
#bottom_left p {
padding: 0px 49px 0 64px;
}
#bottom_center p {
padding: 0px 62px 0 30px;
}
#contact_details {
padding-bottom: 10px;
color: #5E5E5E;
font-size: 16px;
}
#pageFooter {
font-size: 0.8em;
color: #5E5E5E;
text-align: center;
font-family: Arial;
margin-top: 10%;
}
li {
line-height: 24px;
font-family: Arial;
color: #1C1C1C;
font-size: 16px;
list-style-type: none;
}
.exhibit_name {
color: black;
}
#page {
text-align: center;
background-color: rgb(232, 232, 232);
}
.page_content {
font-family: Arial;
/*text-align: initial;*/
/* background-color: rgb(232, 232, 232); */
/* padding-top: 3%; */
}
p {
font-size: 16px;
font-family: Arial;
}
#media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
body.about_me {
background-color: green;
}
.borderClass {
border-color: chocolate;
}
#contactDiv {
display: inline-block;
}
td {
vertical-align: top;
}
.contact_field {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
font-size: 16px;
font-family: Arial, cursive;
width: 322px;
height: 24px;
}
.contact_field_desc {
font-size: 14px;
padding: 4px;
font-family: Arial;
text-align: left;
}
.send_form {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
padding: 5px 28px;
}
body {
margin: auto;
}
#Facebook {
/* width: 100%; */
/* text-align: center; */
/* margin-left: 40%; */
/* margin-top: 3%; */
display: inline-flex;
margin-top: 2%;
}
#fb-root {
/*float: left;*/
vertical-align: central;
margin-right: 10px;
}
#fb-root2 {
/*float: right;*/
vertical-align: central;
margin-left: 10px;
}
.fb_iframe_widget {
/* margin-right: 13px; */
/* float: left; */
padding-right: 10%;
}
.exhibitions {
width: 40%;
margin: 0 5%;
float: left;
/*text-align: left;*/
}
.wrapper {
display: inline-block;
width: 45%;
text-align: left;
}
.exhibitions_wrapper {
padding-right: 3%;
}
ul {
padding: 0px;
}
ul li ul li {
list-style-type: initial;
padding-bottom: 10px;
}
.exhibitions_year {
/* margin-left: -5%; */
font-family: 'Reenie Beanie', cursive;
font-size: 37px;
/* line-height: 1px; */
margin: 14px 0;
color: orange;
color: chocolate;
font-weight: 500;
letter-spacing: 4px;
}
.bottom_sections {
width: 25%;
/* height: 100%; */
vertical-align: top;
text-align: left;
display: inline-block;
/* padding: 2%; */
}
.bottom_content {
/* padding: 0 10%; */
text-align: center;
}
.buttom_text {
font-size: 13px;
line-height: 25px;
padding: 0 10%;
text-align: left;
}
#AboutMe p {
font-size: 13px;
line-height: 25px;
}
.contact_info {
display: inline-block;
width: 19%;
vertical-align: top;
padding-left: 30px;
}
#exhibitions_wrapper {
width: 70%;
}
#AboutMe .wrapper {
border-right: 1px solid lightgray;
padding-right: 30px;
}
h3 {
padding-top: 3%;
margin: 12px 0;
font-variant: small-caps;
font-size: 37px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
h4 {
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
}
h5 {
margin-top: 30px;
/* padding: 15px; */
border-bottom: 1px solid black;
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
text-align: center;
}
h2 {
/* padding: 0; */
margin-top: 12px;
font-variant: small-caps;
font-size: 32px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
#AboutMe .contact_field {
width: 187px;
}
input {
margin-bottom: 15px;
}
.gallery_homepage {
height: 550px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.gallery_homepage div {
height: 550px;
}
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
Thanks!
There can be many reasons for it:
Your CSS rule might be overridden by inline style
It may be overridden by other preceding rule (in the later lines) in the same CSS file
You might be over ridding the css using ' !important' (this can be seen in dev tools)
You might have an error in your CSS file such as wrong syntax or missing ';' after rule or missing '{' or '}' at the beginning or end block of rules
Last but not least you might not be including the (correct) CSS file properly in the html
Hope this helps.
I just had a similiar problem: I updated a HTML and a CSS file and uploaded it to the server. When reloading in the browser, the updates in the HTML file showed but those in the CSS didn't. That was because of the way the browser (in my case Chrome) is caching. When opening in an Inkognito-Tab or deleting the cache it did work.
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;
}