I have a border around my h4 header :
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
}
which renders as
I would like to indent the whole header (including the border) by 50px. Adding text-indent: 50px; indents just the text, not the border (and border-indent apparently does not exist)
What should be done so that the border is indented as well (or is indented, dragging the text within)?
use margin:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left: 50px; /* change this as you like */
}
margin will shift the whole element while padding will increase the space between the content and the border.
Look at this picture to understand the difference:
Use margin-left property to move the border also for h4 tag
Check out JSFiddle
CSS:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px;
margin-left:20px;
}
Add a wrapper:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 100%;
border-style: solid;
padding: 5px;
}
#wrapper {
width:90%;
padding-left:12px
}
<div id="wrapper">
<h4>ddd</h4>
</div>
you can try this one:
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding:5px;
margin-left:50px;
}
DEMO HERE
Add padding-left: 50px and a margin-left: 50px to the h4
h4 {
border-width: 2px;
border-radius: 25px;
border-color: gray;
width: 90%;
border-style: solid;
padding: 5px 5px 5px 50px; /*top, right, bottom, left*/
margin-left: 50px;
}
The padding will affect the space between the border and the content, while the margin the space between the container and the nearest element
Related
BEFORE YOU SAY THIS IS A DUPLICATE
I have tried the margin-top: 0px;
<html>
<head>
<style>
html, body {
padding: 0px;
margin: 0px;
}
body {
font: 22px trebuchet ms;
}
button {
color: white;
font: 18px verdana;
background-color: #aef731;
border-style: solid;
border-bottom-color: #96d626;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
div.title {
padding-left: 15px;
color: white;
background-color: #96d626;
}
cat.indent {
padding-left: 30px;
}
img.slgm {
border-style: solid;
border-color: #000000;
border-width: 4px;
float: left;
position: relative;
top: 30px;
left: 30px;
}
div.txt1 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
float: right;
position: relative;
top: 30px;
right: 30px;
padding: 5px;
width: 600px;
}
div.txt2 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
width: 400px;
position: relative;
top: 200px;
left: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="title"><h1>60 Second Science!</h1><cat class="indent">Molecules of Solids, Liquids and Gases</cat></div>
<img src="SLGM.png" class="slgm">
<div class="txt1"><h3>Introduction</h3>Solids, liquids and gases all have different molecular structures. Today, we will explore each form of matter's molecules.<br><h3>Solids</h3>Solids(left) have a very compact structure. The molecules squish together and barely vibrate.<br><h3>Liquids</h3>Molecules in liquids(center) can move freely but stay bond together causing them to have a definite volume, but not a definite shape.</div>
<div class="txt2"><h3>Gases</h3>Gases(right) have no definite shape or volume. This is because their molecular structure is very spacious. The particles have broke free of each other. Therefore, the gas can expand.</div>
</body>
</html>
So when I run this code, the div with the class "txt2" has a bunch of space at the top. Could someone please help? I have also tried removing padding at the top, rewriting the code, etc. I need this done very soon so any response helps!
:D
The problem is that your div.txt2 has the rule top: 200px, which would explain the extra height. I've changed this to top: 30px to match the height of your other <div> in my example.
Also note that many of your elements have a fixed width of several hundred pixels. This won't scale on mobile devices, and you should consider using percentage-based values instead.
<html>
<head>
<style>
html,
body {
padding: 0px;
margin: 0px;
}
body {
font: 22px trebuchet ms;
}
button {
color: white;
font: 18px verdana;
background-color: #aef731;
border-style: solid;
border-bottom-color: #96d626;
border-width: 0px;
border-bottom-width: 7px;
border-radius: 12px;
padding: 5px;
}
button:active {
border-bottom-width: 0px;
position: relative;
top: 7px;
}
button:focus {
outline: none;
}
div.title {
padding-left: 15px;
color: white;
background-color: #96d626;
}
cat.indent {
padding-left: 30px;
}
img.slgm {
border-style: solid;
border-color: #000000;
border-width: 4px;
float: left;
position: relative;
top: 30px;
left: 30px;
}
div.txt1 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
float: right;
position: relative;
top: 30px;
right: 30px;
padding: 5px;
width: 600px;
}
div.txt2 {
border-style: solid;
border-color: #000000;
border-width: 4px;
background-color: #e8e8e8;
width: 400px;
position: relative;
/*top: 200px;*/
top: 30px;
left: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="title">
<h1>60 Second Science!</h1>
<cat class="indent">Molecules of Solids, Liquids and Gases</cat>
</div>
<img src="SLGM.png" class="slgm">
<div class="txt1">
<h3>Introduction</h3>Solids, liquids and gases all have different molecular structures. Today, we will explore each form of matter's molecules.<br>
<h3>Solids</h3>Solids(left) have a very compact structure. The molecules squish together and barely vibrate.<br>
<h3>Liquids</h3>Molecules in liquids(center) can move freely but stay bond together causing them to have a definite volume, but not a definite shape.</div>
<div class="txt2">
<h3>Gases</h3>Gases(right) have no definite shape or volume. This is because their molecular structure is very spacious. The particles have broke free of each other. Therefore, the gas can expand.</div>
</body>
</html>
I have a text input but the color is not right on top and left border, why is this, and how can I fix this?
http://jsfiddle.net/9ehBs/
HTML
<input type="text" class="searchbox" />
CSS
.searchbox
{
width: 200px;
height: 30px;
padding: 10px;
font-size: 28px;
font-weight: 900;
font-family: Ebrima;
color: rgb(54,54,54);
border-width: 13px;
border-color: rgb(46,94,115);
float: left;
margin-left: 10px;
margin-top: 10px;
}
You need border-style: solid. See your updated fiddle.
It would be much more efficient to use the shorthand, i.e. border: 13px solid rgb(46,94,115);
border: 13px solid rgb(46,94,115);
easier in one row ... hope it helps
.searchbox
{
width: 200px;
height: 30px;
padding: 10px;
font-size: 28px;
font-weight: 900;
font-family: Ebrima;
color: rgb(54,54,54);
border-width: 13px;
border-style: solid;/* add this to your css options: dotted | solid | dashed */
border-color: rgb(46,94,115);
float: left;
margin-left: 10px;
margin-top: 10px;
}
shorthand writing:
margin: 10px 0 0 10px; /*(top, right and left, bottom)*/
border:13px solid rgb(46,94,115);
...instead of
margin-left: 10px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
border-width: 13px;
border-style: solid;/* add this to your css options: dotted | solid | dashed */
border-color: rgb(46,94,115);
I hope someone can help, I can't figure this out. I am creating a wordpress theme using the _s template and I am having trouble with my right column.
If I put just a bunch of line breaks in, the flow is correct. However, as soon as I insert any text, img, or anything else, that data falls below the center column.
I know it is something simple that I am just not seeing.
Here is a link to the page. http://juststin.com/test/help.html
And here is the css
.content-area {
float: left;
}
.site-content {
margin: 0 20%;
width: 60%;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 5px;
border-style: solid;
border-color: #333333;
background: #ffffff;
}
.pictures {
margin: 0 81%;
width: 20%;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 2px;
border-style: solid;
border-color: #ffffff;
background: #ffffff;
}
.site-main .widget-area {
float: left;
margin: 0 0 0 -100%;
width: 20%;
background: #2E9AFE;
background: #333333;
}
.site-footer {
clear: both;
width: 100%;
background: #ffffff;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 5px;
border-style: solid;
border-color: #333333;
}
.site-header {
clear: both;
width: 100%;
background: #ffffff;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
border-width: 5px;
border-style: solid;
border-color: #333333;
}
.menu-div {
border-width: 2px;
border-style: solid;
border-color: #ffffff;
background-color: #ffffff;
-moz-border-radius: 25px 25px;
border-radius: 25px 25px;
overflow: visible;
}
#page {
width: 90%;
margin: 0 auto;
}
the problem is your weird column layout. giving margin-left -100% to your .widget-area rather than just rendering it before your #primary column. Your #pictures column isn't floated so its flowing AFTER the #primary container who's width is 100%.
Option 1) put the column where it should go and don't use negative margins.
Option 2) assign a fixed width to #primary (looks like around 60%) and float #pictures left as well
You really need some changes on your column layout markup. I edited your markup and css a little bit to make it work(I won't recommend you to use it.). Take a look at http://pastebin.com/raw.php?i=hqi0MLTc
Off-topic:
Personally I prefer to use fixed width for sidebars/right left columns and fluid width for content area only.
Hope this helps you.
The problem ended up being that I had to decrease the size of the right side bar. I am guessing that adding borders was increasing the sizes to over 100%.
I'm trying to get 2 divs to sit side by side, a div for an ad (skyscraper_ad), and a main black (smaller_main) but when I add a float the DIV will overlap another DIV, can somebody help?
My css:
#skyscraper_ad {
display: block;
width: 160px;
height: 600px;
padding: 5px;
margin-right: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:relative;
margin-bottom: 4px;
}
#smaller_main {
display: block;
width: 605px;
height: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:absolute;
padding: 5px;
float: right;
margin-bottom: 4px;
}
This should work:
#skyscraper_ad {
width: 160px;
height: 600px;
padding: 5px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
margin-bottom: 4px;
float:left;
}
#smaller_main {
width: 605px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
padding: 5px;
float: left;
margin-bottom: 4px;
}
I took out your references to margin, positioning, and display. (and a height:auto which was meaningless as far as i could see). The margin auto was meaningless, the positioning was probably causing overlap, and the display was redundant (divs are already block)
html:
<div class="no-contact-info">
<textarea></textarea>
<span>no contact info</span>
</div>
css:
.no-contact-info {
width: 400px;
}
.no-contact-info textarea {
width: 100%;
border-width: 1px;
border-style: solid;
border-right-color: #dbdfe6;
border-bottom-color: #e3e9ef;
border-left-color: #e7e8ed;
border-top-color: #abadb3;
z-index: 2;
}
.no-contact-info span {
display: block;
background:#FFFFC6 url(/media/icons/error.png) no-repeat 4px center;
padding: 2px 0 1px 24px;
color: #333333;
font-size: 12px;
font-weight: bold;
border: 1px solid #abadb3;
border-top-color: red;
width: 200px;
margin-top: -3px;
z-index: 1;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
}
view: http://jsfiddle.net/XurSz/
I want to push the "no contact info" span up slightly so that it covers the bottom border of the textarea... but the textarea keeps wanting to go overtop. How can I get around this?
The z-index property only affects elements that have been positioned. Adding position:relative; to the textarea and the span should do the trick.