Have a border, bgr_left.jpg, that I want to continue down the y-axel on my page...
the bgr_left.jpg is 30px by 30px and I have placed it in a div tag... Also I want the same border on the right side, and on the top all the way across...
I cant get this done, heres my css for the left border:
.bgr_left {
background-image: url(../Graphics/bgr_left.jpg);
background-repeat: repeat-y;
background-position: left;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 30px;
background-color: #E7F5F0;
}
Thanks for all help
You can do this using a table or by dynamically sizing a div.
Table method
Although something like this should fine in a web browser, search engines and other computer consumers might misinterpret it because you using the table tag to markup non-tabular content.
<table>
<tr>
<td colspan="3" class="bgr_top"/>
</tr>
<tr>
<td class="bgr_left" />
<td>Content content content</td>
<td class="bgr_bottom" />
</tr>
<tr>
<td colspan="3" class="bgr_bottom"/>
</tr>
</table>
Dynamic div
With the help of jQuery, we can emit semantically correct HTML but also create the desired rendering in web browsers. Untested sample:
<p class="bgr">Content content content</p>
<script type="text/javascript">
$('.bgr').each(function(i,el){
$('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this));
// similar for top, right, and bottom
});
</script>
Related
We're trying to make an HTML newsletter with an image background of a scroll (something like http://images.clipartpanda.com/blank-scroll-clip-art-ancient-parchment-scroll-Download-Royalty-free-Vector-File-EPS-2942.jpg), and would like to have the ability to place text in specific areas of it. Ideally, we'd like to be able to easily place text in the top area (the rolled up section), in the middle, or at the bottom (again, in the rolled up section).
What's the best way to do this? We were experimenting with using the image as a background to a table, and using table cells to try to line up with the image areas, but struggled to get this to work.
Should we be trying to split the image into three separate images (top, middle, bottom) and using these as backgrounds for a table with three rows, or is that likely to not work well?
Apologies for our ignorance. Our HTML skills aren't really there; we just want a simple layout that we can use for newsletters.
EDIT: Here's what we're currently trying:
<html>
<head>
</head>
<body>
<table style="height: 600px; width: 600px; background-image: url(http://cliparts.co/cliparts/qiB/orL/qiBorL8gT.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-origin: content-box">
<tbody>
<tr>
<td class="">
<table style="height: 500px; width: 400px; margin: auto;">
<tbody>
<tr style="height: 100px;">
<td>This is some text in the top area</td>
</tr>
<tr style="height: 400px;">
<td>This is the main text</td>
</tr>
<tr style="height: 100px;">
<td>This is some text in the bottom area</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
I appreciate that this might be the wrong approach these days, though; what would be a better approach? Is this really outdated now?
First, I'm new to mobile development, so apologies in advance for what might be a simple question. But I've researched this for a couple of days and just can't seem to get it to work.
I can't get a particular DIV to render at the appropriate height when I switch to a mobile view. All the other divs work fine in both desktop and mobile. The div in question looks fine in the desktop view but not in mobile.
Here's a link to the page: http://echoflyfishing.com/2016
The div in question is the "DOUBLE HAND". I want it the same height as the "SINGLE HAND" above it. No matter what I do, I can't get it to size correctly. I know there's a simple solution but I've tried everything I can think of in terms of height and am stumped.
Here's the relevant HTML:
<div class="sh_container_m">
<table cellpadding="0" cellspacing="0" class="sh_container_table_m">
<tr>
<td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
</tr>
</table>
<div class="sh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the single hand image carousel will be</td>
</tr>
</table>
<div class="dh_container_m">
<table cellpadding="0" cellspacing="0" class="dh_container_table_m">
<tr>
<td style="font-size: 3.5vw;"><p>Double Hand</p></td>
</tr>
</table>
<div class="dh_images_container_m">
<table cellpadding="0" cellspacing="0">
<tr>
<td>This is where the double hand image carousel will be</td>
</tr>
</table>
</div>
</div>
</div>
</div>
And the CSS:
.dh_container_m
{
display: block;
visibility: hidden;
margin: 0 auto;
width: 100vw;
text-align: center;
}
.dh_container_table_m
{
margin: 0 auto;
width: 100vw;
border: none;
background-color: #fbaa27 !important;
}
Did you mean for your dh_images_container_m div to be nested inside the sh_images_container_m div? It is going to take on it's "parents" properties which may also be contributing to some of your sizing issues.
On a side note, you have your links to the css files in the header as type="text". They should be type="css/text".
use px not vw because it's percentage and define the width of both divs as you want simple one more suggestion is use bootstrap css framework it's better for you you can make responsive site easily with the help of it.
Here is the code:
<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
<tr>
<td>
<div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
</td>
</tr>
</tbody>
</table>
Now, I am i need to increase the width of the image OR need to left-indent the image.
How can I do that ?
I have tried giving the width directly.. But it's not working...
Any advice or suggestion will be thankful and grateful..
You are using image as background of the parent div. If you want to just change the size of image you should use img tag. Something like the example below
<table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
<tr>
<td>
<div >
<img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&d=identicon&r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
</td>
</tr>
</tbody>
</table>
You could use the CSS3 background-size property.
.myelement {
background-size: 275px 125px; /* input your values here */
}
Alternatively you could make yourimage inline instead of being the background of a DIV and size it using regular width and height that way.
A couple of points about the code you have posted:
Tables should only be used to display tabular data and not for simple layour purposes.
You have no closing DIV tag.
I am currently working on a personal website which will contain pictures. I wanted to create a frame for those pictrues, so I sliced a photo of the frame into pieces and made each piece a div, since I want a certain part of the frame pic to stretch but not the edges, e.g. Here's my table:
<table>
<tr>
<td height="93px" width="93px"><div id="photo_corner_topleft"></div></td>
<td height="93px"><div id="photo_beggining_top"></div><div id="photo_side_top"></div><div id="photo_ending_top"></div></td>
<td height="93px" width="93px"><div id="photo_corner_topright"></div></td>
</tr>
<tr>
<td width="93px"><div id="photo_beggining_left"></div><div id="photo_side_left"></div><div id="photo_ending_left"></div></td>
<td>
<div id="photo_content" align="center">
<!-- HERE goes the photo. -->
</div>
</td>
<td width="93px"><div id="photo_beggining_right"></div><div id="photo_side_right"></div> <div id="photo_ending_right"></div></td>
</tr>
<tr>
<td height="93px" width="93px"><div id="photo_corner_bottomleft"></div></td>
<td><div id="photo_beggining_bottom"></div><div id="photo_side_bottom"></div><div id="photo_ending_bottom"></div></td>
<td height="93px" width="93px"><div id="photo_corner_bottomright"></div></td>
</tr>
</table>
So, I want the divs "photo_side_whatever" to be as long as possible without pushing the "ending" and "beggining" divs out. I have checked other questions but I still haven't managed to make it. Here is my div:
#photo_side_left {
min-height: 224px;
width: 93px;
height: auto;
background-image: url(img/dynamic_frame/frame_09.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Insert this at the beginning of your div. Is this live anywhere so I can better understand your question?
position:absolute;
There's no way to do it that will work in all browsers (the CSS3 background-size property should be able to do it, but AFAIK it's not fully supported yet). The easiest thing to do, I'd have thought, would be to set the background image within the <td>s to be a small slice (by which I mean about 1-2px on its shortest side) of the frame, set to repeat.
Something like:
#photo_side_left {
background-image: url('img/dynamic_frame/frameslice.png');
background-repeat:repeat-y;
min-height: 224px;
width: 93px;
height: auto;
background-position: center;
background-repeat: no-repeat;
}
EDIT: Apply that to the <td>, rather than bothering with <div>s. The td will always be the right size ^^
I need to create a chat layout that uses all the available space and scales nicely, but has few fixed sizes.
Here's the structure:
<table style="width: 100%; height: 100%">
<tr>
<td></td>
<td style="width: 200px; background: red;"></td>
</tr>
<tr>
<td style="height: 100px; background: blue"></td>
<td></td>
</tr>
</table>
However, I want to place a lot of content in the first table cell and I want it to scroll, so it won't expand the table.
Is it possible to make it overflow properly, without having a fixed height for the cell? Simply adding overflow: auto doesn't seem to work.
PS. I hate tables, but can't figure out a very clean and cross-browser way to do a layout like this with divs and css. If someone can come up with one, I'll gladly use it.
One way to achieve is use put all content in div element and set div overflow property to auto
<table style="width: 100%; height: 100%">
<tr>
<td>
<div style="overflow:auto;">
//your contain
</div>
</td>
<td style="width: 200px; background: red;"></td>
</tr>
<tr>
<td style="height: 100px; background: blue"></td>
<td></td>
</tr>
</table>
An alternative if your content shouldn't actually even be in a table is to use a CSS grid system, such as 960.gs or Nicole Sullivan's "OO-CSS".
You'd want to divide a container into however many grids you needed and these lend themselves much better to CSS decoration. They're much more flexible and simple to use.