|
CSS - Positioning Things Inside A Div
I am honestly trying to do this thing with CSS but CSS does not seem rational.
I had some nested div elements now I thought that position relative was with respect to the parent. So if I put position: relative; left:100px; top: 8px on the red one it will be close to the top of the parent (the blue one) and 100 px over from the left. Then if I do the green div the same except top: 22px it will be right below the red one. I know divs make a new line but they were skipping a line. So I turned them into spans. now it starts the second one at the right place top to bottom, but left to right it starts where the last one left off. And now here's an even harder question, I guess without using zindex they won't overlay, right? and centering is just out of the question... Code: <div>
<div> </div>
<div> </div>
</div>
Here is some sample actual code: http://www.colleenweb.com/onetix.html It doesnt have all the normal styles but it shows the problem very clearly. If you look at the code it should be pretty clear what I intended. Please tell me why the position specifications are being ignored. And problems are compounded when you try to print it, it makes the graphic background bigger and cuts it off. If you just print the graphic it is fine. I gave up with the transparent for now because this has to work tomorrow, and just made a hard coded blue one but eventually I'd like to address that too. I need to be able to make these look acceptable both for screen and print. I never had these problems when I did everything with tables. This is why people don't learn CSS. Similar TutorialsWell I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it: http://www.iqdrop.com/newiq/index.php Then in IE You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE. I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help. This is the first website I'm trying to make compatible with all browers so I'm running into a few new things. Positioning a div inside another div: I usually use margins to position the second div where I want it, but I noticed this doesnt work in firefox, safari, opera, etc. Only IE. Which I know IE is the problem not the other browsers. I did switch to padding rather than margins and it got the desired effect across all browsers. Is padding the right way to go? Just want to make sure before I keep going forward with it. Thanks. How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected. i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div. The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div. Code: <div id="adult"> <?php echo "<ul><li>test1</li></ul>"; ?> </div> <div id="qanda"> <?php echo " <div id='questions'> <ul id='questionsul'> <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li> </ul> </div> <div id='answers'> <ul id='answersul'> <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li> </ul> </div> "; ?> </div> <div id="amount""> <?php echo "<ul><li>test3</li></ul>";; ?> </div> <div id="results"> <?php echo "<ul><li>test4</li></ul>"; ?> </div> <div id="contributing"> <?php echo "<ul><li>test5</li></ul>"; ?> </div> <div id="advert"> <?php echo "<ul><li>test6</li></ul>"; ?> </div> </div></div> CSS Code:
#questions{
position:relative;
top:0px;
text-align:left;
}
#answers{
position:relative;
top:0px;
text-align:right;
}
#adult{
width:700px;
margin:0 auto;
}
#qanda {
width:700px;
margin:0 auto;
}
#amount {
width:700px;
margin:0 auto;
}
#results {
width:700px;
margin:0 auto;
}
#contributing {
width:700px;
margin:0 auto;
}
#advert {
width:700px;
margin:0 auto;
}
Hello, thanks for taking the time to read my post. I'm having a problem getting my divs to layout where I want them to. Here is the worst example:here Obviously, the footer is not in the traditional location. This seems the most logical for the code, the footer is at the bottom of the main div. I thought it would get pushed down by all the other stuff in the main div... This works ok: this But if the content for that page is short, it's going to do this: here This only works for very short content, nesting it in with the menu: here I am able to position it horizontally depending on which div I nest it in. It seems to me that I should have the footer div at the end of the 'main' div so that it winds up at the bottom. thanks for your time, juglesh Hi there, I would like to know from css veterans when and why are tables needed inside a web layout built mainly by css. If they are at all. Best regards, - Dehumanizer In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done? You can see the code in action HERE. Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
#div1, #div2, #div3, #div4
{
padding: 10px;
margin: 0 auto;
overflow: auto;
display: none;
border 1px;
}
fieldset
{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
//]]>
</script>
</head>
<body onload="change('div1');">
<h1>Switch Divs</h1>
<form method="post" action="">
<fieldset>
<legend>This is my form</legend>
<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
<div id="div1">
<input class="input-box" type="text" name="search_name">
</div>
<div id="div2">
<input class="input-box" type="text" name="search_city">
</div>
<div id="div3">
<select name="search_state" size="1">
</select>
</div>
<div id="div4">
<input class="input-box" type="text" name="search_zip">
</div>
<div><input type="submit"></div>
</fieldset>
</form>
<p>Some Content</p>
<table border="1" width="100%">
<tr>
<td>Some other Content</td>
</tr>
</table>
</body>
</html>
Ok here's my problem - I have three columns/layers (left, center, right) which are inside the content layer. I need to use relative positioning so when the page is re-sized all the page elements are still centered on the page. The problem I am having is that I cannot figure out a way for the colums to be aligned and seem to go under one another. I also need to keep the center colum with an overflow. If anyone has any ideas I would be very grateful! Thanks <div id="content"> <div id="leftcolumn"></div> <div id="centercolumn"></div> <div id="rightcolumn"></div> <!-- End content --> </div> #leftcolumn { background-image: url(images/leftcolumn.gif); height: 412px; width: 148px; position: relative; margin-top: 0px; margin-left: 4px; } #centercolumn { background-color:#FFFFFF; height: 412px; width: 382px; position: relative; margin-top: 0px; margin-left: 3px; overflow: auto; text-indent: 2px; } #rightcolumn { background-image:url(images/rightcolumn.gif); height: 412px; width: 148px; position: relative; margin-top: 0px; margin-left: 7px; } Within the LEGEND tag, how would I position the radio buttons to the far right? I thought something like the following would work, but wasn't sucessful. .radios {text-align: right;} Thanks Code: <fieldset> <legend> Some Text <select><option value="1">One</option><option value="2">Two</option></select> <span class="radios"> <input type="radio" name="r" id="r" value="1">one <input type="radio" name="r" id="r" value="2">two </span> </legend> <table> <tr><td>bla</td><td>bla</td></tr> <tr><td>bla</td><td>bla</td></tr> <tr><td>bla</td><td>bla</td></tr> </table> </fieldset> I'm trying to place some content inside a main "box", and I can't seem to get the length of the "box" div to expand to fit the content inside it. It seems like the DIVs inside aren't actually inside it. The only way I can make it fit is if i actually specify a "height" on the first DIV. <div style="width:700px; background-color:#000000; border-width:.1em; border-style:solid; padding:2em; margin-left:auto; margin-right:auto; margin-top:2em; border-color:#999999; height:1000px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#FFFFFF;"> <div style="width:300px; float:left; margin:2em; clear:both;"><center><img src="../images/halihomeless.jpg" /></center> <br /><center><img src="../images/luvhali.jpg" /><br /> <div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text </div> </div> <div style="width:300px; float:right;margin:2em;"><center><img src="../images/haitihomeless.jpg" /></center> <br /><center><img src="../images/luvhaiti.jpg" /> <div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text </div> </div> <div style="float:right; width:650px; margin-bottom:2em; right:52px; top:15px; padding:2em; color:#CCCCCC; font-size:10px;">IMAGE" align="right" border="0" / ></a><p>luvHALI and luvHAITI are ministries of Deep Water Church in Halifax, Nova Scotia, Canada.</p><p>To donate to either project, please visit <a href="placeholderforcanadagives">Canada Gives</a>.</p><p>If you wish, you can visit Deep Water Church</a> for more information about who we are.</p><p>1657 Barrington Street | Suite 536 | Halifax, NS, Canada | B3J 2A1 | 902.880.4266</p></div> </div> Thanks so much for any help! Robin I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom. Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something? Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)? The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON. How can I adjust my CSS so both versions work? GOOD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
BAD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>
THANKS Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. Hi, I'm trying to work a bit with divs Anyway, I got this atm: Code: #container {
margin: 0px auto;
width: 600px;
}
#menu-left {
float:left;
height:auto;
width:100px;
}
#menu-right {
float:right;
height:auto;
width:100px;
}
#content {
float:left;
width:400px;
top: 200px;
}
#article { background-color:#999999;
border:dashed 1px black;
float:none;
width:380px;
height:100px;
margin: 0 10px 0 10px}
So I got a container around all the other divs, 1 div on the left (menu-left), one on the right (menu-right) and inbetween them the (content) div. In the content I got the (article) div, I want to have more of those underneath eachother after a while. Now normally the width of the Article div would equal 400 as well and fit perfectly between menu-left and menu-right. Yet it doesnt fit PERFECTLY inbetween them. If I take 8px margin on the left it fits, how is this possible?? ___ EDIT ___ Without the 1px border it seems to fit, but why doesn't it fit WITH the border? Thanks! Here is my css code:
Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
#sidebar {
float:left;
width:140px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
padding-right: 10px;
margin: 10px 10px 10px 0px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sidebar a:link, #sidebar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sidebar a:hover, #sidebar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sidebar ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
Here is my html code: Code: <body>
<div id="page">
<div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span></div>
<div id="topbar">
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/about_us/about_us.html">About Us</a></li>
<li><a href="/other_regions.html">Other Regions</a></li>
</ul>
</div>
<div id="sidebar">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Contact Us/Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
</div>
</body>
If it is more helpful - This is a link to the actual html file to view I am going to turn it into a template with an editable main section (the large blank area to the bottom right. I think my problems are all with the sidebar id - but I could be wrong as this is my first attempt at css and tabless design. Ignore the search part - that is phase 2 so I am not messing with that at this point. Here are the problems I am trying to correct: 1) I want the sidebar column to extend to the bottom of the page container - 10px. Some page containers could be longer than 600px height - but that will be the minimum height of the container. Currently it goes down all the way to the page id border with no white space. I know this is because I put in height 100% - but what I really need is something like 100% - 10px - but that doesn't seem to be an option. The page container has 10 px padding but it doesn't seem to be making a difference. 2) The left side list navigation indentation has some problems. See the side bar here to see what I want it to look like The list navigation part should be indented 20px from the left edge of the sidebar (10px more than the category class). Currently in fox fire they are both 10px from the right edge. In IE they are indented way too much. As always any help is greatly appreciated. Thanks! I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things. Example One: The header of the search box is stretching to the right, when the googleads box is floated right. Eample Two: The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers. These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks! Site CSS i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post. Site url: www.plumstead-mosque.co.uk Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button similarly that donate button is also a form but border isnt going around it... problem3: submenu font appears a bit smaller (in IE) problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems I just spent an hour putting this together and previewing it in IE... then when i go over to my mac and preview in safari.. UGH!!! UGLY!... Then in firefox.. UGLY!.. Any help would be appreciated. Page is: reston.com/RESTON20/ Code:
@charset "utf-8";
/* RestonCOM 2.0 CSS */
/* 10/04/2008 */
/* Main Container Code */
#container{
height: inherit;
width: 1000px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px double rgb(74,77,144);
border-left: 1px double rgb(74,77,144);
border-right: 1px double rgb(74,77,144);
}
/* HEADER CODE */
#header{
height: 149px;
width: 1000px;
background-image:url(COM20-BANNER.png);
}
/* NAVIGATION CODE */
#navi{
height: 25px;
width: 995px;
background-color: #44478a;
margin-bottom: 1px;
margin-top: 0px;
margin-left: 2px;
padding-left: 2px;
padding-top: 2px;
color: #FFFFFF;
}
/* LEFT SIDE PANEL CODE */
#leftbar{
height:inherit;
width: 270px;
background-color:#FFFFFF;
float: left;
margin-left: 1px;
}
/* LEFT-BOX CODE */
#leftbox{
height:inherit;
width: 281px;
background-color: #FFFFFF;
float: inherit;
border: 1px double rgb(74,77,144)
}
/* LEFT-BOX-TITLE CODE */
#leftbox-title{
height:inherit;
width:281px;
background-color: #44478a;
float: inherit;
color: #FFFFFF;
}
/* MIDDLE CONTENT CODE */
#content{
height: inherit;
width: 712px;
background-color:#FFFFFF;
float: right;
padding-left: 1px;
}
/* MIDDLE-CONTENT HEADERS */
#content h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:16px;
color:#000000;
font-weight: bold;
display: inline;
}
#content h2{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:12px;
color:#44478a;
font-weight: bold;
display: inline;
}
/* NEWSFLASH - BOX */
#newsflash{
width: 700px;
background-color:#000000;
}
/* NEWSFLASH - LEFT */
#newsflash-left{
width: 349px;
background-color:#44478a;
color: #FFFFFF;
float: left;
padding-left: 1px;
}
/* NEWSFLASH - LEFT - BOX */
#newsflash-left-box{
width: 345px;
background-color:#FFFFFF;
color: #44478a;
border: 1px double rgb(74,77,144);
float: inherit;
}
/* NEWSFLASH - LEFT - IMAGE */
#newsflash-left-image{
width: 50px;
height: 50px;
background-image: url(NEWSFLASH-LEFT-IMAGE.png);
float: left;
border-right: 1px double rgb(74,77,144);
}
/* NEWSFLASH - LEFT - TEXT */
#newsflash-left-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT (EVENTS) */
#newsflash-right{
width: 357px;
background-color:#44478a;
color: #FFFFFF;
float: right;
padding-left: 1px;
margin-right: 1px;
margin-left: 1px;
}
/* NEWSFLASH - RIGHT (EVENTS) IMAGE */
#newsflash-right-image{
width: 50px;
height: 50px;
float: left;
border-right: 1px double rgb(74,77,144);
background-image: url(NEWSFLASH-RIGHT-IMAGE.png);
}
/* NEWSFLASH - RIGHT (EVENTS) TEXT */
#newsflash-right-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}
/* NEWSFLASH - RIGHT - BOX (EVENTS) */
#newsflash-right-box{
width: 357px;
background-color:#FFFFFF;
color: #44478a;
float: inherit;
border: 1px double rgb(74,77,144);
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Reston.com (2.0)</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="navi">Navigation</div> <div id="leftbar"> <script src="http://arestravel.com/js/_default/ARESbot.js?bundle=reston&ro=1" type="text/javascript"></script> <div id="leftbox"> <div id="leftbox-title">Sponsored Advertising</div> <script type="text/javascript"><!-- google_ad_client = "pub-8246327012745782"; /* 250x250, created 10/4/08 */ google_ad_slot = "2128673963"; google_ad_width = 250; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> </div> <div id="content"> <div id="news-flash"> <div id="newsflash-left">Newsflash <div id="newsflash-left-box"> <div id="newsflash-left-image"></div> <div id="newsflash-left-text">This will be a description of the latest news article on our website. This will be a description of the latest news article on our website. <br /><strong>More</strong> </div> </div> </div> <div id="newsflash-right">Upcoming Event <div id="newsflash-right-box"> <div id="newsflash-right-image"></div> <div id="newsflash-right-text">This will be a description of the latest upcoming event in Reston Virginia. This will be a description of the latest upcoming event in Reston Virginia. <br /><strong>More</strong></div> </div> </div> <br /> <br /> <strong><h1>Your guide to working, living, and playing in Reston Virginia!</h1></strong> <br /> <br /> <h2>Reston Hotels</h2> - Stay in Reston! The hotels in the Reston area offer a full range of accommodations including luxury hotels and options for those on a budget. Conveniently located right off the Dulles Toll Road, just 15 minutes from Dulles International Airport, Reston is nearby most businesses in the area and within driving distance to Washington D.C. <br /> <br /> <h2>Reston Restaurants</h2> - Dine in Reston! Reston offers some of the best dining alternatives in Northern Virginia. Whether you're planning a romantic dinner, hosting a business gathering, grabbing an afternoon snack, celebrating a special occassion, or having a night out with the family, Reston's restaurants can meet your needs. <br /> <br /> <h2>Reston Town Center</h2> - Reston's famous "downtown" includes many shops and restaurants, ice skating, a multiplex movie theater, and a luxury hotel. Reston Town Center hosts outdoor festivals and concerts throughout the year, and features outdoor ice skating during the winter months. <br /> <br /> <h2>Village Centers</h2> - Explore Reston's village centers! Reston's community village centers each has its own special character and include shops, parks, lakes, walking and bike paths, art galleries, restaurants, museums, theaters, and much more. <br /> <br /> <h2>Reston Real Estate</h2> - Reston is a world renowned planned community and was recently ranked one of the top 100 Best Places to Live in America by Money Magazine. Reston's diverse selection of housing includes condos, apartments, townhomes, and single-family homes. Lakefront properties are also available.</div> </div> </body> </html> I'm getting a headache here. What I'm creating is a very simple web gallery. Yes, wheel being reinvented, please don't tell me I need to use something canned. When an individual image is displayed, the image needs to be centered left-to-right. However, I want to offer a button that shows the EXIF data in a side-pane, and when it appears, the image and EXIF data block need to be centered as an aggregate. The image display and the EXIF retrieval are both done with server-side scripts (the latter being pulled via AJAX so that it does not need to be extracted if it isn't requested by the user). Now, here's the deal: I have this working perfectly using a table-based layout, but all my attempts to get it done using DIVs behave badly. I either get an image div that doesn't move when I activate the EXIF div, or the EXIF div ends up UNDER the image div. It should be really simple... I'm just too stupid to figure it out. CSS always kicks my butt. |
|||||||