Centering a div keeping the children Floating left - javascript

I have 2 div's and I want one to be centered on the screen and the other one to be on the left of it's parent #MyContent (The one which is centered). But, it seems like adding a "Float:left;" to #Latest cause a DOM error, #MyContent isn't holding #Latest any longer and it shrinks leaving #Latest out of it like if #Latest was "position:absolute;" when its "relative;".
I have these:
HTML:
<center>
<div id="MyContent">
<div id="Latest">
<div class="Last"></div>
</div>
</div>
</center>
CSS:
#MyContent {
position: relative;
font-family: FontStencil;
font-size: 12px;
padding: 20px 20px 160px 20px;
color: black;
background: rgba(240, 240, 240, 0.2);
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 250;
width: 950px;
box-shadow: 0px 5px 15px -2px black;
}
#Latest {
position: relative;
font-family: FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align: left;
font-size: 18px;
padding: 20px 20px 30px 20px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
left: 20px;
top: 30px;
width: 570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last {
position: relative;
font-family: SuperG;
text-align: left;
right: -18px;
font-size: 12px;
padding: 15px;
color: #000033;
background: white;
border-radius: 18px;
border: 1px solid #CCCCCC;
top: 25px;
width: 500px;
height: 415px;
box-shadow: 0px 1px 17px -5px black;
}
Everything is position:Relative; but it acts like if #Latest is not when I add a float:left; HALP.


CSS
#MyContent{
font-family:FontStencil;
font-size:12px;
padding:20px 20px 160px 20px;
color:black;
background:rgba(240,240,240, 0.2);
border-radius:18px;
border:1px solid #CCCCCC;
top:250;
width:950px;
box-shadow: 0px 5px 15px -2px black;
margin: 0 auto;
display: inline-block;
}
#Latest{
position:relative;
font-family:FontStencil;
float: left; /* When I remove THIS, everything works Fine BUT its all centered */
text-align:left;
font-size:18px;
padding:20px 20px 30px 20px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
left:20px;
top:30px;
width:570px;
box-shadow: 0px 1px 17px -5px black;
}
.Last{
position:relative;
font-family:SuperG;
text-align:left;
right:-18px;
font-size:12px;
padding:15px;
color:#000033;
background:white;
border-radius:18px;
border:1px solid #CCCCCC;
top:25px;
width:500px;
height:415px;
box-shadow: 0px 1px 17px -5px black;
}
Try the above CSS. DEMO

Related

How can I create the angle shown on the header with CSS?

I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.

this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>

radio button as image with onclick to next fieldset

