I have a div for gallery that contains other divs(each on has an image).In the outer div i set backgournd and border but nothing happens... I know the problem is that inner divs cointains only tags and nothing else. How can i work this arround without setting fixed width??
*All tags where closed even before.I copied part of my code, sorry for the misunderstanding!
*Someone said to set overflow and it worked! Thank You!(post was deleted and didnt saw who was!
Thanks all for the answers!
<div class="gallerybox">
<div class="img">
<img src="#" width="140" class="border1" alt="Click..."/>
</div>
</div>
And the CSS.
.gallerybox {
background:#CCC;
border:#000;
-moz-border-radius: 15px;
border-radius: 15px;
}
Thanks :D
The background is working correctly. Your border issue can be fixed by assigning it a specific width and style.
For example:
border: 1px solid #000;
JS Fiddle: http://jsfiddle.net/mQQ2A/2/
Hi you should be using background-color and border-color attributes when specifying only the color of those.
.gallerybox {
background-color:#CCC;
border-color:#000;
-moz-border-radius: 15px;
border-radius: 15px;
}
It may be that you didnt set anything for the border but its color and radius:
border:#ccc;
Should be:
border:solid 1px #ccc;
Make sure you close div.gallarybox. Right now it's open. When I tried it and closed it, I found it functioning like one would expect.
http://jsfiddle.net/6rGxw/
Related
I've always wondered what the 'best' way to position text inside a div is
1) Put padding on the element surrounding the text and minus the padding from the height/width of the element.
<div class="button">
Activate
</div><!-- button -->
.button
{
height: 20px; /* -10px from padding for text */
width: 90px; /* -10px from padding for text */
padding-left:10px;
padding-right:10px;
}
2) Put a span around the text, and position it as its own element.
<div class="button2">
<span class="button2-text">
Activate
</span>
</div><!-- button2 -->
.button2
{
height: 30px
width: 100px
}
.button2-text
{
padding-left:10px;
padding-top:10px;
}
I always go with 1) because its less code, but I feel 2) is more proper or something Wondering if I'm in the wrong for using method 1) in any way.
Your second option doesn't mix the height / width with the padding.
Nowadays browsers all follow the same box model (which is how you position in option 1). This is equivalent to having box-sizing: content-box.
Internet Explorer versions up to 6 and Quirks mode didn't and used the alternative one which included padding as part of the width, equivalent to box-sizing: border-box.
In order to correctly position for both models, using option 2 is the safest.
If you check http://jsfiddle.net/stb5a/ , box-sizing is set to content-box. Changing it to border-box doesn't change the positioning of the text;
So basically, option 2 would be used for compatibility with older versions of Internet Explorer (now pretty much gone) and by developers who use to code for these versions, using the same pattern as they've always done.
The best way would be to use the <button>
jsBin demo
<button class="button">Activate</button>
CSS:
.button{
border: 1px solid #888;
background:#eee;
padding:5px 30px;
border-radius:4px;
}
And you'll have free time to play with colors :)
I'd go with 1) . In 2) the <span> tag is semantically useless. Unless you have no other content inside the <div> dont compliate your markup.
KISS - Keep It Simple Stupid
I am trying to have a header image with a border at the top of my page above my content area but for some reason my bg image is repeating. Do you know what is causing the image to repeat? Any help is greatly appreciated!
Here is my code:
<div class="container_12">
<div class="subheader">
<img src="images/subheader_1.png" alt="Subheader" width="940px" height="240px" />
</div>
</div>
here is my CSS:
.subheader{background:url(../images/subheader_1.png);background-repeat:no-repeat; min-height:300px; width:940px}
.subheader img {border:1px solid #ccc;padding:5px;background:#efefef}
You've only specified the background attribute in your css. This is a global attribute expecting all settings defined there. To couple the background-repeat with an image you have to use background-image:
Edit:
Based on your edit and posted screen shot, it looks like you don't have a repeating image so much as you've included the image in both the background AND an image tag. You should pick one or the other, but to get it to line up right, you need to remove the padding and margin:
.subheader img {
border:1px solid #ccc;
padding:5px; <--- TAKE THIS OUT
margin: 0px; <--- ADD THIS
background:#efefef
}
So, here's my question, I'm doing a newsletter for a customer, which will look like a postalcard.
I want my layout to look like writing on lines
Can anyone help me achieve what I'm trying to do?
Putting my text in TD tags doesn't work since I don't know the length of each sentences.
Let me know if you need more info!
Thanks :)
I just ran into this issue where a client "needed" to have a notes section on a print-out with user-entered note text underlined as if on spiral-bound paper. (I've learned to stop asking why.) Why didn't I use a background image? It won't print out, so not an option.
Here's the structure (IDs for clarity):
<p id = "p">
<span id = "span1">
<span id = "span2">
sadfa sdfhkas dfjkahsd fhjklasdg f askjldfh jklas djklfh aljks hfjkl hasjdklfg hjlashdjlfgh jlkashdjkl gfhloashdfgh jkladshjkgl haskl dhfiu hajkl fghuasbhfljbahuk bfkljabwehrf bajkls bflaskdjf ljakdfk
</span>
</span>
</p>
The following styles are applied:
#p {
border-bottom: 1px solid black;
text-align: justify;
}
#span1 {
display: block;
margin-bottom: -1px;
}
#span2 {
border-bottom: 1px solid black;
}
Let's start from the inside here...
#span2 is given a bottom border in order to create the bulk of the lined-paper look. If we stop here, however, we have a problem: The lines don't extend all the way to the right margin, as has been mentioned previously. This issue we'll get to in a moment.
#span1, wrapping #span2, is 50% of the solution to this too-short line problem. I've given it a display property of block, which will allow me to apply a -1px bottom margin, effectively "covering up" the last overhanging line of #span2 with the bottom edge of #span1. The effect of this isn't worth much until we get to...
#p Here the styles we've applied to #span1 pay off. First, we have text-align: justify which takes care of most of the bottom-border lines reaching the right margin, save of course for the last line, which now looks really out of place. To take care of this, we apply border-bottom: 1px solid black to #p which -- because of the -1px bottom margin on our block-styled #span1 -- overlaps the last, short bottom border and completes the illusion.
Yes, it's sort of kludgy, but when it comes down to the wire and the client's demands can't be adjusted, sometimes a kludge is what you need.
(Note: I wouldn't expect this to work for email formatting... Like I said before, it's something I needed for mimicking that lined-paper look on a printed page.)
Unless I am mistaken, you want something like this:
http://jsfiddle.net/eB6tY/
CSS:
#postcard .line
{
width: 100%;
border-bottom: 1px solid #000;
}
HTML:
<div id="postcard">
<div class="line">Line 1</div>
<div class="line">Line 2</div>
<div class="line">Line 3</div>
</div>
in your lines that you need to underline add a style="border-bottom: 1px solid #000"(probably on your containing td)
Maybe Im missing the point but could you not do
<u> my text here </u>
assuming DIV as your relevant selector
div{text-decoration:underline}
or inline if you are emailing this...
<div style='text-decoration:underline'>
You could use a background image with the height of one line of text (plus margin-bottom) and width 1 pixel. The content will be "transparent plus a dot for the place where the line should go"...
This came up in my search so I will post my solution to my problem. I needed to underline an a tag that had padding to the end of line that; problem was the underline would start at begining of the element and not the text.
Problem:
Solution:
menu .heading a {
color: #414142 ;
}
.menu .heading a:after {
/* to get a nice underline that starts at padding-left offset */
border-bottom: 2px solid #414142;
content: '';
display: block;
position: relative;
bottom: -0.5em;
}
I just encountered a IE6 bug that I don't seem to identify over the net.
Basically this is when the behavior is triggered: a block element has border, on all sides except bottom, and top/bottom padding. and inside it there's another block element.
My entire code is to big to fit in here, but I narrowed it down to this simple example:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
<p>adasasasdas</p>
</div>
Following stuff
Now the thing that goes wrong is that the "Following stuff"'s position (whatever that is), will be altered weirdly. In this case a few pixels to the left.
To disable that weird behavior I can either keep the bottom border, get rid of the padding or make the contained element inline. But I kinda want them both. Before I have to give them up, I wanted to see if there is knowledge about this bug and if there is an alternative fix.
Thanks!
This is a pretty good fix to the bug:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
<p style="font-size:16">adasasasdas</p> 
</div>
Following stuff
Basically, there has to be some inline text at the end of the div for IE6 to render it correctly. Since the   added an extra line to the bottom, I changed the font size to 0 in the div, then back to 16 (or whatever you'd normally use) inside the <p>. This has a very minimal effect on the height of the div (about 2 pixels in all major browsers) but it shouldn't be at all noticeable to users. Alternatively, you can try altering the line-height variable to 0% in the div, then back to 100% in the p, but that seemed to change the div's height by a few more pixels than the font-size method when I tried it.
My fix would be
<div style="border: 5px solid red; padding: 5px; padding-bottom:4px; border-bottom: 1px solid white;">
<p>adasasasdas</p>
</div>
Following stuff
but that may not be applicable for you depending on the context
This may help you
<div style="border-left: 5px solid red; border-top: 5px solid red; padding: 0px;">
<p style="margin:0px; padding:10px;">adasasasdas</p>
</div>
Following stuff
If you want padding adjust padding in <p> tag
Hey, I know this is old, but I also just spent several hours fighting with this bug (and in fact it took me this long to figure out that it was because of border-bottom + padding-bottom...which is a shame because if I knew what to search for I would've found this much sooner).
Anyway it suddenly occurred to me that this is yet another manifestation of the hasLayout issue in ie6. For my purposes, adding "zoom:1" to the offending divs suddenly and magically fixed it, which has the benefit of not fussing with font sizes and line heights and such.
I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200px in the div with the outerdiv id as I want it to be automatically the height of its content (eg, the floating divs).
<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width=300px;border: red 1px dashed;float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
How to achieve this?
You can set the outerdiv's CSS to this
#outerdiv {
overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}
You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).
The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.
You can also try floating the parent container, but depending on your design, this may be impossible/difficult.
Firstly, I highly recommend you do your CSS styling in an external CSS file, rather than doing it inline. It's much easier to maintain and can be more reusable using classes.
Working off Alex's answer (& Garret's clearfix) of "adding an element at the end with clear: both", you can do it like so:
<div id='outerdiv' style='border: 1px solid black; background-color: black;'>
<div style='width: 300px; border: red 1px dashed; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width: 300px; border: red 1px dashed; float: right;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
<div style='clear:both;'></div>
</div>
This works (but as you can see inline CSS isn't so pretty).
You may want to try self-closing floats, as detailed on http://www.sitepoint.com/simple-clearing-of-floats/
So perhaps try either overflow: auto (usually works), or overflow: hidden, as alex said.
I know some people will hate me, but I've found display:table-cell to help in this cases.
It is really cleaner.
First of all you don't use width=300px that's an attribute setting for the tag not CSS, use width: 300px; instead.
I would suggest applying the clearfix technique on the #outerdiv. Clearfix is a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs.
<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
<div style='width:300px; float: left;'>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width:300px; float: left;'>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>
Here is an example of your situation and what Clearfix does to resolve it.
Use jQuery:
Set Parent Height = Child offsetHeight.
$(document).ready(function() {
$(parent).css("height", $(child).attr("offsetHeight"));
}
Add a new, empty div just before the closing tag of the parent with this style: clear: both;. Like this: <div style="clear:both"></div>.
I spent over a week trying to figure this out!