Vertically aligning 90 degree rotated text - html

What I want to do is, to vertically align collapsed blocks on give website:
http://maliyyemenecment.com/?language=en
I tried all possible ways, to align words with bottom side. I mean, constant margin from bottom side. The problem is, can't achieve any good result. Any suggestions?
Thx in advance

.kwicks.horizontal li .block .collapsed has a text-align:right; replace it with text-align: left; (as the "bottom" is actually the left side of the element) and set a text-indent (works for me when making this edit in developer tools)
.kwicks.horizontal li .block .collapsed {
text-align: left;
text-indent: 17px;
}

Related

How can I center a menu in a responsive website? (example)

I am having some grave difficulty to center a silly menu on the pages of my website. I know I can set the width of an outer div to a px value, but how can I make it so it centers for a responsive website? Here's the page:
http://103.4.17.225/~america/index.php/product-menu/vertical-garden/gro-wall-3
The menu is the benefits,gallery,etc.
Thanks guys , you're the bomb.
First, remove the float from the ul and set it to inline block;
.met_main_nav ul {
float: none;
display: inline-block;
}
Then use it's parent (the nav element) to center it, This will center any inline-block elements inside it (i.e the ul):
.met_main_nav {
text-align: center;
}
To center horizontal menus I often use a inline-block approach instead of a float one, try adding this to your stylesheet:
.sidemen .nav { text-align: center }
.sidemen ul li {
float: none; /* this will override your current line, just for testing */
display: inline-block;
}
If you add the code into your stylesheet, you can delete your current float rule, and just adding the display one.
The menu will be centered, no mater if you resize the browser, unless you do up to extreme narrow size, in which I'd recommend using media queries to adapt the menu rendering (reducing the margin or adapting styles to show in two lines perhaps).

Issue to align the text within a scrolling banner to the right

I'm struggling to get the text of a rotating banner (the text in red) aligned to the right (to the left of the social icons). It would be too long to post the code here so here is a link where you can see it in action (note that I'm using modern-ticker plugin).
I suspect that this could come from the below code (part of modern-ticker.css) but when I change it to float: right the text disappears. I also tried text-align: right at various places without success. Thanks for your help!
.mt-news li {
float: left;
}
Floating elements get as wide as their content, so you need to specify it in order to be as wide as the container (in this case the container is very very wide but the visible area is 400px wide).
.mt-news li {
width: 400px;
}
More changes
In this example, you don't really need the parent to be very wide and the lis to float because you're fading them in a way that they're not displayed at once. I would recommend:
Remove width: 50000px; from ul
Remove float: left; from li
Remove float: left; from .mt-news
That is if the real live situation won't be different from this example.

what is the best practice to align a text right next to a html div element

I was creating a unordered list and in that list I wanted to add a color pallete type window and I tried to create one the following way
<ul><li><div style="width:10px; height:10px; background-color:#0066cc; float:left;"></div>test</li></ul>
http://jsfiddle.net/wNkmJ/
I am attaching a fiddle link to see the output.. Is there a good way to align the div to text or should I just adjust the margin of div element, but I dont think that is the best possible solution..
On your div, set:
text-align: center;
display: inline-block;
float: none;
This positions the div in much the same way that images are positioned.
In general, having line-height for li will be a good choice.
From your JSfiddle,
li{
line-height: 10px;
}
check out this JSFiddle.

Align images (different size) and text to center in list?

Is it possible to align everything to center in this example by using CSS? If not then what should I do?
As you can see the images are not the same height so it makes things even more complicated. What I want is align all images and text so they look like a line.
Here is fiddle: http://jsfiddle.net/cRGeD/
Simple answer use span instead of li
http://jsfiddle.net/cRGeD/22/
This could help you, I have added DIV for text and floated it to left,
then adjusted line-height 250% of li, check fiddle
http://jsfiddle.net/chanduzalte/cRGeD/8/
Edit: here I've applied the principle below to the first two items in your jsFiddle: http://jsfiddle.net/cRGeD/23/.
HTML
<span class="icon question-icon">1234</span>
CSS
.icon{
padding-left: 20px;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
}
.question-icon{
background-image: url("../path/for/images.jpg");
}
This way you can use a different class for a different icon, and only need to add the image path to the new class.

CSS HTML : stumped on how to center this piece of text

How would I go about vertically centering the name "Tony Robbins" for this drop down menu? I've tried adding vertical-align:middle to both the span containing the text and to the li#drop-avatar which contains the text. Can someone let me know what I'm doing wrong?
P.S. is there also a way to get text-align: center also working so "Tony Robbins" is also centered horizontally?
http://jsfiddle.net/vJaaR/
add:
img
{
vertical-align: middle;
}
Because your text is inline with the image, you need to tell the image how to align with the text.
span is an inline element, so it will only take up the amount of space that it needs. Consider making this span a block element using display: block and it will take up the full width. Then you can apply text-align: center to it.
You may have to float the image to the left in this case, though.
Update: I added the styles to the fiddle:
http://jsfiddle.net/Dismissile/vJaaR/1/
Does this do what you want?
These are the styles I added:
a.small-width > span {
display: block;
text-align: center;
}
a.small-width > img {
float: left;
}
You might want to create new classes because I have no idea what else you use small-width for.