<a id="Choise" name="next" class="next Choise-button" value="Next" >
<input type="radio" name="designation" id="designation" />
<label for="designation"><img src="" alt="designation" />
<h2>designation</h2></label>
</a>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$('#Choise input:radio').addClass('input_hidden');
$('#Choise label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise2 input:radio').addClass('input_hidden');
$('#Choise2 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise3 input:radio').addClass('input_hidden');
$('#Choise3 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise4 input:radio').addClass('input_hidden');
$('#Choise4 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise5 input:radio').addClass('input_hidden');
$('#Choise5 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise6 input:radio').addClass('input_hidden');
$('#Choise6 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise7 input:radio').addClass('input_hidden');
$('#Choise7 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise8 input:radio').addClass('input_hidden');
$('#Choise8 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
$('#Choise9 input:radio').addClass('input_hidden');
$('#Choise9 label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
/*custom font*/
#import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(20, 20, 20, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 950px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 1px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 40px 40px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
margin-top: 5px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform select {
text-align:left;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 15px;
margin-top: 5px;
width: 30%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 400px;
background: #00affe;
font-weight: bold;
font-size:16px;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
}
/*buttons2*/
#msform .choise-button {
cursor: pointer;
}
#msform .choise-button:hover, #msform .choise-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #00affe;
border: 10 solid;
border-color: #FF0000;
}
#msform .Angaben {
font-size:12px;
text-align:left;
}
#msform .zustimmung {
font-size:12px;
}
#msform .zustimmunglinks {
font-size:12px;
color:#00affe;
}
#msform .zustimmunglinks:hover, #msform .zustimmunglinks:active, #msform .zustimmunglinks:hover+label, #msform .zustimmunglinks:active+label {
font-size:13px;
}
/*headings*/
.fs-title {
font-size: 18px;
color: #2C3E50;
margin-bottom: 40px;
}
.hr {
width: 110%;
margin-left: -5%;
text-align: center;
margin-bottom: 25px;
}
.Abfragentext {
border: 1px solid;
width:300px;
text-align: center;
margin-bottom: 40px;
margin-top: 40px;
padding-bottom: 30px;
margin: auto;
}
.fs-boldtitle {
font-weight: bold;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 10px;
}
.sliderOutput {
color: #00affe;
font-weight: bold;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
font-size: 9px;
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 7px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 20px;
background: white;
position: absolute;
left: -50%;
top: 0px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #00affe;
color: white;
}
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-style: solid;
border-width: 5px;
border-color: #00affe;
border-radius: 5px;
}
#usp.uspdiv {
font-size:12px;
text-align: center;
margin-top: 20pt;
background-color: #888888;
width: 100%;
hight:100%;
}
.usp-facts1 {
font-size:13px;
margin-top: 20pt;
background-color: #F5F5F5;
width: 100%;
padding: 25px;
padding-right:50px;
margin-left:-40px;
margin-bottom:-40px;
}
.usp-table {
width:100%;
text-align: center;
}
.usp-prima {
font-size:18px;
color:#00affe;
}
/*Seite eins Auswahlen*/
label:hover, label:active, input:hover+label, input:active+label {
border: 3px solid;
border-color: #00affe;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,175,254,0.5);
transform: scale(1.05);
}
#Choise label {
width: 400px;
margin-right:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise h2 {
margin-bottom: 20px;
}
#Choise2 label {
margin-left:5px;
margin-right:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise2 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise2 h2 {
margin-bottom: 20px;
}
#Choise3 label {
margin-left:5px;
margin-bottom: 5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise3 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise3 h2 {
margin-bottom: 20px;
}
#Choise4 label {
margin-top:5px;
margin-right:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise4 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise4 h2 {
margin-bottom: 20px;
}
#Choise5 label {
margin-top:5px;
margin-left:5px;
margin-right:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise5 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise5 h2 {
margin-bottom: 20px;
}
#Choise6 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise6 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise6 h2 {
margin-bottom: 20px;
}
#Choise7 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise7 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise7 h2 {
margin-bottom: 20px;
}
#Choise8 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise8 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise8 h2 {
margin-bottom: 20px;
}
#Choise9 label {
margin-top:5px;
margin-left:5px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
display: inline-block;
cursor: pointer;
transition: all 100ms linear;
border: 6px solid transparent;
}
#Choise9 label img {
padding: 3px;
margin-left:50px;
margin-right:50px;
}
#Choise9 h2 {
margin-bottom: 20px;
}
/*ragen Slider Etagen*/
input[type=range].etagenslider {
-webkit-appearance: none;
width: 100%;
margin: 8.5px 0;
}
input[type=range].etagenslider:focus {
outline: none;
}
input[type=range].etagenslider::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
background: #484d4d;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].etagenslider::-webkit-slider-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.5px;
}
input[type=range].etagenslider:focus::-webkit-slider-runnable-track {
background: #7e8787;
}
input[type=range].etagenslider::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
background: #484d4d;
border-radius: 25px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range].etagenslider::-moz-range-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
}
input[type=range].etagenslider::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].etagenslider::-ms-fill-lower {
background: #121313;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
}
input[type=range].etagenslider::-ms-fill-upper {
background: #484d4d;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0.5px 0.5px 15px rgba(2, 0, 0, 0.6), 0px 0px 0.5px rgba(28, 0, 0, 0.6);
}
input[type=range].etagenslider::-ms-thumb {
box-shadow: 0px 0px 2px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid rgba(255, 30, 0, 0);
height: 20px;
width: 50px;
border-radius: 50px;
background: #00afee;
cursor: pointer;
height: 3px;
}
input[type=range].etagenslider:focus::-ms-fill-lower {
background: #484d4d;
}
input[type=range].etagenslider:focus::-ms-fill-upper {
background: #7e8787;
}
Hey, I am working on a contact form in which several steps are taken per .
the first step is that you can choose an image from six images.
When you click on an image (which acts as hidden radio-button) then it allows to (are directed to) the next fieldset.
This link prevent the radio buttons from being selected. do you have an idea how to activate the input with the link at the same time? I already tried it with an onclick, but unfortunately it doesn't work. I need the to "group" the code, because otherwise, it dont work.
I'm looking forward to your ideas, thank you!
Edit: is it possible to say if <a id="x1"> is klickes then select <input type="radio" id="x1" and how would the code look like? im not that good, sorry for that :(

JQuery slideshow not working probably

I'm new to web development, I integrated this slider into my page : Slideshow source+tutorial
The slider work if I run it on any local page different to mine it runs perfectly, but on mine the following problems occur :
1-pagination + arrows don't show up
2-I cant center it
my CSS :
<style>
#font-face {
font-family: imp1;
src: url(fonts/blackchancery/BLKCHCRY.TTF);
}
* { margin: 0; outline: none; }
html {
background: #32c951 url(img/noise.png);
}
body {
padding-right: 25px;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 25px;
width:1200px;
}
#header
{
position:top fixed;
padding-bottom:15px;
}
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 0px 4px 0px;
line-height: 100%;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
box-shadow: 0px 0px 0px #666666;
-webkit-box-shadow: 0px 0px 0px #666666;
-moz-box-shadow: 0px 0px 0px #666666;
background: #2D964D url(img/noise.png);
border: solid 1px #FFFFFF;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 3px 0px;
padding: 0px 6px 0px 12px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bolder;
font-family: helvetica;
font-style: italic;
font-size: 16px;
color: #FFFDFD;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 3px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
text-shadow: 0px 0px 0px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #82FF4D;
color: #2A7D35;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #82FF4D !important;
color: #000000 !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul {
background: #2A7D35;
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#FFFFFF !important;
font-size:15px;
font-style:italic;
font-family:helvetica;
font-weight: bold;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
#wrapper {
background-color: rgba(255, 255, 255, 0.8); /* (R, B, G, OPACITY */
position:center;
}
#main_content {
text-align:center;
}
#footer {
position:fixed;
height:20px;
background-color:red;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
background:#FFFFFF url(img/noise.png);
text-align:center;
}
#footer_content {
width:960px;
}
#footer li {
display:inline;
}
p {
font-family:imp1;
}
#welco_mes {
font-family:imp1;
font-size:35px;
color:black;
}
</style>
I suspect the whole problem comes from my CSS; an element is causing the slideshow to behave this way.
JSFiddle link: https://jsfiddle.net/nvsp94d7/3/
Though if the js+css of the slideshow are included, the slideshow immediatly sticks to the left+all its controls never show up

