I have this code:
<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
<html>
<head>
<style type="text/css">
.container {
width:500px;
padding-left:200px
}
.inner{
border-bottom: 1px dotted #999999;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
asdf</div>
</div>
</body>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
If that's the case, use this:
<div class="container">
<div class="content">
content here
</div>
</div>
CSS code:
.container {
padding-left:200px;
}
.content {
width:500px;
border-bottom: 1px dotted #999999;
}
Maybe like this, with margin-left
http://jsfiddle.net/ppMmy/
The CSS padding properties define the
space between the element border and
the element content.
Thus not "padding" the whole <div>
Related
How can I use multiple colors for my website?
I am using gradient colors for the header, it looks like ![this][1] I want to also show the card columns at the middle of the site, and the background should go white, how can I accomplish that?
I tried to do style a div
.testdiv {
background: #ffffff;
}
But that only changes the div background, which looks like ![this][2]
Edit: My full code for the issue.
<section class="bottom-articles">
<article class="bottom-article">
<img class="article-image" src="/images/layer-2.jpg">
<div class="article-text-wrapper">
<h3 class="article-title">Issue 1</h3>
<div class="article-description">
</div>
</div>
</article>
And for styling, I came up with something like
.bottom-article {
padding-top: 40px;
float:right;
margin-right: 300px;
padding-right: 80%;
}
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:orange;}
#p1 {background-color:transparent;}
#p2 {background-color:#ffffff;}
</style>
</head>
<body>
<p>HEX colors:</p>
<p id="p1">transparent</p>
<p id="p2">white</p>
</body>
</html>
try doing
.testdiv {
background-color: transparent;
}
I'm using bootstrap version 3.0.1 to make a grid and when I add a border to the rows of the grid I can see that the rows that are together add up there borders, I get a thicker border.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container {
width: 420px;
}
div.row {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-md-12">Header</div>
</div>
<div class="row subheading">
<div class="col-md-12">Some text</div>
</div>
<div class="row footer">
<div class="col-md-12">Footer</div>
</div>
</div>
</body>
</html>
And this is what I get .
How can I use the border without the adjoining rows adding up their borders?, ie: I want all rows with a border of 1px.
Thank you
You can remove the border from top if the element is sibling of the row .
Add this to css :
.row + .row {
border-top:0;
}
Here is the link to the fiddle http://jsfiddle.net/7cb3Y/3/
Here is one solution:
div.row {
border: 1px solid;
border-bottom: 0px;
}
.container div.row:last-child {
border-bottom: 1px solid;
}
I'm not 100% its the most effiecent, but it works :D
http://jsfiddle.net/aaronmallen/7cb3Y/2/
On my projects i give all rows the class "borders" which I want it to display more like a table with even borders. Giving each child element a border on the bottom and right and the first element of each row a left border will make all of your boxes have an even border:
First give all of the rows children a border on the right and bottom
.borders div{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
Next give the first child of each or a left border
.borders div:first-child{
border-left:
1px solid #999;
}
Last make sure to clear the borders for their child elements
.borders div > div{
border:0;
}
HTML:
<div class="row borders">
<div class="col-xs-5 col-md-2">Email</div>
<div class="col-xs-7 col-md-4">my#email.com</div>
<div class="col-xs-5 col-md-2">Phone</div>
<div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
you can add the 1px border to just the sides and bottom of each row. the first value is the top border, the second is the right border, the third is the bottom border, and the fourth is the left border.
div.row {
border: 0px 1px 1px 1px solid;
}
You can simply use the border class from bootstrap:
<div class="row border border-dark">
...
</div>
For more details visit the following link: Borders
Messy headline, but i had no other way to descibe it.
what im trying to do is i have 3 boex in a line with only 1 px border at each side, but cant get it to work, it is always 2 px at the far right one. How to solve this?
Check the code:
#content {
width: 1016px;
min-height: 664px;
height: auto;
border: 1px solid #232323;
background-color: #12100e;
float: left;
padding: 0px;
}
#imagebox {
Width: 338px;
height: 221px;
padding-right: 0px;
padding-left: 0px;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
}
<html>
<head>
<link rel="StyleSheet" href="Main.css" type="text/css">
<title></title>
</head>
<body>
<div id="mainbody">
<div id="menu"></div>
<div id="content">
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
<div id="imagebox"></div>
</div>
</div>
</body>
</html>
It's because the right-hand border add's 1px to the overall width of the #imagebox element, thus making the width 339px.
Try decreasing the width to 337px and they should all fit in
Closest you can get:
http://jsfiddle.net/CGEWC/2/
Several thing you have to keep in mind:
Use classes in stead of id's if you need to assign a style multiple times.
In your CSS you use Width with a capital. Although CSS is not case sensitive it's cleaner to just write it all lowercase.
I've added a float: left; to your imageboxes
I've added first and last classes to your div. Not the cleanest code, but it should word.
Have you tried using max-width instead of width? It allows the object to be scaled down.
If need be just take 1 away from either and it should be fine and change the id's to class as they are all the same.
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
Is there an elegant way to align 3 elements left, center, and right on the same line?
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
that works for me:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33% may not work because you will need to factor in the amount of margin that element has.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
Try this:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
Use pixel widths if your design allows for it.
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Here is yet another varition of the theme:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>