I am in the process of creating two columns. In the first column will be a picture and in the second column will be a number associated with how many times the picture is clicked(basically). So I need the two to line up, but I also want the images to line up with one another as well as the number to line up with one another. So my questions is is it better to do this in a table or to create two divs, put the list items in each div and then float them left next to one another?
If there is a better way I am open.
Option 1
<div>
<div style="float:left">
<ul>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</div>
<div style="float:left">
<ul>
<li><value></li>
<li><value></li>
<li><value></li>
</ul>
</div>
</div>
Option 2
<table>
<tr>
<td><img></td>
<td><value></td>
</tr>
<tr>
<td><img></td>
<td><value></td>
</tr>
<tr>
<td><img></td>
<td><value></td>
</tr>
</table>
I am sure there is a better way of doing this. I think these both would work, but it seems like there should be something better. Especially because I will have to so a bunch of CSS to line them all up and make them functionable.
Final result:
CSS
img{
float:left;
clear:left;
}
span{
clear:right;
float:right;
}
HTML
<ul>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
</ul>
I would keep just one list with the images and values in the same list item, ie:
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
This way the value will always be alongside the image, and can be styled directly using the span.
A table shouldn't be used for this. If the above method is unsuitable I can write you some jquery to line up two lists, but it would be much neater to use the above method imo.
Use the table. It is simpler to understand and maintain. Makes it easier to vertically align items if you images are of varing heights.
Related
I have a grid using Foundation as so:
<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
<li><img src='xxx.jpg'></li>
<li><img src='xxx.jpg'></li>
<li><img src='xxx.jpg'></li>
...
</ul>
I use jscroll to load the page as users scroll down. This adds a new ul each time, however this also means a new row is started whenever this occurs. Is it possible to get the following ul elements to continue on from the previous list?
I've got a list item which has these elements :
First item
Another list item
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials
And I want them to look they do look above in this question all in one line or if the item gets too big break it nicely like this :
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials big name which is aligning nicely
But instead my items look like this(screen shot) :
As you can see it doesn't look good. This is my html structure :
<ul class="something">
<li>
<div style="width:auto; display:inline-block;">
<span>This is where super long text goes text goes</span>
</div>
</li>
</ul>
ul and li don't have any style on them just those inherited from bootstrap css.
Which css do I use so that my list from the screen shot looks like the first one in this question?
<ul class="something">
<li>
This is where super long text goes text goes
</li>
</ul>
Just add
ul.something li div {vertical-align: top}
and it should work as you want it to.
If you want horizontal lists, use the following CSS:
li{display:inline;}
Put this on your stylesheet:
.something li div{display:inline;}
Try this: In your code display:inline-block is breaking the list. So try after removing that
<ul >
<li><div style="width:auto; "><span>First item</span></div></li>
<li><div style="width:auto;"><span>Another list item</span></div></li>
<li><div style="width:auto;"><span>Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials</span></div></li>
</ul>
I was wondering if putting <div> inside <nav> is considered bad practice, since most of the time I see <nav> used in connection with <ul> and <li> elements.
For example:
<nav id="content" class="box_navi">
<div><img src="img/projekte250.png" alt="Projekte" title="Projekte"/></div>
...
<div><img src="img/shop250.png" alt="Shop" title="Shop"/></div>
</nav>
I understand that <ul> is used to maintain readability of the navigation if css would be disabled (or when printed).
In my case I use images as navigation, so I don't see an advantage in using <li> over <div> also I did not encounter any problems with the way it is now.
Am I missing an important point?
There is great emphasis on correct semantics in HTML.
You are using <nav> because all the elements with in it are for navigation.
There nothing fundamentally wrong with using <div> elements however you should always think about the purpose of each element you using so if you make a (ordered) list of something use <ol> if you use unordered list <ul> and so on.
A lot of website use <ul> because navigation is literally a list of links which makes it correct.
You menu is a list of images so you can use <ul> there too but I don't think you'll have any rendering problems using <div> elements
I have two CSS files,
pic off the problem:
this pick shows no caps in the css. the css you see in the first pick is not that of the menu but that does not matter seeing it affects all css.
1: is the original
link
2: the copy
link
IE problem only
now my problem is that they do not act the same way as you would expect. the original shows the content as you would expect. the second does not show the drop down menu as it supposed to do.
the second thing is that if I look at the CSS on the in the browser it self than the original is all lowercase and the copy the tags are capitals. with seems to cause some of the trouble.
things I have checked:
DOCTYPE
ID
Classes
structure
style tag vs .css
HTML
original:
<div style="margin-left: 50px;">
<ul id="menu">
<li>Login </li>
<li>Help
<ul id="help">
<li>
<img alt="" class="corner_inset_left" src="corner_inset_left.png" />
General help
<img alt="" class="corner_inset_right" src="corner_inset_right.png" />
</li>
<li>Posts</li>
<li>Pages</li>
<li class="last">
<img alt="" class="corner_left" src="corner_left.png" />
<img alt="" class="middle" src="dot.gif" />
<img alt="" class="corner_right" src="corner_right.png" /> </li>
</ul>
</li>
</ul>
<img alt="" src="menu_right.png" style="float: left;" /> </div>
Copy http://pastebin.com/qsdz7pnj
Files are different - at least the second one contains additional min-width: 130px; in #menu li style. Also #menu li ul has different color set in those files. Maybe there's something more, haven't looked further.
As Sergey Kudriavtsev says the files are different. The most significant potentially being:
Original:
#menu > li {
"Copy":
#menu li
And there is this again somewhere else. This is changing the selector and thus potentially what elements the style is applying to.
Are these files meant to be the same? The fact that you call them a copy makes me think they are but they are quite clearly not which makes me wonder if the underlying problem is just how they got to be different in the first place...
The way to solve the CAPS in the CSS is a simple meta tag in the head.the caps in the script came from Quirks-mode. to stop the IE browser to use this mode use the meta tag shown here
<!-- Enable IE9 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=9" >
I want to have a comments section in my app that looks like this:
response1
response1a
response1b
response1b1
response2
response2a
response2b
response2c
response2c1
response2c1a
response2c1a1
response2c1a1
response2c1a1a
response2c1a1a1
I believe it's called threaded comments. You've probably seen this format on many online discussion sites such as reddit.
What I'm wondering is how to implement this in the HTML of my app?
What type of html/css combination would make the most sense to allow this type of application-determined indenting?
In your HTML:
<div class="comment">
Response1
<div class="comment">
Response1a
<div class="comment">
Response1a1
</div>
</div>
<div class="comment">
Response1b
</div>
</div>
And in your CSS:
.comment { margin-left: 50px; }
This approach is very flexible and portable. You could also use <ul>/<li> instead of <div> (I guess it's possible to argue both in favour and against seeing threaded comments as semantically equivalent to unordered lists). The inner comment can also be wrapped in another <div> if you require it for additionaly CSS styling.
Update: I (slightly) prefer <div>s over <ul>/<li> because it simplifies your implementation.
Firstly, if you go with the list-based approach, you have to strip the default <li> style that most browsers use (a bullet point and padding). Secondly, you will probably also want to target the set of <ul>/<li>s that are specific to your threaded comments, because they should look different from other list structures. This means that even with the "semantic" approach, you have resort to classes. So in the end, what advantage do you really get, and is it worth the extra hassle?
We've been a little more careful with applying <ul> structures like this in our projects, and so far we're really happy about it. And apparently we're not the only one.
The most used structure is a combination of <ul>s (unordered list) and <li>s (list item). Each post would have a list of comments, for example:
<div id="post">
... (post content here) ...
<ul class="responses">
<li>response1</li>
<li>response2</li>
</ul>
</div>
Then, expanding that idea, each response may have a list of responses as well. These go inside the <li> item.
<div id="post">
... (post content here) ...
<ul class="responses">
<li>
response1
<ul class="responses">
<li>response1a</li>
<li>response1b</li>
</ul>
</li>
<li>response2</li>
</ul>
</div>
This approach is fairly lightweight code-wise, and is semantically (the tags used mean the right thing) most appropriate.
To add some css onto that to make it visually appealing, you can do something like this:
ul.responses {
padding-left: 4em;
}
ul.responses li {
border-width: 2px 0;
border-style: solid;
border-color: #ccc;
}
This indents each response list, and adds a small border onto the top and bottom of each response, effectively showing the user that this response contains another list of responses to this response.
Wouldn't embedded lists work? Embedded un-ordered lists with list-style-type turned off would do that effect. Maybe I'm not understanding your question.
ie.
<ul>
<li>response1
<ul>
<li>response1a</li>
<li>response1b
<ul>
<li>response1b1</li>
</ul>
</li>
</li>
</ul>
<ul> and <li> tags
Example:
<html>
<head>
</head>
<body>
<ul>
<li>
comment
<ul>
<li>I comment you
<ul>
<li>oh, and I comment you!</li>
</ul>
</li>
</ul>
</li>
<li>
another one
<ul>
<li>comment about your</li>
<li>well, another about you</li>
</ul>
</li>
</ul>
</body>
</html>
I hacked something like that together for ManagedAssembly.com. It's not perfect, but it might give you some ideas.
What you have is a series of nested lists with a given order so a series of nested <OL> elements would make most sense. You have give OL a left margin so that each level of nesting appears more indented than its parent.