I recently followed this guide, to add a left sidebar to my site.
It was added successfully, but the margins and padding of the left/right sidebar and body are off, as you can see here:
I am trying to have equal spacing between the 2 sidebars and body.
Here is my code so far:
JSFiddle Example
CSS
.site-sidebar {
width: 300px;
float: left;
margin: 0 0 0 -300px;
}
.sidebar-left {
float: left;
padding: 20px 0 10px 0;
margin-left: 35px;
width: 400px;
}
I've adjusted all the settings in the sidebar-left part of the css with no result.
I think you can solve it with the following:
.content-area {
float: left;
margin-left: 20px;
width: 100%;
}
Not if you can edit the styles.css file but that's the best solution I can come up with.
Related
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
Within my Wordpress site I have a custom written PHP search. It appears within the Content section of specific pages via 'include' so it's a separate file.
http://www.glutenfreeireland.com/accommodation/find-accommodation/
The entire code for search and results appear within the DIV .wheretoeatsearchwrapper.
Unfortunately a large gap appears between the text "Step 1: Choose a Location:" and the first SELECT box. It is caused by the adverts on the right, which when removed, fix the problem. I understood the class wheretoeatsearchwrapper kept everything within that DIV, i.e. objects either side of wheretoeatsearchwrapper wouldn't affect content inside it?
This is the applicable CSS:
.wheretoeatsearchwrapper {
/*max-width: 490px;*/
clear: none;
margin: 0;
padding-left: 10px;
}
.wheretoeatsearchwrapper h1,h2,h3,h4,h5,h6 {
display: inline;
}
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both;
}
.steps {
color: #339933;
font-weight: bold;
}
.searchvenuetype {
font-size: 95%;
margin: 4px;
float: left;
clear: none;
}
It's the clear:both; on the searchlocation select element.
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both; // Remove this
}
Remove clear: both for .searchlocation select
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
/*clear: both;*/
}
I am trying to get a jQuery function to slide li items left and right by clicking an arrow. I am using a jQuery script called TinyCarousel.js. While I have it functioning properly, it continues to scroll right until the last li item is in the first position. What I have currently can be seen here in the "Games Currently Testing or Releasing section" under the main slider. If you scroll all the way to the right you will notice the issue.
Is it possible to either...
1) Change the jQuery to make the last li item stop once it is showing all the way on the right side of the window? I know this would have to be relative to the browser window size as well as make one single partial movement incase the window size has a partial item showing. I also know I would have to know the amount of li items which I can do within the php.
2) Or two, append the li continually so that the slider never seems to end. Just continues through repeating over and over? I would guess that I need to continually append li items as well as remove them if they are off screen.
I attempted to create a jFiddle to show the issue. But it is doing something all together different on jFiddle which is closer to what I need. It seems to stop moving right at some point. But it does not need the entire last li to display completely. What is it doing differently than what I have on the live site where it does stop?
Any help is greatly appreciated. I did search and found this but it did not seem to work in this situation. Thank you in adavnce.
I have am using jQuery 1.10.2, php 5.4, TinyCarousel.js version 1.9
Here is what I have currently.
The CSS
.PrevArrow {
width: 5%;
float: left;
margin-top: 20px;
}
.NextArrow {
width: 5%;
float: right;
margin-top: 20px;
}
.ListImage img {
margin-top: 5px;
margin-bottom: 10px;
}
#slider-code .viewport {
float: left;
width:90%;
height: 95px;
overflow: hidden;
position: relative;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#slider-code .buttons {
display: block;
margin: 0px 10px 0 10px;
float: left;
}
#TickHead {
margin-top: 3px;
}
#slider-code .prev {
margin: 0 10px 0 10px;
}
#slider-code .next {
margin: 0 10px 0 10px;
}
#slider-code .disable {
visibility: hidden;
}
#slider-code .overview {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.TestingTickerText {
vertical-align: top;
color: #666666;
font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 10px;
}
#slider-code .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 65px;
width: 105px;
left: 0;
}
#slider-code .pager {
overflow:hidden;
list-style: none;
clear: both;
margin: 0 0 0 45px;
}
#slider-code .pager li {
float: left;
}
#slider-code .pagenum {
text-decoration: none;
text-align: center;
padding: 5px;
color: #555555;
font-size: 14px;
font-weight: bold;
display: block;
}
#slider-code .active {
color: #fff;
}
The php
<div id="slider-code">
<div class="PrevArrow">
<img src="Link to Left Arrow"/>
</div>
<div class="viewport">
<ul class="overview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
etc...
</ul>
</div>
<div class="NextArrow">
<img src="Link to Right Arrow"/>
</div>';
<center>
<span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
</center>
</div>
The jQuery
(function ($) {
$(document).ready(function(){
$('#slider-code').tinycarousel({ display: 1});
});
}(jQuery));
I think the problem you're having is due to css positioning of the images. Try adjusting the margins so that they will be placed slightly further away from each other; so that when no image is appended the slider will stop and there will be no space. If thats not the issue, try this:
1:
Create a div and place all of the slider images in it.
2:
Give each arrow button a separate div and class.
3:
Use the jquery append function to dynamically add images to the slider class when a user clicks either button.
$(document).ready(function(){
$('.arrowbutton').click(function(){
$('.imageslider').append('.image');
});
});
Also, remember to give your image slider a set width in css, and set overflow to hidden. That should make sure no appended images go outside of the slider, and no scrollbars appear.
I am trying to make a website for my school, and I am working on getting a area where there is a content area and also a sidebar. As you can see here: lrch.harrisonbh.com and I want the top of "Header 1" to match the top of "Sidebar." I put the css on a jsFiddle here: http://jsfiddle.net/GHpux/
I am using the css code here:
div.body{
width: 1047px;
margin-top: 210px;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
div.content{
background-color: #dbdbdb;
width: 750px;
max-width: 750px;
float: left;
padding: 15px;
margin-right: 15px;
z-index: 1;
display: inline-block;
}
div.sidebar{
background-color: #dbdbdb;
width: 215px;
float: right;
position: absolute;
padding: 15px;
display: inline-block;
}
But I get the undesired effect of the divs not matching up as you can see on the jsFiddle or my website. Im wonderding what is wrong with this? Thanks. I have tried many things. Thanks
Nice site, by the way. Sorry I didn't see the question. The fix is:
You need to remove the <br /> before the .sidebar.
Refer the screenshots.
Removing it makes it look this way:
Remove the <br> before sidebar, remove position:absolute and float:right from the sidebar and add vertical-align:top to sidebar and content.
http://jsfiddle.net/GHpux/1/
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic