- This topic is empty.
-
AuthorPosts
-
March 12, 2013 at 6:24 am #43321
CMonique
MemberHi,
I’m desperately trying to align my slider and sidebar widget next to each other on the same line but am failing at every hurdle!
I’ve been coming back to it for the last couple of days and it needs to be finished today! Please help
Take a look at the home page here http://getyourswaggaback.com to see exactly what I mean.
Thanks in advance
C
March 12, 2013 at 6:38 am #127840Paulie_D
MemberGiving them widths might be an idea.
March 12, 2013 at 7:23 am #127836CMonique
MemberHey Paulie,
They have widths, this is the section of the code I’m trying to sort out. When I gave the widget a px width it messed up the other sidebars further down the page.
#slider {
position:relative;
}#slider
.sidebar-top,
.widget {
float:right;
max-width:88%;
width:auto;
text-align:center;
}#slider {
border:15px solid #000000;
width:550px;
height:300px;
margin:10px;
box-shadow:0 7px 10px 0 #444444;
}#slider a:active {
outline:none;
}.slides,
.flex-control-nav {
margin:0;
padding:0;
list-style:none;
}.slides {
width:550px;
height:300px;
overflow:hidden;
}#slider .slides > li {
display:none;
position:relative;
margin:0;
}#slider .slides li:first-child {
display:list-item;
}.flex-pauseplay span {
text-transform:capitalize;
}.slides:after {
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}.flex-control-nav {
position:relative;
right:0;
bottom:8%;
width:50%;
list-style: none;
text-align:center;
}.flex-control-nav li {
display:inline-block;
margin:0 0 0 15px;
}.flex-control-nav li:first-child {
margin:0;
}.flex-control-nav li a {
display:block;
width:10px;
height:10px;
cursor:pointer;
background:rgba(255, 255, 255, .4);
border-radius:24px;
color:#333;
font-weight:600;
line-height:24px;
text-indent:-48px;
overflow:hidden;
}.flex-control-nav li a.flex-active,
.flex-control-nav li a:hover {
background:rgba(255, 255, 255, .8);
}.flex-direction-nav,
.flex-pauseplay {
position:absolute;
left:60px;
bottom:8%;
width:100px;
margin: 0;
list-style: none;
font-size: 18px;
font-weight: 600;
z-index: 2;
}.flex-pauseplay {
left:15px;
width: 26px;
font-size: 15px;
}.flex-pause {
font-family: sans-serif;
}.flex-direction-nav li,
.flex-pauseplay a {
float: left;
margin: 0 5px;
background: rgba(0, 0, 0, .15);
border-radius: 4px;
}.flex-direction-nav a,
.flex-pauseplay a {
display: inline-block;
width: 18px;
padding: 4px 8px;
color: #fff;
opacity: .8;
text-align: center;
cursor: pointer;
}.flex-direction-nav a:hover,
.flex-pauseplay a {
opacity: 1;
}#slider .hentry {
margin:0;
box-shadow:none;
background:none;
border:none;
color:#fff;
text-align:right;
}#slider .wp-post-image,
#slider .entry-attachment {
position:relative;
top:0;
left:0;
width:100%;
}#slider .entry-attachment {
z-index: 1;
}#slider ul li:first-child .entry-container {
display: block;
}#slider .entry-title {
display: none;
position:absolute;
top:32%;
right:0;
z-index:1;
float:right;
float:right;
margin:0;
font-family: “Open Sans”, sans-serif;
font-size:25px;
line-height:1.62em;
}#slider .entry-title a {
display:block;
padding:10px 20px;
background:rgba(0, 0, 0, .15);
color:#fff;
}#slider .entry-summary {
clear: both;
float:right;
max-width: 61.8%;
min-width: 324px;
padding:10px 20px;
background:rgba(0, 0, 0, .15);
}#slider .entry-summary .entry-attachment {
position:static;
max-width:100%;
height:auto;
padding:0;
background:none;
}#slider .entry-attachment,
#slider .entry-attachment p {
margin-bottom:0;
}March 12, 2013 at 7:35 am #127822Paulie_D
MemberIn Web Inspector no size is being applied to the section with an ID of slider.
Ditto for #sidebar-top and .widget-area
March 12, 2013 at 7:39 am #127823CMonique
MemberReally? I thought it has a size of 550px 300px. Where and how should I input that then?
March 12, 2013 at 7:52 am #127824Paulie_D
MemberI can see it in your CSS file but something is obviously overriding it…I just can’t figure out what.
March 12, 2013 at 7:57 am #127826CMonique
MemberOh man! Maybe it’s something within the theme, would you mind having a look at the rest of the code if I copy/paste it or Can I email it to you?
March 12, 2013 at 8:00 am #127827CrocoDillon
ParticipantSlider is getting the 550×300 width.
I don’t understand what you’re doing here:
#slider
.sidebar-top,
.widget {
float:right;
max-width:88%;
width:auto;
text-align:center;
}since you don’t have a class `sidebar-top` inside `#slider`
March 12, 2013 at 8:03 am #127828Senff
ParticipantGive the #slider and .widget-area float:left perhaps? Not sure if that’s what you’re after.
March 12, 2013 at 8:03 am #127829CrocoDillon
ParticipantYou can start by setting `float: left;` on `#slider` and `float: right;` on `#sidebar-top`.
EDIT: Oops, too late xD
March 12, 2013 at 8:03 am #127830Paulie_D
MemberOK….the width of the slider is now showing up and all of the controls are appearing in the right place.
I **think** you would have to add ‘float:left’ to the #slider section AND float:right on #sidebar-top div.
That should get them alongside one another if a width is set on #side-bar-top (perhaps 400px?). The image in the sidebar isn’t showing up for me.
March 12, 2013 at 8:04 am #127831CMonique
MemberHi CrocoDillon,
I thought I had put it in the #slider section, it definitely moved up there when I changed the script.
I’ve hit a wall and not sure what to do with this, need to be finished today. What can I do? I just want a widget showing in the space next to the slider for ads/images/etc. Can this be done?
March 12, 2013 at 8:06 am #127825Senff
ParticipantI think three people just gave you the same solution to fix the issue…
March 12, 2013 at 8:08 am #127845CMonique
MemberI’ve done the whole float:left thing and I’ve tried display:block, not sure if there is something else in the script that is somehow stopping it from working. Let me try it again and see.
March 12, 2013 at 8:18 am #127850CMonique
MemberIs this what you meant Paulie D?
#slider {
position:relative;
float:left;
}#slider
.sidebar-top,
.widget {
float:right;
width:400px;
text-align:center;
}#slider {
border:15px solid #000000;
width:550px;
height:300px;
margin:10px;
box-shadow:0 7px 10px 0 #444444;
}#slider a:active {
outline:none;
}.slides,
.flex-control-nav {
margin:0;
padding:0;
list-style:none;
}.slides {
width:550px;
height:300px;
overflow:hidden;
}#slider .slides > li {
display:none;
position:relative;
margin:0; -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.