I'm trying to replace a two column table on my index page with CSS. To get a look at my current index page, it is at http://www.negative-g.com.
I have my columns set up. I'm actually using a three column layout with the third being for my sidebar image, and for the other two I want to have boxes (basically tables without using tables) with images and text alternating (park logos and their name/location in text underneath lined up with those in the other column). What sort of code would I need to add to each column to replicate my table layout?
Usually I'd use a bunch of floated blocks for that. For example, if I've got a list of items:
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li>Quux</li>
</ul>
(After removing all the margins and padding) I can set dimensions on the li elements, make them blocks, and float them left:
li {
display: block;
width: 100px;
height: 50px;
float: left;
}
If there's only 200px of space for them, then they'll wrap around. Try it.
If you set the width to 50%, you'll get a two-column layout. Remove the height, style the interior, and you're good to go.
This doesn't take your sidebar into account, but your sidebar isn't really part of the list, and you appear to be dealing with it as a background anyway, so there shouldn't really be any need for anything special. If you want to make sure the list doesn't overlap it, you can set a margin-right on the list and it won't go over there.
Related
I have a div #customers_table which contains several <div> columns. I am not using any <table>, rather I make my inner divs behave like a table columns. These columns/data is coming from database. So the columns can be less or more depending on what you choose to add or remove in this web page.
I can't set a fixed width to #customers_table as I explained above we don't know in advance how many columns are going to display. So I wanted a horizontal scrollbar when the columns are enough to view in screen. The horizontal scrollbar will appear when the columns are out of viewpoint.
A sample extracted part of my HTML:
<div id="customers">
<div id="customers_table">
div columns
div columns
div columns
...
...
...
</div>
</div>
To achieve this, I wrapped my #customers_table div within a parent div #customers. I have applied following CSS to these 2 divs:
#customers {
overflow-x:auto;
overflow-y:hidden;
width:100%;
}
#customers_table {
border:1px solid red;
min-width:1500px;
padding:5px;
}
You can see that I am applying a min-width of 1500px. Though it does work when I add 2 or 3 more columns from my website. But when I add more and more columns the columns headers/divs are screwed up and break to second line.
Please see the screenshots below:
This is fine (when columns are less):
We can scroll through to see hidden data.
But when we add more and more columns then this issue arises:
I can't increase min-width since I don't know how many new columns will come in this table. So what is the solution to this problem so that the end result should match with my first screenshot irrelevant of the fact how many new columns a person can add?
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <img class="icon" ...> where
.icon {
display: block;
float: right;
padding-left: 4px;
}
The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.
So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.
Any help would be greatly appreciated!
Adding the following rule to the css of the element you have your text in might help:
white-space: nowrap;
I think I got it working.
Basically, I had the title text within a div (also tried span). But if I didn't put it within anything (ie, it's part of the main title div), everything seems to work.
Why would the top two rows of my site load like this and the bottom row perfect?
Bottom Row:
HTML:
https://gist.github.com/1228291
CSS:
https://gist.github.com/1228301
It really depends on how you want to achieve vertical alignment. For instance, you could try something like:
.product-grid .name { height: 40px; }
But this would give you some whitespace between the title and price when the title is only one line.
It looks to me like it's off because the "cells" in the top row have item names that span two lines (thus pushing your buttons down for those items). With the "cells" on the bottom, the images above appear to make them wide enough that the item names fit, if this wasn't the case, that row would also suffer the same problem. You could try setting the names to have a specific height (as #brianreavis suggested) or perhaps adding non-breaking spaces ( ) instead of regular spaces) to the names would force the name div to push out the side.
On a side note, you don't have to use two ID's in a CSS selector (unless you're doing it for specificity reasons). Since the IDs are unique to the whole document, simply calling #welcome instead of #header #welcome should be sufficient.
Because your product titles have different number of lines.
Maybe this structure can inspire you:
http://jsfiddle.net/JeaffreyGilbert/EW6Ax/
My site's main stylesheet has the div elements arranged in a very particular order. In my print stylesheet, I wish to rearrange the order of my div elements using purely CSS. How can I do this?
Presume these to be divs in my main stylesheet:
a d
b e
c f
I want it to look like this on my print stylesheet (I remove non-printer friendly divs):
a
f
c
d
You can remove the unwanted divs and stack the remaining divs like this...
http://jsfiddle.net/ywTJy/2/
div {
width: 50%;
background-color: #ccc;
float: left;
}
/* print CSS */
div {
float: none;
width: 100%;
}
#b, #e {
display: none;
}
I'm not sure if you intentionally want to move the "F" div to the 2nd position but it seems awkward if you would order your content one way for the Web and re-order it for print.
Depends on exactly how you "want" to position them, and there are many ways to use CSS. The most barebones basic way to move a div all around the page would be using position: absolute and adjusting top/left/etc CSS properties accordingly. I think it should still work with print fine.
Mind you, I wouldn't rely "solely" on absolutely positioned items to design a webpage, but that's one way.
If the content is flowed and/or dynamic you're going to have problems. If you can reliably know where the items will be in relation to each other you can do things like:
<div style="width:100px;position:relative;left:100px">
<div style="width:100px;position:relative;left:-100px">
Which would swap the visual position of two side-by-side divs.
In general, no: you cannot cause position:static items (the default) to flow in a different order. CSS change change the presentation of elements, but there is a fuzzy line between what is semantic in your content and what is the presentation. Just as one sentence and paragraph logically follows the other, you cannot use CSS to change the meaning of the content.