|
CSS - Positioning And Size.
New to CSS, but I'm looking for the following:
I would like to create this matrix, with say 3/3 fields. Each of these fields will have an image of a particular size. The size for all 9 fields are identical. So something like: ******************************* * * * * * Image 1 * Image 2 * Image 3 * * * * * ******************************* * * * * * Image 4 * Image 5 * Image 6 * * * * * ******************************* * * * * * Image 7 * Image 8 * Image 9 * * * * * ******************************* I defined the matrix using div with the code: .matrixX10 { margin-top: 10%; position: absolute; } .matrixX20 { margin-top: 20%; position: absolute; } .matrixX30 { margin-top: 30%; position: absolute; } .matrixY10 { margin-left: 10%; position: absolute; } .matrixY20 { margin-left: 20%; position: absolute; } .matrixY30 { margin-left: 30%; position: absolute; } I defined each field as in eg: <div class="matrixX10 matrixY10">image 1</div> That actually works, but I would like to define the size of these images. Defining the size of the div does do anything (do I overlook something) and I do not like to, well define all images individually. Do I need to add another class, or am I writing a really messy code? Similar TutorialsHello, I am a current beginner to the web design game, and I am currently making my first website using CSS. As you may already know, I am having difficulties rendering my web site in Internet Explorer 7/8. My two main problems a 1.) IE won't resize the font size that I need to display my navigation bar correctly 2.) IE is positioning my wrapper slightly left of center pushing my navigation list off the template Here is a link to my page http://www.kyjocro.com/IAO/navproblem.html Here is the HTML HTML Code: <html> <head> <title>Title</title> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styletest.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="container"> <div id="top"></div> <div id="bod"> <div id="wrapHeader"> <div class="headerLeft"></div> <div class="headerRight"><p>Call Now 888-467-6650</p></div> </div> <div id="navWrap"> <ul id="navigation"> <li><a href="#"><span class="currentTab">Independent Agents Online</span></a></li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link </a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Information & Insurance Resource Center</span></a> <ul> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> <li><a href="#">Sub-Link</a></li> </ul> </li> <li><a href="#"><span>Link</span></a></li> </ul> </div> <div id="contentMain"> <h2>Welcome to Independent Agents Online!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. Cras volutpat accumsan odio ut cursus. Integer a ipsum at libero semper eleifend at ac mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ultrices, augue sed rhoncus auctor, ligula lorem rutrum enim, nec congue ipsum mi eu massa. Vestibulum imperdiet interdum sodales. Ut condimentum consequat fringilla. Proin vestibulum porttitor porta. Integer elit turpis, sodales lacinia blandit sed, egestas at augue. Vestibulum ut felis sed eros pharetra interdum nec ut sapien.</p> </div> <div id="wrapColumn"> <div id="columnLeft"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. <center><img src="images/handshake.jpg" width="150" height="150" alt="" border="0" /></center> </div> <div id="columnMid"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. </div> <div id="columnRight"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis ante volutpat nunc adipiscing at dictum orci mollis. Proin nec tincidunt urna. Phasellus placerat lorem at enim auctor nec imperdiet lectus tempor. Nullam arcu nisi, tristique in vestibulum et, suscipit at velit. Nunc ligula massa, fringilla laoreet pellentesque a, consequat at eros. Suspendisse sem justo, ultrices ac hendrerit eget, porttitor eget arcu. </div> </div> </div> <div id="bottom"></div> <div id="footer">Site Map LegalAbout Us</p></div> </div> </div> </body> </html> Here is the CSS http://www.kyjocro.com/IAO/styletest.css Code:
body{ margin:0; padding:0; background: rgb(26,124,54); background-image:url(images/bg.png); background-repeat: repeat-x; text-align:center; /*IE POS Comp.*/}
h2{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FF0000; padding: 4px; padding-left: 0px; text-align:center;}
img { border:none;}
/*Containers*/
#wrapper{margin:0 auto; padding:0; height:auto; display:block; background-image: url(images/bg.png) repeat-x;}
#container{ margin:0 auto; padding:0; width:960px; height:100%;}
#top{ margin:10px 0 0 0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/top.png); background-repeat:no-repeat; text-align:left;}
#bod{ margin:0; padding:0; float:left; display:block; width:100%; height:auto; background-image:url(images/bgc.png); background-repeat:repeat-y; text-align:left;}
#bottom{ margin:0; padding:0; float:left; display:block; width:100%; height:22px; background-image:url(images/bottom.png); background-repeat:no-repeat; text-align:left;}
/*Logo Header*/
#wrapHeader{margin:0px auto; width: 960px; height:128px; background: url(images/bgc.png) repeat-y;}
.headerLeft{width:566px; float:left; background:url(images/logo.png) no-repeat; height:128px;}
.headerRight{width:382px; float:left; background:url(images/headerRight.jpg) no-repeat; height:128px;}
.headerRight p{ font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:24px; color:#FF0000; padding:60px 0 0 100px;}
/*Navigation Bar Code*/
#navWrap {margin: 0 auto; width: 940px; font-size: 12px;}
#navigation {overflow: visible; font-size: 13px; font-family: verdana, arial, helvetica, sans-serif; padding:1px; width: 960px; margin: 0 auto; font-variant: small-caps; }
#navigation li { float: left; list-style: none; background-color: rgb(26,124,54);repeat-x; width: 115px; border: 1px solid black;}
#navigation a {display: block; background-position: top right; background-repeat: no-repeat; color: white; text-decoration: none; font-weight: bold; }
#navigation span {display: block; background: url(images/navbg.png) repeat-x; padding: 1px 0px; text-align: center; min-height: 50px; font-variant: small-caps; height: 50px;}
#navigation span.currentTab {background: url(images/navbghover.png) repeat-x; border-bottom:none;}
#navigation a:hover {background-position: right -198px; }
#navigation a:hover span {background-position: 0 -198px; background-color: red; background: url(images/navbghover.png) repeat-x; }
#navigation li ul {position: absolute; width: 115px; left: -999em; margin-left: -41px; font-size: 12px; color: black; font-weight: normal; font-variant: normal;}
#navigation li ul a, #navigation li ul a:link {background-image: none; padding: 2px 0px; width: 115px; background-color: rgb(173,204,239); color: black;}
#navigation li ul a:hover {background-color: rgb(128,187,150);}
#navigation li:hover ul, #navigation li.sfhover ul {left: auto;}
.contactBreak p {line-height: 3px;}
/*Main Body*/
#contentMain {margin: 0px auto; width: 960px; float: left; padding: 10px;}
#contentMain p {padding: 10px 30px; text-indent: 30px;}
#contentMain img {float: left; padding: 0px 10px;}
.getQuote {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getInfo {width: 200px; float:left; padding:5px; border: 1px solid black;}
.getManage {width:200px; float:left; padding 5px; border: 1px solid black;}
/*COLUMN WRAPPER AND DIVS */
#wrapColumn{
overflow: auto;
float: left;
width:960px;
margin: 0px auto;
background-image: url(images/bgc.png);
}
#columnLeft {
border-top: 2px solid #046004;
padding: 10px;
margin-left: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
#columnMid {
border-top: 2px solid #046004;
padding: 10px;
width: 404px;
float: left;
background-color: white;
min-height: 600px;
}
#columnRight {
border-top: 2px solid #046004;
padding: 10px;
width:230px;
float: left;
background-color:white;
min-height: 600px;
}
/* Footer Copyright Legal*/
#footer {margin: 0 auto; display:inline-block;}
I realize that my drop down doesn't work in IE either, but that might be too complicated for me to understand at this point since I kind of frankensteined it from various examples. Much thanks in advance Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo I am new to adsense. I was wondering if I should specify the size of each ad in css (via the div I have around each ad). Or is this unnecessary? (I am not asking if I can change the designated size of the ads in css, but just if I should put in the width and height of the standard ad sizes I have chosen). Any insight would be greatly appreciated. Thanks. I'm not a programmer by nature, but am picking things up as I go along. I'm working on some forms to make my job easier. Hopefully what I will provide below is enough info to provide a solution. If not, let me know what else you might need. I understand that this section of CSS manipulates the size and other attributes of the textarea input box: fieldset div input,fieldset div textarea { width:150px; border-top:1px solid #555; border-left:1px solid #555; border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:1px;color:#333; } What I am looking for is what do I need to add to my CSS and consequent HTML markup to have other textarea input boxes with different attributes? What I really need is to have 4 small boxes within the same div on the same row. Thanks in advance!! Whats the best way to fix font size? I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape. Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts? Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view. Thanks for you help Liz Hi, For some reasons, my CSS linked file is not taking any more rules. Is there a maximal number of rules per CSS file? Thanks We have > 400 products in our children's boutique in Infant Girl as an example. Right now, you click 1-20, 21-41, etc. to view them by 20. I'd like to give people a way to view all, but here's my problem. I use a horizontal looper asp program to show 3 colms and products and how ever many rows required to show 20. Behind this I use a white CSS box that looks like this. <span class="detailsboxlist"></span> There's nothing in it. I use layers to push it behind the products. How can I now make it dynamically scale to the view all (400+ products) which change all of the time? Thanks!!! Mike Hello. I was wondering how I would go about doing this. I have a div, the left and right side of it is an image that I want the size to be able to be fluctuated, say, if the div goes larger than say 50 px, then it will start repeating and get larger. I have tried to start this already, but I havent had any luck. I also am not having any luck on getting the backgroun image to show. Anyone here know how I would make it to where my left or right side (border-right, border-left) will automatically resize if it is needed to go larger or get my background image to show? It's for a news conent box for my website I am coding, and I need it to go larger than just a set value. Thanks for your help. P.S. this is what I have so far Code:
<div style="width:460; height: auto; border-right: url("images/border_right.gif"); border-left: url("images/border_left.gif"); background-image: url("images/content_content.gif"); background-repeat: repeat;">
News content will go here
</div>
This should be fairly simple, but I can't figure it out right now. I have a list of nav buttons that I have floated so they are inline. When I hover over them, a 4px border appears at the bottom. The problem is, it pushes my content container down on hover. I've tried margins and padding in different places, but can't seem to prevent it from happening. How do you prevent this? Code:
#navcontainer
{
display:inline;
}
#navlist
{
margin: 0;
padding: 0;
padding-bottom:20px;
border-bottom: 1px solid #FDC737;
float:right;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist li
{
line-height: 14px;
}
#navlist a:link, #navlist a:visited
{
float: left;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #fff;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #FDC737;
padding-bottom: 2px;
background: transparent;
color: #FDC737;
}
#navlist a:hover { color: #fdc737; }
Code: ----------------------------------------------------- | | H1 |image| | | H2 Inline nav tabs ----------------------------------------------------- hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like:
Code: body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969;
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }
a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller here is a preview with that css file in use : http://www.dbznetwork.net/ People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly. I'm using "em" instead of pixels when setting font sizes in CSS. The site has fixed length and width, do I HAVE to allow it to resize itself? http://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code:
* { padding: 0px; margin: 0px; }
#navbar {
list-style-type: none;
margin-left: 0px;
background-color: #336633;
padding: 0em;
height: 2em;
margin: 0px;
font-size: 10pt;
}
#navbar li {
display: inline;
float: left;
padding: 0.5em;
}
#navbar li a {
color: white;
text-decoration: none;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
vertical-align: baseline;
line-height: 100%;
}
#navbar li a:hover {
background-color: #669966;
I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Hi, Im trying to code a small portfolio page but im having trouble with the sizing of one of the sections. Here is my page: http://www.zombiemod.com/blog/?cat=1#all Here is my code for the div: Code: #container div { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
How do I make the Div display this size correctly? Please help! I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated. here's the CSS i've used for IE: Code: /* first rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 14px;
font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */
.rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; }
.rbcontent { margin: 0 14px; min-height: 570px; height: 100%; }
/* EOF first rounded box */
/* second rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
width: 100%;
height: 24px;
font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; }*/
.rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;}
.rbcontent2 { margin: 0 14px; min-height: 375px; }
/* EOF second rounded box */
here's the html i've used: Code: <body>
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<div class="rbroundbox2">
<div class="rbtop2"><div></div></div>
<div class="rbcontent2">
<p><?=$content?></p>
</div><!-- /rbcontent2 -->
<div class="rbbot2"><div></div></div>
</div><!-- /rbroundbox2 -->
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div>
<!-- /rbroundbox -->
</body>
Hello, I have something has follows: <div> ... <table> ... </table> </div> My document font size is 1em. My div font size is 1.4em. What should be the font-size in my table to get back to the 1em of the document? Thanks, Miguel Is it possible to define the size of a DIV, by distance to the edges? Hello, How large should my css file size be? |
|||||||