I want to know how to give a max-height to <div> or <ul> elements.
I have this:
<div id="list1">
<ul class="list-group">
<li class="list-gorup-item">item1</li>
<li class="list-gorup-item">item2</li>
<li class="list-gorup-item">item3</li>
<li class="list-gorup-item">item4</li>
<li class="list-gorup-item">item5</li>
</ul>
</div>
And this CSS media:
#media (max-width: 480px){
#list1{
max-height: 10%;
}
}
But it doesn't work. Also, must it appear on scroll?
EDIT:
Hi, accomplish it work, using overflow: auto; and "px" :
#media (max-width: 480px){
#list1{
overflow: auto;
max-height: 150px !important;
}
}
You can manipulate with overflow: hidden|auto|...
Maybe you want to set maximum height for your content to scaling?
How you want it to behave when height of list exceeds defined height?
Related
I have a slider component that I'm building. It uses the Bootstrap .container class to be contained in a specified page width, but needs to overflow to the right side of the screen. If I use overflow-x: visible it overflows to the right, but then the whole page scrolls. If I give the parent overflow: hidden then I am not able to scroll through the slider.
What would be the best way to allow both overflow-x: visible and allow scrolling with a scrollbar at the same time without the entire page being affected?
HTML
<div id="main-container">
<section class="container">
<ul class="panels">
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
<li class="panel"></li>
</ul>
</section>
</div>
CSS
#main-container {
overflow: hidden;
}
.panels {
overflow-x: visible;
display: flex;
height: auto;
width: auto;
list-style: none;
margin: 0;
padding: 0;
}
I have set viewport padding to the li items in my div. I want the li elements to stop expanding after 1025px. But setting max width doesnt seem to work.Please help
.header_topics > ul> li> a{
padding : 5vw 2vw 5vw 2vw;
}
<div class="header_topics">
<ul style="display:flex;justify-content:center;max-width:1025px;width:100%;background:green">
<li >Home</span></li>
<li > About</span></li>
<li>Products</span></li>
<li><span style="max-width:1025px">Solutions</span></li>
<li s><a href="{% url 'support' %}" target="_self" ><span style="max-width:1025px" >Support</span></a></li>
</ul>
</div>
This menu will stop getting wider after a window size of 1025px (Assuming that .header-topics's width is the window's width.
When you set the li max-width property, you are saying that each menu item has the max width of 1025px, when really you intended to limit the menu's width. Hope it helps.
.header_topics {
max-width: 1025px;
}
.header_topics li {
padding: 5vw 2vw;
}
#media only screen and (min-width: 1025px) {
.header_topics li {
// your fixed padding here
}
}
<div class="header_topics">
<ul style="display:flex;justify-content:center;width:100%;background:green">
<li><a href= "{% url 'home' %}" target="_self" > <span>Home</span></a></li>
<li> About</span></li>
<li><a href="#" ><span>Products</span></a></li>
<li><span>Solutions</span></li>
<li><a href="{% url 'support' %}" target="_self" ><span>Support</span></a></li>
</ul>
</div>
This has probably been posted before, but I couldn't find a solution from searching. I'm new to HTML and CSS just started ~1 week ago, so if there is a solution an explanation would go a long way rather than modified code/solution.
So I am attempting to split a div into essentially two columns one of 25% width and the other 75% width. I haven't started doing the CSS yet hence why the styling is inline at the moment. The general div of 100% width displays fine now when I try to split this into two inner div's it seems to work the list i am trying to create displays correctly however the next column of 75% appears below the div. Why is this and is there anyway to fix it.
<div style="width:100%;background:orange">
<div style = "text-align:center;width:25%;background-color:red;">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div style="width:75%;background:purple;">
dsfsdf
</div>
</div>
To make <div>s align next to each other they need to float.
CSS:
.container {
background-color: orange;
width:100%;
}
.leftColumn {
float:left;
background-color: red;
width:25%;
margin:0;
}
.rightColumn {
float:right;
background-color: purple;
width:75%;
margin:0;
}
.clear {
clear:both;
}
HTML:
<div class="container">
<div class="leftColumn">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="rightColumn">
dsfsdf
</div>
<div class="clear"></div>
</div>
<div>Next content</div>
To continue with your code below you need an element that clears the floating.
Fiddle: http://jsfiddle.net/o7pd2fLf/2/
Create like this your html and css:
.orange-div{
width:100%;
background:orange;
float: left;
}
.red-div{
text-align:center;
width:25%;
background-color:red;
float: left;
}
.purple-div{
width:75%;
background:purple;
}
<div class="orange-div">
<div class="red-div">
A List
<ul>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
<li> something</li>
</ul>
</div>
<div class="purple-div">
dsfsdf
</div>
</div>
add style float:left to both the div with width 25% and 75% and run your code
add <div style="clear:both"></div>
You should do these things with Flexbox. If you're new, don't learn to use float for layout. Flexbox is made for this.
And use classes:
.container {
display: flex; /* makes container a flex parent and all its children flex children */
}
.left,
.right {
flex: 1; /* give 1 'part' of total width */
}
.right {
flex: 3; /* give 3 'parts' of total width */
}
Example: http://jsfiddle.net/rudiedirkx/tuojmn3g/
The flex property is very cool. If you give both children flex: 1, all children will be equal size: 50% (because 1 : 1). If you then give 1 of the children flex: 3, it will be 3x as big as the other (because 1 : 3). This gives you immense flexibility.
Flexbox is complicated but it's very well worth it to learn.
And a Flexbox bonus: equal height columns for free!
I want to set up a page that hides a menu bar, depending in the size of the screen. I have it set up so that this menu bar is supposed to disapper when someone sets it to a mobile screen size (I believe 480px). However, when I assign the nag to display:none, it won't appear at all on the page. Here's the code:
Here is the url: http://matthewtbrown.com/jeffandcricketquilt/liquid/index2.html
<nav class="fluid fluidList hide_mobile">
<ul>
<li>Home</li>
<li>Quilt Show Photos</li>
<li>Video Tutorials</li>
<li><a>Services</a>
<ul>
<li>Quilt Photography</li>
<li>Photos to Fabric Transfers</li>
<li>Downloadable Patterns</li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li>Contact Us</li>
<li>Photo Credit</li>
</ul>
</li>
</ul></nav>
Here is the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
background-image: url(../images/pattern2.jpg);
background-repeat: repeat;
min-width: 480px;
}
#div1 {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
Put
.hide_mobile {display:block} in the #media only screen and (min-width: 769px) area and then put .hide_mobile {display:none} in the #media only screen and (max-width:480px) area.
and let me know if that helps.
I'm trying to display a grid of items, with each item having a photo on the left and a description on the right, something like this:
----------------------------
| photo | item description |
----------------------------
I want to display these items in a 3x3 grid on the page. I have the grid part worked out, what I'm having trouble with is alignment of the photo and description. When the height of the description exceeds the height of the photo, I don't want the text to wrap under the photo. I essentially want to maintain two separate columns.
I have tried this:
.item{
padding-left: 60px; // size of photo + 5px margin
background-position: 5px 0px;
}
<div class="item" style="background-image: url('/img/photo123.jpg');">
Here is the item description
</div>
That has worked very well. the markup is clean and I don't have to mess around with absolute/relative, however, now I can't add a border to the image. Can anyone suggest a workaround or alternative?
IMHO that is not clean. Those are obviously content relevant images, so they shouldn't be background images.
It usually very simple with floating, but there are several other ways.
CSS:
.item img {
float: left;
}
.item p {
margin-left: 60px; // size of photo + 5px margin
}
HTML:
<div class="item">
<img src='/img/photo123.jpg'> <!-- Add width/height and alt text -->
<p>Here is the item description</p>
<div style="clear:left"></div>
<!-- or any other clearing solution, for example, "clearfix" -->
</div>
Have a look here. You just need to apply min-height on your div.
Why don't you want to use a table? This seems to me to be tabular data (admittedly with the image being a data element), so wouldn't a table would be the obvious choice?
you could use list-elements like so
<ul>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
</ul>
and the CSS
ul {width: 960px; font-family: Arial; font-size: 12px; float: left;}
ul li {width: 80px; height: 180px; padding: 10px; background: #444444; list-style: none; float: left; color: #cccccc; }
ul li.image {width: 180px; height: 180px; padding: 10px; background: #cccccc; margin: 0 20px 20px 0; color: #444444; }