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;
Related
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.
I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
i know we can use inset and ouset border to styling border for a table.
table{border: 1px inset #fff;}
td{border: 1px outset #fff;}
everything is OK when we are using table because every thing is in a td and you never put an element or text in the table tag directly.
now the question is that when we are using divs to do the same styling there are many problems.
if we put a text or element in outer div we don't see any border in right side of it.
first inner div hast not border in top.
here is the fiddle to make the problem more specific.
http://jsfiddle.net/v4D9q/
Do you have to use inset/outset?
It's a few lines more css, but why not just put a border on the top/left/right of the outer, and only set border bottom on the inner elements.
HTML:
<div class="outer">
outer div (we dont see border in right side)
<div class="inner">inner div</div>
<div class="inner">inner div</div>
</div>
CSS:
.outer{
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
.inner{
border-bottom: 1px solid #000;
}
http://jsfiddle.net/PFhfF/
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;
}
How can i draw a box in css? I want a box like the green one used to display the number of answers to a question in stackoverflow?
Use Firebug and the "Inspect" function; point at the answer box here on SO and rip the HTML and CSS from the Firebug console.
CSS:
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
HTML:
<div class="answerbox">4 <br /> Answers</div>
Use any element – e.g. a div, make sure it's displayed as a block-level element (i.e. display: block) and give it a border.
.box { border: 1px solid #088; font-size: 4em; }
<div class="box">6</div>
Works well.
this page: http://www.w3.org/TR/CSS2/box.html
was the first page found by doing a Google search for "css box"
You can also use the AIS Accessibility Toolbar - http://www.visionaustralia.org.au/ais/toolbar/ - to expose the css used for the site amongst a whole host of other stuff.