|
CSS - How To Control Page Alignment
Hello
I am looking for the correct way to control the alignment of elements in my HTML page. in the old days, I used to add the <center> tag whenever I wanted to center some content. if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center"> I also noticed the CSS rule text-align. My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules regards Similar TutorialsCan I use CSS or javascript to control the page details of an IFRAME? Such as printing in landscape orientation? If it is possible, how? Hello, I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off. Can CSS be used to control these margins on the page? I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next. Code:
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body {
margin-left: 15px;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
}
.style15 {font-size: 10pt}
.style21 {font-size: 18pt}
.style24 {font-size: 24pt}
.style25 {font-size: 16pt}
.style28 {font-size: 12pt}
-->
</style>
<link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css">
<style type="text/css" media="print">
<!--
.style19 {font-size: 14pt}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.style22 {font-size: 9pt}
.style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;}
.styleprint {
margin: 0in 0in 0in 0in;
margin-top: 0in;
margin-left: 0in;
}
-->
</style>
I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins. How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins? Thanks, Paul I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! I want to use the following script found here. I want to alter it so that on rollover a DIV is shown instead of the IMG. Within the DIV will be the IMG and some copy. I have tried to do this but always end up with the rollovers not placing correctly, or the copy shows at all times. Thanks for the suggestions and help. Hi I am making a website where i have a main heading on all pages' start. I want to control its looks with CSS, i have an external CSS that controls links and body text etc. i have tried in external CSS Code: H2 {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFCC99;
}
and on pages i use <h2> heading is here </h2> but it doesnt make any difference and the main heading is also shown as the normal text of page body according to stylesheet. Please shed some light on this... thanks Hello everybody, I not an expert in CSS but getting better at it. I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated. <div id="page-container"> <div class = "data_table"> have the table all setup and some css works and some done. </div> </div> Quote: <body> <div id="page-container"> <div class = "data_table"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <th> Ticket # </th> <th> Description </th> <th> Created </th> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.yahoo.com/');"> <td> 473875 </td> <td> unable to install network card </td> <td> Dec.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.microsoft.com/');"> <td> 474723 </td> <td> Need help setting up my router </td> <td> sept.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://Imar.Spaanjaars.Com/');"> <td> 463175 </td> <td> Need microsoft word training</td> <td> Jan. 07.08 </td> </tr> </table> </div> </div> from external css file Quote: #data_table .table { border: 1px solid black; border-bottom: 1; border-left-style: solid; } #data_table .th { border: 1px solid black; border-bottom: 1 solid black; background: lightgreen; } #data_table .td { border-bottom: 1px solid black; border: 1; } Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> Hello I have the following CSS rule for some text: .Text { font-size:13; color:#2C506A; font-weight:bold; } When the browser renders it, it uses anti-aliasing to give it a better look. I am interesting in displaying the same text without anti-aliasing. Is this possbile via CSS? is there a way to tell the browser to not anti-alias the text? If so, how? regards Hello I know that on IE I can control the look of the scrollbar via: * scrollbar-face-color * scrollbar-highlight-color * scrollbar-shadow-color * scrollbar-3dlight-color * scrollbar-arrow-color * scrollbar-track-color * scrollbar-darkshadow-color Is it possible to control its look also in Firefox 1.0 and Opera 7.54? regards Hi there, Check out this screen shot: ...okay, I guess I can't attach a shot or paste a URL to the shot.. I'm using a hoverstate on a dropdown of orange with reverse text - I'm able to get both the background and the text to do what I want but I can't seem to control the WIDTH of the background. Here's where I'm controlling that backgound (orange) behind the dropdown items. #nav ul li a:hover { text-decoration:none; background-color:#d3862a; color: #ffffff; height: 15px; width: 100%; padding: 0px; margin: 0px; display:block; does anyone out there have any ideas? THANKS SO MUCH! Hi I have the html below and I only want to display the "initial text" and the "some more text" bits of text. Is this possible using only CSS without any modifications to the html e.g. adding id's ? <div id="snav"> <p><span id="somespan">You are he <a title="home page" href="/content/index.html">Home</a> <a href="http://www,saving.com">initial text here </a><br />Some more Text here.</span></p> </div> thanks. G Hi, I not very good at CSS and I need to create a page that shows divs in other order that are in the script: in my page i want to be something like this: Code:
<body id="body" >
<div id="bodyHolder" >
<div id="mainHolder" >
<div id="mainColumn">Here will be the main content</div>
<div id="leftColumn" > Left Column</div>
</div>
<div id="topLogoHolder">Site Logo</div>
<div id="topMenuHolder" > Top Menu</div >
</div>
<div id="footerHolder"> Footer</div>
</div>
but I want to show: Site Logo, Top Menu, Left Column, Main Column, Footer My problem is with Footer. I can't get to position at the bottom of page (not at the window) because the Main Column is not fixed. The CSS code is : Code:
body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;}
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px; width:810px;}
#leftColumn {text-align:left; display:block; float:left; width:180px; }
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block; position: absolute; bottom:0px; height:100%; clear:both;}
I really don't what to try (google gives me no clue... all my attempts failed ) I'll appreciate any help! Thanks a lot in advance I'm loading a pdf document into my html document through an iframe. The document it is being embedded into is a layer that acts like a popup window who's width and height can be adjusted by dragging the window. I'm trying to have the iframe maintain 100% height, but can't seem to get it. <div style="height:350px;"> <iframe src="test.php" height="100%" width="100%"></iframe> </div> Now if I change the height from 350 to 100% on the div element, the iframe will resize to fit to 100% as the window is resized. However the downside to this is that when the iframe initially loads it's only about 50px in height. Suggestions on how to both maintain 100% and initialize at a fixed width? Hi, I am at this point too tired to continue to search for my answer, so I am going to just ask... I would like to be able to control the color and underlining of the links in the unordered list. This list will appear on every page in the site. I am not sure what the CSS code is or in which class/id to place it in my css file. the page code is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="nav.js" type="text/javascript"></script>
<title>Natura Culina :: Welcome</title>
</head>
<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()" bgcolor="#D89607">
<div class="allcontent">
<div id="header">
<ul id="navigation">
<li><a href="index.php">home</a></li>
<li><a href="products.php">products</a></li>
<li><a href="ingredients.php">ingredients</a></li>
<li><a href="about.php">about us</a></li>
<li><a href="testimonials.php">testimonials</a></li>
<li><a href="links.php">links</a></li>
</ul><!---end navigation--->
</div><!-- end header -->
<div class="textArea">
<p align="center"><span class="header1">Welcome to
Natura Culina Organic Skin Care </span></p>
<p><br />
<img src="/images/all229.jpg" width="367" height="233" align="left" class="left" /><span class="bodyBold">Natura
Culina</span> creates luxurious skin care products that will appeal to your
senses, inspired by skin care traditions used at centuries old European
Spas.</p>
<p>We are <em><span class="bodyBold">so over</span></em> using chemical
solutions for our skin problems because they are so unsatisfactory.<br>
We are <em><span class="bodyBold">so back</span></em> to feeding
our skin with natural ingredients, oils, vitamins and antioxidants.</p>
<p>All the oils used in our products are cold pressed and certified
organic. All our ingredients are carefully blended to create effective,
nourishing and natural products for your skin. All body products
are made after placing an order to assure freshness. </p>
<p> </p><p> </p><p> </p>
<p align="center"><em><span class="bodyBold">Start loving your skin
again with Natura Culina Food For Your Skin.</span></em></p>
</div><!---end contentBGColor--->
</div><!---end allcontent--->
</body>
</html>
and the CSS sheet code is this: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #D89607;
}
#body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #E1A21A;
}
.allcontent {
width: 736px;
margin-left: auto;
margin-right: auto;
border: thin dotted;
margin-top: 10px;
}
#header {
background-image: url(/images/banner1.jpg);
background-repeat: no-repeat;
height: 260px;
margin-top: -18px;
}
.textArea {
background-color: #E1A21A;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#navigation li {
float: left;
list-style: none;
padding-left: 20px;
padding-right: 20px;
padding-top: 240px;
}
#navigation {
font-size: 16px;
font-weight: bold;
color: #fff;
}
img.left {
padding: 0px 10px 0px 0px;
float: left;
}
.header1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.bodyBold {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
}
.itemBorder { border: 1px solid #73090E }
.itemText { text-decoration: none; color: #F3F7FD; font: 14px Arial, Helvetica }
.itemTextHeaders { text-decoration: none; color: #E6EBF2; font: bold normal 13px Verdana, Arial, Helvetica, sans-serif}
i made a nice pop up div with object details. when i control scroll and resize the browser contents everything follows except this pop up div. so the content inside explodes or shrinks where the actual div height and width stay the same. what have you guys done to fix this? thanks Hi. I want to have full control over the colors of a SELECT element. Example: I want to control the color behind the arrow at the right in the SELECT (the area where you click to expand the SELECT). Is that doable using CSS? If not.. any other way to control this (not from client browser, but from developer code)? Hello people I have a silly style-related question I am trying to render a simple HTML table The table has 2 rows on its left column and one cell on its right column (rowspan = 2) What I am trying to do is to cause the top-left cell to have a fixed height, and to give the remaining height to the cell below it (in the same column). This should work no matter how tall is the table Here is my snippet: Code: <html> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="45" valign="top" style="padding-right:5px; padding-top:5px;"><img src="graphic.jpg" width="30" height="40" style="border:1px solid red;"></img></td> <td width="99%" rowspan="2" valign="top" style="padding-bottom:5px;">This<br> is<br> the<br> content<br> of<br> the<br> text<br> on<br> the<br> right</td> </tr> <tr> <td width="50" style="padding-bottom:5px;" valign="top">text under photo</td> </tr> </table> </body> </html> The code behaves correctly when viewed in Firefox 1.5 (see attachment screenshot) but when viewed in IE6.0, the top-left cell seems to ignore my height request... any help would be appreciated This topic may have been covered before, but I have searched and can't find anything. I think it is a unique topic. My boyfriend and I have a php site, http://biggt.mybesthost.com, we are having trouble that only shows up in the administrator part. For example, when a topics post is made, the font is different like the comment.link _DATESTRING The chatters is different. Any help to solve this would be greatly appreciated. Thanks I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" |
|||||||