How I can compile this CSS - php

I use Socialengine (Zend Framework) with lot of plugin but one of plugin has a different CSS.
In fact there are lot of CSS cascading but isn't less or sass file.
My file style.css looks like this :
/*Mixins*/
=font-size($px){
font-size: calc($px/13)em;
}
=transition{
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
=border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
=text-clamp($line) {
word-break: break-word;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: normal;
-webkit-line-clamp: $line;
line-height: 18px;
height: calc(18*$line)px;
}
/* CSS */
.blog_options{
display: block;
position: absolute;
width: 170px;
right: 0;
border: 1px solid $theme_border_color;
background: #FFF;
display: none;
box-shadow: 0px 0px 21px -5px #ccc;
&.blog_options_show{
display: block;
}
& > a{
padding: 10px 15px;
display: block;
+font-size(13);
border-bottom: 1px solid $theme_border_color;
color: $theme_font_color !important;
&:hover{
background: $theme_link_color_hover;
color: #FFF !important;
}
i.fa{
+font-size(14);
margin-right: 5px;
}
&:last-of-type{
border-bottom: 0;
}
&.icon_blog_delete{
color: #c31919 !important;
background: #f6f6f6 !important;
i.fa{
color: #c31919;
}
}
}
}
So how I can compile this manually for have a clean CSS file ?
This type of CSS have a name ?
Thank you

since i don't have more knowledge about socialengine script, but it use CSScaffold in css compiling.
Review the repository for more information.

Related

Page has boxed look after applying Bootstrap in Laravel

I have two divs on this page, the second div has an iframe in it. It looks, works, feels fine, however, after applying bootstrap css and js, the whole page gets a wrapped look, and everything is stuffed into the middle (see pics attached.) Maybe my other css file has something to do with it?
My css:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,body,.container {
height:100%;
}
body {
margin: 0;
background: #f7f7f7;
color: #363636;
font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
font-size: 16px;
line-height: 1.42857143;
}
.logo {
display: block;
margin: 30px auto;
}
.form {
max-width: 400px;
padding: 20px;
margin: 30px auto;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
}
.form-control {
margin: 0;
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
color: #363636;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.btn {
display: block;
width: 100%;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
white-space: nowrap;
padding: 9px 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #ffffff;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
background-image: none;
border: 0;
height: 50px;
font-size: 20px;
line-height: 1.3333333;
border-radius: 0;
font-weight: 700;
-webkit-transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn:focus {outline: 0;}
.btn:hover {background-color: #398023;}
.btn:active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
/* Zebra
.btn {background-color: #00a66e;}*/
/* EASI'R */
/*.btn {background-color: #81c074;}*/
/* Skoda */
.btn {background-color: #4ba82e;}
.contentbar {
/*border: 1px solid red;*/
width: 100%;
height: 110px;
}
.mainContent {
border: 1px solid gray;
width:100%;
height:100%;
}
.mainContent iframe {
/*border: 1px solid green;*/
width:100%;
height: 100%;
/*height:calc(100% - 150px);*/
}
I use the following to apply bootstrap:
<link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.css">
<script src="/js/bootstrap/bootstrap.js"></script>
See here my attached before and after pics.
Thanks
you might using a div with class "container" in html that's why everything is coming center.

Background overlays form in HTML/CSS

I tried to modify my site's background as you can see in the code, to make it more alive. But I'm struggling for few hours to find out why my background overlays the elements I have. Simply, it comes in front of everything. Why is that happening?
style.css
/* General Styles */
html{
background-color: #fff;
background-size: cover;
height:100%;
}
body {
color: #C0C0C0;
font-family: Arial, san-serif;
}
/* Contact Form Styles */
h1 {
margin: 10px 0 0 0;
}
h4{
margin: 0 0 20px 0;
}
#contact-form {
background-color:rgba(72,72,72,0.7);
padding: 10px 20px 30px 20px;
max-width:100%;
float: center;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
font-size: 15px;
margin-bottom: 2px;
font-family: Arial, san-serif;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
width:100%;
background: #fff;
border: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 25px;
padding: 5px;
color: #000;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
background-color: #E5E6E7;
}
#contact-form textarea {
width:100%;
height: 150px;
}
#contact-form button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#991D57;
background-image:linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
background-image:-moz-linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
background-image:-webkit-linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
color:#FFF;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
#contact-form button[type="submit"]:hover {
background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);
background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
input:required, textarea:required {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
}
#contact-form .required {
font-weight:bold;
color: #E5E6E7;
}
/* Hide success/failure message
(especially since the php is missing) */
#failure, #success {
color: #6EA070;
display:none;
}
/* Make form look nice on smaller screens */
#media only screen and (max-width: 580px) {
#contact-form{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
#bg {
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
-webkit-backface-visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
#bg:before, #bg:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg:before {
-moz-transition: background-color 2.5s ease-in-out;
-webkit-transition: background-color 2.5s ease-in-out;
-ms-transition: background-color 2.5s ease-in-out;
transition: background-color 2.5s ease-in-out;
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s;
background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("http://www.wise-company.com/pref2/inf_permise/Rezervari/images/overlay.png");
background-size: auto, 256px 256px;
background-position: center, center;
background-repeat: no-repeat, repeat;
z-index: 2;
}
#bg:after {
-moz-transform: scale(1.125);
-webkit-transform: scale(1.125);
-ms-transform: scale(1.125);
transform: scale(1.125);
-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
background-image: url("http://www.wise-company.com/pref2/inf_permise/Rezervari/images/bg.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
body.is-article-visible #bg:after {
-moz-transform: scale(1.0825);
-webkit-transform: scale(1.0825);
-ms-transform: scale(1.0825);
transform: scale(1.0825);
-moz-filter: blur(0.2rem);
-webkit-filter: blur(0.2rem);
-ms-filter: blur(0.2rem);
filter: blur(0.2rem);
}
body.is-loading #bg:before {
background-color: #000000;
}
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
This is the style, and I'm setting this background, in the html file, as follow:
<div id="bg"></div>
My website looks like this: http://www.wise-company.com/pref2/inf_permise/Rezervari/inmatriculare.php
Can you figure out why is that happening? Thanks !
It's easy, just change your z-index from 1 to -1 at your div#bg. Will fix it right away.
Try changing the z-index: -1 So that the div with background image will go behind all other elements.

