Small width layout Medium width layout Maximum width layout Small text Medium text Large text
     Search
Downloads Downloads Directory Directory Forums Forums Forge Forge Blogs Blogs        Marketplace Marketplace Careers Program Careers
Community › Forums Register  |  

PortalWebHosting
  Ads  
OnyakTech
 


  Sponsors  

Meet Our Sponsors

ExactTarget email software solutions
Merak Mail Server
WebSecureStores -- ASP.NET & DotNetNuke Hosting Solutions
FCKeditor Project
Salaro -- Skins and more
OnyakTech
 


DotNetNuke Forums
 
  Forum  General DotNetN...  Make it Hot! ( ...  CSS - How to float beneath an absolutely positioned DIV?
Previous Previous
 
Next Next
New Post 3/18/2008 2:09 PM
User is offline IceWing_mk1
54 posts
10th Ranked


CSS - How to float beneath an absolutely positioned DIV? 
Modified By IceWing_mk1  on 3/18/2008 4:47:49 PM)

Hey Folks,

Ok, I'm betting this is a pretty simple issue for some of you.  That being the case, please feel free to answer...

I'm pretty new to CSS, (been stuck in the days of tables since the 90's), and now I've been told that I need to switch to CSS for all future development.  Ok, thats fine, but, man I didn't realize how much stuff had changed...

Anyway, I've been working on this skin pretty much all day, trying to change it from table based to Div\CSS based, and I've made some really good progress. 

The problem that I'm running into is that, what I'm working on, the designed (not inhouse) has come up with some layouts that look really sweet in photoshop, but are giving me fits here...

So, I pose the question.

I've got a basic layout, effectively 2 columns with a footer at the bottom.

Column A is on the left and has the MenuBar, some divider graphics and the logo up top (stacked vertically) with the main content window down below. 

Column B is on the right, and will have a container at the top in which I can put in image source code to have an image there.  Beneath the image is the option to put additional containers (possible, not required on every page).

Since the text is of variable length, and the images could be different sizes, I need to make things float up and down.  Also, the Column B image, there's a chance that the image could be designed to 'spill out' of the column, covering up part of the logo\menu bar.  I'm guessing on that one, I need to use the z-axis, have it either in front of or behind the menu and logo, as instructed, with the contents of the Div starting at top right for best effect. 

I'd like some verification and help on the whole floating thing, since I've the bulk of the CSS designed at this point using abosolute positioning. 

Thanks,
Brian

 
New Post 3/18/2008 2:57 PM
User is offline keeperofstars
252 posts
9th Ranked


Re: CSS - How to float beneath an absolutely positioned DIV? 

Just a heads up absolute positioning + DNN doesn't always mix as well as intended. One thing you will notice is the solpartmenu for the content panes will not show up correctly. You will have to use the dropdownaction token for your containers. Now for your main issue, is having the content panes auto shirnk / size appropriately as your content changes. This is where absolute positioning fails a bit, when in use with DNN. Since DNN has dynamic content its much harder to code a static skin. Your skin seems pretty simple, it might work a bit better to convert it to a relative positioned skin. This will also help fix the issue you will have with the module menus. If you email me what you have so far I can take a look at it a bit later tonight and try to provide some assitance for you. mathomp3@hotmail.com.

 

 
Previous Previous
 
Next Next
  Forum  General DotNetN...  Make it Hot! ( ...  CSS - How to float beneath an absolutely positioned DIV?
 


Forum Policy

These Discussion Forums are dedicated to the discussion of the DotNetNuke Web Application Framework.

For the benefit of the community and to protect the integrity of the project, please observe the following posting guidelines:

1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DotNetNuke.
2. Discussion or promotion of DotNetNuke product releases under a different brand name are strictly prohibited.
3. No Flaming or Trolling.
4. No Profanity, Racism, or Prejudice.
5. Site Moderators have the final word on approving/removing a thread or post or comment.
6. English language posting only, please.

 


Easily Build DNN Solutions with XMod
XMod makes it easy to build news articles, house listings, custom feedback forms, product reviews and much more - without programming
www.DNNDev.com
Software Development and Integration with DNN
HNP Solutions focuses on the pragmatic use of technology and process to meet an organization's business objectives. HNP Solutions employs seasoned Enterprise and Solution Architects, Delivery Managers and QA & Business Leads. Our capabilities range from project assessments & recommendations, design & code reviews, to full program implementations. We also work with organizations in need of senior staff augmentation purposes in the areas of Enterprise and Solution architecture.
www.hnpsolutions.com
Alki Homes - Seattle, WA
Exemplary service for your Seattle Real Estate needs. It's what you deserve from your Realtor®!
www.alkihomes.com

DotNetNuke Corporation   Terms Of Use  Privacy Statement
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation
Hosted by MaximumASP