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 the following styles defined for two divs inside a containing div. I want to float the first inner div left and the second inner div right. I also want to make them margin left or margin right respectively by 15px. The problem is I want to keep my 'float left/float right' styles clean of the margin specification.
I want to be able to specify the class and add to it like so:
#termsPageButtonContainerCheckbox.leftAlignedControl {
margin-left: 15px;
}
The problem is, the margin-left will only be respected when i place it in the float style:
.leftAlignedControl {
float: left;
}
Here is a demo i set up on JSFiddle: [Removed by OP]
You are not targeting the id correctly. You either need to change the HTML id to termsPageButtonContainerCheckbox or change the CSS to #termsPageForm:termsPageButtonContainerCheckbox
http://jsfiddle.net/c5or4hjg/1/
The button has 2 ID's, but only its only possible to give it one id and its not possible to use : in an id for as fas as i know. So it will work if you remove one of the 2 parts used (the one before or after :)
I wish to make the blue circles float left for odd numbers and right for even numbers. I've tried floating the elements but it doesn't seem to work.
I've used table and table-cells to achieve the centered text and logos but cannot seem to get them to inverse unless i switched the positioning of the elements
enter code here
Here is a current demo:
https://jsfiddle.net/7g7medn1/
Result Demo (re positioned dom elements to achieve result, need to do it without re positioning them):
https://jsfiddle.net/wcttx9vm/
you might need to a add class for the even columns and change floating and display properties as follows:
.even .content {
display: block;
}
.even .circle {
float: right;
}
.even .content {
display: inline;
}
https://jsfiddle.net/zxhbbwdm/4/
what I don't understand: When you want a table, why you don't use ? A table can be used to display table-content, but not for pure layouting.
In your case I would do it like this: Take a php-file and do the "layouting" there. That means that you will do the even-odd-placement in a for-loop and switch the odd layout there. I guess it would be the easiest way.
And your current demo code can't work, since your bubble is always first in code. That is ok for the left positioning, but for right positioning it needs to be after the text. Otherwise you will screw it up.
I´m creating a page with Bootstrap and I need to make 4 columns leaving a space between each column of 5px!
I followed this tutorial ( http://andre-abt.com/2013/11/26/how-to-use-the-bootstrap-3-grid-system-with-column-margins/
). But for me doesn't work fine because if a put a link inside of the column to wrap all column is also possible make click outside of the column. (It's possible click in that 5px of margin).
jsfiddle.net/andresgl/2f7Lhmwd/ (Conferences, Summits, Events)
I hope some can help me.
Thanks!
Overcomplicated example for what you want to achieve, but if you want to keep it as it is add
.item-menu {
position:relative;
}
http://jsfiddle.net/2f7Lhmwd/2/
a{ margin:0;padding:0; }
This will remove all padding and margins from the anchor tag.
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.