There is unknown space when I add the h1 tag above the p tag.
Here is the fiddle
What I need is here in the below image
After considering float:left, I tried it in my real page but it still gives problem
Here is the new code with float:left
Fiddle with float
Used to float and remove display inline-block;
p {
width: 80%;
vertical-align: top; margin:0
}
h1{
font-size:14px;
margin:0;
vertical-align:top;
}
.thumb{
float:left;
height:100px
}
Demo
That's because you have given your thumb class (which is your image) a height of 100px. Simply removing that height will fix it, see Fiddle: http://jsfiddle.net/CKRNs/4/
EDIT: As you've also said you want the p tag next to the image, add float: left to both the p tag and the thumb class, like so: http://jsfiddle.net/CKRNs/6/
The problem: Incorrect use of display:inline-block;
Solution: Remove all display:inline-block; and vertical-align:top; occurences and give .thumb float:left; (the correct way of aligning block elements next to eachother).
Example: http://jsfiddle.net/CKRNs/9/
Add a float:left; to the p, h1 and .thumb definitions.
You need to set your image float:left. See this demo: http://jsfiddle.net/CKRNs/14/
.thumb{
display:inline-block;
height:100px;
float:left;
}
This means the image will float left and allow the text to wrap
I would use position absolute for the thumb. and put margin-left to the h1 and p tag. http://jsfiddle.net/CKRNs/13/
h1, p{
margin: 0 0 0 60px;
}
.thumb{
position:absolute;
width:50px;
height:50px;
}
Related
I got a main articles section in my website where i got an img, and the right side the description of the img. After the words reach the container end, if should break the line and start after the img again. But my words are being behind the image ! Here's a fiddle that can help you to understand: JSFiddle. How can i make the words break the line and start again after the img ? is it possible to do this in the same container like i'm doing ? I'm giving the size of the container like this:
div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
}
And the img/words like this:
div img{
margin-left:-10vw;
position:absolute;
height:40vh;
width:25vw;
}
div figcaption{
color:white;
}
It can be all seem in the fiddle. Thanks for the help !
Thanks.
You have placed the image 'absolutely'.
Use float:left on the image and remove the position:absolute property.
https://jsfiddle.net/pa8qq9Lh/
Add the float attribute to your img.
Example: float:left;
AND: Remove absolute positioning.
div{
margin-left:2.7vw;
background:black;
padding:10px;
width:50vw;
height:49vw;
word-wrap:break-word;
}
div input{
display:none;
}
div img{
margin-left:-10vw;
position:absolute; <--- REMOVE THIS RIGHT HERE
float:left;
height:40vh;
width:25vw;
}
div figcaption{
color:white;
}
You'll need to float the image, but left instead of right, and remove the absolute positioning:
div img {
margin-left:-10vw;
/*position:absolute; <-- remove this */
float:left; /* <-- add this */
height:40vh;
width:25vw;
}
JSFiddle
I'm trying to make navigation like this:
I started to this with nav tag but when I'm giving its width and height it looks like this:
#auzi{
margin-left:55px;
width:90px;
height:35px;
color:#246c41;
background: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/13646_802426683122032_8872692336592806117_n.jpg?oh=d9ebec474b44c2172aff91a26cbe8745&oe=5480A9F5&__gda__=1416669080_db2840f489895af5e3e8515bdc781921) no-repeat;
text-align:center;
}
What am I doing wrong?
JSFIDDLE
Since <a> is an inline element it don't accept any height or width just add the display:block; either display: inline-block to your #auzi
DEMO
Try adding:
display:inline-block
to #auzi css.
Make your outer div be display: table-cell, or give it a line-height of appropriate size.
#choose{
width:675px;
height:50px;
display: table-cell;
line-height: 85px;
}
DEMO
I am making a navigation bar and I want all of the links in it to be 30px high. When I set this - height:20px; (20 pixels because there is 5px padding all around) - the height just stays normal. My full code for the a's is:
#header a {
height:20px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
}
#header a:hover {
background-color:#CCCCCC;
color:black;
}
JSFiddle: http://jsfiddle.net/Lcupj/
The height property does not apply to elements that are display: inline and <a> elements are display: inline by default.
Set a different value for the display property (such as inline-block) or use line-height instead.
You can also use a padding on A tag, and use line-height either.
example :
a {
padding : 9px;
line-height : 20px;
}
Bye.
height won't apply to inline blocks.
Use display: inline-block in your CSS to make the element behave like an inline element but with some of the block element properties.
use display: inline-block;
#header a {
height:30px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
display: inline-block;
}
DEMO
you can also try the following
#header a {
position:absolute;
margin:0;
padding:0;
height:20px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
}
sometimes you have to manually set the height or padding of a given element, or the element would be squashed to fit inside the other other element. I also use position:absolute this gives 100% control over your elements position, size etc.
http://jsfiddle.net/Lcupj/
A is an inline element, you can't use height on it. If you want to do so you must first change it into a block element. You can do so with display: block; however this will put your element on a new "line" on your screen, if you want it to stay like an inline element, you should use display: inline-block; Or you could use line-height.
Add to the a rule display:inline-block in CSS
I'm trying to replicate the following table of contents:
You can see my attempt here and see the problem: I don't know how to keep the chapter titles restricted to a specific width so that they don't wander over to the page numbers. I've tried things like width:250px and margin-right:30px; and padding-right:30px;, but to no avail.
Here's some of the code:
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
<div style="text-align:center;font-size:80%">CHAP. IX.</div>
<div class="conts"><span><em>Of the different Degrees of Virtue and Vice</em>, <em>and the methods of estimating them</em>. <em>Of Difficulties attending the practice of Virtue the use of Trial and Discipline in forming reasonable Beings to Virtue</em>, <em>and the Essentials of a good and bad Character</em>.</span><span style="float:right;">p. 200</span>
</div>
Any help would be appreciated.
You should use p to wrap the text instead of a span element, assign some fixed width to p and float that to the left
Demo
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
width: 600px;
}
.conts p {
float: left;
width: 500px;
}
.conts span {
margin-top: 10px;
}
If you want to position the number at the end of the line, use position: absolute; wrapped inside position: relative; container.
Demo 2
First. change all this code <span style="float:right;"> Page number here </span> into <p>Page number</p>. then change your CSS like this.
.entry {
width: 450px;
padding-left: 90px;
}
strong {
font-variant:small-caps;
font-weight:normal;
}
.conts {
width:100%;
}
.conts span {
float:left;
width:80%;
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
.conts p {
float:right;
width:10%;
font-size:80%;
margin-top: 0px;
}
Last, add <br clear="all"/> after <p>Page Number</p>. hope this help :)
See Demo Here
Try adding a padding-right:100px; to the contents and margin-right:-100px; to the floated page number. That should make sure the full contents are correctly made to stay a certain width while pulling your page numbers out of that space and into the right margin.
wrap all of the chapters up into one main div. Float that left, width 80% (or whatever works). then wrap your page numbers into a second div, and float that right with a width of 20% or less, depending on your margins. MAKE SURE YOU GIVE YOUR WRAPPER DIV (or whatever div you wrapped the entire code in) A WIDTH OR THE WIDTHS YOU ASSIGN TO INSIDE DIVS WILL NOT WORK.
I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:
And here are my related CSS blocks:
.skills {
overflow:hidden;
height:100%;
}
.skills li{
border-bottom:1px dotted black;
position:relative;
width:200px;
height:18px;
margin-left:13px;
}
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
padding:0 5px;
}
Here is the HTML:
<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
<li>
<span>SOAP/Axis2</h4>
</li>
</ul>
Can you tell why this is aligned to the top? I want it in the center.
And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?
...where the same code results it in text being in the center. Does
that mean that CSS elements higher in the hierarchy may be causing it?
I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.
The default value for line-height is roughly 1.2x (depends on browser).
Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).
Example fiddle: http://jsfiddle.net/4vq42/
No line-height. Make it the same as the height, either 18px or 100%.
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
line-height:18px;
padding:0 5px;
}
Try adding line-height: 18px to .skills li span CSS.
Edit: Just realised Tim Medora already said this. Ignore me.
Setting line-height to the value of your element's height is the simplest way to vertically align text.
.skills li {
height:18px;
line-height:18px;
}