Not sure if this is possible, but I have a div with a "border" background. Inside this div is another div that holds the content, and I want this div to appear under the border.
Is this possible to do with CSS?
Edit: Sorry for writing it in a hurry, let me try to explain more.
The parent div uses background-image like so:
background-image: url(images/SomeImage.png)
SomeImage.png is just a custom border that appears at the top of the div.
I have a child div inside this parent div, and I want it to appear beneath SomeImage.png. Is this possible?
Do something like this:
HTML
<div id="border-bg">
<div id="content">
Your content goes here
</div>
</div>
CSS
#border-bg {
background:url(images/border.png) no-repeat;
z-index:100;
position:relative;
}
#border {
z-index:10;
position:relative;
}
Make sure to add the width and height of border image.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Check this for more info about z-index
it is possiple. try changing the opacity of the parent div.
for example
$("#childdiv").css({ opacity: 1.0 });
$("#parentdiv").css({ opacity: 0.75 });
I think you want to apply inner shadow http://sublimeorange.com/css/css3-inner-shadow/ on the content div?
<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white">
this is some great text
</div>
</div>
http://jsfiddle.net/gzbVG/
I ended up putting the "background image" in another div and using negative margins. Sorry for the confusion but none of the other solutions worked for me.
Just throwing this out there...
I'm using this to put a background image behind a login screen...
<table align=center width=100% border=0 cellpadding=0 cellspacing=0 background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
<tr>
<td align=center valign=middle height="350" background="images/loginimage.png" STYLE="background-repeat: no-repeat; background-position:center">
Content Here
</td>
</tr>
</table>
Related
Currently have a oj-panel with another oj-panel inside but I want that, the second one to have the background color covered till the border of the first one... current state of project
Current code:
<div class="oj-panel" style="border-style: solid; border-color: lightgrey;">
<div class="oj-panel" style="background-color: lightgrey">
<span data-bind="text: oj.Translations.getTranslatedString('application.name')"/>
</div>
example of what I want to implement
Is the oj-panel the best way to go? If so, how can I have the background covered til the borders?
Remove the padding from the parent div, margins on your child div and use width: 100% on your child div.
Try:
.oj-panel {
padding: 0;
margin: 0;
width: 100%;
}
Just get rid of the inner div and put the background color on the outer div.
I’m curious why you don’t just use alt-1 though
http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=panel&demo=panelcolors
<div class="oj-panel oj-panel-alt1">
<span data-bind="text: oj.Translations.getTranslatedString('application.name')"/>
</div>
So there's this image in my code and with following code it is centered correctly horizontally,
img#headerImage{
width: 600px;
margin-left:auto !important;
margin-right:auto !important;
}
but when I add margin-left:-300px; the image is resized appropriately but it is slightly offset to the left and no longer exactly centered.
Any ideas?
Also, here's some of the HTML:
<tr>
<td class="headerContent" id="logoContainer">
<img src="url" style="max-width:600px;"
id="headerImage" mc:label="header_image" mc:edit="header_image"
mc:allowdesigner="" mc:allowtext="" />
</td>
</tr>
You could better still use margin:0px auto;
add display: block to your img css
When you say margin-left:-300px you are saying you want the picture moved 300px to the left. With a right margin set to auto it will of course be offset left. If you want to make it center and then move it over just slightly then I recommend reading up on this answer here: Offset div from center
Also you will want to add
display:block;
Im wanting to align 3 divs together, but i want the left div to stretch 100% left, the right 100% right with the middle div having a fixed width.
Basically I'm trying to create a header for my website with the logo in the middle and the background seemingly stretching out forever but the logo has transparency so I can't just overlay one ontop of the other.
I have done this using tabels at the moment like below but wondered if there was a better (css) way of doing it?
The Real issue being that the background of the logo in the center of the banner needs to be transparent so i cant have any overlapping divs?
Here is my example done using the following method but would prefer to use CSS if possible?
LINK: example
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
<th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
</tr>
</table>
I don't know if this method will work for what you are trying to achieve, but you can horizontaly center the image and then apply a background color, so it will cover the background image. You shouldn't be using empty elements, they are semantically incorrect. It's up to you though.
Take a look at this codepen.
This should work for you:
<style type="text/css>
#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}
#left, #headerpattern_left, #rightsticky{
left:0px;
}
#right, #headerpattern_right, #leftsticky,{
right:0px;
}
#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}
#leftsticky, #rightsticky{
position:absolute;
}
#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}
</style>
<body>
<div>
<div id="left">
<div id="headerpattern_left">
</div>
<div id="leftsticky>
<img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
</div>
</div>
<div id="right">
<div id="headerpattern_right">
</div>
<div id="rightsticky>
<img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
</div>
</div>
<div id="logo">
</div>
</div>
</body>
EDIT: new suggestion
Off the top of my head, you could create two divs within each of the left and right divs and create a jpeg of how the pattern should look 100px either side of the logo and have them stick right next to the logo, then use the same repeating background on the divs next to the jpegs.
This should work in most cases, but in a few instances it will not look perfect, such as if the webpage is viewed on a gigantic screen or zoomed out quite far. Also, I'm not sure how it will look on mobile devices.
<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div>
This doesn't work.
Whats the problem with the style of the div? i'm sure the syntax is wrong.
"center" is not a style. You're probably looking for text-align: center.
Images are self-closing like the line-break. You don't use </img>.
You have a spare closing </div> at the end of the line. One of them needs removed, I'm not sure which spot you want it in.
<div id="logo" style="text-align: center"><img src="logo1.png"></div><br><br><br><br><br><br><br>
you cannot define style in div like that instead you can define the div property in css and call the class or id of the css.
Best way to center a element is probably to specify its width and put the side margin to auto:
If for example your logo1.png is 570px wide, you would do something like this in the css
#logo{
margin:0px;
margin-left:auto;
margin-right:auto;
width:570px;
}
Try this. You have to set the width of a div as shown below in order for it to work. To specify that the text inside the div is centered, simply apply style="text-align: center"
<div id="logo" style="margin-left: auto; margin-right: auto; width: 500px; border: 1px solid #ff0000">Your content here....</div>
Note: set 500px width to your desired width. Also, remove border: directive. I just added that so you could see the DIV was centered.
fiddle
I have a problem with headline tags when I float them around an image in compability-mode in explorer.
<img src="1.gif" style="float: left; margin-right: 10px"><h1>Some headline</h1>
The picture is like 100px high, and by default the text centers in middle, which it should, but with compability-mode on it aligns top.
How can I fix so it vertically aligns center?
/Molgan
Is there a specific need to float the H1 tag next to the image? Another alternative would be to assign the image as a background to the H1 tag, and then use css background-position and padding to position your text and image to display correctly. Can you provide your html markup or a link to the page?
h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }
That would put your image as the background of the H1, and position it 10px from the left and 15px from the top, for example.
Why float the image? Save yourself some time and put the image in the headline tag, and then you can use vertical align to position it.
JsFiddle solution
Works cross-browser as far as I can check.
It's not "pure CSS", but it is "IE-proof"!
<table>
<tr>
<td style="margin-right: 10px">
<img src="1.gif">
</td>
<td valign="middle">
<h1>Some headline</h1>
</td>
</tr>
</table>