I need this text to wrap, but I don't understand why it isn't. If it gets to long, it simply falls below the image.
<style>
.discussion {
width: 50%;
min-height: 100px;
margin: 0 auto;
}
.discussion img {
margin: 12.5px;
float: left;
}
.discussion a {
text-decoration: none;
margin-top: 12.5px;
display:inline-block;
}
#discussion_title {
font-size: 22px;
color: #3f3f3f;
margin-top: 5px;
}
</style>
<div class="discussion">
<img src="http://images.elephantjournal.com/wp-content/uploads/2013/01/mirror_cat-500x500.jpg" width="75" height="75" />
<div class="discussion_text">
blah blah blah
</div>
</div>
JSFiddle
You can do it like this
Remove display: inline-block of .discussion a and add
.discussion_text {
display: inline;
}
Try this:
.discussion img {
margin: 12.5px;
float: left;
display:inline;
width:10%; /* Whatever it should be*/
}
.discussion a {
text-decoration: none;
margin-top: 12.5px;
float: right;
display:inline-block;
}
You have to put a float:left too on the discussion_text and make it have a fixed width.
Don't use inline for a, that way, you will not be able to customize it any further as inline elements can not be styled easily and in very limited manner!
inline-block will make a only equal to width of the content .
Just amend this part and all is good
.discussion a {
text-decoration: none;
margin-top: 12.5px;
display:block; //changed from inline-block
}
demo
Also, you have used excess CSS to achieve your target, it can be trimmed down!
It's caused by the .discussion a { display: inline-block; }, so you can either remove that or change it to .discussion a { display: block; } for text to flow around the image nicely, article-style.
http://jsfiddle.net/9aMxg/2/
Or you can add the following for discussion_text not to wrap, but it will stay in a column, not flow around the image:
.discussion_text {
overflow: auto;
}
http://jsfiddle.net/MfadJ/
Related
Well, I want this text to be up the top roughly 20 PX from the top of the wrapper (background color) I did the margin up there but nothing happened if anyone can help it will be greatly appreciated.
CODE
.wrapper {
background-color: #01172c;
}
.footerid {
list-style: none;
}
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
}
.footerid h3 {
padding-top: 20px;
margin-top: 20px;
}
<footer>
<div class="wrapper">
<ul class="footerid">
<li><img src="logo-f.png" style=" width:80px; height:105px;"></li>
<li><h3>lol</h3></li>
</ul>
</div>
</footer>
Run the code sample in full screen to see properly.
You have to indicate the li element about the vertical-align which I would set to top for this case
Please see https://jsfiddle.net/4zr9j3eg/
I have also disabled the padding property for your h3 element which will sumup the margin that make the text distance from the top to 40px
Also I changed the text-color to color: #fff; for debug easier
As a general tips, you can set the wrapper to position: relative;
By doing this you can easily "control" the elements (children) inside the parent (in this case, the wrapper) with position absolute.
Example:
#wrapper {
position:relative;
}
#wrapper .child {
position: absolute;
top: 20px;
}
Apply vertical-align: top to <li>:
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
vertical-align: top;
}
and remove padding and margin from .footerid h3.
I know I could use float and put the image to the left, but how can I then have those numbers, the header, and those three columns?
HTML:
<div class="images">
<ul>
<li class="image"><img src="https://www.ofbizdemo.com/images/products/PC001/large.png" />
<p class="padding">Text Here</font>
</ul>
</div>
CSS:
.images ul li {
display: inline;
}
.image {
float: left; // float to the left
}
p.padding {
float: right;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 500px;
padding-left: 150px;
}
I'm using that for my CSS, but my text does not get exactly aligned to the right hand side, and I'm unsure of how I can add those numbers that the picture shows.
Just as a starting point:
http://jsfiddle.net/wpQb9/1/
.col {
float: left;
padding: 0 20px;
width: 300px;
text-align: right;
position: relative;
}
.col:before {
position: absolute;
top: 20px;
left: 30px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
background: yellow;
display: block;
}
.col:nth-child(1):before {
content:"1";
}
.col:nth-child(2):before {
content:"2";
}
.col:nth-child(3):before {
content:"3";
}
p {
margin-left: 100px;
}
.col being one of columns, a div element.
But seriously now: there are thousands of way to do it. My example is lacking: background images, proper paddings/margins, fonts(?), width of columns themself. That much please do your best to figure out. Protip: use google.
use a separate DIV for each of the 3 columns. a class for the text header and another for the text and then a class for the circle. Border-radius to make it round and I think you can figure out the rest. Does that answer your question?
I want to have something like this:
================================
====IMAGE==============TEXT=====
================================
and I used:
.menu {
background-color: red;
padding: 40px;
text-align: right;
}
.menu img {
float: left;
}
Result:
================================
=======================TEXT=====
====IMAGE=======================
How can I do this?
I think that you have to use line-height with height in your text and set a width to your menu, something like:
<div class="menu">
<div class="img">
<img src="http://placehold.it/350x50" />
</div>
<div class="text">
<p>your text</p>
</div>
</div>
.menu {
background-color: red;
text-align: right;
width:100%;
}
.menu img {
float: left;
}
.menu text {
float: left;
}
.text p{
height:50px;
line-height:50px;
}
DEMO
You would need the image to be first in the markup. Float will make inline items wrap around something, but only the inline items that come after it in the markup.
Elements are not getting exact float and width property.
.menu {
background-color: red;
padding: 40px;
float: right;
max-width: 40%;
}
.menu img {
float: left;
max-width: 60%;
}
Now try to wrap them and use
.wrapper {
display: inline-block;
}
I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>
How can I position span text so that it is positioned in the middle (vertically and horizontally). I have made a jsfiddle example and this is my code:
<ul>
<li class="one"><span>One</span></li>
<li class="two"><span>Two</span></li>
</ul>
css:
ul {
height: 200px;
border: 1px solid #000;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
height: 30px;
width: 100%;
position: absolute;
background-color: blue;
}
.one {
top: 30px;
height: 50px;
}
.two {
top: 150px;
}
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
}
The height of the li's can vary. The above is just a reference using fixed heights.
You need to set line-height at the same height as your li:
li span {
color: #fff;
vertical-align: middle;
height: 100%;
display: block;
line-height:30px;
}
li.one span{
line-height:50px;
}
Here's your demo: http://jsfiddle.net/r4Dr9/2/
You don't need to do tricks with margin or padding.
Give the <li> a display:table;, and the <span> a display:table-cell;.
DEMO
CSS to add
li {
text-align:center;
display:table;
}
li span {
display:table-cell;
vertical-align:middle;
}
Try using text-align: center; on the li span, and you'll have to set the top margin accordingly for each to get it down from the top.
A couple things. First, height:100%;, vertical-align:middle; does nothing. Also, with width:100%; and not specifying text-align, it'll always default to left. I'd personally use padding:
li span {
display:inline-block;
color: #fff;
text-align:center;
height: 100%;
}
.one span {
padding-top:10px;
}
.two span {
padding-top:3px;
}
I updated your jsFiddle as well.
Added style - 'text-align: center' on li element and it worked for me