|
CSS - Div, Static Or Absolute
Hi,
A simple question ... i'm sure i've done something like this before but can't remember how ... I centered a web page in the browser and used divs to hold the text and main content for the page - but when the page is viewed at different resolutions or left-side panels are opened (such as media player in IE) my div layers are not repositioning with the page ... I know this must be easy but it aint workin somehow ... thanks in advance ... Similar TutorialsHi, I have a header, body and footer. I need the body to bee 550px tall regardless of the content. Then, the footer will be below this. Here's the CSS for the maincontant: Code: ..oneColFixCtr #mainContent {
position:absolute;
padding: 0, 10px, 0, 10px;/* remember that padding is the space inside the div box and margin is the space outside the div box */
overflow:auto;
height:500px;
width:768px;
background-color:#FFFFFF;
}{
How can I make the container 500 px tall no matter what the content is? As you can see he http://www.caillouette.com/SelvanSite3/BaselineFees.php The page changes height according to the content. I don't want this. I want the height to be static 500px. Thanks - on my page http://tampabay-online.org/cetr/news/ the left side : Code: .content {
position:relative;
width:300px;
margin-left: 155px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
and the two on the right are : Code: #right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
#sidebar {
position:absolute;
width:200px;
top:400px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div. Any way to make these relative or fix that problem? Thanks! I have a problem with my CSS. The intention was to get a static bar at the top of the page which stayed in place as the page was scrolled. That bit works fine. The problem is that the text in the main part of the page scrolls under the static bar. This means when you use any in page links ( to an anchor) the page scrolls so that the relevant part of the page is under the header div. Any ideas on how I can fix this ? The HTML is up at : http://www.benbun.co.uk/test/test.htm Any help would be appreciated. BBBS Hello, I have a problem with a footer on a website I'm building. I want it to my down as text fills the space between the top blue thing, and the bottom blue thing, but as you can see, the text skip past the bottom. I want the bottom to be pushed down by the text. Here's the site And here's the css Hope you can help me with this. This problem has been sucking the life out of me for the last several hours. I'm developing a website with a CMS behind it. I have a page with a form on it that looks fine in FF, but seems to have an overflow problem in IE 6. But, what makes this even more strange is when I take the generated code and view it as a standalone HTML webpage with the same CSS behind it, it looks fine in IE! I'm reluctant to post the site of what will eventually be the live site because I don't want Google to find it, but like I said, I'm at the end of my rope! Here is the page of the site that does NOT work in IE (gets cut off right when the form is supposed to appear). http://westport.dreamhosters.com/modules/news/comment.php?id=4 And here is that page saved as a static HTML file with the same CSS file behind it: http://www.jimandkris.com/test/ In the static version, the form displays in its entirety in IE6. So, could someone confirm what I'm seeing? And even better, can anyone suggest anything? Hi. I have an image that I want to be a background in a webpage. What I want to do is have that background fill up the rest of the page but remain static on the page while the content scrolls (if need by, y'know, varies depending on the resolution of the users monitor). How can I accomplish this? Dear All, I have a question - Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data. There is also a header column on the top with has main menu. Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ? Thanks in advance. Regards. A random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc? I am not an expert on developing websites, but I've been able to get our site up and running without much challenge. I used a menu I found on www.dynamicdrive.com that allowed you to have our menu in a horizontal or verticle layout. We don't use frames in our site but we wanted a frames-type look. So we use the menu in the vertical layout. What I'd like to do is find a way to keep the menu on the screen as people scroll down. I've seen other websites do this and have looked at a couple that were recommended from a previous post, but I can't figure out how to make it work propertly. Our website is www.indyartistgroup.com. If someone could take a look at the site and suggest some ideas on how to make the menu on the left hand side stay on screen no matter how low you scroll I would appreciate it. I'm out of options at this point. Thanks for the help. John Hi there, I have an HTML/CSS design I'm working on, that can be accessed he http://www.design-portal.co.uk/demo/ The CSS can be found he http://www.design-portal.co.uk/demo/style.css Basically what I would like is this: I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example: http://www.design-portal.co.uk/demo/images/demo.jpg As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it? Cheers in advance, Dave hello. i have a button that pops up to a floating div. this div gets applied html from a source called by ajax. in the html that is being called, i added <style></style> tags to embed specific css for that html. i do this because this html will be used globally across the site it works fine in every browser except safari. safari doesn't seem to render the css. any suggestions? hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) I am trying to position a footer at the bottom right hand corner of the page with style
Code: {position: absolute; bottom: 0px; right: 0px;}
However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this? I can't create a complicated webpage without using absolute positioning for areas. For ex I want to create 2 top areas of screen width on top of page. Then I want 3 columns with 1st and 3rd columns having 3-4 seperate containers. Without using absolute I am way to confusied to get this happening. When using Absolute positioning is it best to have the first <div> be static so that that the Absolute Positioning has something a reference point? Thank you hi I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan Hi everyone, I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow. The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look) It renders perfectly in Firefox, safari and google chrome. Go figure. I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit: w w w . goscoblog. com/test/index.html Thanks In advance Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! If I do something like this: .divSubHomeRtPhoto { position: absolute; left: 340px; top: 167px; width: 420px; height: 420px; } Then <div class="divSubHomeRtPhoto"> my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet. What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work. How do other cross browser CSS writes deal with this problem? Thanks for your help CJB I have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so. Any help to iron this out would be great. The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css It's the "menuContainer" div which isn't sitting right, nested in the "header" div. Many thanks for any help |
|||||||