I'm trying to figure out if the padding is adjustable in this
Here's the HTML:
<div id="branding">
<h1>
{block:IfHeaderImage}<img src="{image:Header}" alt="{Title}" /> {/block:IfHeaderImage}
{block:IfNotHeaderImage}{Title}{/block:IfNotHeaderImage}
</h1>
</div><!-- #branding -->
And the associated CSS:
#header #branding {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 auto 3px;
{block:IfNotHeaderImage}padding: 40px 0;{/block:IfNotHeaderImage}
width: 900px;
}
I tried: adding a height property and changing the padding, but nothing worked. This is being done in Tumblr (this site), and it has been a bit finicky.
Any help much appreciated!
It's fine in Chrome. See screenshot: http://cl.ly/3z2c3D18291K260s2D1K
Related
I want to budge this border to the left like in this image:
My code is like this:
div{
border left: red 5px solid
}
I see what you want. So, first, you will need a class for your div, so that it doesn't affect every single div. You also need another <div> inside it for the text and the border. New code:
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
Then, here comes the CSS. First, we should style the outer <div>. We will need padding, background color and you might want some border-radius. The padding should be around 7 pixels. Your background color can be something like #ddd. It is what I saw in your picture. Finally, the border radius can be 5 pixels, even though your image didn't contain any, I think it looks better. You can remove this. Our outer <div> code looks like this:
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
Now we have the inner <div>. It should contain a red left border (as you said in your code) and some left padding to not "touch" the border. Our code is like this:
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
Complete code:
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
<style>
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
</style>
Snippet:
div.warn{
padding: 7px;
background-color: #ddd;
border-radius: 5px;
}
div.inner-warn{
border-left: red 5px solid;
padding-left: 5px;
}
<div class="warn">
<div class="inner-warn">This is important note</div>
</div>
It looks like this:
.block{
background: #ccc;
padding: 16px;
}
.note{
border-left: 5px solid red;
padding-left: 16px;
font-size: 25px;
}
<div class="block">
<div class="note">This is an important note</div>
</div>
Ok, so for the sake of argument i have a box with a grey left and right border with an 8 pixel border bottom with a different colour.
The way borders display is showing the bottom border inside the left and right border. Ive done some research but i cannot find a way that is possible for the bottom border to display under the side borders as apposed to inside them. Sorry if i have not explained this too well please feel free to ask if you need any more information. Please follow the link below to a quick fiddle i have created.
<div class="bg">
<div class="box">
Box
</div>
</div>
.bg {
background-color: #fff;
width: 72%;
float: left;
height: 100%;
padding: 100px;
}
.box {
background-color: #fff;
height: 200px;
width: 200px;
float: left;
margin-left: 100px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 8px solid black;
}
http://jsfiddle.net/L06s4k50/
Thanks in advance people.
I think the best way of going about this is to forgo the border-bottom completely, and instead use a box-shadow property:
.box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 8px black;
}
On one of my pages I have five similar divs and I wish to add a border to the top aswell to the bottom of the first and the last div.
HTML:
<div class="info_box">
Text content is here
</div
<div class="info_box">
Text content is here
</div>
... And so on...
CSS:
.info_box{
top: 8em;
float: left;
max-width:100%;
max-height: 50px;
position: relative;
overflow: hidden;
background-color: rgba(255, 0, 0, 0.0.5);
}
.info_box:first-child{
border-top: 1 px solid #666;
}
.info_box:last-child{
border-bottom: 1 px solid #666;
}
Can someone tell me what I'm doing wrong here?
just add class "with-border" to the first and last div (or any div you want to have a border), and then add this to your css:
.with-border {
border-bottom: 1 px solid #666;
}
So your first and last divs will be:
<div class="info_box with-border">
Text content is here
</div>
How you are doing it with the CSS is absolutely fine, except you have two errors.
You need to remove the space between the 1 and px like the following.
.info_box:first-child {
border-top: 1px solid #666;
}
.info_box:last-child{
border-bottom: 1px solid #666;
}
In addition you need to close your divs, you are missing a closing >
<div class="info_box">
Text content is here
</div>
<div class="info_box">
Text content is here
</div>
That should solve it for you.
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}
UPDATE:
This seem to only be an issue with ul/li if i replace the ul with a div and remove the li and apply the relevant style to the a's instead its fine. ID' still liek to know why the ul/li structure presents a problem since margin/padding have been reset explicitly.
Im having soem trouble with the children of a fixed position element in IE7. They seem to be gaining width/margin/padding from somewhere but I cant discern where or how to fix it.
You can take a look at it in jsFiddle here. Ive added the bg colors just for debugging. The image/li tags should be flush with they yellow, and are in IE8 as well as mozilla and webkit. But in IE7 there is an extra ~20px of space to the left pushing them over, as if the li, a, or img tags had a margin. However, if i look through the properties in IEDevToolbar there is no margin or padding being applied. Futhermore, this happens even if i assign widths to everything and zero out margin/padding directly on each element with IEDevToolbar.
I'm totally lost on this one.
Below is the relevent code... There is a XHTML 1.0 Transitional doctype on the layout in question:
<style type="text/css">
.social-widgets {
position: fixed;
top: 125px;
left: 0px;
background: #f00;
width: 34px;
}
.social-widgets-content {
list-style: none inside none;
margin: 0;
padding: 0;
text-align: left;
background: #ff0;
}
.social-widgets-content li {
margin: 10px 0 !important;
padding:0;
width: 34px;
background: #0f0;
}
.social-widgets-content img {
display:block;
border-top: 2px solid #e9e8e8;
border-bottom: 2px solid #e9e8e8;
border-right: 2px solid #e9e8e8;
padding: 0px; margin:0px;
background: #00f;
}
</style>
<div class="social-widgets">
<ul class="social-widgets-content">
<li><img src="/images/button/button.facebook.png"></li>
<li><img src="/images/button/button.twitter.png"></li>
<li><img src="/images/button/button.feedback.png"></li>
</ul>
</div> <!-- /.social-widgets -->
This has nothing to do with position:fixed;. It was an issue with the list styling. When using list-style: none inside none; IE7 still adds the spacing for the list-marker despite the marker being set to none. The solution was to set list-style-type: none; instead of using the shorthand.