I want to make a div border like this one in this website (the main/big one): http://wiki.travian5.com/tiki-index.php
but all I've got so far is this:
#main {
border: 5px solid #d5d8db;
outline: #ffffff solid 1px;
}
It's almost complete. I just don't know how to make that black line before the border.
Any idea how to solve this problem? I tried researching and couldn't find anything.
There is another element nested inside that #main element
for example:
#main {
border: 5px solid #d5d8db;
outline: 1px solid #ffffff;
}
#content {
border: 1px solid gray;
}
<div id="main">
<div id="content">
Hello World!
</div>
</div>
Tip: I recommend using classes instead (e.g. .main, .content )
Put your current div inside another div, like this:
<div><div>"Your stuff here"</div></div>
Then just make the outside div a bit bigger than the inside one (or use padding, there are a number of ways to do it actually), and I would use z-index to make sure your outer div is beneath the inside one. If all you want is a solid color just make your outside div background color black and you're done.
Related
so I'm trying to set up a website and I want the green nav bar to be flush with the bottom of the image. However, no matter what changes I make to the source code and css it still leaves a space. Does anyone know how to fix this?
HTML:
<body>
<img src="xyz.gif">
<div class="hasbackground">
...
</div>
</body>
CSS:
.hasbackground { background-color: blue; }
Here's an example JSFiddle: http://jsfiddle.net/a1mn0ytz/
Thanks
Your image is display: inline, but it needs to be display: block. Elements that are inline or inline-block treat white space as if it's inline (e.g. the spaces between these words.) That can sometimes manifest vertically, apparently.
Remove the 2 pixel border you have on the image.
Change
<img width="946" height="246" style="border:2px solid #000000" alt="dogwash" src="Banner.jpg">
to
<img width="946" height="246" alt="dogwash" src="Banner.jpg">
The border of attribute of the image is following:
border: 2px solid #000000;
Change it to following:
border-left: 2px solid #000000;
border-right: 2px solid #000000;
I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...
This is the design:
And this is what I get:
Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.
HTML:
<div class="title">
<h1>Contacteer ons</h1>
</div>
CSS:
h1 {
border-bottom: 8px solid #57c4d0;
position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}
.title {
border-bottom: 1px solid #dedede;
}
I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?
You can change h1 to display: inline-block;
See a live example at (added margin-bottom to .title for clarity):
http://jsfiddle.net/P4BGC/
See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.
<div><h1>Hello, world</h1></div>
Lorem ipsum
the css
h1 {
border-bottom: 3px solid red;
display: inline;
}
You could also use CSS style text-decoration.
html:
<div><h1>Hello, world</h1></div>
css:
h1 {
text-decoration: underline;
}
I have a main div.
In it I want to create another div (frankly, to put AdSense in it).
I want to create an inner div.
Align it to the left and color its left border blue.
I attach my unsuccessful try
please advise
http://jsfiddle.net/7hbK8/
I have the big light-blue div, and the blue div
I want to add the orange div with red\blue (what ever) border.
You've missed a semi colon:
http://jsfiddle.net/adaz/7hbK8/4/
Your class definition was wrong; it should be something like this:
.bla
{
float: right;
border-left: 1px solid #ff0000 ;
}
You would change the float to either right, left or none, depending on your needs. Also, the color you posted (#ff0000) is not blue but red.
I'm not completely sure what you mean with 'inner div' so I made this:
http://jsfiddle.net/7hbK8/6/
<div class="bla">
<div class="inner">
blablablablablablab
</div>
</div>
.inner
{
border: 1px solid #000;
border-left-color: blue;
width: 200px;
margin: 0 auto;
}
I have a div followed by another div
<div class="myclass">
<div>Some Data</div>
</div>
and the class content like
.myclass div {
background-color: #fff;
border: 1px solid #000;
padding: 4px 16px;
}
Here background-color is not only applied to inner div but also to the outer div.
Shouldn't it apply to the inner div only?
Are there any other possible ways?
I am not able to specify class to inner div as it is dynamically generated by other api..
Thanks in advance..
Apply the padding to the outer div:
http://jsfiddle.net/xCedS/
.myclass {
padding: 4px 16px;
}
.myclass div {
background-color: #fff;
border: 1px solid #000;
}
Original answer that ended up working for the OP: https://stackoverflow.com/revisions/6520122/1
Your CSS is correct for what you want to do. The issue you have is in the way the sizes on the two divs is calculated.
Unless you have any other content inside div.myclass, its size will be set by the div inside it - basically, the inner div completely fills the outer div.
You could try adding:
.myclass {padding:16px;}
to see the difference - it will put space between the two divs.
I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images Click to zoom
Click to zoom
The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the span-XX classes anymore. Is there any other way to fix it?
If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is
<div class="span-24">
<div class="box">here</div>
</div>
and add the border to the box class for above snippet.
If you don't want to nest divs, you can create a few additional classes for bordered columns. I'm using 1px borders, so I created classes like:
.with-border-first {
border: 1px solid red;
margin-right: 8px;
}
.with-border {
border: 1px solid red;
margin-left: -1px;
margin-right: 9px;
}
.with-border-last {
border: 1px solid red;
margin-left: -2px;
}
There should be one more if you want borders around divs spanning all columns (eg. 24 in blueprint).
I then use those classes together with the spans, for example:
<div class="span-8 with-border-first">
...
</div>
<div class="span-8 with-border">
...
</div>
<div class="span-8 last with-border-last">
...
</div>