I'd like to think that I an intermediate when it comes to HTML and CSS but this is a huge problem I haven't been able to resolve.
I am building a website for a business and I can't seem to center the facebook social media plugin "like Box"
here is my html:
<!doctype html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../c9c.css">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Cloud 9 CrossFit - Home</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=141894429309879";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-40292409-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<nav>
<li>C9C</li>
<li>About Us</li>
<li>Schedule</li>
<li>Membership</li>
<li>WOD</li>
<li>Media</li>
<li>Links</li>
<li>Contact</li>
</nav>
<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="container">
<div id="img"><img src="../img/image place holder.jpg" alt="" name="imgmain" width="983" height="435" id="imgmain"></div>
<div class="fb-like-box" data-href="https://www.facebook.com/Cloud9CrossFit" data-width="973" data-height="510" data-show-faces="true" data-stream="true" data-header="false"></div>
<div class="quickboxes">
<div id="box1"><img src="../img/Crossfit.png" width="960" id="img1" longdesc="http://www.navyreserve.navy.mil/Pages/default.aspx"></div>
<div id="box2"><img src="../img/Rogue logo" alt="rogue fitness" width="940" id="img2" ></div>
<div id="box3"><img src="../img/facebook logo.png" alt="facebook" width="73" id="img3"></div>
</div>
</div>
<!-- TemplateEndEditable -->
<footer>footer stuff | sitemap | etc | © 2013 Cloud 9 CrossFit</footer>
</body>
</html>
The CSS:
/* CSS Document */
body {
font: Calibri;
background-color: #EFEFEF;
width: 1120px;
height: auto;
margin: auto;
background-image:url(img/Name%20sideways.png);
background-position:0px 20px;
background-repeat:no-repeat;
background-attachment:fixed;
}
#fb-root {
display: none;
}
nav {
margin: 20px auto;
list-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-weight:550;
letter-spacing: -0.5px;
font-size: 13px;
text-shadow: 0 -1px 3px ##E9E8E9;
width: 974px;
height: 30px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
text-align: center;
-webkit-animation: showMenu 1s;
position: relative;
color: white;
}
nav li {
display: block;
float: left;
border-right: 1px solid #999;
border-left: 1px solid #E9E8E9;
width: 120px;
height: 30px;
border-bottom: 1px solid #D5D5D5;
border-top: 1px solid ##F5F5F5;
background-image: linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -o-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -moz-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -webkit-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -ms-linear-gradient(bottom, #999999 23%, #CFCDCF 57%, #F5F5F5 89%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #999999),
color-stop(0.57, #CFCDCF),
color-stop(0.89, #F5F5F5)
);
background-color: #5f5f5f; /* Fallback */
margin:0 auto;
}
nav li:hover {
background-image: linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -o-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -moz-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -webkit-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -ms-linear-gradient(bottom, #696869 23%, #8F8F8F 57%, #C7C7C7 89%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #696869),
color-stop(0.57, #8F8F8F),
color-stop(0.89, #C7C7C7)
);
background-color: #383838; /* Fallback */
-moz-box-shadow: inset 0 1px 2px 2px #666;
-webkit-box-shadow: inset 0 1px 2px 2px #666;
box-shadow: inset 0 1px 2px 2px #666;
}
nav li:active {
background-image: linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -o-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -moz-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -webkit-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -ms-linear-gradient(bottom, #262626 23%, #525052 57%, #C7C7C7 89%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #262626),
color-stop(0.57, #525052),
color-stop(0.89, #C7C7C7)
);
background-color: #383838; /* Fallback */
-moz-box-shadow: inset 0px 0px 5px 5px #31304A;
-webkit-box-shadow: inset 0px 0px 5px 5px #31304A;
box-shadow: inset 0 0 5px 5px #31304A;
}
nav li a {
color: black;
text-decoration: none;
text-align: center;
display: block;
line-height: 30px;
outline: none;
}
nav li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
border-left: none;
}
nav li:first-child a img {
vertical-align: middle;
margin-top: -2px;
}
nav li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
border-right: none;
}
/* Fade in animation (Webkit only) */
#-webkit-keyframes showMenu {
from {
opacity: 0;
top:-20px;
}
to {
opacity: 1;
}
#container {
width: 980px;
height:auto;
margin:auto;
}
#img {
width: 980px;
margin: 0 auto;
}
#imgmain {
display: block;
border-radius: 8px;
opacity: 0.8;
-moz-box-shadow: 0px 0px 10px #999;
-webkit-box-shadow: 0px 0px 10px #999;
box-shadow: 0px 0px 10px #999;
}
.fb-like-box {
display: block;
width: 980px;
height: auto;
text-align: center;
margin: 15px auto;
}
.quickboxes {
width: 974px;
margin: 0 auto;
}
#box1, #box2, #box3 {
width: 33%;
display: inline-block;
overflow: hidden;
margin: 15px auto;
text-align: center;
}
#img1, #img2 {
width: 60%;
margin: 5px auto;
}
footer {
height:18px;
width: 974px;
margin: 5px auto;
padding: 5px 0px;
text-align: center;
border-top: thin #999 solid;
border-bottom: thin #999 solid;
}
The problem is that while the image and link boxes are centered, the Facebook like box will not center.
I don't want to absolute position because if the user changes the window size it get's distorted. I know this is a margin issue. But I'm not sure why.
This is simple CSS stuff so why does it fail to work properly?
I was able to fix it by adding
padding-left: 70px;
Hi a slight modification of Stefan's answer did the trick for me:
div.fb-like {
width: 100% !important;
position: relative;
text-align:center !important;
}
<div class="fb-like disp_fb_like" data-send="false" data-layout="box_count" data-width="90" data-show-faces="false" data-action="recommend"></div>
I cheated a little when I was encountering this issue.
I created a new container to surround the likebox and had to set a width (for the vertical configuration at 292px) with auto left/right margins.
All of the above did not work for me.
The following did:
.fb-like-box, .fb-like-box span, .fb-like-box.fb_iframe_widget span iframe {
width: 100% !important;
position: relative;
text-align:center !important;
}
Wrap another div around the Facebook code and add this to it:
#facebook-box {width: 278px; display: block; margin: 0 auto;}
Set the width to the same width as your facebook like box.
Related
I want to create a button bar on top of the page, with div containers that contain images to use them as flat button. My problem is that I cannot get the alignment correctly.
Is there an additional way to highlight the last clicked button, so that you can see which button on the buttonbar is active without using javascript?
Here is my first approach:
<html>
<head>
<title>
</title>
<style>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0,0,0,0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
box-shadow: rgba(0,0,0,0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.buttonBar {
float:left;
}
</style>
</head>
<body>
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<div id="firstButton" class="flatBtn2" />
<div id="secondButton" class="flatBtn2" />
<div id="thirdButton" class="flatBtn2" />
</div>
</div>
</body>
</html>
#top {
position: fixed;
background-color: #AAA;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
left: 0px;
top: 0px;
width: 100%;
height: 60px;
padding: 0px;
border: thin solid rgba(0, 0, 0, 0.6);
color: #444444;
font-family: Droid sans, Arial, Helvetica, sans-serif;
font-size: 12px;
cursor: pointer;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
}
.flatBtn2 {
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
background-color: transparent;
border: none;
}
.flatBtn2:hover {
background-color: #eee;
height: 50px;
width: 50px;
margin-left: 5px;
margin-top: 5px;
float: left;
display: inline;
}
.flatBtn2:focus {
background-color: #eee;
}
.buttonBar {
float: left;
}
<div id="top">
<div id="selectReiter" style="display:inline" class="buttonBar">
<button id="firstButton" class="flatBtn2" >Button 1</button>
<button id="secondButton" class="flatBtn2" >Button 2</button>
<a id="thirdButton" href="#" class="flatBtn2">A 3</a>
</div>
</div>
First of all if you want to use button, then you should you the <button> tag and add the background image through css. You can also manipulate the states in css, what you are seacrhing for is :focus and :active, so you have two rules for your buttons. The normal button rule with the main background-image and an other rule button:focus, button:active where you can load an other image or do something else.
See fiddle for a working example. I added the needed styles at the end of your css.
Hope this helps!
I am new in css/html . I am working on cctccart project.while running this code
in bottom_menu,during click any menu like Products ,white background color is merging with blue.I want to fix this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li>Company
</li>
<li>Products
<u1 class="submenu">
<li>DVR & Kits
</li>
<li>spy camraes
</li>
<li>alarms
</li>
</u1>
</li>
<li>Services
</li>
<li>Support
</li>
<li>Multimedia
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 45px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
Edit your CSS to this:
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px; /* this is the thing you have to fix */
line-height: 35px;
text-align: center;
}
I hope it can help you.
Link
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
<label class="button">
<input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
CSS
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity:.5;
}
.button input {
display:none;
}
.button input:checked + .outer .inner {
opacity:1;
}
.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:10px;
margin:5px;
width:10px;
}
.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
height:10px;
margin:.5px;
opacity:0;
-moz-transition:opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
width:10px;
}
span.text,
span.outer
{
display: inline-block;
vertical-align: middle;
}
My Navigation bar seems to extend out further than where the rest of my page stops. See my code within a JSfiddle with what's happening here. I can't seem to figure out why this is happening.
HTML:
<div id="header-wrapper">
<center>
<img src="images/logo.png" alt=""/>
</center>
<div class="container">
<div class="row">
<div class="12u">
<header id="header">
<nav id="nav">
<i class="fa fa-home"></i>  Home
<i class="fa fa-flag-o"></i>  RFP Recap '14-'15
<i class="fa fa-database"></i>  Archived Updates
<i class="fa fa-phone"></i>  Contact Us
<i class="fa fa-folder-open-o"></i>  Member Contacts
<i class="fa fa-sign-in"></i>  Log In
</nav>
</header>
</div>
</div>
</div>
</div>
CSS:
/* Header */
#header-wrapper {
background-color: #007294;
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: -o-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
}
#header {
position: relative;
border-radius: 10px;
border: solid 1px #006e8b;
box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
background-color: #007b9d;
background-image: -moz-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
background-image: -ms-linear-gradient(top, #008ead, #007b9d);
background-image: -o-linear-gradient(top, #008ead, #007b9d);
background-image: linear-gradient(top, #008ead, #007b9d);
height: 86px;
width: 1200px;
margin-top: 0%;
margin-right: 0;
margin-bottom: 2.5%;
margin-left: 0;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
#header h1 {
position: absolute;
left: 0px;
top: 10px;
color: #fff;
font-size: 2.4em;
letter-spacing: -2px;
line-height: 86px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header nav {
position: absolute;
right: 40px;
top: 1px;
line-height: 84px;
text-transform: ;
font-size: 1.3em;
letter-spacing: -1px;
width: 1066px;
height: 92px;
}
#header nav a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 0 25px 0 25px;
outline: 0;
}
#header nav a.current-page-item {
background-color: #007897;
background-image: -moz-linear-gradient(top, #007b99, #007897);
background-image: -webkit-linear-gradient(top, #007b99, #007897);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
background-image: -ms-linear-gradient(top, #007b99, #007897);
background-image: -o-linear-gradient(top, #007b99, #007897);
background-image: linear-gradient(top, #007b99, #007897);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
}
#header nav a:hover {
background-color: #0882a1;
background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
background-image: -o-linear-gradient(top, #0782a0, #077d9b);
background-image: linear-gradient(top, #0782a0, #077d9b);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
}
You are missing value for css in line 80:
text-transform: ;
Plus html entities like $nbsp have ; at the end $nbsp;
Set body tag to:
body{
position:relative;
margin:0 auto;
width:1200px;
}
Next give #header-wrapper & #header WIDTH of 100%
#header-wrapper,#header{
width:100%;
}
This should keep your #header inside of your Wrapper, and Wrapper should remain inside of your Body.
/== TAB TEXT ==/
Try replacing your #header nav a with this
#header nav a {
float:left; <!-- Changed from display:inline-block; -->
text-decoration: none;
color: #fff;
padding: 0px 0px 0px 10px; <!-- changed from 0px 25px 0px 25px-->
outline: 0;
}
I know that the problem lies somewhere in my CSS3, but as a novice I simply can't work out what I am doing wrong with this. What I am trying to do is set up a horizontal accordion using only CSS3 and HTML5.
The effect I want to create is labels on the right, rotated 90deg until selected. selected labels I want to have rotate back to 0deg which I can do fine and to reveal their content which I am placing in article tags transitioning in from the right, ie transform: width 0.3s ease-out; to fill the full width of the containing div element.
This is the HTML -
<header>
<h1>Weedy101</h1>
</header>
<div class="horizontal">
<div class="side">
<input id="trig-a" name="trigger" type="radio" />
<label for="trig-a">This is trig-a's rotated label</label>
<article class="wide">
<h3>This is the content in trig-a</h3>
<p>I am keeping my fingers crossed but expect no mirracles on my first attempt considering I have never attempted a horizontal accordion before and the only examples I have seen use js.</p>
</article>
</div><!-- close the horizontal box -->
<div class="side">
<input id="trig-b" name="trigger" type="radio" checked="yes" />
<label for="trig-b">label for trig-b</label>
<article class="wide">
<h3>trig-b</h3>
<p>Just so it's different</p>
</article>
</div><!-- close the horizontal box -->
</div><!-- Close the new horizontal accordion -->
and this is my css -
.horizontal
{
margin: 10px auto 30px auto;
display: inline-block;
position: relative;
min-width: 100%;
min-height: 450px;
}
.horizontal label
{
font-family: 'News Cycle', sans-serif;
font-weight: normal;
padding: 5px 20px;
position: relative;
width: 450px;
z-index: 20;
display: inline-block;
cursor: pointer;
color: #0e3062;
text-shadow: -1px 1px 1px #677283;
line-height: 1.6em;
font-size: 1.5em;
background: linear-gradient(top, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
background: linear-gradient(to bottom, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
background: linear-gradient(rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
background: -webkit-linear-gradient(top, rgba(165,176,161,0.7) 2%, rgba(255,240,231,0.8) 46%, rgba(190,176,177,0.7) 98%);
box-shadow: 0px 0px 0px 1px rgba(191,183,178,1),
1px 0px 0px 0px rgba(190,176,177,1),
0px 2px 2px 0px rgba(34,34,34,1);
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.horizontal label:hover,
.horizontal input:checked + label:hover
{
color: #74450f;
text-shadow: -1px 1px 1px #9b8e76;
background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
background: linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
background: -webkit-linear-gradient(top, rgba(165,176,161,0.5) 1%, rgba(255,240,231,0.9) 46%, rgba(190,176,177,0.5) 99%);
box-shadow: 0px 0px 0px -1px rgba(191,183,178,0.7),
-1px 0px 0px 0px rgba(190,176,177,0.7),
0px -2px -2px 0px rgba(34,34,34,0.7);
}
.horizontal input:checked + label
{
color: #74450f;
text-shadow: -1px 1px 1px #9b8e76;
line-height: 2.0625em;
font-size: 1.1875em;
background: linear-gradient(top, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
background: linear-gradient(to bottom, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
background: linear-gradient(rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
background: -webkit-linear-gradient(top, rgba(165,176,161,1) 3%, rgba(255,240,231,1) 48%, rgba(190,176,177,1) 99%);
box-shadow: 0px 0px 0px 2px rgba(191,183,178,1),
2px 0px 0px 0px rgba(190,176,177,1),
0px 4px 4px 0px rgba(34,34,34,1);
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
}
.horizontal input
{
display: none;
}
.horizontal article
{
background: #ffffff;
padding: 0px 15px 0px 15px;
margin-top: -1px;
overflow: hidden;
width: 0px;
height: 0em;
position: relative;
display: inline-block;
z-index: 10;
transition: width 0.5s ease-in;
box-shadow: 0px 0px 0px 2px rgba(191,183,178,1);
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
.horizontal article p,
.horizontal article h3
{
padding: 5px;
text-shadow: -1px 1px 1px #647881;
}
.horizontal input:checked ~ article.wide
{
max-width: 45em;
width: 100%;
height: 45em;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
and for good measure here it is doing weird things -http://weedy101.netii.net/horizontal.html
Any help with this would be greatly appreciated, my next stage will be to nest this horizontal accordion inside my working vertical CSS only accordion, but I need to get it working independently first.
I am creating a menu which I am trying to base on this menu:
http://www.yootheme.com/widgetkit
However I have run into a small problem where if you hover over the middle of the menu item, it works ok, but if you hover over the edge of it (where the border line is), it moves itself and the other menu items in front of it to the right by 1px.
I have been messing around with the code for a fair amount of time now and can't seem to figure it out.
HTML:
<div class="nav">
<ul>
<li>Home</li>
<li class="active">Structure</li>
<li>Buttons</li>
<li>Forms</li>
<li>Download</li>
</ul>
</div>
CSS:
.nav {
max-width: 100%;
}
.nav ul {
max-width: 100%;
margin: 0 auto;
background: #FFFFFF;
background: -webkit-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -moz-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -ms-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -o-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: 100% 100%;
border: 1px solid #c8c9ca;
border-radius: 6px 6px 6px 6px;
height: 40px;
}
.nav ul li {
margin-top: -1px;
padding-top: 1px;
float: left;
height: 39px;
list-style: none outside none;
}
.nav ul li:first-child {
border-left: none;
}
.nav ul li.active{
border-left: 1px solid #DCDDDE;
border-right: 1px solid #DCDDDE;
padding-top: 1px;
float: left;
list-style: none outside none;
background: -webkit-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -moz-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -ms-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -o-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
color: #000000;
}
.nav ul li.active:hover{
padding-left: 1px;
padding-right: 1px;
}
.nav ul li:hover{
border-right: 1px solid #DCDDDE;
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
color: #000000;
}
.nav ul li a {
float: left;
text-decoration: none;
display: block;
font-family: 'YanoneKaffeesatzLight', Arial, sans-serif;
height: 38px;
line-height: 38px;
padding-left: 22px;
padding-right: 22px;
display: block;
color: #444444;
font-size: 17px;
text-shadow: 0 1px 0 #FFFFFF;
}
.nav ul li a:hover{
padding-left: 21px;
padding-right: 21px;
}
I have also made a JSFiddle for a proper preview.
Can anyone help me figure out why this is happening and provide a possible solution? It's probably something stupid I'm not seeing.
That's because you put borders on LI:HOVER and after that you change the padding on A:HOVER not on LI:HOVER again. Just change the place of :hover like this:
.nav ul li:hover a{
padding-left: 21px;
padding-right: 21px;
}
And I think it should be fine now.