My question is related to CSS overflow-y:visible, overflow-x:scroll
but I am still not able to solve my problem. I want a scrollable sidebar on y-axis with a visible tag hanging on the x-axis.
My HTML setup:
<div>
<ul>
<li>
</li>
<li>
<div> ... //want it to be visible x
</div>
</li>
</ul>
</div>
CSS:
I tried to use this:
.div { overflow-y:scroll; overflow-x:visible; }
.li { position:relative; }
.div { position:absolute; top:0px; left:-100px; display:inline-block; }
Generally if you want the to view the scroll in the div you should use
overflow-x:scroll;
Please make sure to add a class otherwise the scroll will appear in the outer div too, Or use the hierarchy.
div ul li div{ overflow-x:scroll }
.my-div-scroll{ overflow-x:scroll }
Related
I have a div "actions" inside a div which is hidden by default. I want it to show when the mouse hovers over the div. How can I do this?
<div class="tile">
<div class="actions">hello</div>
</div>
Use CSS:
.tile:hover > .actions {
display:block;
}
See this fiddle
Handle it by css
.tile:hover .actions{
display:block;
}
I have an unordered list styled to display horizontally. One of the li elements contains a div element. This div element is filled using ajax, though it shouldn't matter.
The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container.
Update: Well, isn't this awkward. I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/, and it works properly. I have to check my code again to get the error in the sandbox.
Update2: It wasn't that easy after all. I have added my proposed (and used) solution.
Update3: Disregard the previous answer, it wasn't correct. This is a simplified and testable example of the problem:
JSFiddle: http://jsfiddle.net/Bfp3K/10/
CSS:
#one {
background-color:red;
}
#two {
background-color:green;
}
#three {
background-color:yellow;
}
#four {
background-color:blue;
}
.normal {
height:100px;
width:200px;
display:inline-block;
}
.big {
height:200px;
width:300px;
display:inline-block;
}
ul {
display:block;
}
ul li{
display:inline;
}
HTML:
<ul>
<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.
</div></li>
</ul>
Images:
What the solution should look like:
What the problem looks like:
Just replace the display:inline-block; declarations with float:left; Since you're specifying the dimensions anyway, you don't need inline-block. The jsFiddle works and here's a pic.
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
The solution was very simple after all. Based on another answer:
li div{
vertical-align:top;
}
Since the elements have display:inline-block;, adding vertical-align:top seems to solve it. I won't mark this as the solution in case this isn't the proper solution.
http://jsfiddle.net/dv3Mm/
updated (bottom-aligned):
<html>
<head>
<style>
li {
display:inline-block;
}
.item {
vertical-align: bottom;
}
</style>
</head>
<body>
<ul>
<li>Text 1</li>
<li><div class="item">Text 2<img src="some.jpg"/></div></li>
<li>Text 3</li>
</ul>
</body>
</html>
Set the LI's line-height to the same pixel height of the image.
Solution 1 (quick and dirty):
set a margin-bottom: [negative value here]
or bottom: [negative value here] if your li are relatively positioned and the div is absolutely positioned. This is assuming that you know exact values.
Solution 2:
I'm assuming that the text in the other elements are links.
Set top and bottom padding to those links (specifically the <a> tags, so that they are vertically aligned in the middle)
Solution 3 (a bit more html):
Put two divs in each li. Wrap the div you already have in another div again. Use the a vertical centering method (such as the tabel-cell method) to vertically center all the inner divs. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
(The li tags you already have might already work as the outer div wrap, but I'm not sure. didn't get to test that yet)
In the code posted in the question the LIs have display: inline, and in the jsfiddle 'simpler example' their display is reset to inline-block (via classes). Inline-block is different from inline that it isolates any block-level content (like DIVs) inside, while attempting to put something block-level into inline causes the inline element to break into several so called anonymous block boxes. May be this is the reason?
I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
I am trying to make a navigation bar with the following code , but i can't seem to get the outer div to be of the same height as that of the unordered list inside.
I tried display:inline-block too but it doesn't seem to work.
Here is the html,
http://jsfiddle.net/jairajdesai/7Lyss/
HTML :
<div id="top_navigation_menu">
<ul id="top_navigation_list">
<li class="top_navigation_options">Home</li>
<li class="top_navigation_options">Places</li>
<li class="top_navigation_options">Travel</li>
<li class="top_navigation_options">Stay</li>
<li class="top_navigation_options">FAQs</li>
</ul>
</div>
CSS :
#top_navigation_menu{
position:absolute;
top:14%;
min-width: 50%;
background-color:#eee;
color:white;
}
#top_navigation_list{
list-style-type: none;
}
.top_navigation_options{
display:inline;
}
Use display:inline with Ul and display:inline-block with li css class. Something like this
#top_navigation_list{
list-style-type: none;
background-color:#000;
display:inline;
}
.top_navigation_options{
display:inline-block;
}
JS Fiddle Demo
Just add margin: 0 in #top_navigation_list to remove the default margin of an unordered list.
Updated JsFiddle
Lalalal, I am going insane with the CSS...
I can't achieve the simplest layout here, something is breaking.
I want 2 columns next to each other:
[**** 300px ****][******** 500 px ********]
2nd column heading
Some text.. - 1st bullet point text
- 2nd bullet...
- 3rd...
-------------------------
I have these divs:
<div class="faq_item">
<div class="faq_link">
Video/screenshot coming soon..
</div>
<div>
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
<hr/>
</div>
And the CSS:
.faq_item strong {
display:block;
margin-bottom: 10px;
}
.faq_item span {
display: block;
}
.faq_item {
margin:0 0 30px 50px;
}
.faq_item div {
display:inline-block;
}
.faq_link {
width:300px;
}
div.faq_item hr {
width:500px;
float:right;
clear:left;
}
My problem is that 1st div inside sits on top of the 2nd div when the code is at it is now. Once I eliminate the longest "li" tags, the whole div aligns properly (2 divs inside are next to each other). I don't understand why don't "li" wraps as it should normally and with 2 divs as inline-block they should be next to each other and not stacked vertically.
Please advise. Thank you!
Try putting your content inside a table.
It Worked for me.
Here's resource with perfect 2column CSS layout (and bunch others) Generally, you have to get floating right
Here you go:
<style type="text/css">
.wrapper {
width:800px;
margin:0;
padding:0;
}
.faq-link {
width:300px;
background:#DDD;
}
.faq-list {
width:500px;
}
.left {
float:left;
}
.right {
float:right;
}
</style>
<div class="wrapper">
<div class="left faq-link">
Video/screenshot coming soon..
</div>
<div class="right faq-list">
<strong>Q: How to add an item to a group? </strong>
<ul>
<li> Place your finger on one of the four icons at the bottom toolbar.</li>
<li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
<li> Release your finger.</li>
<li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
</ul>
</div>
</div>
There are a couple of traps here. Padding will screw everything up, so you have to account for it in the padded class (i.e. padding:0 10px; adds a total of 20 pixels to the width, so if .faq-link had padding:0 10px; declared, the width would be 280px). Also, anything placed below these floated columns will need the clear:both css property.
Another method would be to drop your 2 divs in a container, then use margin to position the text where needed.
Example:
<div class="faq_container">
<div class="faq_link">
...
</div>
<div class="faq_item">
...
</div>
</div>
with css:
.faq_container{
width:800px;
}
.faq_item{
width:800px;
margin: 0 0 30px 350px;
}
.faq_link {
width:300px;
float: left;
}
This simply means the content div ignores the link div to the left, with the added bonus, that if you need something else on the right hand side you can simply float it there and edit the margins of the conent div to allow it to fit.
I created a fiddle for this - http://jsfiddle.net/vJYxt/
Let me know if this works for you.