Basically the page is coded centered, but what happens is that on load it goes to the right, completely loads the page with all the images, all the ads, and then when it's finally done, it'll move back to the center.
Here is the CSS: note I'm a total noob, so most of it is cobbled together from other websites. The only javascript on the site is the google adsense.
body, html {
margin: 0;
padding: 0;
}
body {
background-color: #0A0A0A;
background-position: left;
background-repeat: no-repeat;
}
img {
border: 0 none;
}
p {
margin: 0;
padding: 0;
}
.shell {
background-color: #0A0A0A;
margin: 0 auto;
width: 750px;
}
.topnav {
border-bottom: 2px solid #68879A;
text-align: center;
width: 100%;
}
.topnav ul {
height: 20px;
line-height: 18px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 2px 0;
}
.topnav a {
border-right: 2px solid #484848;
color: #ABAAAA;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase;
}
.topnav a: hover {
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
.homenav a {
color: #999999;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
margin: 0;
text-decoration: none;
text-transform: uppercase;
}
.homenav a: hover {
color: #FFFFFF;
}
.textbig {
background-color: #0A0A0A;
background-position: left top;
background-repeat: repeat-x;
clear: both;
color: #999999;
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: bold;
padding: 5px 0;
}
.text {
background-color: #0A0A0A;
background-repeat: repeat-x;
clear: both;
color: #999999;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px 0;
}
.footer {
background-color: #0A0A0A;
background-position: left top;
background-repeat: repeat-x;
clear: both;
color: #999999;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
padding: 20px 0;
}
.footernav {
float: left;
width: 90%;
}
.footernav a {
color: #999999;
text-decoration: underline;
}
.ImgBorder {
border: 1px solid black;
}
.ImgBorder: hover {
border: 1px solid white;
}
Without looking at your code, it's hard to tell why this is happening.
I can guess though.
You might have a link to a style sheet below a JavaScript include at the top of the page. The page is considered loading until all of its elements load (including JavaScript). You might want to try moving your Javascript references to the end of the document just above the </body> tag.
Related
I know this sounds like an obvious question and answer, but I have spent a long time trying to figure this out, and for some reason, none of the answers are not working for me. Honestly, this is probably going to be a simple obvious answer I just can't catch. But here's the problem: I am making a website out of HTML5, CSS, and some PHP.
The issue is, that my links appear blue and purple with an underline. I know this is how they are supposed to look, but I have tried many different ways to re-style the links with text-decoration: none, and different colors and so on.
Here is my CSS and the HTML part with a link:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: brown;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants.">
</div></a>
I'm not sure if you needed all that, but there it is anyway.
For hover color change you can use this css
.sidebar a:hover{color:red; }
For keep the color focus after click
.sidebar a:focus{color:blue; }
1) You need to change your code from </div></a> at the end to this: </div></a></div>
2)Links can be styled differently depending on what state they are in.:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
You can read more about this in: https://www.w3schools.com/css/css_link.asp
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a, a:link, a:visited{
text-decoration: none;
color: brown;
}
a:hover, a:active{
color: green;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/>
</div>
</a>
</div>
a {
text-decoration: none;
color: brown;
}
is where you need to make changes to edit links
to change hover options:
a:hover {
style it here
}
and for already visited links on your site:
a:visited {
style it here
}
You asked how to style links.
a{
color: red;
cursor: wait;
font-size: 24px;
transition: color 0.3s, text-shadow 0.3s;
text-decoration: none;
}
a:hover{
color: green;
text-shadow: 1px 2px 3px #000;
text-decoration: overline;
}
a:active{
font-weight: 900;
}
Working link.
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.
I'm new to this but here goes. I have been developing this website http://www.panelmaster.co.uk and i have managed to solve the majority of design problems but one!
If you take a look at the site in IE the right column seems to drop down and is not aligned with the right and centre column. This problem only occurs in IE as upon testing i found it was fine in firefox and safari.
I have provided below the CSS for the website.
I would appreciate if you guys can help me with the problem.
Thanks in advance. :)
==========================
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #666;
background-image: url(images/templatemo_body_top.jpg);
background-color: #90857c;
background-repeat: repeat-x;
background-position: top;
text-align: left;
}
a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #073475; text-decoration: underline; }
h3 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h2 {
color: #1e7da9;
font-size: 16px;
font-weight: bold;
}
h1 {
color: #696969;
font-size: 20px;
font-weight: bold;
}
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.float_l { float: left; }
.float_r { float: right; }
.margin_r20 { margin-right: 20px; }
#templatemo_body_wrapper {
width: 100%;
background: url(images/templatemo_body_bottom.png) repeat-x bottom center;
}
#templatemo_wrapper {
width: 970px;
padding: 0 10px;
margin: 0 auto;
background: url(images/templatemo_wrapper_top.jpg) no-repeat top center;
}
/* header */
#templatemo_header {
clear: both;
width: 890px;
height: 60px;
padding: 20px 40px
}
#templatemo_header #site_title {
float: left;
padding-top: 15px;
}
#site_title a {
font-size: 24px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
#site_title a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: 5px;
font-size: 14px;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
}
/* end of header */
/* menu */
#templatemo_menu {
clear: both;
width: 970px;
height: 80px;
background: url(images/templatemo_menubar.png) no-repeat;
}
#search_box {
width: 990px;
height: 35px;
text-align: right;
}
#search_box form {
margin: 0;
padding: 5px 40px;
}
#search_box #input_field {
height: 20px;
width: 300px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#search_box #submit_btn {
height: 24px;
width: 100px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#666666;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
#templatemo_menu ul {
width: 890px;
height: 35px;
margin: 0;
padding: 7px 40px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
margin-right: 40px;
font-size: 13px;
text-decoration: none;
color: #fff;
font-weight: normal;
outline: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
color: #162127;
}
/* end of menu */
/* contetnt */
#templatemo_content_wrapper {
clear: both;
padding: 0px 0;
}
#templatemo_content {
float: left;
margin-left: 10px;
width: 550px;
}
#banner {
margin: 0 0 10px 0;
}
#templatemo_content #content_top {
width: 550px;
height: 20px;
background: url(images/templatemo_content_top.png) no-repeat;
}
#templatemo_content #content_bottom {
width: 550px;
height: 20px;
background: url(images/templatemo_content_bottom.png) no-repeat;
}
#templatemo_content #content_middle {
width: 510px;
padding: 5px 20px 0px 20px;
background: url(images/templatemo_content_middle.png) repeat-y;
}
#content_middle p {
text-align: justify;
}
.templatemo_sidebar_wrapper {
width: 200px;
}
.templatemo_sidebar {
width: 197px;
padding-right: 3px;
background: url(images/templatemo_sidebar_middle.png) repeat-y;
}
.templatemo_sidebar_top {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_top.png) no-repeat;
}
.templatemo_sidebar_bottom {
width: 200px;
height: 20px;
background: url(images/templatemo_sidebar_bottom.png) no-repeat;
}
.templatemo_sidebar .sidebar_box {
clear: both;
padding-bottom: 20px;
}
.sidebar_box1 {
padding: 15px;
}
.sidebar_box h2 {
color: #2d84ad;
font-size: 16px;
padding-left: 25px;
font-weight: bold;
margin: 0 0 10px 10px;
background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat;
}
.sidebar_box .sidebar_box_content {
padding: 15px;
background: url(images/templatemo_sidebar_box_top.png) top repeat-x;
}
.sidebar_box img {
border: 1px solid #999;
margin-bottom: 5px;
}
.sidebar_box .discount {
margin: 5px 0 0 0;
font-weight: bold;
}
.sidebar_box .discount span {
color: #C00;
}
.left_sidebar_box .discount a {
font-weight: bold;
color: #000;
}
.sidebar_box .categories_list {
margin: 0;
padding: 0;
list-style: none;
}
.categories_list li {
padding: 0;
margin: 0;
}
.categories_list li a {
display: block;
color: #201f1c;
padding: 5px 0 5px 20px;
background: url(images/list.png) center left no-repeat;
}
.categories_list li a:hover {
color: #439ac3;
text-decoration: none;
}
.news_box {
clear: both;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
.news_box h4 {
padding: 2px 0;
margin: 0;
}
.news_box h4 a {
font-size: 12px;
font-weight: normal;
color: #1893f2;
}
#newsletter_box label {
display: block;
margin-bottom: 10px;
}
#newsletter_box .input_field {
height: 20px;
width: 155px;
padding: 0 5px;
margin-bottom: 10px;
color: #000000;
font-size: 12px;
font-variant: normal;
line-height: normal;
}
#newsletter_box .submit_btn {
float: right;
height: 30px;
width: 80px;
margin: 0px;
padding: 3px 0 15px 0;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
}
.product_box {
float: left;
width: 223px;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #CCC;
text-align: center;
}
.product_box img {
margin-bottom: 10px;
}
.product_box h3 {
color: #2a2522;
font-size: 12px;
margin: 0 0 10px;
}
.product_box p {
margin-bottom: 10px;
}
.product_box p span {
color: #cf5902;
font-size: 14px;
font-weight: bold;
}
.product_box .detail {
float: right;
}
.product_box .addtocard {
float: left;
font-weight: bold;
padding-right: 20px;
background: url(images/templatemo_shopping_cart.png) bottom right no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer_wrapper {
background: url(images/templatemo_footer.png) repeat-x;
}
#templatemo_footer {
width: 910px;
height: 85px;
padding: 50px 40px 30px 40px;
margin: 0 auto;
text-align: center;
color: #a9a098;
}
#templatemo_footer a {
color: #d7d1cc;
font-weight: normal;
}
#templatemo_footer a:hover {
text-decoration: none;
color: #FFFF33;
}
#templatemo_footer .footer_menu {
margin: 0 0 30px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #d7d1cc;
}
.footer_menu li a {
color: #d7d1cc;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
/*twitter*/
#twitter_div {border-top: 0px;}
#twitter_div a {color: #0000ff !important;}
#twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;}
#twitter_update_list li {list-style-type: none; padding-right: 5px; }
#twitter_update_list li a {color: #0000ff; padding-right: 5px;}
#twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;}
#twitter_div a, #twitter_update_list li a {text-decoration: none !important;}
#twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}
Try moving the DIV with the class "templatemo_sidebar_wrapper" inside the DIV with the class "templatemo_content_wrapper".
On another note, there is quite a bit wrong with your site. I'm not trying to frustrate you or put you down, but you really should invest a serious amount of time into learning web design. It took me about 1 minute and 45 seconds to load your site which has a footprint of almost 10MB. This is extremely unacceptable by any standard. I would highly recommend switching to www.squarespace.com or something similar. I can tell you right now that it would cost more money to have a web design company fix your site than it would to have them design one from the ground up.
In its current state, your website will likely hurt your business more than it will help. Good luck.
Edit: Move "templatemo_sidebar_wrapper float_r" inside "templatemo_content_wrapper" (I'm not sure this is going to work...you have a lot going on on this page). Your code currently looks like this:
<div id="templatemo_content_wrapper">
<div class="templatemo_sidebar_wrapper float_l"></div>
<div id="templatemo_content"></div>
<div id="content_bottom"></div>
</div>
<div class="templatemo_sidebar_wrapper float_r"></div>