|
CSS - Needing To Implement Some Relative Stuff... (newbie)
My first real web page using CSS completely..
In this example, I have a page where my content is going beyond the footer.... I'm actually looking for the footer (blue line) and the right (light blue) area to move or expand as the content is added. In looking at my code will I need to rework the entire thing? Or make a simple adjustment. (I'm hoping its not a complete rework) Any help would be great. http://mcpherson-racing.com/dave/de...ny/company2.htm Also, this is a secondary page form the main page. How can I impliment specific CSS atributes only on this page without it effecting the main page? Similar TutorialsI made this nav bar in photoshop. I want to put an animated banner BEHIND the mountain-esque part of the nav bar. I assume I'd have to use some kind of Z index position function. I really can't fathom how to do this. I also don't know how I should cut up the image in order to make it work best with programming. Does anyone have any ideas? I considered somehow cutting the center out (there will be a logo there eventually, though) and then cutting it straight across in such a way to make the mountains be an overlay to the banner. Not sure if it will work though. If anyone has any ideas I would be extremely grateful. hey guys here is my page now that how my boss wants it to look Code: <h1>Illinois Soybean Association Site Map</h1> <ul id="siteMap"> <h2><a href="/about/">ABOUT</a></h2> <li><a href="/about/research/">Research</a></li> <p><a href="/about/research/committee/">Illinois Soybean Association Research Committee</a></p> <p><a href="/about/research/managed-research-areas/">Managed Research Areas</a></p> <p><a href="/about/research/reports/">Research Reports</a></p> <p><a href="/about/research/specialty-contracts/">Specialty Contracts</a></p> <li><a href="/about/legislature/">Legislature</a></li> <li><a href="/about/international-marketing/">International Marketing</a></li> <li><a href="/about/programs/">Programs</a></li> <p><a href="/about/programs/soybean-quality/">The Soybean Quality Rewards Program</a></p> <p><a href="/about/programs/rust-watchers/">Rust Watchers</a></p> <p><a href="/about/programs/soyleaders/">SoyLeaders</a></p> <p><a href="/about/programs/speakers-bureau/">Speakers Bureau</a></p> <h2><a href="/membership/">MEMBERSHIP</a></h2> <li><a href="/membership/soy-connect/">SoyConnect</a></li> <li><a href="/membership/application/">Membership Application</a></li> <h2><a href="/soybean-uses/">SOYBEAN USES</a></h2> <li><a href="/soybean-uses/soy-foods/">Soyfoods</a></li> <li><a href="/soybean-uses/biodiesel/">Biodiesel</a></li> <p><a href="/soybean-uses/biodiesel/retailers/">Retailers</a></p> <p><a href="/soybean-uses/biodiesel/suppliers/">Suppliers</a></p> <p><a href="/soybean-uses/biodiesel/clean-school-bus-program/">Clean School Bus Program</a></p> <p><a href="/soybean-uses/biodiesel/tax-incentives/">Tax Incentives</a></p> <li><a href="/soybean-uses/livestock-feed/">Livestock Feed</a></li> <li><a href="/soybean-uses/new-uses/">New Uses</a></li> <h2><a href="/education/">EDUCATION</a></h2> <h2><a href="/soy-news/">SOY NEWS</a></h2> <h2><a href="/resources/">RESOURCES</a></h2> <h2><a href="/directors/">DIRECTORS</a></h2> <h2><a href="/contact/">CONTACT</a></h2>/ what he wants me to do and i have no idea how to do this is each of hte h2's inside the id have a color assigned to them without modifying that page since they are inside the id i guess it can be done somehow and then each of the paragraph's need to have padding left on them of 20px and made smaller and have bullets in them and thats what he wnats done with no changes to the form at all i just gave just in the css pretty please will someone help me the three buttons witch are fixed position will not load the link . please help! ocixx.com/Untitled-1.html I am using TinyMCE and the ENTER button makes the newline and new paragraph. I read the TinyMCE docs and it says I can make the <p> attribute have a smaller gap between line by using CSS p {margin:0; padding: 0;} How do I implement this please? Here is my code for the html headers : Code:
<html>
<head><title>Strikeforce - Newsletter</title>
<!-- tinyMCE -->
<script language=\"javascript\" type=\"text/javascript\" src=\"tiny_mce/tiny_mce.js\"></script>
<script language=\"javascript\" type=\"text/javascript\">
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : \"textareas\",
theme : \"simple\"
});
</script>
<!-- /tinyMCE -->
</head>
<body bgcolor=#C0C0C0>
<font face=Tahoma size=2 color=#6A6B03>
<style type='text/css'>
<!--
A:link {color:#6A6B03; text-decoration:none}
A:visited {color:#6A6B03; text-decoration:none}
A:active {color:#6A6B03; text-decoration:none}
A:hover {color:#000000; text-decoration:underline}
-->
</style>
TIA Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page: http://www.zeroonedesign.com/aboutus.html Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit. Take a look at my version he http://obelix.ca/zeroone/aboutus.html I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures? Hello, I am trying to create a CSS template using a JQuery Menu. The layout is: ViewHead Menu ViewBody Content Sidebar ViewFoot ViewHead and ViewBody should be centered and fixed width (920px) ViewFoot should expand 100% width. The menu should expand 100% width. I tried to organize the CSS the best way possible. Until now this is not really working. Could someone, please, help me out with the problems and improving my CSS? The url is: http://www.27lamps.com/public/index.htm Thank You, Miguel IE is at it once again.... it is doing VERY odd things.... On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used). It works great elsewhere, but not in IE... any suggestions at what it may be?? THE LINK http://www.dudley.nhs.uk/ In FF it all works fine but sometimes in I.E. left menus disappear and the right menu overlapping the text on the page isn't unknown. Although this is resolved by refreshing the page, it is happening quite regularly and is causing some confusion. What do I need to add to my CSS to sort this toothache of a problem out? Thanks Im trying to create a page with a side bar, (http://xidus.ath.cx/blog/moot) with this style sheet Code:
.centery {
position: absolute;
background: #ffffff;
}
.right {
position: absolute;
right: 20px;
top: 49px;
width: 200px;
background: #ffffff;
border: 1px solid #000000;
}
And i use this code to create the two tables Code: <div class="centery"> blahblah blah[really lots of text]</div> <div clas="right">blahblahblah</div> But if there is too much writing in the center one it will go under the right box, or if the window is resized the text goes under the right box :P Is there some way to prevent this? Thanks Within the LEGEND tag, how would I position the radio buttons to the far right? I thought something like the following would work, but wasn't sucessful. .radios {text-align: right;} Thanks Code: <fieldset> <legend> Some Text <select><option value="1">One</option><option value="2">Two</option></select> <span class="radios"> <input type="radio" name="r" id="r" value="1">one <input type="radio" name="r" id="r" value="2">two </span> </legend> <table> <tr><td>bla</td><td>bla</td></tr> <tr><td>bla</td><td>bla</td></tr> <tr><td>bla</td><td>bla</td></tr> </table> </fieldset> I am trying to create an image that stays in one place no matter how large the window is. This seems to work great in FF but when i open it in IE the image is not where i positioned it! Has anyone ever seen this? Thanks. Code:
#apDiv4 {
position:relative;
left:370px;
top:328px;
width:154px;
height:130px;
z-index:1;
clip: rect(auto,auto,auto,0px);
margin-left: auto;
margin-right: auto;
}
I'm trying to create these two elements that are 100% of their parent element minus the height of anything above or below them. For example: Code: <html>
<head>
<style type = "text/css">
body
{
margin: 0px;
padding: 0px;
height: 100%;
color: #FFFFFF;
background-color: #636E90;
}
div.everything
{
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
width: 750px;
height: 100%;
background-color: #4A61A8;
}
.top
{
background-color: red;
height: 120px;
}
.left
{
float: left;
margin-left: 0px;
width: 125px;
height: 100%;
background-color: #000000;
color: #FFFFFF;
}
.right
{
float: right;
width: 125;
height: 100%;
margin-right: 0px;
color: #000000;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div class = "everything">
<div class = "top">Top</div>
<div class = "left">Left</div>
<div class = "right">Right</div>
</div>
</body>
</html>
The problem is that the "left" and "right" elements extend beyond the bottom of "everything," and more precisely they're extending the height of "top" off the bottom of "everything." That probably read poorly. The "left" and "right" elements are doing what they're supposed to do in that they are 100% of the parent element "everything." The problem is that this height isn't derived as being height of "everything" - height of "top", but instead it's just the absolute height of "everything." I've been trying to figure out how to make their height 100% of their parent element after other elements, such as "top", are placed inside the same parent element. i want to place an image relative to the top left of an element. is that possible in css? i've been looking everywhere, but i can't find anything about having two properties in one element. I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers. As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems: 1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated. 2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers. 3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow. Original site (tables): http://www.gpleague.com New test site (css): http://www.gpleague.com/cssp.htm Css file: http://www.gpleague.com/csstest.css Im working on a project that required some css that I'm not used to using to pull off an effect. here is the url http://www.staging.crea8te.com/ftea I'm having one issue: Issue: the basic structure is <div1>position: relative <subdiv></div>position:absolute <subdiv></div>position:absolute </div> <div2> </div> <div3 </div> I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1 i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas? Hi, I'm following a tutorial and I would like to understand the position functioning. I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning. Thanks in advance. PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www) Okay I have a big problem and I don't know what is happening and it's really really bugging me. I have some extra space at the top of my page, it's about 10 lines in height. the items below the space are made up of two classes. They are .source and .quote. I tried using position:relative so that they move up but I have a problem. I tried Code: position:relative;bottom:7em; but that just amde them disapear leaving just their space. Also the .source iems are missing already and I don't know how to make them apear. I'm not hiding them at all at any point. http://142.177.157.241:8080/bikers/ the automatic parse URLs options doens't work even when it's used. Hi! I can not solve one problem. As You can see here bezlica.ru/joomla/ , I need to have image "contacts" at the bottom of the grave. Currently, it is relative to top and works fine on different resolutions. But, if content needs to be expanded like this bezlica.ru/joomla/index.php?option=com_content&task=view&id=12&Itemid=9, images drops down from the grave to bottom. Maybe there is a way to make it relative to the bottom of the screen, or some other solution? It needs to stay fixed where it is on different resolutions, that is why it is so hard for me! Any help will be appreciated. Regards, Konstantin. |
|||||||