Here's a fork of your fiddle, https://jsfiddle.net/68z476g2/1/, that has the pagination and the slideshow centered compared to the parent div. I had to replace the slideshow pictures because they were not provided.
What comes to pagination not showing, I suspect it is because you didn't copy pagination.png to the correct location. It is referred to by the CSS and therefore it needs to be at ../images/pagination.png compared to the location of craftyslide.css
Centering the div was just matter of adding
#slideshow {
margin: 0 auto;
}
to your CSS file

I can't figure out why my JQuery UI slide in menu is missing a few pixels

If you click the sort link you will notice there are a few pixels/border missing from the slide in while it's in action. Once it's complete, the pixels/border shows up. How can I get these pixels/border to show while its sliding in?
Please refer to this JS Fiddle: http://jsfiddle.net/R3FkZ/
HTML
<!DOCTYPE html>
<body>
<div id="SortContainer">
<div id="Sorts">
<div>Date</div>
<div>Views</div>
<div>Rating</div>
<div>Title</div>
<div>Random</div>
</div>
<div id="SortButton"><a id="SortLink" href="#">Sort</a></div>
</div>
</body>
</html>
CSS
#SortContainer {
width: auto;
height: 22px;
margin: 40px 0px 0px 0px;
overflow: hidden;
float: right;
}
#SortButton {
width: 55px;
height: 20px;
line-height: 20px;
padding: 0px 0px 0px 4px;
border-top: 1px solid #393939;
border-right: 1px solid #5A5A5A;
border-bottom: 1px solid #393939;
border-left: 1px solid #393939;
-webkit-border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
background-color: #333333;
font-size: 12px;
font-weight: bold;
text-align: left;
float: right;
}
#SortButton > a {
text-decoration: none;
color: #CCCCCC;
}
#Sorts {
display: none;
height: 20px;
line-height: 20px;
float: right;
}
#Sorts div {
width: auto;
height: 20px;
line-height: 20px;
border-top: 1px solid #393939;
border-right: 1px solid #5A5A5A;
border-bottom: 1px solid #393939;
border-left: 1px solid #393939;
padding: 0px 8px 0px 8px;
text-align: center;
float: left;
background-color: #999999;
}
#Sorts div:last-child {
border-right: 1px solid #393939;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#Sorts div a {
text-decoration: none;
color: #CCCCCC;
font-weight: bold;
}
#Sorts div:hover {
background-color: #555555;
}
Javascript
//User clicked SORT link.
$(document).on("click", "#SortLink", function (e) {
e.preventDefault();
$('#Sorts').animate({ width: 'toggle' }, 5000);
});
Thanks!

#Sorts needed to have height:22px;. I updated your Fiddle at http://jsfiddle.net/R3FkZ/1/

div property width not maximum/Collapse Expand

