I have an image, followed horizontally by text, followed by an image, followed by text. I want the text to be higher, but margin-top doesn't work with span.
Here's the code I have (and ignore the bits in the {} brackets, those are things for use in tumblr custom themes):
<div class="activities">
<span class="activity"><img src="{image:First Activity Image}"/>
<span class="activityname">{text:First Activity Name}</span>
</span>
<span class="activity"><img src="{image:Second Activity Image}"/>
<span class="activityname">{text:Second Activity Name}<span>
</span>
</div>
I'd change it all over to but that would make each one appear on a new line.
Whoa there. Your CSS should follow the HTML, not the other way around. First mark it up semantically. It looks like you have a list, so let's use an ul:
<ul class="activities">
<li>
<img src="...">
<p>...</p>
</li>
...
</ul>
Then you can float your list items to the left:
.activities {
/* makes sure the container expands to fit the floated material */
overflow: hidden;
}
.activities > li {
float: left;
width: 300px; /* or something; you might want to change this number */
}
You can also float your image to the left:
.activities > li {
overflow: hidden; /* again, expand the container */
}
.activities > li > img {
float: left;
}
Then you can align the text to the center:
.activities > li > p {
text-align: center;
}
Try it.
Usage of ul li is the better option. You can easily place the content as of your wish.
Please give float:left to all the inner contents, after that you can easily play with the margin values.
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.
I hope someone can explain this odd CSS issue I'm encountering.
I have an empty element (think <img> or <input>) inside a li. When I change the display style on the empty element to "block", the alignment of the bullet on the li changes. If I do the same thing with a non-empty element (<span>, say), the bullet alignment does not change.
The bullet alignment changes even if the empty element is inside another block-level element (<div>).
Here are two examples on JSFiddle:
Using an <img> element
Using a <span> element
And screenshots of the results (<img> on the left, <span> on the right:
I have two questions:
Why do the bullets do this?
How can I make the bullets in the <img> example line up the same way as in the <span> example?
For reference, the stylesheet:
ul { background: lightgreen; width: 100px; padding-left: 50px; }
div { background: lightblue; }
img { background: lightcoral; }
li { background: lightyellow; }
img { width: 50px; height: 50px; }
img[rel] { display: block; }
And the HTML:
<ul>
<li>
<div><img rel></div>
</li>
</ul>
<ul>
<li>
<div><img></div>
</li>
</ul>
<ul>
<li>
<div><img rel></div>
<p> ! </p>
</li>
</ul>
<ul>
<li>
<div><img></div>
<p> ! </p>
</li>
</ul>
(I know my <img> elements don't have src attributes. This is just for illustration purposes. BTW, it still works in Google Chrome, but not Firefox.)
It is an issue with alignment for images, they default to the bottom alignment which causes the list items to move with them. In order to fix this problem, add this to the image tag:
img {
display: inline-block;
vertical-align: middle;
}
The display: inline-block is the only display type that will allow vertical align to work.
Been trying to work this out for a few hours now to no avail....I really want a bullet list that will work responsively (al browser width) that looks like this...
Basically the whole thing needs to center, you can center text but not the span with the bullet image :-(
I would obviously 'like' to use a UL/LI. But even without doing it I just cannout fathom how to do it. I haven't even addressed the novices/entrepreneurs bit at the end, assume I can overlay an image? Anyway any advice appreciated. I really need it to scale down for a responsive design too if possible...
EDIT :
I have tried I tried floating, in-lining, offsetting, using a grid system, nothing.... :-(
EDIT 2:
At the request of nathan I will post one of my solutions...
<div class="section group">
<div class="col span_1_of_2">
<p style="float:right;" class="darkGrey">
<span class="sprite step2"></span>
</p>
</div>
<div class="col span_1_of_2">
<h3 class="darkGrey">We then seek to place the you in our network of organizations who actively recruit developers.</h3>
</div>
</div>
^ the above just shoves my tick all the way to the right.....
EDIT 3
I just tried this using an image http://jsfiddle.net/fSSeK/ and it worked however my bullet point is a sprite background image and it doesnt work!
The exact technique is dependent on exactly what kind of bullet you want to show, but for classic bullets here is an easy way to do it.
You need to remove the bullet from the browser's built-in styles with list-style-type: none, then center the text in the list elements horizontally and use the :before pseudo-element to insert a bullet before their content. This bullet will be centered.
Sample CSS:
ul {
list-style-type: none;
}
li {
text-align: center;
}
li:before {
content: "• "
}
See it in action.
Use pseudo-element with background image
For a typical list:
<ul>
<li>The first line</li>
<li>The Second line which is longer</li>
</ul>
and use the following CSS:
ul {
text-align: center;
}
ul li {
border: 1px dotted blue;
display: block;
position: relative;
}
ul li:before {
content: "";
background: url(http://placehold.it/20x20) left top no-repeat;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
See fiddle demo: http://jsfiddle.net/audetwebdesign/S2Mvn/
You can use absolute or relative positioning on the li:before element if you need more precise alignment.
The moment I float my unordered-list element...the background color fails. Why?
<style type="text/css">
.bkgrd-blue { background-color: #094AB2; }
.application-bar { color: #FFFFFF; }
.application-bar ul { }
.application-bar ul.control-bar { list-style: none outside none; margin: 0; overflow: visible; padding: 0; }
.application-bar ul.control-bar.branding { float: left;}
</style>
<div class="application-bar bkgrd-blue">
<ul class="control-bar">
<li>
This is working!
</li>
</ul>
</div>
<div class="application-bar bkgrd-blue">
<ul class="control-bar branding">
<li>
The moment I float this...it fails! Why?
</li>
</ul>
</div>
Floating an element removes it from the normal document flow so containers don't expand - that is, the containing div has 0 height.
To fix this you need to clear the float. You can either:
set overflow: hidden on the div
float the div
add an element after the floated list with clear:both - this could be done using the :after pseudo-element
Here's a demo using the first solution: http://jsfiddle.net/FSH4Y/
I added:
.application-bar {
color: #FFFFFF;
overflow: hidden;
}
Here's some more info on this issue: CSS Tricks: All About Floats - have a look at the section called The Great Collapse
You need to clear under the list, usually I add a div like
<div style='clear:both;'></div>
This will allow the floated element's parent to properly calculate it's height.
You need to float the containing div with the background in it as well. As soon as you float the inner ul, the containing div effectively has no content so ends up with a height of 0.
I have this layout:
<ul style="white-space:nowrap;">
<li style="width:200px; display:inline-block;"></li>
<li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>
I have managed to stop the ul from wrapping which is a start. However, the content in the 2nd li continues off screen. Overlapping its parent elements etc.
I need the 2nd li to take up the slack and be dynamic in width unlike the first li. And I need the text to wrap inside the 2nd li.
li {display:table;}
is your friend. Also, don't forget to remove inline-styles!
Try white-space: normal on the li elements.
white-space is inherited by default so they received nowrap from the ul.
I'm starting to think that you are using an ul for layout purposes which div might be better suited for:
<div class="Item">
<div class="ImageContainer"><img src="" alt="/></div>
<div class="TextContainer">Text text text text text</div>
</div>
.Item {
width: 200px;
overflow: auto;
}
.ImageContainer {
float: left;
width: 40%;
}
.TextContainer {
float: left;
width: 60%;
}
Sounds like you might actually want to use a table.
Otherwise, if you know the width of the image, float it left and give the next element a left margin greater than or equal to the width of the image.
For example:
article > img {
float: left;
height: 80px;
width: 80px;
}
article > div {
margin-left: 90px;
}
<article>
<img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
<div>
<h4>Matt Di Pasquale</h3>
<p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p>
</div>
</article>
This is a practical use case for CSS Grid Layout:
ul {
display: grid;
grid-template-columns: 200px 1fr;
column-gap: 10px;
}
li {
display: unset; /* reset user agent list-style */
}
img {
background: #00bcd4; /* style image background */
}
<ul>
<li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
<li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
</ul>
Creates two-column grid with 10px column gap. First grid item has 200px width to match your image and the second wrapping text.
If if content you're trying to wrap may contain long strings such as an absolute URL or scientific/medical terms like pneumonoultramicroscopicsilicovolcanoconiosis add overflow-wrap to the second li using the :last-of-type pseudo-class.