|
CSS - Any Idea Of Aligning The <div> Tag To Center??
I haven't figured out how to align the <div> tag to be center for the Mozilla browser.. I know I'm missing something here but I can't remember which. This one work in IE but not Mozilla.
Code:
<div style="text-align: center;">
<div>
<STYLE TYPE="text/css">
body {font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;}
H2 {font-family:Verdana;
font-size:12pt;
font-weight:bold;
color:black;
width: 625px;
BORDER-BOTTOM: black 1px solid;
}
TD {font-family:Verdana;
font-size:8pt;
font-weight:normal;
color:black;}
.cTradeLines TD
{FONT-WEIGHT: normal;
FONT-SIZE:10ptl;
COLOR: black;
FONT-FAMILY: Arial}
.cTradeLines A
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cTradeLines A:hover
{FONT-WEIGHT: normal;
FONT-SIZE:10pt;
FONT-FAMILY: Arial}
.cSpSm
{FONT-WEIGHT: normal;
FONT-SIZE: 7pt;
COLOR: black;
FONT-FAMILY: Arial}
</STYLE>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"><LABEL style="font-family:Verdana; font-size:12pt; font-weight:bold; color:black;">TRANS UNION Credit Profile Report</LABEL><br>TRANS UNION<br>555 W ADAMS<br>CHICAGO, IL. 60661<br>800 888-4213<br>
Date Reported: 9/16/2005</td>
</tr>
</table>
</p>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"></td>
</tr>
</table>
</p>
<p>
<H2>Status</H2>
No Hit<br></p>
</div>
</div>
I know the codes isn't w3.org compliant with the way the <style> tag are inserted. It's the way the web page is created via the 3rd party website when receiving it and I'm encapsulating it with a <div> tag. I don't wanna do a lot of screen scraping and moving around the tags with PHP because they are never the same from the 3rd party website. Thanks.. Similar Tutorialshey im having a problem with my div aligning in my css. I want the whole site to be centered but start on the top of the page. I can either set all my margins and padding to 0 and get it top left or I can center it in the middle of the screen but theres a giant gap from the top of the screen and where the site actually starts.. any suggestions on how to align it with the top but still keep it centered? Thanks is there any way of center aligning a div layer on a page by not nesting it within another layer. heres the codes i tried but it didnt work: <div align="center" id="Layer1" style="position:relative; width:268px; height:75px; z-index:1; text-align:center"></div> If I have a bunch of <div>'s floated here and there to form the layout of my page, if I want to have my design centered on the screen do I have to wrap the whole thing in a another pair of div's, ie <div align="center">...</div> ? I've made a site for someone and it was center aligning and it worked in all 3 main browsers (IE, FF and Opera) so when I was tinkering with ideas for redoing the look of my site, I used the CSS sheet I used for his site as a base for mine. Unfortunately it's only center align in IE7 with my site. My site is admittedly a bit more complex, at the moment, with more divs, it should still work. Mind you I'm probably just too tired to spot the obvious. Can anyone see what's stopping it from center aligning in FF and Opera? The template: http://www.toadwarrior.com/temp/index.php The CSS: http://www.toadwarrior.com/temp/mark_h_walker_journalist.css Thank you in advance. Hi For some reason my links won't align centrally on a mac or netscape. Here's the classes in a style sheet I'm linking to. It works on a PC though. I want the links to only become underlined when you roll over. The problem is the links are long sentences and in a thin table so they go over on to two lines. And when this happens, the second line is not aligned centrally with the first. It's slightly scew. .copy { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; text-align: center; padding-right: 20px; padding-left: 20px; text-decoration: none} a.copy:hover { font-family: "Times New Roman", Times, serif; font-size: 11px; line-height: 13px; color: #000000; padding-right: 20px; padding-left: 20px; text-decoration: underline; text-align: center;} I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> Thanks for reading, I have no idea what I'm doing as far as CSS goes and I just purchased this code for a bigcartel store. My main issue is that when I click checkout button with something in the cart nothing is happening. This is the checkout page code.where is says ---- is where my site goes but this is my first post so I cant post with it in there. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(----)"> <html xmlns="(----)"> <head> <title>{{ store.name }} — One moment...</title> <style type="text/css"> body { margin: 100px; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #666; } h3 { padding: 50px; border: solid 1px #ddd; background-color: #f8f8f8; width: 300px; font-size: 18px; } </style> <script type="text/javascript" charset="utf-8"> function checkout() { if(top != self) { top.location.replace(self.location.href); } else { document.checkout_form.submit(); } } </script> {{ head_content}} </head> <body onload="checkout();"> <div align="center" style="margin:20px;"> <h3>One moment...</h3> </div> {% checkoutform %} <noscript> <input type="submit" value="Checkout" /> </noscript> {% endcheckoutform %} </body> </html> Anyone see anything wrong with it? The checkout button is supposed to take your paypal account so you can pay for the t-shirts. Here's the actual site add the www and com to it naffleskell.bigcartel Any help is greatly appreciated. Thank you!! Ok here is my problem: .leftmenu { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#444444; text-decoration:underline; } .leftmenu:link,.leftmenu:visited { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline; } .leftmenu:hover,.leftmenu:active { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#F22222; text-decoration:underline; } I already have an a:link ect section (which works) However, i want to call the leftmenu class from the start of a table insert. <td width="70px" background="img/topbar.gif" class="leftmenu"> the leftmenu class itself works for text, BUT it doesnt get applied to links. Is there anyway to do this short of coding it into each link? I know css but have never tried anything like this before, and its been wrecking my head all morning..... B Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out. The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after. http://sonicparke.com Has anybody done this or know how it should be done? for my website, i'm going to be using some css for every page in it, would it be advisable to store the css for each page in their own file? or even better in the actual page itself? if i put it all into one css file i'll end up putting bit spacers: /*-=-=-=-=-=-=---=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-*/ to block things apart Actually I had 4 files named the same as they were importing: Code: CSS @import "header.css"; @import "menu.css"; @import "content.css"; @import "footer.css"; It took me a half hour to figure out why IE was loading and Firefox wasn't. Hahaha, I am dumb. D-U-M-B, I mean D-U-N-C-E Off to the corner with me... Picture What if someone only had two middle fingers? Would they raise both and then go piss on their shoe? GEOGRAPHY :P I'm bored, at least I'm getting paid for this post :P Hahahaha... Quoted from a recent post " Using a server-side language or JavaScript to send different stylesheets to different browsers is a bad practice. It tends to cause more problems than it solves. " Enlighten me on "why this is considered a bad practice " -- or even better yet, what would u suggest is a work around. Specifically ive found that the use of absolute positioning tends to vary on how it works ( or doesn't) , ive narrowed my specific problem down to what seems to be the different browser's assigning a different "meter value" ( for lack of a better term) or size increment for "1px" My test page is essentially "displaying correctly" except offset values seem to produce a varying range of "what 1px really means". IE6 (win) and FF1/2 (win) displays the test page fine - but on IE5.2(mac), Safari (not sure version, but oddly enough this browser gives the closest true values) , and FF1 (mac) seem to "define 1px as either larger or smaller" then whatever their windows counterpart decides. How would you suggest I work around this situation if not with Browser Dection via the use of serverSide / Javascript coding ( which until reading the quoted statement above, i was going to implement). Do Share please ! edit: heres the CSS file, its been validated. The issue is inspecific to my file but related to browser detection. anyway... Code:
#totalcontents {
z-index : 7;
position : relative;
}
.banner {
z-index : 6;
position : absolute;
top : -1px;
z-index : 3;
}
#introblock {
position : relative;
}
.navigation {
z-index : 10;
position : absolute;
top : -33px;
left : 200px;
}
.smallheadline {
z-index: 8;
position : absolute;
top : -43px;
left : -175px;
width : 395px;
color : #CCFF00;
background-color : #333300;
padding : 3px;
border-style : solid;
border-width : 1px;
border-color : #999966;
font-family : times;
font-size : 10pt;
}
.dropright {
z-index: 8;
position : absolute;
top : -67px;
padding : 7px;
left : 203px;
color : #CCFF00;
border-style : solid;
border-width : 1px;
border-color : #66FF00;
background-color : #333300;
width : 325px;
}
.othernews {
z-index : 5;
position : absolute;
top : -276px;
left : -175px;
width : 390px;
color : #FFFFFF;
padding : 5px;
/*border-style : solid;
border-width : 1px;
border-color : #CCFF00;*/
}
.backdrop {
z-index : -1;
position : absolute;
top : -635px;
}
html {
background-color : #646464;
}
After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css Perhaps someone could help me. I have spent hours trying to figure out what I am doing wrong. I am designing a page that has centered content with several DIV's that I want to be exactly the same width. The menu DIV does not have a margin, but the main text does. I cannot get the DIV's the same width in Firefox and IE 6.0. If it works in one, it wont work in the other. The link for the page is http://www.snc-cds.com/snctest.html The CSS is at http://www.snc-cds.com/stylesheets/sncstyletesting.css I have tried to use/figure out the box model hack, but I'm not sure if this is what it takes to fix it. Thank you for any help, Steve I am not sure if this is a problem that can be solved with css or not. I have recently switched from straight html to php and have no experience in css. Basically I split my pages into 5 separate areas. Header, footer, right column, left column and center column. The problem that I am running into is that the header and footer are in the right spot on the page but the left, right and center columns are way off. Here is a link to my site OWPT I have my problem, with an example, explained in more detail. Any help would be greatly appreciated. Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... |
|||||||