|
CSS - I Eed To Make A Css For These Requirements
A column on the left side of the page 200 pixels wide (reserved for a vertically orientated textbased
navigation bar). The background colour of this area should be black. An area to enter content that is 800 pixels wide with a white background. Any help appreciated. Similar TutorialsWhen this design was originally built-out, there were no set requirements on how the CMS behind the design would function. As the project has progressed, some of those requirements have started to trickle down and a some of them are getting pretty ridiculous. This is loosely the code I'm working with. Code: <div id="primaryContent"> <div class="primaryModule"> Content </div> <div class="primaryModule"> Content </div> <div class="tertiaryModule"> Side Content </div> <div class="tertiaryModule"> Side Content </div> </div> <!-- end primaryContent --> And the accompanying CSS Code: .threeColumn #primaryContent,
#primaryContent.threeColumn {
float:left;
margin-left:6px;
padding:7px 10px 20px 22px;
width:732px;
}
#primaryContent .primaryModule,
.primaryModule.primaryContent {
margin:0 300px 2em 0;
position:relative;
width:514px;
}
#primaryContent .tertiaryModule,
.threeColumn .tertiaryModule {
float:right;
margin:0 0 2em 531px;
padding:0 11px 0 12px;
position:relative;
width:178px;
}
I have attached a picture of what the desired display is. The vertical gray bar is a background image of a div higher up in the code. Originally, the XHTML and CSS were very well thought out, but as the requirements came through for the CMS, the XHTML had to go out the window. Now, everything in #primaryContent is handled by the CMS. Each module can have it's own class or ID to have styles applied to it, but no additional divs can be put in to sort the side content from the main content. Furthermore, the order of the divs can shift every time the user refreshes the page - there's no telling in what order div.primaryModule or div.tertiaryModule may come in. Awesome! I was able to get this displaying correctly in IE6 and IE7 using the following styles: Code: #primaryContent .primaryModule,
.primaryModule.primaryContent{
position:relative;
float:left;
clear:left;
width:514px;
margin:0 0 2em;
}
#primaryContent .tertiaryModule,
.threeColumn .tertiaryModule{
width:178px;
padding:0 11px 0 12px;
clear:right;
float:right;
position:relative;
margin:0 0 2em;
}
But I keep running into clearing and floating issues in FF3. The only way I can get the layout functioning correctly in FF3 is if I know that the .primaryModule divs come before the .tertiaryModule divs (or vice versa). Any thoughts? Thanks for your help. Hi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Hi I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? Hi, I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page. I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others). Any ideas? W. Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it. (an expample is the HTML code that it would be) Code: <table width="150" border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr> <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr> <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr> </table> I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing! Cheers, Hi I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera. Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help? 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><title>
Untitled Page
</title>
<style type="text/css">
#test div {
border:solid 2px red;
position:absolute;
}
#head {
height:100px;
top:0;
left:0;
right:0;
}
#nav {
left:0;
top:105px;
bottom:105px;
width:200px;
}
#foot {
height:100px;
bottom:0;
left:0;
right:0;
}
.scroll {
top:0;
right:0;
left:0;
bottom:0;
margin-left:205px;
margin-top:105px;
margin-bottom:105px;
}
</style>
</head>
<body>
<div id="test">
<div id="head"></div>
<div id="nav"></div>
<div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
<div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated... SW. Anyone knows how to make the standardized border as the attached file ? cheers. <style type="text/css"> select{width:75px} option{width:150px} </style> I'm guessing the answer is no but I thought i would ask. In firefox that does exactly what it says it will. in ie all content is squashed in the options. I thought I've seen it work in IE but I dont recall where or how it was done. I need to create a 2 column layout as in the link below: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm However, I will not always know whether or not the contnet in the left or right will be longest. As it is in the design above they recommend to put the border on the left content if the left side is longer. But I will not always know which is longest, so I can't just change the border in the CSS. Is there anyway to create a layout like the above link that has a border separating the two columns that will resize to the longest column, no matter which side has longer content? Any help is much appreciated! I'm still new to the CSS layout deal, but I'm giving it what I can, and I felt I was getting close until I looked at the page in IE and then ran it through some validation First the validation This is my page so far: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layoutTest.css" />
<style type="text/css" media="screen">@import "layoutTest.css";</style>
<style type="text/css">
<!--
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
-->
</style>
</head>
<body>
<div id="localNav">
<a href="http://www.codetailor.com"> <img height="66" alt="Alt Text" src="#" width="144" border="0" /></a>
<ul><li>localMenu</li></ul>
</div>
<div id="ctNav">
<ul><li><a href=""><img height="30" alt="Alt Text" src="#" width="223" border="0" /></a></li></ul>
</div>
<div class="content">
<h1>Heading 1</h1>
<p><img src="#" width="288" height="288" align=right hspace="12" alt="picture" ></p>
<h3>Heading 3</h3>
<p>This is some text</p>
</div>
</body>
</html>
I have bolded the part that will not validate when I run it through the http://validator.w3.org/ validator. if this is the case, how do I add styles. It won't allow me to put them on the page or in another file (both are shown here by the way, only one way will be used) the second part is the fact that without having the #ctNav styles on the page I get a little extra on the bottom of my pictures. I can do a screenshot of this if it would help, but if you run it with and without these tags in there you will see for yourself. these are the styles contained in the external file: Code:
body {
margin: 0px;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:24px;
text-align: center;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px; text-indent:30px;}
.Content>p+p {text-indent:30px;}
/* All the content boxes belong to the content class. */
.content {
position:absolute; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:36px 10px 20px 165px;
border:0px;
background-color:white;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#localNav {
position:absolute;
width:auto;
min-width:120px;
margin:0px auto 0px 0px;
border:0px;
background-color:3D3B7C;
z-index:4;
height: 100%;
}
#localNav p {margin:0px;}
#localNav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#localNav li {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
}
#localNav li.selected {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
background-color: 67657A;
}
#localNav li:first-child {
margin: 0;
padding: 1px 0px 1px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #000000;
text-align: center;
background-color:#67657A;
font-weight: bolder;
text-indent: 0px;
}
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
finally, when I look at this in IE, the localNav is taking over the whole screen, I assume that it is because of one of the tags, but I can't see it. Point it out for me if you know. thanks for your time. http://www.webpagedesignrus.co.uk/DECS Code: #container {
margin: auto;
width: 100%;
display: block;
text-align: center;
height: 100%;
}
#middle {
text-align: left;
margin: auto;
width: 600px;
height: 100%;
background-color: #FFF;
}
#main {
margin: auto;
background-color: #FFF;
border-left: solid black 1px;
border-right: solid black 1px;
width: 650px;
height: 100%;
cell-padding: 0px;
cell-spacing: 0px:
}
I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help... Hi everybody, my site is becoming more and more what i wanted it to be. I thought making it printerfriendly would have been easy, but i encounter some strange problems. http://users.pandora.be/jef_patat/index.htm First of all: there is a big box at the top of the page, it is there for some reason because all browsers i tested it with show the box. I made the body background color yellow for better visualization. Second: if i try to print it out with netscape or firefox the both leave some text in the area between two pages, so when the print some text is missing. I hope a solution can be found, many thanks, Jef Patat I have decided that it would be easier to make 2 seperate div tags so I wouldn't have to deal with the issues on margin and padding that IE barf all over at. So, what I'm going to do is to make the 2nd <div> to overlap the 1st <div>. So, what the property or attribute that I can use to make it the overlapping work that work for most web browsers?? Thanks, FletchSOD Hi guys I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column I'm making a complete tableless css layout for the first time Look: Here's the skeleton code Code: <!-- Begin Left Column --> <div id="cssleftcolumn"> HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS) <div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div> </div> <!-- End Left Column --> And here the css code Code:
#cssleftcolumn {
width: 218px;
float: left;
color: white;
}
#imagedownmenu {
background-image: url(../images/fondo_botleft.jpg);
background-position: bottom left;
background-repeat: no-repeat;
height: 76px;
vertical-align: bottom;
}
I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this Thanks a lot in advance, I'm trying to prevent users from printing my pages. I'm not looking for something too serious, just enough to deter the average user. Right now I have the following in my css file: @media print { BODY { display:none; } This works pretty well and just gives a blank page if someone tries to print. However, this was tested on a mac using IE 5.1 and it didn't work. Is there a way to make this method work across platforms and with different browsers? Thanks in advance. John Is there a command in CSS that can determine the height of a line break instead of the default which is way too big? |
|||||||