I have two questions please.
1 - I have div called id="rightcolumn" in the right side padding: 10px;
Inside the div id="rightcolumn" I have anther div called rightcolumn_s.
This div id = rightcolumn_s not open to max-width:100%;.why?
2 - In the div id="rightcolumn" I have Collapse/Expand this Collapse Expand have points.
The points are on the left side after the item_1,item_2,item_3. I need the points
Before the words item_1,item_2,item_3 in the right side.
Thanks for any help.....
The website
css code:
a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }
html{
height:0px;
text-align: right;
width:1280;
height:1024px;
}
body {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_body.png');
background-repeat:repeat;
overflow:hidden;
font-family:Palatino Linotype;
font-family: Arial;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height:600px;
}
.insidWindow {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_inside_window.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px auto 10px auto;
padding: 10px;
position: relative;
top:-515px;
width:52.5%;
}
h2 {
color: #443333;
font-size: 14px;
line-height: 7px;
margin: 0px 5px 0px 5px;
padding: 5px;
color: white;
}
.lineAzure{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
line-height: 7px;
margin: 0px 0px 0px 0px;
height:15px;
}
#lineAzurebotom {
background: none repeat scroll 0 0 #880000;
line-height: 11px;
margin: 0;
position: relative;
top: -516px;
}
#leftcolumn_s {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
margin: 0 auto 0 auto;
padding: 10px;
position: relative;
top: 360px;
width: 88%;
}
#rightcolumn_s{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 115px;
max-width:100%;
margin: 0px;
padding: 10px;
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
}
#chatRead {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_dark.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 90px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#chatWrite {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_line.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 25px;
margin: 0 auto;
position: relative;
top: -520px;
width: 55%;
}
#lineYelow{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
line-height: 7px;
height:15%;
color: #745B1B;
font-family: 'CarterOneRegular';
font-size: 16px;
line-height: 34px;
margin: 0;
padding: 0;
text-shadow: 1px 1px 0 #FFF0D8;
width: auto;
}
#wrapMein{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_wrapMein.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
overflow:hidden;
margin: 0px 5px 20px 5px;
padding: 0px 0px 0px 0px;
position: relative;
height:540px;
}
.column {
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
height: 505px;
margin: 5px;
padding: 0 5px;
position: relative;
top: -15px;
width: 20%;
}
.rcolumn{
background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
background-repeat:repeat;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
margin: 0px 0px 0px 0px;
padding: 10px;
position: relative;
width:20%;
height:495px;
position:relative;
top:-528px;
float:right;
color: red;
}
.ui-wrapper {
border: 2px solid #70A029;
}
.ui-resizable {
position: relative;
}
.ui-resizable-e {
background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
cursor: e-resize;
height: 100%;
right: 0;
top: 0;
width: 6px;
}
.ui-resizable-handle {
display: none;
font-size: 0.1px;
position: absolute;
}
.ui-resizable-s {
background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
bottom: 0;
cursor: s-resize;
height: 6px;
left: 0;
width: 100%;
}
.ui-resizable-se {
background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
bottom: 0;
cursor: se-resize;
height: 9px;
right: 0;
width: 9px;
}
.maintitle1 {
background: center top #2C6987 repeat-x scroll ;
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
box-shadow: 0 1px 0 #528CBC inset;
color: #FFFFFF;
font-size: 16px;
font-weight: 300;
padding: 6px 10px 6px 10px;
}
#logo{
border-color: #316897;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px 1px 1px 1px;
position:fixed;
top:34px;
left:0px;
height: 9.6%;
}
.resolution span {
color: #2B8E00;
display: block;
font-size: 55px;
text-transform: lowercase;
}
HTML code:
<body >
<img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide" />
<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id LineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%"="">this
div
classlineAzurespnbsp;| | | | | |</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">div id="rightcolumn"
<div class="floatRight"><H3 class="maintitle1">articals</H3></div>
<ul>
<li>
Item 1
<ul id="node1" style="display:none">
<li>Sub-item 1</li>
<li>
Sub-item 2
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>
Item 2
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">insidWindow
<div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
<div style="position: absolute; top: 20px; left: 20px; ">
Resize me<br>
Please try to resizeme:<br> www www www.
<div class="resolution">
You are using
<span id="resolutionNumber"></span>
</div>
</div>
</div><br>
</div><!--insidWindow-->
<div id="chatRead">here is div id = chatread</div>
<div id="chatWrite">here is div id = chatWrite</div>
<div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->
</body></html>

1) This div id = rightcolumn_s not open to max-width:100%;
In order for the max-width property to work, you also need to set width for the element.
max-width: 100%;
width: 100%;
2) I need the points Before the words item_1,item_2,item_3 in the right side.
Define float: right; to the ul and this will put the points on the right as well.
<ul style="float: right;">

Categories