|
HTML - Auto Size Border Around Positioned Content
Hi!
On a page I'm trying to accomplish the following: A border with a static width surrounding positioned elements (divs). Each element can vary in height and holds text, tables, images, etc. Problem: Is there any way to dynamically adjust the border height to the content? I don't want to use scripting. I have tried using a div with auto height, but it does not adjust to inner divs. I have tried using a table cell containing divs, breaks as soon as divs are positioned. Please help! See simplified example below. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>HTML</title> <style> .borderdiv{ position:relative; width:628px; margin-left: auto; margin-right: auto; background-color:white; height:300px; border-color:#CA3182; border-style:solid; border-width:1px; background-color:#EDFBFD; } .pinkdiv{ position:absolute; width:628px; height:64px; border:none; background-color:#F8D7DA; } .div1{ position:absolute; width:292px; height:29px; top:24px; left:10px; border-width: 1px; border-style: solid; } .div2{ position:absolute; width:200px; height:49px; top:10px; right:11px; text-align:right; border-width: 1px; border-style: solid; } .div3{ position:absolute; width:193px; height:200px; top:175px; right:23px; background-color:#EDFBFD; border-width: 1px; border-style: solid; } </style> </head> <body> <div class="borderdiv"> <div class="pinkdiv"></div> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3"> <table border="1"> <tr> <td><strong>Table</strong></td> <td><b>Dynamic text.</b><br>Amount of text may change here.<br><br>Pink outer border (borderdiv) should adjust to the content in this table!!!</td> </tr> </table> div3 </div> </div> </body> </html> Similar TutorialsAll: Working to update a previously designed website. Original design uses an <img> tag to create a top banner and another <img> tag to create a side banner. In each case there are mapped coordinates on each banner as links for the subsequent pages. Basic page design is as follows: Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td>
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<div>
***PAGE CONTENT***
</div>
<tr>
<table>
The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages to be much longer or shorter than others. This causes some inconsistencey in the relationship between the side banners height and the page content. In other words in some cases the banner is exceptionally longer than the page content and the reader must scroll past significant "dead-space" before being brought to the lowest mapped links in the side banner; or... ...in some cases the side banner is significantly shorter than the page content causing the banner image to appear "poorly-fit" to the page design. I considered altering the 2nd table instance in the above design so that the banner is carried in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the image to size relative to the <td> tag carring the content.... Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td size="100%">
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<td size="100%" >
<table>
***PAGE CONTENT***
</table>
</td>
<tr>
<table>
The problem I've found with this is that as the content size causes the image to "flex", either readablilty or image quality or both are effected, AND the mappings become inconsistent as the image coordinates constantly change. I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there are better ideas I'm overlooking. One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a "defalut" page size that would never be smaller than a standard for the side banner. Problem: larger page sizes are still a problem as are the changing map coordinates My other idea was to return to the original page design listed first above and again settle on a standard side banner "height"... ...any page that was significantly longer than that height would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to the additional content. Problem: ...possible complications splitting content... Benefit: ...consistent page design that allows a consistent side banner with navigable links... Question for the group: Does this sound reasonable? Are there better alternatives I am overlooking? THANKS IN ADVANCE FOR ALL INPUT!! Hello, This is gonna be difficult for me to explain, but here we go. I am wondering how I create a page that automatically (as far as possible) re sizes when you make the window bigger and smaller. So that the use of scrollbar is minimal. Do you understand what I am trying to say? Kind of floating in a way. I am using dreamweaver and am gonna code this site in xhtml strict (right choice?). Have a nice day, helen Hello, I'd like to know if there's a way to 'force' a website to be viewed in a certain resolution. My site was designed for 1024x768 at home. Externally the office computers I tested it on are set to 1280x1024, and the site looks far too small. Is there html or script that would auto size it to 1024x768 without the user changing monitor resolution? Here's the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>www.testing.com</title>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-color:#000;
}
#vertical {
float:left;
width:100%;
height:50%;
margin-top:-329px;
}
#container {
clear:both;
width:933px;
height:658px;
margin:auto;
}
#container img {
display:block;
width:933px;
height:658px;
border:0;
}
</style>
</head>
<body>
<div id="vertical"></div>
<div id="container">
<img src="comet3.jpg" width="933" usemap="#map" alt="comet3">
<map name="map" id="map">
<area shape="circle" coords="885,123,9" href="comet2.html" alt="">
<area shape="circle" coords="916,124,9" href="comet4.html" alt="">
<area shape="rect" coords="785,71,904,103" href="contact.html" alt="">
<area shape="rect" coords="665,70,756,109" href="about.html" alt="">
<area shape="rect" coords="371,73,462,112" href="index.html" alt="">
<area shape="rect" coords="499,70,632,111" href="portfolio.html" alt="">
<area shape="poly" coords="891,118" href="#" alt="">
</map>
</div>
</body>
</html>
Thanks to anyone who can help with this! Cheers J Hihi.. On my web, i have decided to put up a series of photos running downwards along the left.. This is the series of htmls i used. <div style="position: absolute; top: 260px; left: 60px; z-index: 5;"> <img src="http://xs205.xs.to/xs205/06343/1.PNG"> </div> <div style="position: absolute; top: 348px; left: 60px; z-index: 5;"> <img src="http://xs205.xs.to/xs205/06343/2.PNG"> </div> <div style="position: absolute; top: 433px; left: 60px; z-index: 5;"> <img src="http://xs205.xs.to/xs205/06343/3.PNG"> </div> However, when i change a picture, it gets posted as its original size.. Is there any way i can create a "frame" in which my photos, once posted, will be auto sized into the frame? Also, whenever i put my cursor over a weblink... its shifts to the left! and I wont be able to read the first 2 letters... =/ How do i solve this? Thanx so much for any of the help given.. Hi, i was making a site but i ran into a prb, i.e when i make the site at my current res (1440x990) and upload it my users complian that the site looks wierd, is there someway i can fix this prb? thnx.. Hi There, our site content is 720 pixels wide. When the user clicks ona button, it opens a new HTML window that is 720 pixels wide. Good. This first page is long, so there are scroll bars (both horz and vertical) But when the user clicks on the next page, which only has a little content, the scroll bars are gone, but the window width size stays the same, and you see a 10-pixel strip of background hanging on to the right side (where the vert scroll bar was on the previous page) So my question is: When you click to go to a new HTML page... can you also tell the window to "fit to content" or something like that? see what I'm saying: start he http://www.studio209.com/stumptown_e...own_store.html click on "Blank Packaging" Then click on "View cart" Thanks!! Hi all! I need some help with an IFRAME, which content is loaded with some strange borders in Opera and IE6, but not with Firefox. This is what it happens in the 3 browsers: This is the code of the page: Code: <html> <body bgcolor="#96c600"> <iframe style="background-color:#96c600;" scrolling="no" frameborder="0" height="190" width="170" id="meteo" src="http://www.meteodirect.com/vignette/md_vignette.php?params_meteo=terrestre&langue=fr&fond=000000&texte=FFFFFF&saisie_met eo=TENDE"></iframe> </body> </html> A test page to give example is online at: http://testroya.100webspace.net/test.html I already tried to: - Set the width and heigt of IFRAME to match exactly the content size. - Set a green background to IFRAME - Set a green background to the table containing the IFRAME Anyway white borders are always here in Opera and IE6, but not in FF! What should I do to get rid of this awful borders? Thank you very much Hello everyone, I am in deep trouble... :-( ... For some reason Safari does not adapt the table height to the content size. All other browsers automatically adapt the table height to the content size, but Safari doesn't, and the result of the website I am developing, when seen on Safari, is a mess... Can someone tell me how to make Safari adapt automatically adapt table height to content size? Thank you very much in advance and anyway... Cheers, John Helllo all, I'm hoping someone with more HTML skills than I have can see where my problem is with trying to modify a pre-built website. I have an area at the top of my webpage where I'm trying to just add a small iframe that will contain a link to a related website. What happened when I added this in what I thought was the right place, is that it appeared in place of where other content was supposed to be. I then tried to contain the problem by creating a table, and given that each of the two existing pieces of content were in div blocks, I put each div block within a table data element (td). Unfortunately, even with specified column widths, the best of the results I've achieved results in my site search content having the button get pushed onto a new line and thus almost invisible, leaving the text input box in place. It's as if the PHP stuff in that div block is somehow pushing the browser to considerably widen the first cell unless I restrict it's width. The site you can see this on is: http://debtfreenewsblog.com The site is somewhat slow - takes 30 to 45 seconds to load (a separate issue, but if you happen to see why, let me know), but once it does, you can use view source and see the very first table and you'll see the resulting HTML. Dreamweaver's design view doesn't do anything to indicate why there's a problem, and kind of hides reality from me. There is a style sheet, or perhaps even more than one, for the site, and as I'm not familiar with exactly how that works together with everything else, that may well be where the problem is. Any and all help will be appreciated. My objective is to just get the search button to come back to the same line as the text input box. Steve (aka sgmunson) hello, I'm an HTML novice who designed/maintains my own site without any expertise at all. One problem I can't seem to figure out: When the browser window is sized more narrowly than the content on the page, the table sections get shoved down underneath one another. Most sites I see don't do that -- when the browser window narrows, the site content stays in place. Any insight about what my error is? You can check out the problem at www.adamgwon.com. Thanks much. i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame now this 1.htm is quite a long frame and has a scrollbar and 2.htm is a short one i dont the scroll bar beside my frame 1 but want it to be for my entire parent window ie i wont to scroll both my left and right frames together how do i do that Hi! I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window. How can I make it do that? I did it once but just can't seem to remember how I did it. Thanks Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. I am trying to make some code (see attachment) to look exactly like this page http://www.ultrapurecleanse.com/index.php. The attached code is the same as the source code of the URL, but it is not coming out the same in my html editor. There must be a way. For example, I am having difficulty getting the header to show up and the 5 bullet points on the top left to appear right on top of the big gray arrow as they should. Any help is really appreciated. Andrew Hi, I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc). Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck. CSS code: Code: /*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/
body
{
background: #000000;
color: white;
}
div#site
{
display: block;
color: #000000;
margin-top: -10px;
}
/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */
#header
{
background: url(images/header2.gif);
width: 865px;
height: 143px;
}
/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/
#header .text
{
position:relative;
top:42px;
left:322px;
word-spacing: 24px;
font-size: large;
}
/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/
div#navbar2 {
width: 70%;
border-top: solid #000 0px;
border-bottom: solid #000 0px;
background-image: url(images/button.gif);
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/
div#navbar2 li a {
text-decoration: none;
margin: 20px;
padding: 7px 15px;
color: #FFFFFF;
}
div#navbar2 li a:visited {
color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/
}
div#navbar2 li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/
}
/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/
#content
{
background: url(images/content.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
#content_nobars
{
background: url(images/content_nobars.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/
#content .title
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:215px;
width:500px;
height:18px;
overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
/*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}
#content .text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 255px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title2
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:375px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text2
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 415px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title3
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:541px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text3
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 580px;
width:500px;
height:80px;
overflow:hidden;
}
#content .read_more
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 168px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more2
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 318px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more3
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 468px;
width:100px;
height:16px;
overflow:hidden;
}
#content_nobars .about_us_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 425px;
width:550px;
height:250px;
overflow:auto;
}
#content_nobars .other_title
{
color: #000000;
font-size:24px;
text-decoration:underline;
position:absolute;
text-align:center;
left:510px;
top:200px;
width:500px;
height:30px;
overflow:hidden;
}
#content_nobars .other_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 250px;
width:550px;
height:432px;
overflow:auto;
}
#content_nobars .about_us_picture
{
background: url(images/1.jpg);
width: 290px;
height: 175px;
position:relative;
left:130px;
top:50px;
}
/*The footer code defines the location of the footer image, and the size of it.*/
#footer
{
background: url(images/footer.gif);
width: 870px;
height: 105px;
}
/*These 2 commands keep URL links coloured black, before and after they have been visited.*/
a:link { color:black }
a:visited { color:black }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file which will be used to create the layout and look of the website.--> <head> <title>Pampered Pooches Grooming</title> <link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css"> </head> <!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.--> <body> <div id="site"> <div id="header"> </div> <div id="navbar2"> <ul> <!--This code creates a list of the navigational links to other pages of the website--> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html ">About Us</a></li> <li><a href="services.html ">Services</a></li> <li><a href="theparlour.html ">The Parlour</a></li> <li><a href="dogofthemonth.html ">Dog of the Month</a></li> <li><a href="contactus.html ">Contact Us</a></li> </ul> </div> <div id="content"> <!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.--> <div id="footer"> </div> </div> </body> </html> Thanks for any help. I have a painting company and just recently took on the task of learning a little web design in order to try creating my own site. I initially thought I could just learn a little html and be off and working. After months and months of free time I'm still having trouble with something that to me should be basic... it probably is... the positioning of my elements. I've completed the home page and have trouble with the position of nearly all my elements changing when the browser window is resized. The function of my page is dependent on these elements staying put. There are a couple elements that do stay put when the window is resized, which really throws me for a loop because as far as I can tell they are all positioned the same (css absolute). I designed the site using mozilla firefox, and this positioning problem seems so particular that even when another tab is opened the position of elements change (certain images). I don't see this happening in any other sites similar to mine, and is really nerve racking. Feel free to take a look at the code. To see the problem just resize the window to anything other than maximized. Making it even smaller will accentuate the problematic effects. Any suggestions are welcome, not on just the said problem, but anything about the site in general. The link is jduffpainting.com Thanks, and I hope this isn't something for the css forum! Thanks guys for your help with earlier problem. I have another site, with another problem that if you could help me with I will be so happy! http://www.debmehrtens.site90.com/ For some reason, I can not seem to reposition the menu drop down boxes to sit under the menu bar. I've tried all sorts of things and they just don't seem to move. The code I have used is - <div class="menu"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="index.html" class="active">HOME</a> </li> <li><a href="#" class="MenuBarItemSubmenu">CLUB INFO</a> <ul> <li><a href="#">Membership</a></li> <li><a href="#">Officers</a></li> <li><a href="history.html" title="MSLSC History">History</a></li> <li><a href="#">Life Members</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">LIFESAVING</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Patrol Times</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Roster</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Training Calendar</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">NIPPERS</a> <ul> <li><a href="#">General Info</a></li> <li><a href="#">Child Protection</a></li> <li><a href="#">Contact Details</a></li> <li><a href="#">Newsletter</a></li> <li><a href="#">Handbook</a></li> <li><a href="#">Nipper Calendar</a></li> <li><a href="#">Carnival Calendar</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">SURFSPORTS</a> <ul> <li><a href="#">Carnival Calendar</a></li> </ul> </li> <li><a href="#">FORMS</a></li> <li><a href="MARCOOLA SURF LIFE SAVING GALLERY/index.html">GALLERY</a></li> <li><a href="contact.html" title="Contact Us">CONTACT US</a></li> </ul> </div> <div class="clr"></div> <div class="clr"></div> </div> I don't intend to leave the background transparent, was just trying something different, but if anyone can help get the positioning right for the drop downs, that would be fantastic! Thanks Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. Hi Guys, Does any body know where in html you can change auto-formatting on or off Because previsouly i had turned it on and when i press ctrl + a then ctrl + X and then repaste the code HMTL would automatically format it.... This would be really handy if some one can tell me please... Thanks. |
|||||||