|
CSS - Virtical Lists: Controlling The Offset
In a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset?
Similar TutorialsIs there a way to align the images in the virtical middle? In the example, they align to the top. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
padding: 1px 1px 1px 1px;
background-color: #003366;
text-align : left;
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
color: #eef7ff;
}
.block_up {
float: left;
margin: 0 0 2px 2px;
}
.block_down {
float: left;
margin: 0 0 2px 2px;
}
p {display: inline;}
</style>
</head>
<body>
<div class="nav_box">
<p><img class="block_up" src="./images/block_up.gif" width="11" height="11" />
<img class="block_down" src="./images/block_down.gif" width="11" height="11" />
Some Test Text</p>
</div>
</body>
</html>
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. Has anyone seen a template somewhere that can help style a page for printing to an index card? Thanks, James is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design. Thanks Hi.. another question for the CSS mastas out there. I have a table taht I have applied a class to: PHP Code: <table class="middle" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <img border="0" src="images/spacer.gif" width="1" height="1"> </td> <td align="left"> <p class="customHeading">aaaa</p> </td> <td> <p align="right"> <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> | <a class="importantLink" href="">aaa</a> </p> </td> </tr> <tr> <td colspan="3" valign="top"> <table class="content" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="left">aaa:</td> <td><input type="text" name="aaa" size="22" class="formField"> </td> <td><a href="#"> <input type="submit" value="SEARCH" class="formButton"> </a> </td> </tr> </table> </td></tr></table> .middle { width: 760px; height: 360px; background-color: #FFFFFF; } .content { background-color: #FFFFFF; font: 13px Arial, sans-serif; padding: 2px; margin-left: auto; margin-right: auto; } The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height? I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer. Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.? Thanks for your suggestions. Okay, I tried to see if this question was already answered on the forums, but I got ADD so I gave up. I'm making a nav bar out of a list and CSS. The bar is perfect, except for the height will not extent each extremity. Here's the CSS: Code: .navigation {
width: inherit;
height: 53px;
margin: 0px;
margin-top: 63px;
background-image:url(file-bin/images/navigation_background.png);
background-repeat:repeat-x;
background-position:center;
}
.navigation ul, .navigation li {
display: inline;
list-style:none;
padding:0px;
margin:0px;
}
.navigation li a {
border-left: 1px solid #FFF;
padding-left: 20px;
padding-right: 20px;
text-align: right;
}
Here's the HTML: Code: <div class="navigation" align="right"> <ul class="navigation"> <li></li> </ul> <ul class="navigation"> <li><a href="#"><img src="file-bin/images/space.png" height="53" width="1" align="absmiddle" border="0" />Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> Thanks for the help in advance! - Logan Hello: I'm building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS. Two examples I offer are 1. wired.com 2. 1and1.com On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure. I would like for the user the have the option to change the font-size by clicking, not by repositioning the window (then the size changing relative to window size). If anyone can help me, I would really appreciate it. Thanks! Deanna I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? Hi, I am using a javascript drop down that does include CSS to control the font style, size etc. It works great in IE. Mozilla is ignoring all CSS, both in the js code and my style sheet, when I change the text size via View/Text Size in the top menu bar of the Mozilla browser). How do I get Mozilla to bow down and take it (the code, that is ) Just to note, I have tried adding the CSS info from the javascript to my style sheet. No different results. Thanks! hi guys, silly question i want to make a certain portion of my text smaller, but when i put a span like this around it: <span style="font-size: 10px;"> then only the plain text, and not the links, decrease in size... what should i add? thanks glog When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background? I have two issues: 1. I have been trying to make a habit of validating my stuff and when I tried to validate my page, I get these errors: Quote: 1. Error Line 31 column 64: end tag for "img" omitted, but OMITTAG NO was specified. ..."index.htm"><img src="images/logo.gif" alt="ICOM"></a> You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". ✉ 2. Info Line 31 column 23: start tag was here. <a href="index.htm"><img src="images/logo.gif" alt="ICOM"></a> 3. Error Line 36 column 89: end tag for "img" omitted, but OMITTAG NO was specified. ..."images/index_img.jpg" alt="ICOM"></a></div> ✉ 4. Info Line 36 column 43: start tag was here. ...iv id="indeximg"><a href="about.htm"><img src="images/index_img.jpg" alt="ICO I don't know what this means. 2 (and the primary reason for posting this). I made a page and I have a footer that I want to keep at the bottom of the page regardless of whether the page stretches down that far. In Firefox, it works great. In IE, the footer looks like it moves to the left about 50% and then proceeds to stretch the page 50% more off to the left. My site is: www.icomministries.com My CSS file is: www.icomministries.com/style.css If you look at http://jordanmeeter.com/new/about.php and http://jordanmeeter.com/new/about/cd-collection.php you will see that the latter pages moves to the left and I believe stretches the pages. I removed the list, and sure enough the problem went away. But what is causing this? It's just a simple list... BTW, the CSS is http://jordanmeeter.com/new/includes/x.css. I need a 100px header (white) at the top of the page, with the rest of the page being #000033. I am really new to CSS, so there is what me and an editor came up with. Code:
.BODY {
background-image: url(block.jpg);
background-position: 0px 100px;
background-repeat: repeat;
}
The probelem is that the postion doesn't seem to matter when the repeat value is set to repeat. I am sure there is an easier way to do this. Can someone help? thanks Kris Hi... How do I break a single list into multiple columns? The page I'm talking about is http://jordanmeeter.com/?page=links. I'd like to bring the "Other" category up over to the right, next to the rest of the categories. I tried Code: float: left;
width: 200px;
And that kind of did what I want... Not really, though. http://jordanmeeter.com/?page=resources Okay... WTF is that about? I added another article to the "Articles" list... And it moved the section below it down. My CSS for #noindent : Code: .noindent {
float: left;
width: 200px;
margin-left: 0px;
margin-top: 5px;
padding-left: 0px;
list-style-type: none;
}
I want to have a list that each listed item has a different image, how can i do this. Thanks Does anyone know how I can fix the gaps on this block level lists? It looks fine on firefox and other browsers but ie6 and ie7 add gaps in between the lists. http://section31.us/study/html/temp...lists_on_ie.php I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. |
|||||||