I've created a <ul> and <li> list and got a ton of different information in it. Is it possible to space different pieces of information in one <li> over the page, like it had columns?
Like the first word of <li> is aligned at the left side of the page, then the second is always at the first 1/4 the 3rd at half and the 4th at 3/4, for every <li>?
Is this possible, if yes, how is it done? If needed I can post my PHP/HTML Code in here (though it's dynamic).
EDIT: Here is the Code: http://jsfiddle.net/woz1r55e/ :)
Thanks beforehand already :)
In your CSS define two classes
.inline-block
{
display: inline-block;
}
.col
{
width: 25%;
}
and then define containers for whatever you want in those columns.
<div>
<div class="inline-block col">List 1
</div>List 2<div class="inline-block col">
</div>List 3<div class="inline-block col">
</div>List 4<div class="inline-block col">
</div>
</div>
Source: 4 column CSS layout - Fluid
I think this is what you mean:
http://jsfiddle.net/woz1r55e/1/
I added this css:
ul ul ul li {
display: inline-block;
width: 25%;
}
I'd recommend giving either the <li> a class to make it inline block or to give the third <ul> class and make it's children inline-block
Create different css classes for each "column":
ul.Col1 { margin-left: 10px; }
ul.Col2 { margin-left: 210px; }
ul.Col3 { margin-left: 410px; }
<ul class="Col1">
...
</ul>
etc...
Related
I have design this box with angular material. I can not break these two words in two line(up and down).i have included a image. Here i want 1349 and New Feedback in two line. I am new in angular material. thanks
<style>
.box-item {
background-color: cornflowerblue;
width: 100px;
height: 120px;
}
.box-text {
color:white;
}
</style>
<div layout="row" style="padding: 32px;" ng-cloak>
<md-whiteframe class="md-whiteframe-2dp box-item" md-colors="[enter image description here][1]background:'blue-400'}"
flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout
layout-align="end center" layout-margin>
<span class="md-display-1 box-text">1349</span>
<span class="box-text">New Feedbacks</span>
</md-whiteframe>
</div>
That is a css question.
You want to order 2 inline elements (span) in 2 lines.
You should try to style one of them as block element or to add br tag between them.
<style>
.box-item {
display: inline-block;
background-color: cornflowerblue;
height: 120px;
}
.box-text {
color:white;
display: block;
}
</style>
Example Here
That's because the <span> tag is an inline element by default and only takes up as much width as necessary.
If you need to use a span and require the item's on separate lines then either change the behaviour of the element through CSS by changing it's display property to block as stated by Cuzi, add a single line break between the elements using the <br> tag or use a block-level element such as the <div> tag.
I recommend using the right element for the job. So a block-level tag like the <div> tag would be ideal. This would cause both elements to take up the full width available and thus be on separate lines without the requirement for an extra line of css, (plus you save a byte of space per element within the HTML!
Heres how to do it in CSS.
.box-text {
color:white;
display: block;
}
Heres with a <br> tag:
<span class="md-display-1 box-text">1349</span>
<br>
<span class="box-text">New Feedbacks</span>
And the simplest and most semantic of the three, with div tags:
<div class="md-display-1 box-text">1349</div>
<div class="box-text">New Feedbacks</div>
I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
I'm building a website layout and I'm trying to have a list of images with descriptions centered next to them, but I can't figure out how to get the paragraphs to move next to the images without the entire layout messing up. I've messed around with the float, clear, and display settings with no avail. I added a picture of my desired result
my HTML for this section looks like this currently:
<section>
<ul id="gallery">
<li>
<a href="GPA_Calc_Screen.png">
<img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
</a>
</li>
<li>
<p >
This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
</p>
</li>
<li>
<a href="Avengers_App_Screen.png">
<img src="Avengers_App_Screen.png" alt"">
</a>
</li>
<li>
<p>
Okay, who doesn't like The Avenegrs movie series? Huh? Well, yeah I guess you're right, but it doesn't matter because I love it! I made this app to
test out layout design, android intents, and a few other features. It's also
a great way to kill 4 minutes.
</p>
</li>
</ul>
</section>
and my CSS that goes with it looks like this currently:
#gallery {
margin: 0;
padding: 0;
list-style: none; /*Removes bullet points*/
}
#gallery li {
width: 45%;
margin: 2.5%;
background-color: #b3dbeb
color: #1d95c5;
}
.descriptions {
display: block;
}
.descriptions a {
float: left;
}
For each p tag just add a clearfix class and import bootstrap or any other framework with clearfix support or do as below
.p:before,
.p:after {
content:"";
display:table;
}
.p:after {
clear:both;
}
.p {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Try flex box on the parent of your two elements:
display: flex;
Or try float right on paragraph:
.description p {float:right}
Make sure to define widths first.
I keep reading that you can use html/css columns without using them in a table. The www.w3schools.org site shows that you can, but I can't get it to work out at all in my code. basically I have this idea.
<div container="name">
<dl>item 1 </dl>
<dd>explain</dd>
<dl>item 2 </dl>
<dd>explain</dl>
...
</div>
What I need is for the container to have three columns and the section with the detailed list to be two columns than I will put the info for the third column in its own column. I know the column span is the best way to keep that separate, but I can't find any good explanations for this. And I can't get it to work out of my css page or html page.
I think you're going about it the wrong way. Try this.
html:
<div id="container">
<div id="left-col">
<!-- left column -->
</div>
<div id="content-col">
<!-- content column -->
</div>
<div id="right-col">
<!-- left column -->
</div>
</div>
css:
#container { overflow: hidden; width: 940px; }
#left-col { float: left; width: 200px; margin-right: 20px; }
#content-col { float: left; width: 500px; }
#right-col { float: right; width: 200px; }
demo - http://jsfiddle.net/gk5vD/
FYI - you misunderstood what a dl is, have a look at http://www.htmldog.com/reference/htmltags/dl/
Firstly, please don't use w3schools. </rant>
CSS3 has columns built in. Have a read about it here and here.
I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.
<div>
<span class="picture"> <img src="/assets/images/rails.png"/></span>
user-full-name
<span class="post"></span>
</div>
css
.picture{height:40px;
width:40px;
}
.user-name{
margin-bottom:35px;
}
.post{ }
.inline_table{
display: inline-table;
position: relative;
}
is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.
so in this example:
<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">
will all be aligned along the same row
Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.
span.picture {
display: block;
float: left;
margin-right: 10px;
}