|
CSS - Overusing The <ul> Element For Almost Anything...
Hi guys!
I am tempted to use the list element (<ul>) for almost anything... is this good practice or should I proceed differently? For example: 1/ Horizontal menu of images that should be spaced by 10 px. I could do that this way: Code: <div id="topmenu"> <a href="dsf.php"><img... <a href="sdfs.php"><img... <a href="sdf.php"><img... <a href="sdf.php"><img... </div> and in the CSS file: Code:
#topmenu
{
margin: 10px;
}
#topmenu a
{
margin-right: 10px;
}
OR I could do it this way with <ul>s: Code: <ul id="topmenu"> <li><a href="dsf.php"><img...</li> <li><a href="sdfs.php"><img...</li> <li><a href="sdf.php"><img...</li> <li><a href="sdf.php"><img...</li> </ul> and in the CSS file: Code:
#topmenu
{
margin: 10px;
list-style: none;
}
#topmenu li
{
margin-right: 10px;
display: inline;
}
MOREOVER, for example when aligning 4 input boxes on the same line and spaced (exactly the same problem but the images replaced by inputs), should I proceed with the first or second method? MOREOVER, for example when aligning 4 text URLS on the same line and spaced (exactly the same problem but the images replaced by text URLs), should I proceed with the first or second method? It would be so nice to ALWAYS use the <ul> element with CSS but is this poor practice? Thank you Similar TutorialsHi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! I want to change this: LIST-STYLE-TYPE: square; I want to show a picture in the place of that square. Can this be possible? Hi, I've been designing a page that is basically made of a box that sits dead center on the page (horizontally and vertically centered). The only way I have come up with doing this is by using the following code: Code: <table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<div id="centeredDiv">
This text will sit right in the middle of the page
</div>
</td>
</tr>
</table>
I was thinking that there must be a way of doing this with CSS (without using tables) to make it a bit more tidy and standards compliant as I am laying out everything within the centeredDiv with CSS positioning. Thanks in advance, Matthew Dingley hey guys, I just have a short question about css: How to center an element? greetings and thx in advance PS: I tried to use auto but this does not function... is it possible to use two classes for one element. I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them. perhaps there is a form of superclass and subclass in css. Hi; How i can display elements from left to right and the first element stat from the left of 20px, and the distance between each element is 20px. Could any one help me, please, thanks my code does not work for the distance between each element is 20px. PHP Code: <html> <head> <style type="text/css"> .number{ position: relative; left: 20px; float: left; } </style> </head> <body> <span class="number">1</span> <span class="number">2</span> <span class="number">3</span> <span class="number">4</span> </body> </html> Hi How do I center element <ul id="buttons"> in <div id="alertbox" ? Code:
<div id="alertbox" style="background-color:#99CC99">
<h3 id="alerttitle"><span>DO YOU WANT TO CONTINUE ?</span></h3>
<div id="alertcontent">
<ul id="buttons">
<li><a href="yes.php">YES</a></li> <li><a href="no.php">NO</a></li>
</ul>
</div>
</div>
<style type="text/css">
#alertbox {
text-align: center;
list-style-type: none;
padding: .2em 0;
}
#alertbox li { display: inline; }
#alertbox a {
padding: 5px 20px .3em 20px;
border: 1px solid #cccccc;
}
</style>
Thank you. I am defeated! I am trying to make this website and the design relies on it having a panel that float off to the left for navigation. It works great in Firefox and Safari, but not in IE. The strange thing is that the panels is gone not just out of place. I happens when I set the position to absolute no matter what else I change. Without absolute positioning there is not way to get it into the spot I need with out affecting other elements. Here is the URL if someone to take a look for me. http://www.godsplaceforyou.org/sperbeck/ This is hopefully a very easy question... I have a table which has 4 <td> elements to adhere to. My problem is that I want to put some text into the 3rd <td> which is wider than I want the <td> to be allowed. I know that there isn't any text it will overlap in the 2nd. Is there a command that will overextend the width to the left and fill there? Currently as is the text goes upward. Here is an image of my problem, any suggestions? *** Solved, All i needed was a Hi there, Need some CSS guru help. If you visit my link: http://www.gabbr.com/js/viewer/cmedata/index1.html and hover over the years (top middles, 2008, 2009, 2010, etc) you will notice an orange bar extending from the top to the bottom of the page. I am trying to get the same effect on the left (month and day) but am unable to do so. The problem I am having is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing. Any advice? Hello, I have a div element within a series of nested tables. the width of the cell that the div element is in is set to "45%". My div element has a CSS style of "overflow:auto;" meaning I want scrollbars to appear if the contents of the div are larger than the alotted space. For some reason, the scrollbars appear, however, My div element stretches and pushes other elements off of the screen. Is anyone aware of any bugs or something that could cause this? The thing that is really strange is that I only have this problem when the table within the DIV contains elements that have the nowrap attribute set to true. Thanks, Crystal i cant seem to figure out how to center my div's in IE. they look fine in firefox and safari. what can i do? here is my stylesheet: <head> <style type="text/css"> body {background:grey url('lgrey048.jpg');} .layout{position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 646px; height: 800px; } .banner{position:absolute; top:0; left:0; height:251px; width:646px; border:1px solid black;} .links {position: absolute; top: 261px; left:0px; height: 47px; width: 646px; } .content {position: absolute; top: 318px; left:0px; height: 492px; width: 446px; background-color: white; border:1px solid black; } .sidebar {position: absolute; top: 318px; left:456px; height: 492px; width: 190px; background-color: white; border:1px solid black } img { border-style: none; } </style> </head> any suggestions? I have a website test2(dot)gigajobs(dot)com(dot)au And have a section where user can Jobseekers can login But I can't seem to format the Username and password , register as a jobs seeker and forgot password labels so it is aligned to margin-left:12px; I've tried everything I can think of and am tearinhg my hair out. css td.publish-label{width:200px; } td.publish-label a { color: ##2E8EE8; text-decoration: underline; } td.publish-label a:hover { color: #68AAE7; text-decoration: underline; } html <h2 class="widgettitle">{$translations.applicant_admin.login}</h2> <table border="0" cellspacing="2" cellpadding="2"> <tr> <td class="publish-label"> <a href="{$BASE_URL}applicant/register/">{$translations.applicant_admin.register_account}</a> </td> <br> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.email_address}:<br /> <input {if $errors.username}class="error" {/if} tabindex="1" type="text" name="username" id="username" size="32" value="{$smarty.post.username}" /> <span class="validation-error">{if $errors.username}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label">{$translations.applicant_admin.password}:<br /> <input {if $errors.password}class="error" {/if} tabindex="2" type="password" name="password" id="password" size="32" value="" /> <span class="validation-error">{if $errors.password}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span> </td> </tr> <tr> <td class="publish-label"><a href="{$BASE_URL}applicant/forgot/">{$translations.applicant_admin.forgot_password}</a></td> </tr> <tr> Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle. I have it floated to the right, but I can't seem to make it move up vertically. Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size. this is where the img is now, see how it is not lined up? URL this is where it is supposed to go. URL my code is this Code: <div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div> and I have it next to the code for the chart. Help! i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue?? i see i cannot post a url. any help without seeing the problem? Here is the code snippet from the iframe: Code: <div style="margin: 0px;" id="votes"> <ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh"> <li id="xvote-0" style="width: 81.25px;" class="current-rating"></> <span id="mnmc-0"> <li class="one-star-noh"></li> <li class="two-stars-noh"></li> <li class="three-stars-noh"></li> <li class="four-stars-noh"></li> <li class="five-stars-noh"></li> </li> </ul> </div> I've been adding local styles to try and zero any potential problems. i can post all css styles if noone has any ideas. Any help would be much appreciated. Thanks. Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp I have been trying to work a lot with CSS3 to rotate, scale, etc. One effect I've been trying to figure out is how to stretch something. I could scale it along the y axis but that's not really stretching. A stretch would mean the top and bottom (or left and right) sides would curve inward. How can I distort an element in this fashion? Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out... I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself... What I'm trying to accomplish is the same thing, only with a div that has textual content.... I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings... I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail.... I hope this is a decent enough description of the problem... anyway to accomplish this??? |
|||||||