I've been trying to solve this for 5 hours now and nothing I do seems to work. I have a Facebook like button and a Twitter follow button and I want them to be side by side but the Twitter button keeps coming up on the line underneath. I'm using Twitter Boostrap. This is my haml code:
#social-media-container.container
%ul.social-media-buttons
%span.span3.offset2
%li.socialmedia
%h3 Like us on Facebook
.facebook-like-button
%script{:src => "http://connect.facebook.net/en_US/all.js#xfbml=1"}
%fb:like{:layout => "button_count", :show_faces => "false", :width => "100"}
%ul.social-media-buttons
%span.span3.offset6
%li.socialmedia
%h3 Follow us on Twitter
%a.twitter-follow-button{"data-count" => "horizontal", :href => "https://twitter.com/..."}Follow ...
%script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}
And my CSS code:
.social-media-buttons{
float: left;
list-style: none;
margin: 5px 0 20px 0;
padding: 0;
width: 100%;
}
ul.social-media-buttons li{
display: block;
float: left;
margin-right: 10px;
}
twitter-follow-button{
margin-top: 2px;
}
Any idea how to fix this? I've tried several other ways as well with display: inline; to no avail.
There are a few mistakes with your HAML code. For starters you are creating an empty div. I am presuming that you want the div to work as a wrapper for the .social-media-buttons unordered list. In that case your HAML should look like this:
#social-media-container.container
%ul.social-media-buttons
%li.socialmedia
%h3 Like us on Facebook
.facebook-like-button
%script{:src => "http://connect.facebook.net/en_US/all.js#xfbml=1"}
%fb:like{:layout => "button_count", :show_faces => "false", :width => "100"}
%li.socialmedia
%h3 Follow us on Twitter
%a.twitter-follow-button{"data-count" => "horizontal", :href => "https://twitter.com/..."}Follow ...
%script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}
What this does is it creates the div as a wrapper for the one social-media-buttons unordered list. In your HAML code you had two unordered lists. One for the Facebook like and another one for the Twitter. I also removed the unwanted span that was wrapping the li. Having a span wrap a list item is invalid HTML. If you want to style the content inside the list items then I would suggest adding the styles for the headings, div or a tag inside the list items.
Try this code out and see if it fixes the problem.
Aside from the span wrapping your list items (it is supposed to wrap the list block) you're offsetting your twitter button out of the same line as the facebook button, so just remove that offset and both button should line up just fine.
Un-Haml'd Demo: http://jsfiddle.net/mJ3BV/1/
Related
I would like to have a code listing with alignment in HTML. This is an example of how it is supposed to look:
In this example, the beginning of the second line is aligned with the beginning of the last line, the parentheses before “url”, “method” and “parameters” are aligned, and the columns of symbols starting with colons are aligned. The distance from “url” to “:reader” and the like is supposed to be one text space. The distance between the two parentheses at the beginning of the second line is supposed to be zero, but one text space is acceptable.
How can I have that in HTML? Here are my ideas:
Tables seem obvious here, but the HTML code would be hard to read if they were used because they would be nested and inline.
Custom tabstops would solve it, but I don't know that HTML would have such thing. Does HTML have custom tabstops, that I can mark a position in the text, and all tabs associated with it would horizontally extend to that mark? It would be like tabstops in Word or a similar text processor, but with the tabstop positions calculated based on the text, not manually placed. This could be hacked somehow, like that a dummy element would be placed at the point of alignment, and the alignment would be done with an element with the width calculated by some Javascript as the difference in the coordinates X of that element and the dummy element.
The code is in a proportional typeface, so alignment with spaces isn't viable.
I tried to do it with tables. The following snippet is the best that I could do. The code is ugly and the vertical alignment of the parenthesis on the second line is off.
body {
font-family: sans-serif;
}
pre {
font-family: sans-serif;
display: inline;
}
table {
display: inline-table;
}
td {
vertical-align: top;
}
.indent {
width: 1.5em; display: inline-block;
}
<!doctype html><html>
<body>
(defclass request ()<br>
<span class="indent"></span><table><tr><td>(</td><td><table><tr><td>(url</td><td>:reader request-url</td></tr>
<tr><td></td><td>:initarg :url</td></tr>
<tr><td></td><td>:type string</td></tr>
<tr><td></td><td>:documentation "<pre>Request URL.</pre>")</td></tr></table></td>
<tr><td></td><td><table><tr><td>(method</td><td>:reader request-method</td></tr>
<tr><td></td><td>:initarg :method</td></tr>
<tr><td></td><td>:initform :get</td></tr>
<tr><td></td><td>:type keyword</td></tr>
<tr><td></td><td>:documentation "<pre>Request method, e.g :get, :post.</pre>")</td></tr></table></td></tr>
<tr><td></td><td><table><tr><td>(parameters</td><td>:reader request-parameters</td></tr>
<tr><td></td><td>:initarg :parameters</td></tr>
<tr><td></td><td>:initform nil</td></tr>
<tr><td></td><td>:type association-list</td></tr>
<tr><td></td><td>:documentation "<pre>The request parameters, as an association list.</pre>"))</td></tr></table></td></tr>
</table><br>
<span class="indent"></span>(:documentation "<pre>A general HTTP request.</pre>"))
</body>
</html>
Which solution is the most viable? is there a cleaner solution that I missed?
I implemented custom tabstops (the second idea) how I described it in the question.
The HTML code has tags marking alignment anchors (<align-anchor>). Then, it has tags for elements having an id as the attribute anchor (<align->); they are supposed to extend to the left border of the element with the given id. The id could be of any element, but I use only <align-anchor> for clarity. There are also <indent->; they are supposed to indent text from the beginning of the line, and they have a fixed width.
Questions about how to make this better:
How can I have custom self-closing HTML tags? all tags described in the previous paragraph are empty, so they don't need a closing tag, and not having it would make it much cleaner.
How can it be done so that the code is aligned first and then displayed? If I load the page, the code is not aligned for a short time, and then gets aligned. I'd like the code to be aligned as soon as it's displayed.
The code
function main() {
let tabs = document.getElementsByTagName("align-");
for (let tab of tabs) {
let x = tab.offsetLeft;
let tabstop = document.getElementById(tab.getAttribute("anchor"));
let tabstopX = tabstop.offsetLeft;
let width = tabstopX - x;
tab.style.width = `${width}px`;
}
}
window.onload = main
code-block {
white-space: pre-line;
font-family: sans-serif;
}
pre {
font-family: sans-serif;
}
code-block pre {
display: inline;
}
indent- {
display: inline-block;
width: 1.5em;
}
align- {
display: inline-block;
}
<!doctype html>
<html>
<body>
<code-block>
(defclass request ()
<indent-></indent->(<align-anchor id=1></align-anchor>(url <align-anchor id=2></align-anchor>:reader request-url
<align- anchor=2></align->:initarg :url
<align- anchor=2></align->:type string
<align- anchor=2></align->:documentation "<pre>Request URL.</pre>")
<align- anchor=1></align->(method <align-anchor id=3></align-anchor>:reader request-method
<align- anchor=3></align->:initarg :method
<align- anchor=3></align->:initform :get
<align- anchor=3></align->:type keyword
<align- anchor=3></align->:documentation "<pre>Request method, e.g :get, :post.</pre>")
<align- anchor=1></align->(parameters <align-anchor id=4></align-anchor>:reader request-parameters
<align- anchor=4></align->:initarg :parameters
<align- anchor=4></align->:initform nil
<align- anchor=4></align->:type association-list
<align- anchor=4></align->:documentation "<pre>The request parameters, as an association list.</pre>"))
<indent-></indent->(:documentation "<pre>A general HTTP request.</pre>"))
</code-block>
</body>
</html>
I am injecting html from an editor into my site. How can I 'inherit' the alignment from a child element like this:
<li>
<div align="right">one</div>
</li>
the issue is that the bullets are aligned left and text is right , I would like to get the alignment from whatever is set on the div in this case 'right'. This can be different since it is coming from an html-editor.
css:
ul, ol, li {
list-style: disc !important;
}
jsfiddle:http://jsfiddle.net/bfu20zhq/
There is no way to select a parent according to this and the MDN has nothing to suggest that this has changed recently.
However, as indicated in related posts, this can be achieved through javascript (and must be, since css can't do it yet). You can do this by walking the DOM tree and finding all the div elements that have a parent li and then make their align attributes the same:
// create the filter for the tree walker
var div_filter = {
acceptNode: function (node) {
if ( node.tagName == 'DIV' && node.parentElement.tagName == 'LI' ) {
return NodeFilter.FILTER_ACCEPT;
}
}
};
// create the tree walker so we can
// find all the divs
var treeWalker = document.createTreeWalker( document.body,
NodeFilter.SHOW_ELEMENT,
div_filter,
false);
// walk the DOM tree for the nodes we want
// and make the `li` elements have the same `align` as the `div`s
while (treeWalker.nextNode()) {
console.log(treeWalker.currentNode);
treeWalker.currentNode.parentElement.setAttribute('align',
/* fetch the div's align attribute */
treeWalker.currentNode.getAttribute('align') );
}
Unfortunately, while this correctly sets the align attribute, it doesn't give the desired result as you can see in this fiddle. I'm leaving this here however because we need it for the full solution.
Setting float: right on the list elements has an effect, but a horrible one.
After a bit of tweaking, I found that adding inside to list-style and adjusting text-align to right or left accordingly, the desired result is achieved:
This is what we want, if the div has align = "right"
li {
list-style: disc inside;
text-align: right;
}
We also need to change the divs to display: inline-block so they don't act like non-text elements:
li > div {
display: inline-block;
}
If you want to align the bullets vertically, you need to give the divs a definite width, such as width: 30% or something like that.
So our while loop changes to:
while (treeWalker.nextNode()) {
console.log(treeWalker.currentNode);
treeWalker.currentNode.parentElement.style.textAlign =
treeWalker.currentNode.getAttribute('align');
}
Here is the complete fiddle.
If you want the same alignment simply add "list-style-position: inside;" to your css like this fiddle.
li
{
list-style: disc;
list-style-position: inside;
}
I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.
What I've tried is:
- if flash[:notice]
/ Full width is a css class with 100% width, so the width works...
.alert.alert-info.alert-dismissable.full-width
.col-md-1
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
.col-md-1
This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:
.col-md-1
.col-md-10
[message]
.col-md-1
Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:
Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.
Any ideas on what I should do?
You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it.
- if flash[:notice]
.alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
.col-md-1
// give proper width and margin to this div to align button with dropdown
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
Solved it by using some javascript (or coffee-script). View:
.alert.alert-info.alert-dismissable.no-border-radius
.container
.col-md-1
.col-md-10
= flash[:notice]
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
.col-md-1
JavaScript (or CoffeeScript):
$('.close').click ->
$(".alert").hide();
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}
How do I change my textfields so they look more like the Twitter login textfields or even the Title textfield for Stackoverflow when you post a new question.
I currently just use:
<%= text_field_tag 'name', #name, :size => 30 %>
Have a look here.
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
I think you need to add:
<%= text_field_tag 'name', #name, :size => 5, :class => "cssclassname" %>
...and then define a css class called 'cssclassname' (or whatever you want it to be) to style the css.
A nice css guide for text boxes:
http://www.cssportal.com/form-elements/text-box.htm
Firebug for CSS Inspection
Have you tried using the Firebug tool for FireFox?
You can inspect elements on web sites and see what styles have been used.
In the case of the StackOverflow title input, the following style has been used:
input {
margin:5px 0pt;
padding:3px;
}
input, select, button {
border:1px solid #999999;
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:100%;
}
The general principle to achieving what you want is to specify a thin border on the text fields in your CSS. To match the Stack Overflow Title text field, add this to your CSS file:
input {
border: 1px solid #999;
}