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
Related
I have a webpage written in PHP that displays a table, and I use nvd3 to also show a graph based on the table, however according to this tutorial: http://lsxliron.github.io/nvd3Tutorial/ I should use several css stylesheets, inlcuding
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />
in my head for the page. I also use my own external stylesheet. However the linked one has the code
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
}
td,th {
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%;
display: table
}
,th,td {
border: none
}
*,*:before,*:after {
box-sizing: inherit
}
in it which messes up my table, short of either not including this stylesheet, explicitly overriding it with my own local css, or making the graph show in a new webpage is there anything I can do? And if those are my only options, how could I override the *,*:before,*:after section? It is making my headers off center
Thanks in advance
Edit:
The code being affected by
*,*:before,*:after {
box-sizing: inherit
}
is a div inside of a td used to space out my headings and subheadings, I added box-sizing: initial to the div, and it works fine now (everything was shifted to the left before). The box-sizing inherit was shrinking the content and increasing the margin.
materialize is not required for NVD3. I would ignore that part of the tutorial unless you want to use Material Design. If you do want to use materialize, then just make your selectors more specific.
e.g.
.my-table-wrapper td, .my-table-wrapper th {
padding: 15px 5px;
/* etc. */
}
put your CSS after all others
add !important to every rule you want to override
check with inspector in your favorite browser which rules you have to override additionally and do it also with !important
remember that the more specific your rule is the higher its priority: ul li a.menu-link will override a.menu-link for all anchors in ul>li
Example
td,th {
padding: 15px 5px !important;
display: table-cell !important;
text-align: left !important;
vertical-align: middle !important;
border-radius: 2px !important;
}
You only need to import the materialize fiel in your new css3 file, how you know css work over waterfall, that mean that whe your use import in css on the top of the page, that style will charge in the same css, and beacuse css work over waterfall all the last style overwrite the first style (As long as styles repeat themselves). Go:
#import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
padding: 0
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0
width: 100%;
}
*,*:before,*:after {
box-sizing: inherit
}
I started making a new WordPress theme with Bootstrap when I stumbled across a problem.
I found out that when I create a new post with some text and an image at the top(Aligned to left) then the image is actually not aligned.
The image is in the top left corner and the text is underneath it.
I searched on Google and read blog posts and so on.
Most people suggest adding some styling in style.css that would align the text.
Example:
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
Of course, this aproach didn't work for me so I checked and I think that the problem is because these classes work only if applied to image tag.
When accessing the_content() function, the image is printed inside a div tag.
<div id="attachment_66" style="width: 310px" class="wp-caption alignleft">
<img class="size-medium wp-image-66" src="path/to/img" alt="Sphere" width="300" height="169" sizes="(max-width: 300px) 100vw, 300px">
<p class="wp-caption-text">Who doesn’t like spheres?</p>
</div>
If the problem really is because of those tags, how can I get alignment classes to be applied to img not div tags?
This is how it looks.
Thanks to #Andrei Gheorghiu I managed to solve the issue and I am gonna answer my question.
Premade WordPress themes have some css that I haven't included.
So, this is what you need to include in you style.css
.alignleft { float:left;}
.alignright { float:right;}
.aligncenter { display: block; margin: auto; }
Instead of creating the following style:
img.alignleft { float: left; margin: 0 1em 1em 0; }
Why don't you create it like:
div.alignleft img { float: left; margin: 0 1em 1em 0; }
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/
I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.
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