|
CSS - Positioning Within Dl Tags
Hello,
I've been messin with this all night but just can't get the result i'm after. The bit of code which follows, almost works - except the fields on the right hand side don't align to the top (to be in line with the top of each text on the left). What am I doing wrong? Can anyone please help me? Thanks, JT EDIT: Screenshot of the current output is attached too for information Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>
<style type="text/css">
div.configset label {
font-weight: bold;
}
div.configset fieldset {
background-color:#FFE391;
border:1px solid;
margin:0.5em 0.5em 0.5em 0.5em;
}
div.configset dl {
font-size: 0.85em;
width:100%;
}
div.configset dt {
float:left;
border-right: 1px solid #FFCC6F;
width:45%;
padding:0.5em 0.5em 0.5em 0.5em;
}
div.configset dd {
clear:both;
margin: 0 0 0 46%;
padding:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<div class="configset">
<fieldset>
<legend>General Options</legend>
<dl>
<dt>
<label for="conf_13">Website Enabled</label><br /><span>Toggle the website on and off. Note that no part of the website (except admin functions) will work if this is set to False.</span>
</dt>
<dd>
<input type="checkbox" name="conf_13" id="conf_13" checked="checked" tabindex="1" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_1">Website Name</label><br /><span>Name of the website. Appears in title of browser and some links</span>
</dt>
<dd>
<input type="text" name="conf_1" id="conf_1" size="40" maxlength="50" tabindex="2" value="Kinetic" />
</dd>
</dl>
</fieldset>
<fieldset>
<legend>Login Options</legend>
<dl>
<dt>
<label for="conf_7">Login Attempts</label><br /><span>Amount of login attempts before time delays start occurring to prevent forced access</span>
</dt>
<dd>
<input type="text" name="conf_7" id="conf_7" size="2" maxlength="2" tabindex="6" value="3" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_8">Login Failure Delay</label><br /><span>Amount of time (in minutes) to delay a member from logging in with the failed account details</span>
</dt>
<dd>
<input type="text" name="conf_8" id="conf_8" size="2" maxlength="2" tabindex="7" value="5" />
</dd>
</dl>
</fieldset>
</div>
</form>
</body>
</html>
Similar TutorialsHello: I am working on a website and cannot for the life of me figure out why the element called "innerloop" keeps appearing behind the menu element "nav". here is the html so far: Code: <title>Casa Grande Acclaim Realty</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="index,follow" /> </head> <body> <div id="main"> <div id="border"></div> <div id="contact_info"> <p>Casa Grande Acclaim Realty<br/> 11283 N. Henness Road<br /> Casa Grande, Arizona 85194 <br /> Phone: (520) 560-8366 <br /> Fax: (520) 421-1444 </p> </div> <div id="logo"></div> <div id="slogan"> Serving All of Pinal County </div> <div id="nav"> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Our Listings</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="innerloop"> lorem ipsizzum fo shizzle my bizzle Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah Blah blah blah blah blah blah blah </div> </div> </body> </html> And this is the css: Code: #main {
width: 875px;
background-color: white;
border-style: inset;
border-color: #800080;
margin-left: auto;
margin-right: auto;
-moz-box-shadow: 5px 5px 5px 5px #008080;
-webkit-box-shadow: 5px 5px 5px 5px 008080;
box-shadow: 5px 5px 5px 5px 008080;
-ms-filter:
}
#logo {
width:300px;
height:170px;
padding:0 0 0 0px;
background:url(redonelogo.bmp) no-repeat;
}
#contact_info {
color: #800080;
font-weight: 550px;
font-variant: small-caps;
font-size: 14px;
float:right;
padding-top:0px;
padding-right:10px;
}
#border {
width: 875px;
height: 57px;
background-image: url(border.bmp);
background-repeat: repeat-y;
}
#slogan {
float: right;
font-variant: small-caps;
margin-right:20px;
padding-top:0px;
font-size:18px;
font-weight: 800px;
text-align:right;
color:#800080;
}
#nav {
width: 875px;
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
font-variant: small-caps;
background-color: #FFFF00;
border-bottom: 1px solid #008080;
border-top: 2px solid #008080;
margin-top: 10px;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #008080;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #800080;
background-color: #fff; }
#innerloop
{
width: 860px;
background-color: white;
margin-left: auto;
margin-right: auto;
border-style: double;
border-color: #800080;
border-width: medium;
}
I am rusty and stuck I took out the html header stuff and stylesheet link to conform to forum rules Thank you Code: <div style="width: 500px; height: 500px;"> <div style="position:relative; top: 0px; left: 0px; width: 30px; height: 10px;">at 0</div> <div style="position:relative; top: 10px; left: 0px; width: 30px; height: 10px;">at 10</div> </div> The divider seems to add a break rendering absolute positioning useless. How can I fix this so that I can use absolute positioning in more than one div inside the main fixed size container? Thanks Okay, so here's the issue... I've designed a site using css, and to get the flow I was looking for I had to use "absolute positioning" on some of the page elements. Every thing looks fine except I can't get the page to center in the browser window. I created a div that I used as a wrapper, centered the wrapper... and most everything works fine... the exceptions are the elements that are absolutely positioned... they won't nest within my wrapper div. If I change the type of positioning of ALL the elements on the page to relative then they nest... but I don't want to have to use relative positioning for all my elements. Any words of wisdom? Hi All- For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace? Thanks, infinity003 I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi, I have some code that looks like this . #nav,#nav ul which puts all the listed elements in a vertical list. Now if I do ths #nav ul.. this changes all the elemnts to a horizontal list. What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't. I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall. It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image. Thanks. I'm sorta new to CSS-positioning so some of the code looks jumbly. But I'm trying to make the page work in mozilla's firefox and in the process of doing that I broke it in IE. Anyways, here is the link to the buggy page that the div containers hop all over the place. If you hit refreash enough you will see the lower section that displays the extra news articles will lose its left-margin setting and hop around. Plus it drops the archive container down below the extended news section as if they widths are clashing when they appear fine in firefox. I'm assuming there is probably some type of ie bug and I'm curious if someone has a link to a hack for it? Could use any help I just can't figure out what to define so that IE doesnt screw up my coding... here is a link to my project... if you look in IE, there is a gap above "Account Info"... it is caused because that is where my <form> tag starts, then at the bottom there is another gap, which is there my </form> tag ends. Sign Up Page Error This must be a common problem but I have no way to look it up in the forum. In Firefox and IE7 you can define CSS for successive tags with the larger sign: div>span { ... } Does anyone know of anything similar for IE6 ? Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list. sth like #myId LI { display:inline-block; } #myId LI H2{ display:inline-block; } solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated! here the html <ul id='myId'> <li><h2><a htref=...>somewhere</a></h2></li> <li><h2><a htref=...>somewhere</a></h2></li> </ul> OK Found out a float:left in the li was missing Hello! Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read). So the current html below would be shortened to: Code: <a href="javascript:void(0);" class="sddm"><u>Settings</u> <div id="m1" class="alignl"> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">JavaScript DropDown</a> <a href="#">Cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </a> ORIGINAL CSS/HTML: Code: <style type="text/css">
/* Drop Down Menu */
span.sddm {
z-index: 30;
white-space: nowrap;
position: relative;
}
span.sddm a {
text-decoration: none;
}
span.sddm a:hover {
text-decoration: none;
color: blue;
}
span.sddm div {
position: absolute;
display: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #3366cc;
border-top: 1px solid #c9d7f1;
border-left: 1px solid #c9d7f1;
top: 18px;
}
span.sddm div a {
position: relative;
display: block;
margin: 0px;
padding: 2px 5px;
width: auto;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
span.sddm div a:hover {
background: #3366cc;
color: #fff;
}
span.sddm .alignl {
left: 0px;
}
span.sddm .alignr {
right: 3px;
}
</style>
<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>
I have some listing text that comes from a database, displayed in a column. Each block of text is enclosed in a DIV tag. I use the following to cause the area of the text to change background color when there is a mouseover: Quote: div.list { padding: 5px 5px 5px 5px; } div.list:hover { background-color: #FFFACD; } Works fine for Firefox, but doesn't do anything in IE. How can I fix this so it works in IE as well? Im trying to control how the text formats within a div tag, that sits inside a menu. The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly' I have the menu sitting he http://www.electronical.org/tmp/playsongs/ If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu. How do I format this so it is the width of the submenu and wraps to the length of it? Thanks for any help. I want to center and element, more specifically div elements with css. I have looked through source code from many websites. It seems there is not a simple solution to centering text. I have tried using: Code:
.content {
align: center;
}
I would like my content to remain centered even when the browser is resized. Instead for using "right: 400px" this works however for my resolution but not for the next guy. I am lost and would like an explanation. For other thread there were vague mentions about rightmargin and left margin. Unfortunately experimenting proved unsuccessful; therefore, leading me to write this thread. I greatly appreciate all help provided. Thanks hey guys, I got a interesting situation here. I'm building this site... http://www.peelautoradio.com/source/start.php The problem is, I've attempted to pickup the style sheets from an external file (site.css). Everything works fine, however, if you click on a link (that isn't complete) or refresh the page too many times - the styles are lost. here's the css tags. (I'm using include "site.css" in my php now). Code:
<style>
body { margin: 0px;
font-family: Verdana,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
#topcell {
position: relative;
top: 0px;
left: 0px;
margin: 10px;
width: 750px;
height: 250px;
background-color: transparent;
overflow: auto;
vertical-align: justify;
}
#botcell {
position: relative;
margin: 10px;
top: 0px;
left: 0px;
width: 700px;
height: 250px;
background-color: transparent;
overflow: auto;
vertical-align: justify;
}
#topMenuLinks {
position: relative;
top: 2px;
left: 5px;
width: 548px;
height: 20px;
margin: 0px;
padding: 3px 9px 2px 2px;
}
#topMenuLinks a:link, #menuLinks a:visited {
display: inline;
color: #DCE8FF;
border-left: 4px solid #97163D;
border-right: 1px solid #CB8A9E;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: transparent;
text-decoration: none;
}
#topMenuLinks a:hover {
display: inline;
color: #DCE8FF;
border-left: 4px solid #FFDBE7;
border-right: 1px solid #FFFFFF;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: #EC7A9D;
text-decoration: none;
}
#botMenuLinks {
position: relative;
top: 2px;
left: 170px;
width: 548px;
height: 20px;
margin: 0px;
padding: 3px 9px 2px 2px;
}
#botMenuLinks a:link, #menuLinks a:visited {
display: inline;
color: #DCE8FF;
border-left: 4px solid #97163D;
border-right: 1px solid #CB8A9E;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: transparent;
text-decoration: none;
}
#botMenuLinks a:hover {
display: inline;
color: #DCE8FF;
border-left: 4px solid #FFDBE7;
border-right: 1px solid #FFFFFF;
font-size: 10pt;
font-weight: bold;
padding: 3px 20px 3px 10px;
background-color: #EC7A9D;
text-decoration: none;
}
</style>
Any ideas? Hi there, this is concerning 'id' tags...i've got a style set for my <a> tags, and i wish to create a second <a> style, to be applied to a small set of the <a>'s in my site. I know the #blah should be used to set an id for it, but here's my concern; 1. where do i state the id for the <a>? (ie. <div id="blah"> or <a href="http:///////" id="blah">). 2. do i need to define an id for the existing style? or can i just leave it the way it is and apply the id to the one i want different? thanks in advance. I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8? My html: Code: <!-- show_menu2 -->
<ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">
<li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
<li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
<ul class="ullev3">
<li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
<li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>
<li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
<li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
</ul>
</li>
<li><a href="#" class=" navlev2" title="AMASP">AMASP</a> </li>
<li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>
<li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
</ul>
</div>
<!-- end of subnavigation -->
My CSS: Code: #submenu
{
padding: 0;
/* [disabled]width: 247px; */
/* [disabled]position: relative;
*/
/* [disabled]left: -15px; */
}
#submenu a
{
text-decoration :none;
color :#5b9acf;
padding-left :12px;
display :block;
background-image: url(../images/bullets_micro/square3.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
}
#submenu a:hover
{
color :#003366;
background-image: url(../images/bullets_micro/square1.gif);
background-repeat: no-repeat;
/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
border: none;
}
#submenu a.menu-current
{
font-weight :bold;
color :#003366;
background-image: url(../images/bullets_micro/asst3.gif);
background-repeat: no-repeat;
background-position: 4px 50%;
}
#submenu ul
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
/* [disabled]margin-left: -25px;
*/
/* [disabled]position: relative;
*/
/* [disabled]left: -10px;
*/
}
#submenu ul li
{
padding :5px 0;
/* [disabled]line-height :1.4em; */
font-size :12px;
list-style-type :none;
border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
padding: 0px 10px;
}
#submenu ul li li
{
border-bottom :none;
padding-bottom :0px;
font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
color :#003366;
background-image: url(../images/bullets_micro/diamond4.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
}
#submenu ul li li a:hover
{
background-image: url(../images/bullets_micro/diamond.gif);
background-repeat: no-repeat;
/* [disabled]background-position: 4px 50%;
*/
color: #6DB9FA;
}
/* ====================== */
My test page: (pardon the blue background I just added this to see the container.) http://new.ssmarts.org/page.html Thanks so much. I am currently setting the body id of my pages to highlight what item I am on... Such as: body#news #news_tab a, { border-bottom: 1px solid #fff; background: #fff; color: #000; } But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work. I tried: Adding this div: <div id="news" style="display:none">Testing Me</div> Adding this body tag: <body id="news"> And then adding this style definition: body#news #news { display: block; } but it still doesn't display. Is this just not possible? Is there anyway around it? Thanks! |
|||||||