|
CSS - Css Positioning Help Please, Links Inside
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 Similar TutorialsThis 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. 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 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. 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;
}
What is the best way to evenly space these links inside the div? PHP Code: <div id="contain_header"> <div id="header"> <a href="index.php" class="nav">Homepage</a> <a href="manufacturers.php" class="nav">Manufacturers</a> <a href="contact.php" class="nav">Contact Us</a> <a href="carfinder.php" class="nav">Advanced Car Search</a> <a href="specialoffers.php" class="nav">Special Offers</a> <a href="faq.php" class="nav">FAQ's</a></div> </div> I want to create a css menu where a chunk or block is highlighted on mouse over but inside that block are individual hyperlinks that are also highlighted on mouse over. Here's the catch, I can't use any doctype tags like this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because it makes the rest of my page look like junk. The top nav on this page is exactly what I want to do. http://www.smashingmagazine.com/tag/showcases/ 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; } 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>
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? Can someone please help me with positioning of my .gif in the header and links? It moves whenever I change a computer. Depending on the screen size, the image always moves to some weird obscure place. The site name is: papercranes.comlu.com Is there a substitute for absolute positioning? Hey i got some cells in a table which hold links. How can i make only the links inside these cells a different color? This is the class i use on the table cells: css Code: Original - css Code .selectedContactRow{ background-color: white; color: black; }
I only know how to change the link colors in general. css Code: Original - css Code a:link{color: red;} a:hover{color: red;} etc.
thanks in advance. Hello everyone, I'm working on a word press design for my site and I'm having some problems with absolute positioning. The positioning is fine in and of itself but I've found that if the absolute positioned element is underneath a link, it voids out the link. The text for the link is there, just no link. I've tested this by removing the absolute positioned element and the links work fine after I do that. Any idea what's going on with this? This occurs in both Firefox and IE. I've validated the CSS as CSS 2.1. You can see what I'm talking about at my site randomdamage dot org (the forum wouldn't let me post the link) If you scroll to the bottom of the page you can see two links which are being affected, the comments link for the last post and the next page link. The absolute element is the red splatter graphic. Here's the relevant css: /*footer styles*/ #footer blockquote { background-image: url(images/splash.png); width: 850px; height: 100px; position: absolute; left: 5px; background-repeat: no-repeat; bottom: 63px; text-indent: -9999px; z-index:9;} #footer { clear:both; font-family: Georgia, "Times New Roman", Times, serif; padding-right: 20px; padding-left: 20px; padding-top: 20px; } #footer p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 10px; padding-bottom: 40px; } Any help would be greatly appreciated. Im using this to make an onscroll effect Code:
table.left {border-collapse:collapse;
float:left;
margin-left:10px;
margin-right:10px;
background:#8f8f8f;
padding:5px;
color:#000000;
font-family:Verdana;
text-decoration:none;
}
td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}
td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;
}
And the links don't format with the typical css markup Code:
a:active {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:link {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:hover {color:#000000;
font-family:Verdana;
text-decoration:none;}
Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck Note:this is in IE Nevermind...I just figured it out..used a link class and set the visited attribute 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. Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
|
|||||||