|
CSS - Element Templates -- Position Attribute
For most of my webpages, I use a few element templates for body, div, etc. I'm using more positioning in my pages, and so for the sake of nested div's, I want to add some standardized positioning to my template:
Code:
div{
padding: 0;
margin: 0;
border: 0 #000000 solid;
/*** added positioning atributes ***/
position: relative;
top: 0;
left: 0;
z-index: 0;
}
I know that some of this is "standard", but I want to be absolutely sure the browser is going to render my page as I want it. My question is, will/should adding this positioning increase the processing/rendering time of the page (as using table-less design uses a lot of divs)? It's probably a silly thing to worry about, but I'm also interested in what atributes are more processing intensive. Similar TutorialsI have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hoping someone can help. I'm trying to figure out a way to align something to the left of an existing element within a container of variable height. The existing element is already aligned to the left edge of the container. To be more specific, I am trying to place a helper graphic to the left of the email text-field in the "Leave a Comment" form (not the "Email this Zing" form) on this page: http://www.zingfu.com/?zing=4419693e9e98f If it's possible to the place the helper graphic right next to the text field in the code, but then to break it out of the container div to move to the left of the text field, that would be great. Or if I could apply positioning to the helper graphic based on the positioning of the text field, that'd be fine too. But I'm not sure if either is possible. Little help? I have a "see details" link over in the bottom right of a table cell - exactly were I want it. But when I resize the browser window to make it smaller and squish it together the link does not stay in its cell but goes left crashing into content. How do I keep it wrapping but still hugging the right wall of the rightmost cell? Using Mozilla. I have the code below - you'll see. Thanks <html> <table border 1px> <tr> <td>Configuration Management System</td> <td><ahref=http://ms.fc.na.bz/>http://ms.fc.na.bz/</a></td> <td>Source for configuration management documents and drawings from many projects. These are primarily engineering design documents. Each Directorate must be searched separately... <a STYLE="position: absolute; right: 20px; color:red;" href=details. php?id=3&Type_view= detail&Type_Submit=&key_word= > see details</a> </td> </tr> </table> <html> Please look at this page - http://www.mts-diesel.com/index.php?cPath=20_23_42 The breadcrumb trail links on the main page in FF are higher up than the same element in Chrome and IE. If anyone can shed some light it would be greatly appreciated. Thanks so much, Tom I have a sad feeling that its not possible, but I thought I'd ask anyway... I have a box element that is 150px x 400px with overflow: scroll; The box contains a large list of links. Now, the user can scroll down and click on a link in the box, which causes the page to refresh. Is there a way of making the scroll bar in the box "drop down" to the element that was clicked when the page is refreshed? It would be very similar to how named anchors work to force a whole page to scroll to a certain position.... *** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work. Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;" I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed. Thank you for any help. Tom I don't know why but for some reason I thought if you give an element a position of absolute the margin is irrelevant. Not so in FF huh? Tom Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) I can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim i recently began learning CSS. Its going fine so far. CSS isnt that tough and its very handy! but so far, i only read things about editing all text, fonts ect. in a quick way, by setting it between the <head>. in other words, how to edit a single page. i actually need to create templates. Is it possible to create templates with CSS. wut i especially need in the template is text. text that are introducing content. for example (im creating a movie site): Director: Cast: ect. That text + ofcourse the layout itself (!) and other text (like in the side bar menu) is needed on the template so i dont have to create them over whenever i add a movie via a database. I could say, the only thing i need to do is adding text like the name of the director, the cast members, movie image ect. (i will be adding this via a MySQLdatabase) its also handy so that my server doesnt has to reload the layout everytime a visitor clicks a link. only loads the text. how can i do that? oh if ur wondering why i dont read it all first. that is because i have to finish it quick for a company Thanks in Advance! Not sure where exactly to ask this. But I have completely developed a site (programming wise) and now need a nice design. It doesn't have to be anything super fancy but was wondering if anyone knew of any places to download CSS templates for free... I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Hey everyone. I am new here and this forum looks great. Already found loads of cool PHP ideas just by reading through some of the other posts. I thought for my first post, I would put something into the community. I have created a number of blank css website templates and posted them on my site. I use these as a starting point whenever I create a new site and I find they save me a lot of time. The whole idea of them is to be very basic - even the homepage. I didn't want to fill the templates with loads of stuff you would want to take out but I thought it was important to have enough in there so you can see the idea behind each one. I'd love to hear back from you all and know what you think to them. blankcss.com Looking forward to the responses Hi...all I need a small tip.. I would like to see a home page templates for Friends Network site. Please tell me if you have anything... Thanks I've done a few web sites. Nothing really snazzy - I tend to focus on the information being available rather than having it "look cool". As a result, I've received various comments from "it's fantastic" (from people who are actually trying to find information) to "it's boring" (from those who are used to the frantic Flash-based web sites on a lot of the social networking places). There's a huge age range in users, too - it's a school-related site, so there are Jr. High students and their parents looking at it. Anyway, as a revamp, I started to look at CSS templates, partly as a way to play with CSS, but also because it seems to be the "right way" to do things these days. My earlier efforts use frames, and there's a header, a footer, a left-side navigation frame, and then the right-side "info" frame where everything shows up. So I did some Googling and found some offerings for free CSS templates. Grabbed a few and looked, and they are much nicer than my basic colors and styles. So I started working up a sample site and hit a snag when I wanted to do a second page. There was a sample index.html that had a section with a navigation menu on the left, and a flexible middle column, and a fixed column on the right. I got a basic front page together, and decided to create a new menu item for "About us", and link that to a new page. Here's my issue/problem - it seems that the way to create the new page is to duplicate the index.html, then hand tweak the menu to indicate the current location (there's a class="current" attribute on a <a> tag), and then rework the text section in the middle. While that's doable, it offends my programmer's ethic of "do the work only once", which, in this case, means that I can't see why the menu has to be rebuilt each time. Am I missing something? Is this the way that multipage sites based on CSS layouts really work? Or do I need to find a better sample or tutorial on doing a multipage site where the efforts need to be made once to get a menu working, and then leave it alone until a real change is required. I'd appreciate any help with this, thanks in advance. So, I purchased a Wordpress template, installed it, works fine. In some of the posts I'm creating for the site, I want to include simple tables.... problem is, somewhere, somehow, the CSS file for the template I purchased is setting certain style rules for the tables I create. Including a background image. So, it's messing up my tables. I tried setting new table rules this basic way: .argh td { my styles here } then for my tables in my posts: <table class="argh"> It seems to be taking the text formatting that I included that way ... but the dang background image from some style somewhere else keeps showing up no matter what I do. :| Any help would be much appreciated. Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! Attempting to inherit all main attributes of a column, and modifying few, what is the correct way to inherit/overwrite the attributes of col3 here ? Code: .col3, col3b {
float: left;
position: relative;
background: #FFFFFF;
width: 25%;
height: 80%;
left: 3%;
border-left: 1px solid #333;
margin: 3px 2px 4px 0;
}
.col3b {
border-left: none !important;
}
Tried as well like: Code: .col3 {
}
.col3 .col3b {
border-left: none !important;
}
note: not talking about a single 'inherit' value Hi people, What is the equivalent of this div style attribute in css? <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 500px; height: 300px"> Its the overflow what I'm looking for. -just edited this that I have the solution sorry beginners corner |
|||||||