HTML Box Pro Prestashop- Code Not displaying

I am using HTML Box Pro module from Prestashop addons store, contacted them several times to say that it does not work after adding hooks to the .tpl file etc. with no response and this is a project I need to finish before December, code below just incase I'm formatting wrong
any help greatly appreciated
<style><!--
body
{
/*background-color:#f0f0f0;*/
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2BmZU1kR795PbCjY-- wGWcdHvgdq4oM43UgpHSGKF6rk-qrhMiEFqGFe-) no-repeat;
width: auto;
height: auto;
background-size: contain;
}
.container
{
margin:0 auto;
width:90%;
}
.perspective
{
background: url("http://www.gadgetsuk.com/behind1.jpg");
background-repeat: no-repeat;
background-position: center center;
position: relative;
display: inline;
float: left;
height: 395px;
width: 395px;
margin: 20px;
margin-left: 140px;
margin-top: 125px;
-webkit-perspective: 450;
border-radius: 3px;
box-sizing: border-box;
z-index: 1;
}
.thumb
{
background: url("http://www.gadgetsuk.com/a1.jpg");
background-repeat: no-repeat;
background-position: center center;
width: 400px;
height: 400px;
position: absolute;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
transition: 1s transform linear;
transform-origin: left;
cursor: pointer;
}
.thumbOpened
{
transform: rotateY(-90deg);
transform-origin: 8px;
transition: .5s linear;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #000;
transform-origin: left;
transform:rotateY(180deg);
opacity:0;
animation-name: go;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 0.5s;
width:350px;
}
#keyframes go {
100%{
opacity:1;
transform:rotateY(0deg);
}
}
--></style>
<script type="text/javascript">// <![CDATA[
function openDoor(field) {
var y = $(field).find(".thumb");
var x = y.attr("class");
if (y.hasClass("thumbOpened")) {
y.removeClass("thumbOpened");
}
else {
$(".thumb").removeClass("thumbOpened");
y.addClass("thumbOpened");
}
}
// ]]></script>
You could try to open this module files modules/yourmodule/
1. Check main .PHP file. You should assign JS / CSS files to header to get in use this.
2. Write CSS to CSS file
3. Write JS to JS file
4. Now check your HOOK and return to this HOOK your .TPL FILE.
Now you can USE this CSS style and JS and do whatever you want.
You can`t add hook in module .tpl you must do it in .PHP file. But You can write {HOOK_YOURHOOK} to show a hook in that place.

how do i allign my div containers using css

how can i align my containers horizontally inside another container. also i want to center align them when the window is resized because every time i try it the containers just keep on popping somewhere i don't want them to please help me thank you. below is the code:
my index page
<html>
<head>
<title> Kwiktable </title>
<link rel="stylesheet" type="text/css" href="jssor.css">
</head>
<body>
<div class="headercontainer" style="z-index:1000;">
<div class="header clearfix"> <span class="logo"><img src="img/kwiktable.png">&nbsp <img src = "img/kwik.png"> </span>
<input type="text" class="textbox" style="color:#888;"
value="Search" onfocus="inputFocus(this)" onblur="inputBlur(this)">
<script>
=function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<div class="nav">
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" onclick=""></label>
<ul class="menu">
<li><a class="current" href="index.php">Home</a></li>
<li>About Us</li>
<li>Reservations</li>
<li>Log in </li>
</ul>
</div>
</div>
</div>
<center>
<br> <br> <br> <br>
<div style="margin:0 auto;width:100%;max-width:1050px;background-color:#E8E8E8;overflow:hidden; border: 1px solid #000000;">
<div class="container" style=" margin-left: 10px; width 100%; max-width: 450px; background-color:#E8E8E8;overflow:hidden;">
<?php include 'content1.html';?>
<?php include 'content.html'; ?>
</div>
<div class="container1" style="margin-right: 10px; margin-top: 10px; width 100%; max-width: 450px; background-color:#E8E8E8;overflow:hidden; "> </div>
<div class="container2">
<?php
echo "<br><h1>Kwiktable's Best</h1>";
include 'best.php';
?>
<br> <br> <br> <br>
</div>
</center>
<?php include 'footer.php'; ?>
</body>
</html>
my css file:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
height: 100%;
background: #fff;
}
body, a {
font: normal 16px Helvetica, Verdana, Geneva, sans-serif;
color: #3f3f3f
}
.textbox {
margin-top: 25px;
width: 500px;
height: 30px;
background-color: #FFEAEA;
border: solid 1px #646464;
border-radius: 5px;
outline: none;
padding: 2px 2px;
}
.textbox:hover {
background-color: #F7C4C4;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear
}
.textbox:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.83);
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear
}
iframe {
margin-top: 15px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 15px;
border-radius: 10px;
border: solid 1px #000;
}
.headercontainer {
opacity: 0.95;
display: block;
margin: 0 auto;
margin: 0 auto;
background-image: url(img/menubar.jpg);
background-color: #D93625;
z-index: 1000;
position: fixed;
width: 100%;
top: 0;
left: 0;
border-bottom: 1px solid #000;
box-shadow: 0px 1px 1px #888888;
}
.headercontainer:after {
content: '';
display: block;
clear: both
}
.footer {
bottom: 0;
margin: 0 auto;
height: 60px;
padding: 0 0;
background: #bbbfbf;
font-size: 12px;
width: 100%;
border-top: 1px solid #51c1f1
}
#media only screen and (max-width:480px) {
.copyright { display: none }
}
body {
-webkit-animation: bugfix infinite 1s;
-webkit-font-smoothing: antialiased
}
#-webkit-keyframes
bugfix { from {
padding:0;
}
to { padding: 0; }
}
.header {
position: relative;
top: 0;
left: 0;
margin: 0 auto;
}
#toggle, .toggle { display: none }
.menu>li {
list-style: none;
float: left
}
.clearfix:before, .clearfix:after {
display: table;
content: ""
}
.clearfix:after { clear: both }
#media only screen and (max-width:768px) {
.textbox {
width: auto;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.menu {
display: none;
opacity: 0;
width: 100%;
position: absolute;
right: 0
}
.menu>li {
display: block;
width: 100%;
margin: 0
}
.menu>li>a {
display: block;
width: 100%;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.toggle {
display: block;
position: relative;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
margin-top: 8px
}
#toggle:checked~.menu {
display: block;
opacity: 1
}
}
.header {
min-height: 80px;
max-width: 1500px;
height: 100%;
padding: 0 20px;
background: #D93625;
color: #fff;
}
.header>.logo {
float: left;
padding: 10px 50px;
font-style: italic;
font-size: 28px;
line-height: 50px
}
.nav {
display: block;
float: right;
text-align: right
}
.nav, .menu, .menu>li, .menu>li>a { height: 100% }
.menu>li>a {
display: block;
padding: 20px 17px;
text-decoration: none;
font-weight: normal;
font-size: 16px;
line-height: 2.8;
color: #fff;
border-radius: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear
}
.menu>li>a:hover, .menu>li>a:focus {
background: #8B0000;
border-radius: 10px;
color: #fff;
background-color: #8B0000;
box-shadow: 1px 1px 1px 1px #3D0000 inset;
border-bottom: solid 1px #FF9292;
text-shadow: 0px 0px 10px #E6FF00;
}
.menu>li>a.current {
color: #fff;
font-weight: 900
}
.toggle { z-index: 2 }
#media only screen and (max-width:820px) {
.textbox {
width: auto;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.menu {
background: #363636;
border-top: 1px solid #fff;
}
.menu, .menu>li, .menu>li>a { height: auto }
.menu>li>a {
padding: 15px 15px;
text-align: center;
background-color: #363636;
border-bottom: 1px solid #fff;
}
.menu>li>a:hover, .menu>li>a:focus {
background: #D70000;
padding: 15px 15px 15px 25px;
}
.toggle:after {
content: 'Menu';
box-shadow: 0px 0px 5px 0px #3D0000 inset;
text-shadow: 0px 0px 10px #E6FF00;
display: block;
width: 80px;
margin: 0 0;
margin-top: 25px;
padding: 10px 0;
background: #D70000;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
font-size: 12px;
color: #fff;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.toggle:hover:after { background: #920000 }
h1 {
margin: auto;
width: 70%;
}
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
.container1 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#toggle:checked+.toggle:after { content: 'Close' }
}
.share-icon {
display: inline-block;
float: left;
margin: 4px;
width: 32px;
height: 32px;
cursor: pointer;
vertical-align: middle;
background-image: url(img/share/share-icons.png)
}
Looks like you're missing a closing </div> tag which is more than likely why it's jumping all over the page. Use a tool like this to help you: http://www.freeformatter.com/html-validator.html
Nice going with the responsive design, but you may want t focus more on your HTML and CSS.
<center> tags are a bad hack. You should be doing that with CSS. Additionally, your use of <br>s for spacing should also be done with CSS. Take a look into padding and margin.
If you wanted to <center> a div, the css alternative is something like this:
<div class="container">
<div style="margin:0 auto; width: 800px;">This will be centered </div>
</div>
Just to start you out.
What happens here is the container div fills 100% as a standard div should. The child div (the one with the style tag) sets its top and bottom margin to 0, and its left and right margin to auto. The important part here is that the div also has a fixed width. So the div will take up 800px in this instance an any remaining space will automatically be distributed evenly by the margin.
You could Google this and get a better explanation I'm sure.

Nested divs getting pushed below container div whiles using PHP dynamic navigation header

I am developing a site using a dynamic PHP header and seem to have gotten that part working. My issues came when trying to put the remaining content in the container div along with the header div. All other content is ignored and gets pushed to the left and down below the container. I want it to be INSIDE the container and center on the page like the header does.
Here is where I am with the site:
http://maniandcompany.com/test/test/Print.php
I have tried several things including overflow:hidden; to no avail.
Here is the HTML Page
<div id="container">
<div id="header">
<?php include 'header.php'; ?>
</div>
<div id="body">
<div class="text">
<h1>Title H1</h1>
<h3>H3 Copy</h3>
<h2>H2 Title</h2>
<p>body copy p</p>
<span class="more_pictures">more images:</span>
</div>
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div>
<div style="clear: both;"></div>
</div>
Here is the CSS
/*Container*/
#container {
width:790px;
margin:auto;
overflow:hidden;
}
/*Body*/
#body {
width:790px;
margin-top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #484941;
overflow:hidden;
}
.main_image {
float:right;
width:527px;
height:350px;
margin-left:3px;
}
.text {
float:left;
font-family:Georgia, "Times New Roman", Times, serif;
width: 220px;
min-height: 350px;
margin-left:20px;
margin-right:20px;
}
.text h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color: #666;
text-transform: uppercase;
}
.text h2 {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #F60;
}
.text h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-style:italic;
color: #CCC;
padding-bottom: 20px;
}
.text p {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #999;
padding-bottom:10px;
}
.text .more_pictures {
font-size:9px;
font-style:italic;
color: #999;
}
/*header*/
#header {
width:790px;
height:140px;
}
#head {
width:790px;
}
/*logo*/
#logo {
float:left;
width: 260px;
height: 100px;
}
/*main navigation*/
#nav_main {
float:left;
font-size: 12px;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
text-decoration: none;
font-style: italic;
width:240px;
height:20px;
text-align:center;
margin-left:20px;
margin-top:110px;
position:absolute;
z-index:2;
}
#nav_main .current {
float:left;
padding-right: 10px;
color: #F60;
text-decoration: none;
}
#nav_main .current a:link {
color: #F60;
text-decoration: none;
}
#nav_main .current a:visited, a:hover, a:active {
color: #F60;
text-decoration: none;
}
#nav_main .inactive {
padding-right: 10px;
float:left;
color: #000;
text-decoration: none;
}
#nav_main .inactive a:link{
color: #000;
text-decoration: none;
}
#nav_main .inactive a:visited {
color: #000;
text-decoration: none;
}
#nav_main .inactive a:hover, a:active {
color: #F60;
text-decoration: none;
}
/*NAV STYLES*/
#nav {
float:right;
height: 100px; /*height of our content box*/
width: 527; /*width of our content box*/
margin-left:3px;
}
#nav #greybox {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-bottom:5px;
}
#nav #greybox2 {
height: 20px;
width: 527px;
background: #CCC;
background-color: #ccc;
margin-top: 60px;
}
/*Thumbstrip*/
#nav #thumbStrip {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color: #F60;
-webkit-backface-visibility: hidden;
float: left;
height: 70px;
width: 527px;
margin-bottom:5px;
}
#nav #thumbStrip .thumb {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 3px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumb:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
#nav #thumbStrip .thumb p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumb img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #F60;
}
/*Thumbstrip First*/
#nav #thumbStrip .thumbfirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
margin-left: 0px;
-moz-box-shadow: 0px 0px 0px #FFF;
-webkit-box-shadow: 0px 0px 0px #FFF;
box-shadow: 0px 0px 0px #FFF;
opacity:0.4;
filter:alpha(opacity=40);
}
#nav #thumbStrip .thumbfirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbfirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbfirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active first*/
#nav #thumbStrip .thumbActiveFirst {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActiveFirst:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActiveFirst p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActiveFirst img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
/*thumb active*/
#nav #thumbStrip .thumbActive {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
color: #F60;
margin-left: 3px;
-moz-box-shadow: 0px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 3px #FFF;
box-shadow: 0px 1px 3px #FFF;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav #thumbStrip .thumbActive:hover {
-moz-transform: scale(1.7);
-moz-transform-origin: center top;
-webkit-transform: scale(1.7);
-webkit-transform-origin: center top;
transform: scale(1.7);
transform-origin: center top;
background: #FFF;
-moz-box-shadow: 0px 1px 1px 3px #FFF;
-webkit-box-shadow: 0px 1px 1px 3px #FFF;
box-shadow: 0px 1px 1px 3px #FFF;
height: 60px;
overflow: visible;
opacity:1.0;
filter:alpha(opacity=100);
position: relative;
z-index:1;
}
#nav #thumbStrip .thumbActive p {
margin: 0;
line-height: 1;
text-align: center;
font-size: 60%;
color: inherit;
text-transform: uppercase;
}
#nav #thumbStrip .thumbActive img {
display: block;
margin-bottom: 2px;
cursor: pointer;
}
#nav #thumbStrip a:link, #content .thumbStrip a:visited {
font-size: 0.8em;
color: #F60;
}
#nav #thumbStrip a:hover, #thumbStrip a:active {
border: none;
color: #fff;
}
#nav #thumbStrip .thumb .first {
margin-left: 0px;
}
Thanks in advance for your help.
line 119 on the source page has a div closing tag that is ending you 'body' div before your 'clear' div.
<div class="main_image"><img src="images/Corporate_Id_main1.jpg" />
</div>
</div> <-- erase this closing tag.
<div style="clear: both;"></div>
</div>
Not to mention you have 2 sets of opening and closing head and body tags. im not sure if you're including a php file with those and then repeating them in your other pages or what, but there are a lot of stray tags on that page.

Categories