77 users online (1 members and 76 guests)  


  Results 1 to 2 of 2

Related

  1. 100% Height on nested DIVs?    Forum: CSS Forum
    Replies: 3
  2. Nested Div question    Forum: CSS Forum
    Replies: 5
  3. nested divs in mozilla...    Forum: CSS Forum
    Replies: 2
  4. Nested Divs instead of table    Forum: CSS Forum
    Replies: 1
  5. Nested Tables... pulling out my hair    Forum: HTML Forum
    Replies: 4
  1. #1
    Rongisnom's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2004
    Location
    Maryland
    Posts
    2

    CSS Positioning and nested Div's

    First off, yes I know I need to learn CSS so no flames please, I'm working at this as hard as I can. Second before you start scratching your head at my html, I'm a Lotus Notes/Domino developer. This code came from a form that I'm working on, I pasted the source code into Dreamweaver and cleaned it up a bit. My problem is with the drop down menu that I'm trying to create and the .content div. If I remove the CSS for the .content div then the drop down menus work fine. I'm still painfully new to all of this so any help is greatly appreciated.
    PS I'm only developing this for mozilla at the moment.
    Attached Files Attached Files

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hi there, welcome to the forums.

    Don't worry about flames, we are not that type of forum here.

    I think your problem lies in the absolute positioning of the elements. This is always a problem when using a wysiwyg editor, even a very good one like dreamweaver.

    Code:
    .cat_verse {
    	position: absolute;
    	left: 15%;
    	bottom: 25px;
    	width: 180px;
    	border : 5px solid #c7c7c7;
    	padding : 5px 5px 5px 5px;
    	background-color : #ffffcc;
    }
    
    .cat_author {
    	position: absolute;
    	left: 40%;
    	bottom: 25px;
    	width: 180px;
    	border : 5px solid #c7c7c7;
    	padding	: 5px 5px 5px 5px;
    	background-color : #ffffcc;
    }
    The position: absolute; forces that block to move to the very top left of its containing element. The top: and left: then position it from that awkward position.

    I would remove the absolute positioning altogether, then see where they land. From there you can amend the code to place them better.

    if you prefer to code yourself, it might be worth having a look at our HTML tutorials
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread