I would like to make this textbox
As you can see, there are two parts to the div - the background image in the bottom and the border, that I have already done:
HTML:
<div class="person">
<p>Text Text Text</p>
</div>
CSS:
.person {
background: url('../images/results_title.png') repeat-x bottom;
border: 1px solid #000000;
min-height: 32px;
}
The problem is that the border is above the background image. The background in the bottom should be above the border (= in the bottom should be just an image without any borders).
IMPORTANT:
There is a text on the image.
how about adding the border to the <p>? You can have a border-right and border-left on the p, with inside padding to keep the text away from the box. If the <p>'s have other layout that would hinder this, wrap them in a div.
See this fiddle, for example:
http://jsfiddle.net/56TqY/1/
The red and cyan are just to examplify, and obviously I use your background with the text, but I think you get the idea.
I always hate adding more markup, but I think this should be what you're looking for.
I just added a wrapper so that you can add a padding between the border and the background-image
Related
I am attempting to put some padding above an image so it's not directly against the text I have up there. The image has a border on it, and when I try to put the padding above it leaves the top part of the image's border up there. So there is an unwanted space above the image between the border. Can anyone help me? This is the css I am using:
img {
padding-top: 28px;
border:5px solid #e26b34;
}
Just use margin-top like below. Margin does basically the same thing as paddding, except padding is inside the element (inside the border) while margin is outside the element (outside the border).
You can find more about margin and padding here.
img {
margin-top: 28px;
border:5px solid #e26b34;
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
Every html element is a box shape element.
Each box is surrounded by boundaries - padding, border, margin.
--
margin gives white space between two elements.
Why would a box require three boundaries? Would margin that creates white space between any two boxes do not suffice?
Not if you also need a border, or some padding.
Though it is true that both margin and padding create space, there is a difference between where they create space. And that difference is the border.
A border, as the word already implies, is to create a visible border. Padding creates space between said border and the content within. But padding can also be used to create some room around an element when it has a background, for example.
To better illustrate the differences, I'll create a couple of snippets:
This snippet has no border, margin or padding, so no spacing.
.row {
background: red;
}
.column {
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This snippet has margins, giving it some space around the element, which is evident because of the background colors.
.row {
background: red;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This example has both a margin and a border, giving you a wider range of coloring options, as well as more space. Yet, you would be unable to give the different spaces a different color with just a margin.
.row {
background: red;
}
.column {
margin: 10px;
border: 5px solid purple;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This last example has it all. As you can see, the padding creates space within the box, inside of the border. Added to that, you can also see more of the background color of the element.
.row {
background: red;
}
.column {
margin: 10px;
border: 5px solid purple;
padding: 20px;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
Though you could create just as much space between the elements with margin: 35px; you could not get this (* cough *) beautifully colorful display.
You need a border because sometimes people want a visible border between elements, not white space.
You need padding because people want space between the content and the border and between the border and the next element.
Each one of those properties controls a different aspect of the box.
Margin
The margin clears an area around an element (outside the border). The
margin does not have a background color, and is completely
transparent. The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin property
can also be used, to change all margins at once.
Padding
The padding clears an area around the content (inside the border) of
an element. The padding is affected by the background color of the
element. The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand padding property
can also be used, to change all paddings at once.
Border
The CSS border properties allow you to specify the style, size, and
color of an element's border.
All three properties together give you great flexibility in styling HTML elements. If you only had margin you would only be able to create space between elements. Plus, padding gives you the ability to create "separation" between elements without collapsing margins.
Here's a good reference for more details: When to use margin vs padding in CSS
Elements don't require to have any of the above. What you see is just an illustration about the box-model of the element which just tells you that there is no margin, padding or border.
Important difference between marginand padding is that margin pushes other elements away from the current element, while padding defines the space between the contents of an element and its' outline.
Border is simply a border. It creates a line as a visual separator between elements, and is not really intended to determine spacing between them.
A good explanation is given on the w3schools website.
Margins and padding have two different uses:
Margin collapse on each other while padding doesn't. Two elements side-by-side, each having margin: 10px will be 10px apart. But if they instead had padding: 10px, the would be 20px apart. Edit I misspoke. I was trying to refer to margin-collapsing, which happens on margin-top and margin-bottom at times. More can be read here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing; and additional discussion here: When to use margin vs padding in CSS
When applying a border, padding will be applied inside the border, pushing it away from the element. Margins are applied outside the border.
Styling such as background-color will be applied to padding, but not to margin.
With margins, negative values are allowed. Not so with padding.
From MDN:
Padding
The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.
Margin
The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.
The padding of a textarea is always fixed. When the text content of the textarea is scrolled, the padding remains near the edges.
The padding of a contenteditable element behaves differently. When the text content of the element is scrolled, the padding moves with it.
This demo illustrates the difference.
Can a contenteditable element by styled so its padding behaves more like textarea padding, staying in place while the text content is scrolled?
The answer to your specific question of whether a non-textarea "contenteditable" block level element's padding can behave like a textarea's is "no."
There is likely a way to achieve this look by adding additional elements to your div, but the padding of your div will always behave as padding is designed to.
Your padding issue has nothing to do with the "contenteditable" property. You could take the "cnotenteditable=true" off of your div, and the padding behaves the same way. Padding "clears an area around the content" of the element, which in this example is the text in your div. The padding will always remain around the text, not around the inside of the div.
<style type="text/css">
contenteditable] {
outline: 0px solid transparent;
}
</style>
<body>
<div style="padding:20px">
<div contenteditable="true"></div>
</div>
</body>
A reply in 2019. Set:
border: 10px solid black;
background: black;
color: white;
Works perfectly.
fiddle: https://jsfiddle.net/shill/2k81acux/
I have a bunch of dynamically generated html (See Fiddle) that basically puts some ugly buttons on an ugly calculator in a grid, but when I try to replace an image with text in a span, the button moves down.
I'm not asking for a critique of the colors, but if someone could help me with the styling re:the alignment, that would be awesome.
Basically
<div><span>Text</span></div>
or
<div><div>Text</div></div>
appears 50% lower than:
<div><img src="url.jpg" /></div>
whereas:
<div>Text</div>
appears slightly above the image buttons in the grid if I don't mess with the font size, but:
<div style="font-size: 12px">Text</div>
moves it right back down to where the span had it.
The issue seems to occur independent of my javascript, as the attached fiddle has the same problem and no js in it (just the generated html and included css).
So yeah, any help other than, it's ugly?
Note: I chose display: inline-block intentionally for the buttons, to provide the autowrapping in the parent container. I'd prefer not to go to a position:fixed or position:absolute if that messes with the wrap around.
The alignment issue you're having is the expected result of using display: inline-block on your .button elements. Using inline-block elements basically makes the element act like a block element, but its bottom aligns as an inline element would. Take this for example:
<p>example example example <img src="something.jpg" /></p>
Which renders like this:
The image is inline with the paragraph. Notice that the bottom of the image aligns with the bottom of the text. This same thing is happening in your Fiddle – the bottom of the span text aligns with the bottom of the images (once you remove the relative positioning). You have inline elements inside inline-block elements, so the bottom alignment is naturally behaving like it would on inline elements.
Inline-block elements are extremely useful, but probably not in this scenario, where you have several distinct buttons, which are in themselves distinct elements. I would suggest doing this:
.button {
border: 1px outset;
background-color: #FACC43;
color: darkgreen;
display: block;
margin : 10px;
margin-right : 0px;
margin-bottom: 0px;
float:left;}
Make the buttons block elements by using display: block and float:left. They'll behave much more predictably as elements that are 30px x 30px on a common alignment.
If for whatever reason your really want to use inline-block, apply vertical-alignment: bottom to the .button style you currently have.
Both solutions I gave you will result in this:
You have quite a bit going on here, so I have simplified your code a bit to illustrate a few ideas to help clarify things.
Consider the following:
<div id="calculator">
<div class="button">Basic</div>
<div class="button"><span style="font-size: 30px;">Tall</span></div>
<div class="button">
<img src="http://placehold.it/28x28">
</div>
<div class="button">
<img src="http://placehold.it/28x28" style="vertical-align: bottom;">
</div>
<div class="button" style="height: 28px; width: 28px;">
<img src="no-image.jpg">
</div>
<div class="button" style="height: 28px; width: 28px;">
<img src="no-image.jpg" alt="alt">
</div>
<div class="button">
<img src="no-image.jpg" alt="alt">
</div>
</div>
and the following CSS (essentially your button style):
.button {
border: 1px outset;
background-color: #FACC43;
color: darkgreen;
display: inline-block;
margin: 10px 0px;
}
and the update fiddle: http://jsfiddle.net/audetwebdesign/j3SRn/
Going from left to right, I show 7 buttons, on inline-blocks.
Button 1, only text, the inline-block shrinks-to-fit, simple enough.
Button 2, increase font size, again, box shrinks-to-fit, and notice that the bottom of the text shares a common baseline with Button 1.
Button 3, 28x28 image, bottom of image is on baseline, notice gap below the image.
Button 4, same as 3 but use vertical-align: bottom and image sits slightly lower, bottom of line box.
Button 5, in this case, the image file is not present, so a 28x28 box is drawn around the non-existent image (0x0 px dimensions) and positioned in the middle of the line, which is why it projects upward.
Button 6, no image, but this time we have alt text, wrapped in a 28x28 box, so the text falls on the baseline and the border box bits around it and projects downward.
Button 7, no image with alt text, no box size, so border shrinks to fit on text that falls on the baseline.
I hope this gives you a flavor of how inline-blocks behave, quite a flexible element.
So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).
So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.
I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!
Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
Keep in mind, "min-height" is not supported by IE6.
A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.
You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.
i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p
One example of how I did it you can see on this website.
The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;
Example:
CSS
div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
HTML
<div class="vert-line>
<div>Left Side</div>
<div>Right Side</div>
</div>
Hope this helps!
The answer to this question might help you:
Extending sidebar down page
you can use the css border-left on the right div.
.vertical_line { border-left: 1px solid #f2f2f2; }
<div>
<p>first div</p>
</div>
<div class="vertical_line">
<p>second div</p>
</div>