|
CSS - Vertical Position On An <ul>
I have an image 425px x 260px which is floated left of an unordered list. The unordered list, of course, is at the same height as the top edge of the image.
Any way to vertically position the ul so it is vertically centered to the image? Similar TutorialsHi, The following example is positioned as I want. Code: <div><label id="day">Day:</label><span> <input type="checkbox" name="day" value="1" />Sat <input type="checkbox" name="day" value="2" />Sun </span> </div> How do I make in next example <table> vertically aligned with <label> element? Right now <table> element is positioned next to it but way below <label> element. Code: <div><label id="lang_lbl">What languages do you speak?:</label> <span> <table><tr><td><input type="checkbox" name="lang" value="1" />English </td> <td><input type="checkbox" name="langs" value="2" />Spanish</td> </tr> </table> </span> </div> Thank you. Hi guys, I've tried for days but can't solve the problem. I wanna position a text field and button in the middle of a div or table. FF displays well, IE of course not (always on top). Vertical alignment etc doesn't work! Any suggestions? I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item. I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> Hello everyone! I'm creating this thread to make a question about something that is happening with my website... Actually I'm not a professional in CSS Coding... I only know some basics and with the help of some friends I've created it (which sadly they doesn't know how to help in this problem as well). I know more HTML than CSS, but to center the website horizontally and vertically I had to change it to CSS Coding. At first, since I use Firefox as the principal browser, I thought it was going right and well centered, but when I opened it in another browsers as Internet Explorer and Opera, the various parts of texts I have included are not well positioned like in Firefox, Google Chrome and Safari, by which looks pretty decent and in the same position in all of them. Unfortunately, since I'm a new member, I can't post links, so I placed some spaces in between at the beginning to be possible: Website: ht tp://w ww.freewebs.com/innocentia/Doc1.htm Errors Preview: ht tp://img651.imageshack.us/img651/1601/errorspreview.jpg Horizontally looks great in any browser and the Menu Bar as well, but not the right text parts...by which vertically looks different to me in IE and Opera only and in the other browsers as well if the monitor sizes are bigger or smaller than mine, which has the size of 1440x990. The CSS Code of the texts parts that can't get vertically fixed is: Code: #header {
height : 60px;
left : 300px;
overflow : auto;
padding : 10px;
position : relative;
top : -100px;
width : 700px;
}
#header p {
margin : 0;
}
#header_wrapper {
width : 700px;
margin-left : auto;
margin-right : auto;
margin-top : 25px;
}
#h3 {
height : 130px;
left : 290px;
overflow : auto;
padding : 20px 10px;
position : relative;
top : -25px;
width : 710px;
}
#h3 ul {
margin : 0;
}
#h3 ul li {
margin : 0 0 3px 0;
}
#h4 {
height : 255px;
left : 250px;
overflow : auto;
padding : 0 10px;
position : relative;
top : -85px;
width : 748px;
}
#h4 ul {
margin : 0;
}
#site_wrapper {
width : 1100px;
margin-left : auto;
margin-right : auto;
background : #eaf0f2 url(link) no-repeat top center;
}
The HTML Code is: Code: <body>
<div id="site_wrapper">
<div id="header">Text</div>
<div id="h3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">Avatar Picture</td>
<td valign="top">
<ul><li><b><font color="#0166AC">Text</ul></td></tr>
</table></div>
<div id="h4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<ul><p><font color="#000000"><b>Text</font></b></a></center></ul></td></tr>
</table></div>
I really don't understand what's happening or what I'm missing due to the fact that the menu has the same type of coding like the headers and works completely fine...so I'm somehow lost... My intention was to make it look correct horizontally and vertically like it's shown in Firefox, Google Chrome and Safari in the preview picture, in the other browsers and any different monitor sizes. Also, I already validated my CSS coding! I also searched for many threads to see if I could find solutions but hadn't found any that could actually help... Thank you for the attention and for reading! ^^ Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
/*Left Links*/ #leftcol{ float: left; display: block; width: 200px; /*Width of left column*/ } ul#leftcol{ list-style-type: none; padding: 0.5em 0 1em 0; margin: 0; } li#leftcol{ margin: 0; padding: 0; } #leftcol a, #leftcol a:link, #nav a:visited { float: left; display: block; position:relative; width: 165px; height: 1%; padding: 8px 5px 8px 30px; margin: 0; font: normal 11px Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration:none; background-image:url(images/sidelinks_back.jpg); border-bottom: 1px solid #FFFFFF; } #leftcol a:hover { background-position: 0 -45px; color: #0C0F1B; } #leftcol img { border-bottom: 1px solid #FFFFFF; } <!--LEFT COLUMN --> <ul id="leftcol" ><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li> <li><a href="**">Collision Repair</a></li> <li><a href="**" >Heavy Frame Repairs</a></li> <li><a href="**">Truck Body Repairs</a></li> <li><a href="**" >Sprinter Repair Specialists</a></li> <li><a href="**">Commercial Van Repairs</a></li> <li><a href="**">Painting & Decaling</a></li> <li><a href="**">Custom Truck Body Services</a></li> <li><a href="**">Morgan Body Parts & Service</a></li> <li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li ></ul> 2 problems: 1) In IE and Firefox: gap between <img> and <li> 2) In IE6, a gap appears between all my <li>tags What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>? Hi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey Hey guys, I am trying to create a vertical progress bar using CSS. I am using width/height of the image in % to set the value of the progress bar. I want my vertical progress bar to start at the bottom but CSS set up my height starting point at the top. My problem in image: Is there anyway to set the height starting point at the bottom? Thanks for your time! J0kerz PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? I'm trying to get vertical text in a menu ie h o m e - l i n k - And so on how can this be done thanks I'm sure this is some basic thing that's just slipped my mind. http://www.onlineeditions.com/opportunityhouse/ As you can see, it's rendered differently between FF and IE: the content column on the right has a few nested divs to hold background images, but on FF (And Safari) the "right" div seems to have slipped down and to the left a few pixels. Code and css is all valid, per w3c. If someone can help me find what's gone wrong here, I'd be most thankful. I'm trying to put a line of text on the bottom of a box. Code: <div style="width:500px;height:500px;background:black;vertical-align:bottom;"> This is a black box </div> <div style="width:500px;height:500px;background:black;vertical-align:baseline;"> This is a black box </div> What the above code displays: Code: ------------------------- | This is a black box | | | | | | | | | | | | | | | ------------------------- What I want it to display: Code: ------------------------- | | | | | | | | | | | | | | | This is a black box | ------------------------- I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas? Ok...I am dabbling with CSS and I was wondering if there was anyway to specify your text to run bottom to top instead of left to right in a table cell. Anyone know if it can be done? Hi I want to know if it is possible to vertical align the text in these div tags and how it's done. 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>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>
Greets, dabomb_gent for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code, #outer{ position: relative; float: left; width: 900px; height: 200px; } #outer .inner{ position: relative; float: left; width: 500px; height: 200px; vertical-align: bottom; } however the content of the inner div is starting at its default location which is top left of the inner div instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases. please advice. thanks. If you look at Lakelandedc.com you notice the menu is very weird when trying to go from each link to the other links... how can i fix the menu so it is easier to navigate? Code: /* CSS Document */
#menu
{
text-align:left;
width:155px;
background-color:#084D9C;
margin:0;
padding:0;
}
#menu ul
{
list-style:none;
margin:0;
padding:0;
}
#menu a, #menu h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:block;
border-width:1px;
border-style:solid;
border-top:solid 2px;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 3px;
}
#menu h2
{
color:#fff;
background:#BA5D92;
text-transform:uppercase;
}
#menu a
{
color:#FFF;
text-decoration:none;
}
#menu ul a:hover
{
color:#fff;
background-color:#091F51;
text-decoration:none;
}
#menu ul
{
position:relative;
}
#menu ul ul
{
position:relative;
top:0;
left:10%;
width:100%;
}
s#menu a:hover {
}
.submenu
{
background-color:#9A1F61;
color:#fff;
}
div#menu ul ul,
div#menu ul ul li:hover ul ul
{
display:none;
}
div#menu ul:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
I am new to CSS style sheets and coding. Best way to explain problem is to say: go to: sfsmokefree.org/test View in Firefox = no issues, looks good View in I.E. = left column is all pushed downwards what's up with that? How do I create div that shows vertical scroll bar if div id="content_area" is too big? Code: <div style="padding:10px; height: 100px"> <div id="content_area"> some text here </div> <div class="clear"></div> </div> |
|||||||