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/
Related
I am pretty new to css and html and I am trying to create a drop-down menu that has 3 or 4 columns of links per drop down. I want the columns to be inline with each other. I have managed to accomplish that but the links in each column are going on two or more lines and I'd like them to display on one.
I've been messing around with the css but can't seem to figure out how to make them display on one line per link.
In my codpen, you will see what I am working with: http://codepen.io/anon/pen/vLQGqM
The best I've been able to do is make
.tlgnav .tlgnav-column {
width: 100%;
}
, but this makes the columns stack on top of each other, which is not what I want.
I am thinking it might have something to do with my .tlgnav li being set at width of 16.66% but if I change that, my menu doesn't fill the width of the screen.
Can anyone tell me what I am doing wrong?
You can use white-space : nowrap to avoid the line breaking, but maybe it's a better way to doing this. I answer with this solution but if someone gets something better follow it.
http://codepen.io/anon/pen/BjGzgZ
.tlgnav h3 + ul li {
white-space:nowrap;
}
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; }
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;
}
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.
I am using #media tags in my css file to hide columns in my table when my screen width goes below a certain value.
my table is setup like this.
<table>
<colspan id="col1">
<colspan id="col2">
<colspan id="col3">
<thead>
......
And the hiding happens in the CSS file like this
#media only screen and max-width: 500px) {
#col1 { visibility:collapsed ; }
}
The column hiding works fine, my issue is that the I have my table width property set to 100% or its parent. The problem is that the table with the hidden column does inherit the correct width, it behaves as if the collapsed / hidden column is still there so I just get white space on the right of my table.
I am have no experience using CSS or HTMl but I have search and found nothing. I tried setting the width of the invisible columns to zero, but that made no difference.
For reference I am testing this page on IE9.
Thanks in advance for any help.
Visibility only effects whether the contents of the item are shown or not, visibility:hidden for instance, hides the contents of the node, but not the space it would take. Try display: none to hide both the contents and the space it would take.
FYI, I found this question and figured another way to solve it by using 'class' instead of 'id'. Define each of your 'td' by 'class', like this:
<tr>
<td class="col1">SAMPLE</td>
<td class="col2">SAMPLE</td>... etc
Then call your display:none on the class (rather than id):
#media only screen and (max-width: 600px) {.col1 { display: none;}}
I'm sure this isn't the most elegant solution, but it works!