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?
Related
I'm trying to create a div section with an image and text inside it, with scrolling overflow, but when I add the overflow: scroll, an extra line break is added at the top of the text, and I can't figure out how to get rid of it.
I know it isn't the padding or margin that's the problem, because the image is still positioned at the top. The text just has extra space. And removing just the overflow: scroll line gets rid of it, so I can't figure out why it's happening.
<!doctype html>
<html>
<head>
<style>
.scroll {
height: 160px;
overflow: scroll;
}
img.avatar {
height: 50px;
width: 50px;
padding: 0px 6px 1px 0px;
float: left;
}
</style>
</head>
<body>
<div class="scroll">
<img class="avatar" src="(link here)"><p>text here</p>
</div>
</body>
</html>
Any ideas?
It is indeed the margin of the p tag which is the problem here.
You may reproduce the behaviour you mentioned on other ways, e.g., using a border around the .scroll container.
The margin of the p tag is measured against the next element (in a minimal example, to the top of the page). If you set up a border or scrollbars, the margin is instead measured against the container itself, so it moves down.
To prohibit that behaviour, you could, for example, set a margin of 0 to the p tag.
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Closed 8 years ago.
I'm converting my site from a fixed to responsive layout and using the getskeleton framework. http://jsfiddle.net/L2q750xw/1/
<div class="one-third column">
<h4>Basic Page</h4>
<div class="home-box-wrap"><img class="u-max-full-width" src="http://www.aroundtheworldin80jobs.com/wp-content/uploads/2013/09/2013-berlin.jpg"></div>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
</div>
}.home-box-wrap{
width:100%;
height:0%;
border:2px solid #ff00ff;
border-radius: 5px;
padding:0px;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
All works as expected except for the whitespace underneath images, I can't see a reason for this and have tried removing the padding and adjusting the box height and it should all be normalized.
Thanks
You basically have two options.
Either change the vertical-align property of the img element to something other than the default value of baseline:
Updated Example
.u-max-full-width {
vertical-align: top;
max-width: 100%;
box-sizing: border-box;
}
In some cases, you could also change the display of the img element from the default value inline, to block.
Updated Example
.u-max-full-width {
display: block;
max-width: 100%;
box-sizing: border-box;
}
As for why this is happening:
There is reserved whitespace for inline elements for letters such as f, j, p and q that extend beyond the height of other letters. By changing the vertical-align property of the element to something other than the default value of baseline, the whitespace is removed. By changing the display of the element to block, the vertical-align property no longer has an effect on the element as it is no longer inline.
#JoshCrozier has got a nice way out! But I would like to add a cheeky trick that will help you out. Just add a negative margin-bottom to all your img elements.
img{
margin-bottom:-7px;
}
Working fiddle:http://jsfiddle.net/L2q750xw/3/
The image is being displayed inline and hence your padding:0 rule is not getting applied. Make it a block/inline-block level element
.home-box-wrap img { display:block }
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
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?