|
HTML - Can't Get Content To Align Horizontally?
Ok folks, new dilemma .... I finally got the Flickr code set up inside one of my content boxes, but now the group of images is uneven and for the life of me I can't get them to align in the center of the box.
Here is the code (and you can view it on my blog).... <style type="text/css"> /* ------ FLICKR ------ */ .container_flickr { width:225px; height:46px; background-image:url(http://dougcloud.net/show/headflickr.png); } .container_flickr { overflow:hidden; } .sidebar_flickr { width:203px; height:125px; background:#FEF6D2; font-family:Arial, Helvetica, sans-serif; border-width: 0px 1px 1px 1px; border-spacing: 0px; border-style: none solid solid solid; border-color: #4F3314; padding:10px; margin:0 0 20px 0; font-family: 'Trebuchet MS', sans-serif;color: #4F3314; font-size:11px; } div.flickrimg { width: 200px; padding: 3px 3px; } div.flickrimg a { float: left; padding: 0 0 5px 0; margin: 0 5px 0 0; border: none; } div.flickrimg a:hover { border: none; opacity: 1; } div.flickrimg a img { border: 1px solid #4F3314; height: 40px; width: 40px; } div.flickrimg a:hover img { border: 1px solid #ba742a; } #flickrmeta img { padding: 0px 5px 0px 2px; margin: 0; float: none; } </style> <div class="container_flickr"></div> <div class="sidebar_flickr"> <div class="flickrimg"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=random&size=s&layout=x&source=user&user=263327 75@N00"></script> </div> <div><span id="flickrmeta"><a href="http://api.flickr.com/services/feeds/photos_public.gne?id=26332775@N00&lang=en-us&format=rss_200" title="My Flickr RSS Feed"><img src="http://dougcloud.net/show/feed-icon-16x16.png" border="0"></a><a href="http://www.flickr.com/photos/26332775@N00/" title="My Flickr Photostream"><img src="http://dougcloud.net/show/morebuttonbrwn.png" border="0"></a></span></div> </div> Any help would be appreciated. Thanks Similar TutorialsHey, well i know alot of people put myspace questions here, and not to be another one of those myspaces i have a question... my myspace url is myspace.com/cherylishot haha dont ask. But on the bottom table i cannot get my links to align left to right, not vertical and in that scroll box. Any help would be appreciated thanks alot! Hi, I have problem with XHTML CSS vertical align middle. It works with Firefox but not with IE6. Many people has IE6 still so I need to get it to work. HTML Code: <div style="height: 128px;">text</div> How would I middle vertical align the text? HTML Code: <div id="table_small"><div id="table_vm">Special Offer</div></div> HTML Code: #table_small
{
background-image: url('images/table.jpg');
width: 128px;
height: 22px;
border: 1px solid #5a5a5a;
font-family: Verdana;
font-size: 10px;
color: #e0e0e0;
text-align: center;
display: table;
}
#table_vm
{
display: table-cell;
vertical-align: middle;
}
how do i center the body of this page: www.discoveryfilmsuk.com/ i want to align to the middle of the page, vertically and horizontally I need to post images vertically spaced evenly apart. How do I make the images do that? http://i409.photobucket.com/albums/pp174/Keevu/egg.jpg this is whats wrong theres a bunch of wasted space. Below is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>One Nice Day</title> </head> <body> <div style="margin:5% 15% 0 15%;border:1px solid black;"> <img style="border:1px solid green" src="http://www.oneniceday.com/Artwork/Notice.gif" alt="[One Nice Day] now contains nudity : photographs and drawings of nude men and women, of which I will be posting on this site solely for the purpose of learning figurative art, in which I am using them as learning references / aids. If you are offended by such images, please click the Back button on your browser." /> </div><br /><br /> <div style="margin:1% 15% 0 15%;font:14pt 'Trebuchet MS',Arial,sans-serif;text-align:center;"> <a href="http://www.oneniceday.com/wordpress/" style="font-weight:bold;">ENTER</a> </div> </body> </html> When I view my web page, the <div> doesn't shrink to fit the size of the image, and there's a huge gap next to the image. U can see the result at www.oneniceday.com How do I center my image horizontally on the page? Thanks! Here's my CSS-code for an item in a list: li { margin: 0em 0em 0em 4em; padding: 2px 0px 0px 2px; font-size: 9pt; } Now when I try to make a sublist, the problem is that the items in the sublist start from the same horizontal position than the items in the "main" list. Anyway to fix this? Should a make a new CSS item but with different margins and padding? How is that going to work since there's only one "li" available? How should I name it then? I have no idea why, but the pictures in the table at https://www.wagnermeters.com/california1.php are aligned vertically instead of horizontally as it seems they should be. Am I going crazy? What can I do about it? Hi, Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please? http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using! Thansk alot Joe Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long. I was just wondering how I can replace a word or number with a specified word or number. What I want to achieve: I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image. But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified. ------------- Man I really wish I remembered how to do this haha. Thanks guys. I'm trying to make this page/table align to the top of the page so that when the entire page is maximized, it will still "stick" to the top rather than in the middle of the page. The editor I am using (Visual Studio 2003) shows that it is at the top of the page but when running it and maximized the page, the content is centered to the middle of the page. Any ideas on how to resolve this? It is using a bit of CSS too..... Code: <body bottomMargin="0" rightMargin="0" MS_POSITIONING="GridLayout"> <form class="crm" id="crmForm" method="post" runat="server"> <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td> <table height="100%" cellSpacing="0" cellPadding="0" width="100%"> <TBODY> <tr> <td> <div class="simon"> <table style="TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%" border="0"> <COLGROUP> <col width="110"> <col> <col> <col width="120"> <TBODY> <tr> </tr> <tr> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24"> </td> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24">Candidate Details</td> <td style="FONT-WEIGHT: bold; WIDTH: 299px; BORDER-BOTTOM: black 1px solid" height="24">Vacancy Details</td> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24">Filtering Options</td> </tr> <!--etc..... --> css: Code: formButton
{
background-color: #6699cc;
padding: 2px 4px 3px 4px;
color: #000000;
font-size: 8pt;
font-family: tahoma;
height: 17px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#B4C5DF, EndColorStr=#91A9D0);
border-width: 0px;
}
TEXTAREA
{
font-size: 8pt;
font-family: tahoma;
width: 100%;
height: 100%;
border: 1px solid #7b9ebd;
}
.inputfields
{
font-size: 8pt;
font-family: tahoma;
width: 100%;
height: 19px;
border: 1px solid #7b9ebd;
}
INPUT.rad
{
width: 15px;
border: 0px;
cursor: hand;
}
DIV.tab
{
overflow-y: auto;
padding: 10px;
}
TD.sec
{
width: 100%;
color: #000000;
font-weight: bold;
padding-left: 0px;
padding-bottom: 2px;
text-overflow: ellipsis;
overflow: hidden;
}
TD
{
font-size: 11pt;
font-family: tahoma;
}
TD.bar
{
border-bottom: 1px solid #000000;
}
TD.req
{
font-weight: bold;
color: #9F2409;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
}
TD.statusBar
{
background-color: #63769B;
color: #ffffff;
padding-left: 5px;
height: 24px;
border-bottom: 1px solid #485673;
font-weight: bold;
}
LABEL
{
cursor: hand;
}
TD.radioLabel
{
padding-left: 2px;
padding-right: 10px;
}
TABLE.layout
{
table-layout: fixed;
width: 100%;
height: 100%;
}
div.tab
{
width: 100%;
height: 100%;
border: 1px solid #466094;
background-color: #EEF0F6;
display: none;
}
body
{
font-size: 11px;
margin: 0px;
border: 0px;
background-color: #EEF0F6;
cursor: default;
}
td
{
font-size: 11px;
}
table
{
cursor: default;
}
a
{
color: #0000ff;
font-weight: bold;
}
span.menu
{
height: 100%;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #7288AC;
}
table.mnuBar
{
color: #000000;
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB);
}
td.mnuTitle
{
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
cursor: default;
color: #000000;
}
td.mnuRight
{
width: 100%;
text-align: right;
padding-right: 5px;
}
DIV.header
{
font-size: 20px;
font-weight: bold;
color: #000099;
margin-bottom: 20px;
border-bottom: 1px solid #000044;
}
TR.header
{
font-weight: bold;
background-color: #E0E3E8;
}
th
{
border-right:0;
border-left:0;
background:url(imgs/bar_line.gif) left center no-repeat;
}
dataGrid.Table
{
border-collapse: collapse;
border-spacing: 0;
background-color: #000000;
}
dataGrid.td, th
{
margin:0;
padding:0;
}
.Glass
{
background-image:url(Img/Blank.gif);
background-repeat:repeat-x;
}
.Glass:hover
{
background-image:url(Img/GradientBlue.gif);
background-repeat:repeat-x;
}
i have this 2 images firefox ie7 how can i make the page in in intenret excplorer to look like in firefox? here is the code PHP Code: <?php include("muzica/config.inc"); $link = mysql_connect($mysql_host, $mysql_username, $mysql_password); $result = mysql_query("SELECT id, name, artist, catagory, size FROM ".$mysql_database.".songs ORDER BY id DESC LIMIT 5;"); for($i = 0; $i < mysql_num_rows($result); $i++) { echo "<br style=\"line-height:3px\">"; echo "<table width=\"100%\"><tr><td width=\"80%\"><img src=\"images/marcer.gif\" align=\"left\" style=\"margin-left:6px; margin-right:6px\"><span class=\"orange\"><a href=\"muzica/browse.php?catagory=".mysql_result($result, $i, "catagory")."\" class=\"orange\">".mysql_result($result, $i, "artist")." - ".mysql_result($result, $i, "name")."</a></td> <td>".mysql_result($result, $i, "size")."</td> </tr></table></span>"; echo " <br style=\"line-height:9px\">"; echo "<img src=\"images/hl2.gif\"><br>"; } mysql_free_result($result); mysql_close($link); ?> Hi, Can anyone tell me how i can accomplish this: http://www.tendervendors.com/dev/index-table.html without using display: table-cell. Atm, the exact same code, just without display: table-cell displays: http://www.tendervendors.com/dev/index.html Anyone got any ideas? TIA Matthew Millar Hi, I wonder if anyone could help me solve what is probably a very simple problem. My website is www.danmondayeteaching.com In Chrome and Safari it displays how I want it. However, in IE my e-mail address will not align right. In Firefox there is a thin black border to the cell with my e-mail address in. I've tried lots of ways to solve the problem to no avail. Here is the offending code: <tr> <td nowrap width="80%" border= "0" style="border-style: none; border-width: medium" height="102"> <p style="margin-left: 6; margin-top: 0; margin-bottom: 0"><b><font color="#FFFFFF" size="6" face="Verdana">Dan Monday E-teaching</font></b> </p> <p style="margin-left: 6; margin-top: 0; margin-bottom: 0; horizontal-align: middle"><b><i><font color="#A8E1F2" face="Verdana"> <img src="skypelogo.png" alt="Skype" img style="vertical-align:middle"> your way to better English</font></i></b> </td> <td width= "20%" border= "0" style="border-style: none; border-width: medium" height="102"><td align= "right"> <p style= "text-align: right; margin-right: 28;"><b><font color="#FFFFFF" size="4" face="Verdana">monday.daniel@gmail.com</font></b></p></td> </tr> tldr - IE won't align my e-mail address to the right. Thanks in advance for any suggestions. <td valign="top" background="" rowspan="9" width="666"><div style="width: 200; height: 200; background-color: transparent; font-family: arial; font-size: 11px; color: FF2222; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: 952716; overflow: auto; padding: 5px;">Test</div> This is the code i have. How would i move it away from the top and left side by a certain amount of pixles? For example, 100 pixles from top and 50 from left side. I'm learning HTML and the teacher has us learning deprecated tags - Just to let you. If I want to center this tag, where do I put the align code? <h1><font color="#4f4fc1">HTML Forums</font></h1> HELP! why can't i align my texarea and my three side panels? http://www.hottunaint.com/press7test.html i have a javascript running a scrolling text on my site and im trying to position it to either align to the right or set x,y coordinates... i already tried putting align =right in the tag and it didnt work here is what im working with... http://www.freewebs.com/fallingrain11/1.html here is the call up im using i also <iframe width="165" height="215" src="irawr-scrollernewstic.html" SCROLLING="no" FRAMEBORDER="0" border=0></iframe> Hi every one. Well i have a problem with align="center" In tow PCs this align not working (its not coming to center) In one PC that i tried somehow its work. I did the same in all 3 PCs. So my question is why ??? Thanks I have three DIV: <!-- Top 5 Hotels --> <div id="top5container"> HOTELS/RESORTS<br /> </div> <!-- Top 5 Restaurants --> <div id="top5container"> RESTAURANTS </div> <!-- Top 5 Shows --> <div id="top5container"> ENTERTAINMENT </div> I want to wrap those three DIVs (most likely in another DIV) and have them centered in this DIV. See www.vegastraveling.com and see on the welcome page. I want the 3 "top 5" to be centered... but I can't seem to have it work So it's basically centering 3 DIVs within a DIV. I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen. here is the code that i have got so far: HTML Code: <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo Menu 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>
</head>
<body>
<div class="navbar" style="width: 148; height: 253;">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Sub Menu 2</a></div>
<div class="subItem"><a href="#">Sub Menu 3</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>
<p> </p>
</body>
|
|||||||