I have a short text next to which I have to put a link. The link should not be visible as a text but as an image. So far no problems, however to use the image I have to set display:inline-block to be able to set the width/height of the tag. As soon as I do it, the next which was next to from the right jumps downwards in the containing div. I am absolutely unable to move it upwards. The code is:
<div>
<p id="pid">Some prefixing text that shouldn't be at the bottom of the div but rather in the middle This is some link</p>
</div>
#pid {
border: 1px solid blue;
float: right;
}
#pid a {
display: inline-block;
width: 50px;
height: 53px;
}
http://jsfiddle.net/DxVQr/1/
So how could I move the prefix text upwards? Thanks a lot!
Does vertical-align: middle on the <a> tag does the job?
Related
I'm trying to add some text after a textbox in-line. I want it to be "attached" to the textbox, but I also want it to ignore any other divs that would try to force it to a new line. The reason for this is my text boxes are somewhat close to the border of my wrapper div, and I want the text to not be affected by this wrapper div while still having its positioning relative to the textbox.
Is there a feasible way to do this? I've tried using absolute positioning but that is making it tough to keep my page responsive.
Edit:
By request, here's the simplest example I can think of:
http://jsfiddle.net/zzaq5h4q/3/
#wrapper {
width: 40%;
height: 400px;
background-color: #cccccc;
}
<div id="wrapper">
<input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>
You can stop the text from wrapping by using white-space: nowrap; as it stops the text from breaking at the nearest whitespace when it runs out of space.
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
(https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
By default overflow is set to visible on #wrapper which means content can spill out of it and still be shown.
visible
Default value. Content is not clipped, it may be rendered outside the content box.
(https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
#wrapper {
background-color: #cccccc;
white-space: nowrap;
width: 40%;
}
<div id="wrapper">
<input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>
You can't go past the wrapper, but you can wrap your text in paragraph tags.
Here's an example
p {
width: 40%;
display: inline-block;
margin-top: -1px;
}
#wrapper {
width: 40%;
height: 400px;
background-color: #cccccc;
}
input {
vertical-align: top;
display: inline;
}
<div id="wrapper">
<input type="text" name="textbox" />
<p>I want this text to stay inline, even past the wrapper!</p>
</div>
I have used float: right; to float a whole paragraph to the right - I am highlighting bits of text with a background & border. My problem is that the text below then moves up and wraps to the left of the object (paragraph) that I've floated right. position: absoloute; right:0px; doesn't work as it overlaps.
So my question is, how do I float it right, but ensure the text below stays below?
CSS:
.fcsi {
background: #1E73BE;
padding:20px;
color: white;
border: 2px solid #1E73BE;
border-radius: 25px;
float: right;
}
I've just used a simple div class in HTML around the text.
<div class="fcsi">
TEXT
</div>
Any help much appreciated on this.
After this, I am looking at including an image inside the background & border, aligned top-right or bottom-right. I think I cannot do this with CSS though and need to re-enter the image with HTML each time?
Below the floated paragraph you could add:
<div style="clear:both;height:1px"></div>
Want to know the reason for this behavior.
CSS
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Empty div
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
behavior: element increases from bottom to top (height)
div with text
<div style="height:20px;">20</div>
<div style="height:40px;">30</div>
<div style="height:60px;">40</div>
<div style="height:80px;">50</div>
behavior: element increases from top to bottom (height)
see it in action: http://jsfiddle.net/8GGYm/
Basically it got to do with the way that vertical-align: is calculated. So if you put vertical-aling:bottom; attribute in the css then you will notice it will be the same with and without text.
you can read the this for more details.
When the div has no content, padding is not drawn in the box (i.e. when when 0, if there is content, the browser calculates where the padding would be). so there is a little difference in calculating with and without text.
Hope this is helpfull.
please see here: http://jsfiddle.net/dd24z/. By default text is vertical-align: top, but you can change that behavior:
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
vertical-align: bottom;
}
http://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height
'vertical-align': baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Add
vertical-align: bottom;
to your CSS. Hope it works as you want.
I guess this can be explained by the text alignment, independently from divs.
Text, when placed in a div, is vertically aligned to top-left by default. Those divs without text align beside each other (inline-block) expanding the page downwards. If you add another div, you'll see the second header going further down.
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the above fiddle, you can see that the text line is the "guideline".
Maybe this is the explanation: once the divs have text in them, they will align it with the surrounding text and, if inexistent, then they align their bottom line.
I'm sorry, maybe not very clear but I hope you understand my view.
I am very new to CSS. I am creating a DIV and somehow the text is being displayed in middle of the DIV. There is a white-space appearing above the first line of the text.
I am also providing the CSS that I wrote for this DIV.
CSS Code
#CONTAINER {
float: left;
height: auto;
padding-top: 0;
border: 1px solid black;
vertical-align: top;
}
#CONTAINER p {
padding: 0;
margin: 0;
vertical-align: top;
}
Here is the Link to the page. Please refer to the last Div which says Latest News
[enter link description here][1]
In your "Latest news block," there is an h2 element outside of the div that your text is in that is pushing everything down.
<div id="block-nodeblock-21" class="block block-nodeblock">
<h2>Latest News Block</h2> <!----this guy-->
<div class="content">
The element is invisible because you set visibility:hidden, however this does not remove it from the page, so it still affects the position of everything around it. To make it truly hidden, you can
Remove it OR
Set display: none;
First off we need your HTML that goes with it, however also remember that the P tag has got its own whitespace added by default, try - values for your padding under
#CONTAINER p
It is possible, that outside the div, you have set the "text-align" property to the value "center". Out of interest, does this occur in any other browsers?
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.