I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
Related
On my website I have a header with buttons made from background-images and a jQuery hover event. The problem is, in Chrome and Chrome only (in my tests), when mousing over the button the hover image is slightly cut off by about a pixel. I've tested it some and realized it only appears when there is a scroll bar (for consistency's sake, I've added overflow-y: scroll to all of my pages). The problem is fixed if I subtract half a pixel from the width, but it also messes with the margins. The background images are an identical size, 102x42px.
Here is my CSS and a link to my website:
.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}
I confirm the bug and like randy I think this is a problem with chrome and not your code.
It seems the problem appear and disappear because of the width if the page, if I resize my window the problem appear and disappear.
After some trials and error it seems the problem come partially from the size td element that encapsulate your menubutton. After trying some things around I thing I found a workaround. Since you know both the size of the td element and the menubutton, you don't need an automatic margin. So:
.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
Can you test on your side to see if it resolves the issue?
I see your problem, but it look like a chrome bug though, not a code bug. two out of four elements have correct hover backgrounds, so its a bit strange. You can try to set the width of the element again in the hover, or make the element 1px wider and set background-repeat:none; to display the extra pixel. Bad solution though..
I am trying to format a list of links with some css, I am having trouble though.
Please look at the image below...
<div class="tag-list">
<a href="/tag/htaccess" >.htaccess</a>
<a href="/tag/css-2" >css</a>
<a href="/tag/database-2" >database</a>
design pattern
<a href="/tag/mysql" >mysql</a>
<a href="/tag/pdo" >PDO</a>
php
server
web-design
</div>
the code...
<style>
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block
}
</style>
My goal is to get this list of links to LOOK like that except they should only be the width of the text + padding instead of the full width. I have tried wrapping each link in the div, wrapping the div around the block of links like I have in the code above, If I wrap EACH link in a seperate div and remove the display: block it will show them as the proper width for each link and each on a new line, the only problem with that is that the margin does not work to let me space them out top and bottom.
I'm sure this is a simple fix for someone who knows more about css
jsbin.com link
Thanks for any help
Desired end result something like this...
When adding float: left; clear: both; it makes my other divs show up under it like this...
These easiest thing to do would be at add a float property. This essentially shrink wraps elements. I've also added a clear property to get them to stack.
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block;
float: left;
clear: both;
}
I believe this is what you want: http://jsfiddle.net/thnT8/
Note: I'd encourage you to utilize better markup, such as an unordered list. Not only it is more semantic, but it would allow better hooks and avoid the use of floats.
UPDATE
Per the comments and my note above, here's the code: http://jsfiddle.net/84g6Q/1/
Replacing display: block; with:
float: left;
clear: both;
Should work.
You can avoid using floats and clears by making it a list and changing the display of your anchor tags to inline-block: http://jsfiddle.net/hZLzZ/
You set the display to block, that means it will span across it's entire container.
Just remove the display: block, float the elements left, add clear:both to get them to stack, and set the right padding to what you want:.
Here it is using your code: http://jsbin.com/ecoxay/2/edit
How can I make my website look more like the second image presented below? (Notice the left margin in the second image, versus no margin in the first one.)
http://fotografcim-2.hosting.parking.ru/ (This is a demo site.)
No margin:
Margin:
div#outer {
background-color:#FFFFFF;
border:1px solid #D0D4C9;
margin:0 auto 5px;
padding:0;
width:80%;
}
The above one is your style
I remove the auto in the margin:
Put margin as you want
margin:0 5px;
Use FF Firebug addon for better understanding
Refer these
http://www.webreference.com/authoring/style/sheets/layout/advanced/
http://www.yourhtmlsource.com/examples/positioning2.html
I would surround that all in a wrapper and set the width of that wrapper to the current width of the internal div.
I have a CSS Question I want this div to automatically expand vertically as more and more content fills it. I thought that omitting it's height setting in the style would do so but it hasn't seemed to fix it. My CSS
.box{
-moz-border-radius: 15px 15px 15px 15px;
background-color:#433B39;
background-image:none;
color:white;
display:block;
margin-top:20px;
padding-left:16px;
padding-right:16px;
width:925px;
}
Are you floating the content inside of that div? If so, then it won't expand to fit them, you need to put a clearing div after the floating content for this.
use auto:height .You may also mention min-height to some value to maintain a minimum height
ex :
.box{
width:925px;
min-height:10px;
height:auto;
}
Did you try with setting float:left for the external container?
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.