I have two seperate tables on my website, which contain a total of 10 albums. Both of them have the same CSS values, but differ in their content. Therefore their height is unequal.
My goal is to make the tables end at the same horizontal line, while the images have a identical size.
Theoretically, I could set my CSS file to td, th {width: 115px;}, so that the tables end at the same position. But the problem is, my tables are generated by a template, which means next time my tables could possibly contain a total of 20 albums, so that this trick won't work.
I need to find a way to dynamically set the height for both tables. And the images should be also in the same size. Please check my website for finding a ideal solution.
I'd imagine creating a css class for each of the images being the same size would then push the rest of the tables to match up with each other.
Edit: Had a little look, and you're correct, seems to be squashing the images, though the code really shouldn't be. Rather than adding an '!important' tag to the end of the css height, please see the amended code below.
Like:
#tableID td img { width: 100%; max-width:90px; height: auto; }
Related
I've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
I have a HTML page where I am listing pictures of people and their names. If there name is longer than 20 characters I want it to show up on 2 lines instead of one to avoid a lot of empty horizontal space for the people below them
What is the simplest way to make sure to do this. To be clear, I don't want to break up words in name but rather just break up the words on two lines.
You can try setting the width of the container that holds the name to be smaller or alternatively add some padding. For example:
HTML
<div class="name">This is my name</div>
CSS
.name { width: 50px; /* or whatever value works for you */ }
You would rather need to decide what is the maximum width that the name can take. Then,
.boxed-name { width: ?? px;text-align: ??; }
The main issue with a character counting solution is that it doesn't consider the font family neither the font size. This can lead to serious differences. Also, mmmmmmmmmmmmmmmmmmmm can be longer than iiiiiiiiiiiiiiiiiiii if the current font is not fixed.
I'm currently tasked with making a mobile style sheet for my works website and I've hit a wall with some of the final stages.
My main constraint is that I can't edit the source HTML and have to work with the source provided.
I want to make a table that contains buttons respond when it hits 450px wide by dropping the buttons (table cells) to it's own row. I can do this simply via divs but not tables. I've created a simple example of what I want to do http://test.aboutcher.co.uk/so/tables.html but I have no idea how this effect can be achieved in the table.
I know tables are a bad idea for layouts but I cannot change this in the source so have to fight my way with it.
Edit
I've found my issue, there's a non cell that isn't getting the display:block style applied in the source causing the other two that are receiving the style to ignore the display:block.
Though this is not an Ideal way. but as I see it, I think you can create another table row, and hide it initially by giving a display none; and then use CSS media query, where you set the specify the width: XXpx; and set the top 2nd coloumn to display: none; and bottom table colomn to display : block;
Hope that makes sense
#media (max-device-width = 400px) {
.second-column{display:block;}
.first-column{display:none;}
}
You just need to define that your td is display:block and manipulate them as your div. Have a look at this demo: http://jsfiddle.net/68EQK/
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.