I have a table with 2 rows and 6 colums.
I was playing in inspect element and came with the solution I needed ( see picture below )
as you see it looks good now.
Once I applied it into the css of the website It looks like below:
CSS
style1 //Categorie
{
width:175px;
display:inline-block;
}
.style2
{
width: 175px; //Klant
}
.style3
{
width:175px; // Website
}
.style4
{
width:175px; // Titel
}
The code I entered was for the 1st tbl row( the dropdown Categorie ) to display:inline-block
Anyone has a clue how to result could be different?
I need to get "Klant" to the left, near "Categorie"
Remove the display tag and add a float: left to all style blocks
Also: You missed a point before style1
.style1 //Categorie
{
width:175px;
float: left;
}
.style2
{
width: 175px; //Klant
float: left;
}
.style3
{
width:175px; // Website
float: left;
}
.style4
{
width:175px; // Titel
float: left;
}
If that does not work, please post the html
From the screenshots, the only difference appears to be that the table is wider in the second one:
Is that what you're trying to resolve?
I suspect that your issue is simply that the table is flowing into a wider area (thus the columns are wider, and everything within the table falls further apart). Is it possible that the classes you've posted are assigned to the selects rather than to the table cells?
Best bet is to assign a width to the table if that's the case - you can do this by giving the table a class ans assigning the width in there, or directly into the table mark up itself (less-recommended).
Related
For example, I have a button with a long text on it:
[Please click this button for more information]
Since the text is very long, on some small screens, it would be wrapped.
[Please click this button for
more information]
I want to make the text-align as left when it's wrapped and center when it's not.
For instance:
Is there any pure CSS solution for it?
There is no general way to apply different styles to elements at different widths using only CSS. This is a very good thing because it could be very easily broken, as the following example shows (using pseudocode with the form of CSS media queries).
#element( min-width: 600px ) {
button {
width: 500px;
}
}
#element( max-width: 600px ) {
button {
width: 700px;
}
}
CSS
The only way to do it using pure CSS is to find the window width at which the button text is rendered over two lines, and write a media query for that width. For example, if you test your page and find that when it is sized at 500px width or less the button is squished so that the text renders on two lines, you might add the style:
.button {
text-align: center;
}
#media( max-width: 500px ) {
.button {
text-align: left;
}
}
Of course, the exact point at which the text is rendered over two lines may differ depending on browser/layout engine.
JavaScript
Using JavaScript you can test the height of each button when the page loads and when the page is resized. If you know the height of the button when it has a single line of text and the button's height is greater than that, then you can apply a different style to those buttons.
For example:
function buttonStyles() {
let buttons = document.querySelectorAll( 'button' )
for ( let button of buttons ) {
if ( button.offsetHeight > 40 ) {
button.classList.add( 'left' )
} else {
button.classList.remove( 'left' )
}
}
}
window.addEventListener( 'load', buttonStyles )
window.addEventListener( 'resize', buttonStyles )
button {
width: 300px;
display: block;
text-align: center;
margin: 10px;
font-size: 15px;
line-height: 15px;
padding: 5px;
}
button.left {
text-align: left;
}
<button>A single line</button>
<button>Two<br>lines</button>
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
I am having some trouble with z-index working on a fixed element in safari. I created the scrolling site in firefox and wasn't even needing to specify z-index for the simple text div to be behind the other content until scrolled down to. But for some reason in Safari it shows up in front of everything else. I have tried creating a negative z-index for it and positive z-index for everything else but no change. Here is the code for it.
Thanks for any help!
Also here is the link to view it if that helps make more sense (you have to login to view the site - use username stackoverflow password:stackoverflow
http://lynchbryan.com/wp-login
<div id="tagline">
<span class="tags">We</span><span class="tagl">partner</span> <span class="tags">with clients to</span> </br><span class="tagl">cultivate</span> <span class="tags">the</span> <span class="tagl">potential</span><span class="tags"> of people</span>
</div>
#post-16 #tagline {
position:fixed;
bottom:50%;
text-align: center;
left: 50%;
z-index:-999;
}
#post-16 .tags {
font-family:'AndesLight';
font-size:23px;
color:#ffffff;
padding:0 10px;
}
#post-16 .tagl {
font-family:'ThirstyRoughReg';
font-size:50px;
color:#ffffff;
}
I wouldn't suggest trying to hide something with z-index. Instead you should try display: none;. If that's not the issue you're encountering then I still wouldn't suggest setting a negative z-index value. It's good practice to keep these values at 0 or above. Try setting the z-index of everything else to a higher number like 3 or 4 and then setting #post-16 #tagline to 1 or 2.
EDIT
According to your comments, you want to hide .tags and .tagl. You should do the following CSS rule, ignoring the z-index:
.tags, .tagl { display: none; }
Based off of what you have already. A really simple example would be. You may want to throttle of often the scroll event is called since it will be called a lot.
#post-16 #tagline {
position:fixed;
bottom:50%;
text-align: center;
left: 50%;
display: none;
}
//cache the element so you only need to look it up once.
var $tag = $('#post-16 #tagline');
//name space the scroll event
$(document).on('scroll.show-tagline' function (e) {
//this is how far the document has been scrolled in pixels
var scrolled = $(this).scrollTop();
//what ever value you want
if ( scrolled > 300 ) {
$tag.show();
} else {
$tag.hide();
}
})
I have a table in html, containing this structured data:
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
...
</table>
This is a long list. I would like to be able to but each n+1-th row next to the n th row, like this:
<table>
<tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
...
</table>
So the structure stays the same, but the CSS layout would take care of putting each second row on the right, so the users sees 2 columns of (field, value) in one row.
Any hints?
UPDATE:
This trick will do it, but destroys the table-layout, so not usable.
TABLE TR
{
float:left;
}
TABLE TR:nth-child(2n+1)
{
float:left;
clear:both;
}
Try out and let know is that you want?
Your Html
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
<tr><td>label4</td><td>value4</td></tr>
<!-- more stuff here -->
</table>
CSS:
tr {
float: left;
}
tr:nth-child(2n+1) {
clear: left;
padding-right: 10px; /* You can edit this line and add as per your style */
}
Works fine in Chrome, Safari, Firefox. Not checked in IE
Example
I created a flexible button made of three parts.
I made three parts from one picture. I think it is called "sprite" or something
Here is the css.
.commonButtonLeft, .commonButtonContent, .commonButtonRight
{
background-image:url(img/commonbutton.png);
}
.commonButtonLeft
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:left;
width:14px;
}
.commonButtonContent
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:center;
text-align:center;
}
.commonButtonRight
{
height:40px;
background-repeat:no-repeat;
background-position:right;
width:14px;
float:left;
}
Now I created another picture "commonbutton_onclick.png" for the clicked button.
And I added the following class.
.commonButtonLeft:active, .commonButtonContent:active, .commonButtonRight:active
{
background-image:url(img/commonbutton_onclick.png);
}
It didn't work well.
When I click the area ".commonButtonContent", the area only becomes the active picture.
I want to make all classes to be "commonbutton_onclick.png".
I can not use css3 in this case by the way.
Please help me.
Firstly, if the items are divs, you'll need to use :hover, not :active.
Perhaps but the entire button in a single div (class commonButton). this way you can do something like this. This will cause all 3 divs to change when the container is hovered anywhere, rather than targeting the hovering of a single piece.
Here is a JSFiddle to demonstrate.
.commonButton .commonButtonLeft
{
...
}
.commonButton .commonButtonRight
{
...
}
.commonButton .commonButtonContent
{
...
}
.commonButton:hover .commonButtonLeft
{
...
}
.commonButton:hover .commonButtonRight
{
...
}
.commonButton:hover .commonButtonContent
{
...
}