Hey i'm trying to align things next to each other and under each other
Here is the css I'm using.
/* title styles */
#wpp-post-title {
float:right;
width:100px
}
/* thumbnail styles */
#wpp-thumbnail {
float:left;
width:80px;
}
It shows up like this
but i want it to show like this
Use classes instead of ids and look at clear property http://www.w3schools.com/cssref/pr_class_clear.asp
Something like this could work:
jsFiddle demo: http://jsfiddle.net/vPvbn/
CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: block;
height: 80px;
margin: 10px 0;
padding: 20px 0 0 85px;
}
HTML:
<ul>
<li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
<li style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li>
</ul>
/* title styles */
#wpp-post-title {
width:100px
display: inline-block;
.display: inline;
.zoom:1;
}
/* thumbnail styles */
#wpp-thumbnail {
display: inline-block;
.display: inline;
.zoom:1;
width:80px;
}
Without seeing your HTML, I can only guess, but my best guess would be to add the following style to your CSS:
/* You will probably need to change "li" to something more specific, lest it
break your existing list styles. */
li {
overflow:hidden;
}
This will force the list item to wrap itself around your floated bits. Elements that are floated do not change the height of the parent container, so because everything inside the <li> is floated, your <li> element has a height of 0px, and you get the weird behaviour that you're seeing. overflow: hidden fixes this by forcing the <li> to acknowledge the height of #wpp-thumbnail and #wpp-post-title.
Giving #wpp-post-title a height that is equal to your thumbnail should solve the problem, at the moment the browser is automatically determining the height of the div based on the text inside it.
Also, make sure both divs are given display: inline-block property
Related
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
OK so this is actually a little complicated.
I have a navigation list where the list items are set to inline-block. The number of items is the list is dynamic so may vary.
My aim is to have the list items span the whole width of the container. (e.g. if there were 4 list items each one would take up 25% of the container width [ignoring margin/padding etc])
There is the added complication that browsers seem to add a 4px margin to inline-block elements where there is whitespace between them (linebreak/space etc).
I have made a fiddle as a starting point which has 2 examples: the first is just the list items in inline-block mode which the 2nd justifies them accross the width.
Neither achieves what I want which is for the whole width to be taken up by the elements without them breaking onto another line.
http://jsfiddle.net/4K4cU/2/
edit: slightly separate but why in my 2nd example is there a space beneath the lis, dispite the fact I have set line-height and font-size to 0?
OK, despite many decent answers and my inital thinking that js/jquery was the only way to go there is in fact a good css-only solution: using table cells. Original suggestion by #Pumbaa80
.list {
margin:0;
padding: 0;
list-style-type: none;
display: table;
table-layout: fixed;
width:100%;
}
.list>li {
display: table-cell;
border:1px green solid;
padding:5px;
text-align: center;
}
.container {
border: 1px #777 solid;
}
<div class="container">
<ul class="list">
<li>text</li>
<li>text</li>
<li>some longer text</li>
<li>text</li>
</ul>
</div>
This is superior to other solutions as:
css-only
no 4px margin problem as with inline-block
no clearfix need for floated elements
maintains equally distributed width independent of li content
concise css
Fiddle here: http://jsfiddle.net/rQhfC/
It's now 2016 and I wanted to update this question with an answer using flexbox. Consult with CanIUse for browser-compatiblity.
/* Important styles */
ul {
display: flex;
}
li {
flex: 1 1 100%;
text-align: center;
}
/* Optional demo styles */
* {
margin: 0;
padding: 0;
}
ul {
margin-top: 2em;
justify-content: space-around;
list-style: none;
font-family: Verdana, sans-serif;
}
li {
padding: 1em 0;
align-items: center;
background-color: cornflowerblue;
color: #fff;
}
li:nth-child(even) {
background-color: #9980FA;
}
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Pre-edit fiddle (now inlined in above snippet)
Here is one way of modifying your original concept.
The CSS is:
.list {
padding:0;
margin:0;
list-style-type:0;
overflow: hidden;
height: 42px;
}
.list li {
display: inline-block;
line-height: 40px;
padding: 0 5px;
border:1px green solid;
margin:0;
text-align:center;
}
On your parent container, .list, set a height to enclose the child elements.
In this case, I chose 40px and added 2px to account for the border.
Also, set overflow: hidden on .list to hide the 2nd line generated by the pseudo-element.
On the li elements, set line-height: 40px which will center the text vertically.
Since the height is fixed, the second line gets hidden and you can style your parent with a border and so on without extra white space breaking the design.
Demo: http://jsfiddle.net/audetwebdesign/WaRZT/
Not Foolproof...
In some cases, you may have more links than can fit on a single line. In that case, the items could force a second row to form and because of overflow hidden, you would not see them.
Evenly Spaced Border Boxes
If you want the border boxes to be evenly distributed, you need to set a width to the li elements.
If the content comes from a CMS, and you have some control over the coding, you can dynamically generate a class name to set the correct width using predefined CSS rules, for example:
.row-of-4 .list li { width: 24%; }
.row-of-5 .list li { width: 19%; }
.row-of-6 .list li { width: 16%; }
See: http://jsfiddle.net/audetwebdesign/WaRZT/3/
There are multiple fixes to this. The one I prefer is simply to remove the whitespace between the elements, simply because the font-size trick involves non-semantic CSS. And its a lot easier haha. Code because answer requires it:
<ul class="list">
<li>
text
</li><li>
text
</li><li>
text
</li><li>
text
</li>
</ul>
Updated jsFiddle, where the first list has items set to width:25%; and fits in the window on one line. If this isn't what you were going for, I must have misunderstood.
EDIT: for unknown number of list items
There is some CSS3 stuff for this, but to be cross-browser compatible back to IE8, you want a JS solution. Something like this should work:
var listItems = document.querySelectorAll('li');
listItems.style.width = listItems.parentNode.style.width / listItems.length;
SECOND EDIT: for jQuery instead of JS
Winging it, but:
var $listitems = $('.list').children();
$listitems.width($listitems.parent().width()/$listitems.length);
you can use the display:inline-block with li element,and use the text-align:justify with ul element. If you are interested ,please click here.
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
Im trying to achive an animation of a horizontal list.
Like
Item 1 * Item 2 * Item 3 * Item 4
But only two items is visible at one time.
Each item contains a div with a picture, a text and a link. The picture should always be aligned to top and the link to the bottom.
<ul>
<li><div>
<img src="somepic"/>
<p>SomeText</p>
Link
</div></li>
<li><div>
<img src="somepic2"/>
<p>SomeText2</p>
Link2
</div></li>
</ul>
Here is the problem, the list-item must be positioned with "postition:relative" and if i use absolute positioning inside the div the animation gets messed up. I animate by appending and prepending to the list.
Does anyone have a nice and easy solution to this?
EDIT:
Here is a sample: http://jsfiddle.net/39bhW/
I think i need the positioning to be absolute within the list items...
When you apply positioning to an element, it will use the positioning available on it's parents. If none is provided, it will position to the body element. So when you position: absolute to get the text/link at the bottom of the element, you have to position: relative (or position: absolute) one of it's parents, otherwise it won't know which you want it to position in relation to. Conversely, whichever it finds first, it will use that element to position against.
I think it's possible you've got too much markup to accomplish what you're doing here (what is the .placeholder for? why not just use the li?), and the spans that wrap one of the blocks looks out of place (and should be a div if you really need a wrapper there). And I'm not sure, but you might want to change #items to a class, if you need to reuse it. It looks out of place as an id. And your id and class names are not descriptive, and your selectors are not specific enough (generally, stay away from ul and li for styling specific parts of a page, as these have a global effect).
Nonetheless, I think this is what you're looking for. Note how I use padding on #items li, and then compensate bottom: 5px. You also don't need to position the img tag if it's just going to be at the top of the block, centered.
HTML (Fragment)
<li>
<div class="itemplaceholder">
<img src="http://www.els.qut.edu.au/blendedlearning/blackboard/graphics/test_on.gif"/>
<p>
Test title<br/>
Description A
Link
</p>
</div>
</li>
CSS
#items {
display: inline;
position:relative;
margin: 0;
padding: 0;
}
#items li {
float: left;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
}
#items .itemplaceholder {
height:200px;
width:160px;
text-align: center;
position: relative;
}
.placeholder {
width:640px;
height:200px;
overflow: hidden;
}
.content {
width:800px;
height:240px;
}
#items .itemplaceholder p {
position: absolute;
bottom: 5px;
width: 100%;
height: 50%;
}
#items .itemplaceholder p a {
position: absolute;
display: block;
bottom: 0;
text-align: center;
width: 100%;
}
http://jsfiddle.net/39bhW/3/
so basically you want to have 2 items visible at one time, am i right?
well, change the width of .placeholder to 320px
I want a gap of say 30px; between all children of my div. E.g if I have:
<div id="parent">
<img ... />
<p>...</p>
<div>.......</div>
</div>
I want all of them to have a space of 30px; between them. How can I do this with CSS?
For an unknown amount of children you could use.
#parent > * {
margin: 30px 0;
}
This will add a top and bottom margin of 30px to all direct children of #parent.
But img is not displaying as block default, so you may use:
#parent > * {
display: block;
margin: 30px 0;
}
Vertical margins of block elements will be collapsed. But you will have margins at top and bottom of your parent div. To avoid that use the following code:
#parent > * {
display: block;
margin-top: 30px;
}
#parent > *:first-child {
margin-top: 0px;
}
This will only add top margin and removes that top margin for the first element.
The following css will work well
div > *:not(:last-child) {
display: block;
margin-bottom: 30px;
}
> selects all elements that are direct children of the div (so you don't get weird inner spacing issues), and adds a bottom margin to all that aren't the last child, using :not(:last-child) (so you don't get a trailing space).
display: block makes sure all elements are displayed as blocks (occupying their own lines), which imgs aren't by default.
You can easily do that with:
#parent > * + * {
margin-top: 30px;
}
This will be applied to all direct children except the first one, so you can think of it as a gap between elements.
Probably the easiest way is this:
#parent * {
margin-bottom: 30px;
}
or
#parent * {
margin: 15px 0;
}
Keep in mind, though, that this will get everything in #parent, including things inside the p and div tags. If you want just the direct children, you can use #parent > * (this is call the direct descendent selector) instead.
Keep in mind, <img> is an inline element by default, so you might need to do:
#parent img {
display: block;
}
for it to use the margins.
Use CSS gap property.
.parent_class_name{
gap: 30px;
}
The above CSS code will apply a gap/separation of 30px between children of the parent_class_name class.
Example: This code will apply 1rem gap between element (rows and columns).
<div class="gap_container">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
.gap_container{
display: flex;
flex-direction: column;
gap: 1rem;
}
The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties:
row-gap
column-gap
Apply row and column values separately.
gap: row-value column-value;
Learn more: w3school
Create a CSS class for them with code:
.BottomMargin
{
margin-bottom:30px;
}
And assign this class to parent's children using jQuery or manually like this:
<div id="parent">
<img class="BottomMargin" ... />
<p class="BottomMargin">...</p>
<div>.......</div>
</div>
the last one may not have one and this is also doable using jQuery.
You can try it by CSS standarts:
div > *{
margin-top:30px;
}
More info could be found here: http://www.w3.org/TR/CSS2/selector.html#child-selectors
Just put a top and bottom margin of 30px on your p element:
p { margin: 30px 0 30px 0; }
Note: the above will add this margin to all your p elements. To restrict to just this one, either add an inline style attribute:
<p style="margin: 30px 0 30px 0;">...</p>
or better use a class:
<p class="mypara">...</p>
and in css:
p.para { margin: 30px 0 30px 0; }
Btw, the notation here for margin is:
margin: top right bottom left;
Or you can individually specify top and bottom margins:
margin-top: 30px;
margin-bottom: 30px;
So you could have a class like this:
.bord { margin-bottom: 30px; }
and add this class to every element you want to have a margin-bottom of 30px:
<div class="bord">....</div>
Surest way is to add a class to all of the internal elements with the exception of the last one.
<style>
.margin30 {
margin-bottom: 30px;
}
<div id="parent">
<img class="margin30" ... />
<p class="margin30">...</p>
<div>.......</div>
</div>
This way, additional elements can just be tagged with the class. Remember that you can multiclass style elements by separating them within the class value in the tag with spaces, like so:
<img class="margin30 bigimage" ... />
Finally, you can attach the classes dynamically with Javascript (code off the top of my head, not tested, no sanity checks or error handling, ymmv etc.):
function addSpace(elementId) {
children = document.getElementById(elementId).childNodes;
for (i=0;i<(children.length - 1);i++)
children[i].className = "margin30 " + children[i].className;
}