SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with floating divs

    While it looks fine in Dreamweaver, it doesn't when viewed in chrome or firefox. I realize DW is not the correct preview....
    The side nav is fine and the background image is where i need it, but the text shifts to the right. I would like it beside the navigation. Im pretty sure it has to do with the div width but having a hard time figuring out the proper css.... link The BIO Section.

    HTML Code:
    <div class="container">
    <div id="section_heading"><img class="center" src="images/bio_hdr.jpg" alt="" width="844" height="107" /></div>
    <div id="side_menu">
     <div id="vertmenu">
    <ul>
    <li><a href="#section_top" tabindex="1">Top</a></li>
    <li><a href="#section_gallery" tabindex="2">Gallery</a></li>
    <li><a href="#section_links" tabindex="3">Links</a></li>
    <li><a href="#section_contact" tabindex="4">Contact</a></li>
    </ul>
     </div>
    </div>
    <div class="bio_block">
    <div id="bio_list">
    <ul>
    <li><span class="bio_label">Name:</span> Joe Campoli</li>
    <li><span class="bio_label">Home:</span> Toronto, Ontario</li>
    <li><span class="bio_label">Occupation:</span> Entertainer</li>
    <li><span class="bio_label">Weapon of Choice:</span> Microphone</li></ul></div>
    <div id="bio_item">
                        <div id="bio_text">
                          <p>Joe Campoli is a talented performer as a singer and also a Master of Ceremonies. Having been in the entertainment industry for over 10 years has Joe performing at many different style functions across Ontario. The popular venue being Weddings is where he began to expand on different genres of music taking on the likes of Jazz, R&amp;B, Pop, Rock to Country and modern day. </p><br /><br />
                          <p>Joe's love for entertaining and mainly singing has come at the tender age of 6. Coming from a musical family on both sides of his Mother and Father. His late father had played the accordian as well as his uncle. A cousin who plays guitar, another 2 cousins who are brothers that play drums and keyboards whith whom Joe performs with today. Music has been his entire life's passion. </p><br /><br />
                          <p>Through his years as a teenager he learned to play guitar. Soon after he had turned 21 Joe had joined Puente del Diablo where he takes place as Lead Singer/Rhythm Guitarist, A Rhumba Flamenco inspired group based out of Toronto, Canada. Through the bands years together they have travelled to different parts of the world entertaining many in South Korea and South Beach Miami. To the present day the band continues to put out music and perform together across Ontario. Joe also keeps busy performing in a U2 tribute act named VeRTigo - A U2 Experience. </p>
                        </div>
      </div>
      <div class="clear"></div>      
    </div>
    </div>
    Code:
    /* ############ SIDE MENUS ############ */
    div#side_menu{
      float:left;
      width:170px;
      margin-right:20px;
    } 
    
    #vertmenu {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
    font-weight:bold;
    width: 150px;
    margin: 30px 0 0 5px;
    }
    
    #vertmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
    }
    #vertmenu ul li {
    margin: 0px;
    padding: 0px;
    }
    #vertmenu ul li a {
    font-size: 14px;
    display: block;
    border-bottom: 1px dashed #001921;
    padding: 5px 0px 2px 4px;
    text-decoration:none;
    text-transform:uppercase;
    color:#CCC;
    width:150px;
    }
    
    #vertmenu ul li a:hover, #vertmenu ul li a:focus {
    color:#6CF;
    }
    
    /* ####### BIO ####### */
    
    #bio_list ul li {
    	margin-left:-40px;
    	list-style-type:none;
    	font-family:"Courier New", Courier, monospace;
    	font-size:14px;
    	font-weight:bold;
    	line-height:25px;
    }
    
    .bio_label {
    	color:#6699FF;
    }
    	
    .bio_block {
    	margin:10px 0 10px 0;
    	font-size:12px;
    	float:right;
    	background-image:url(../images/bio_bg.jpg);
    	background-repeat:no-repeat;
    	background-position:right top;
    	height:700px;
    }
    
    .bio_block h2 {
    	margin-bottom:5px;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#66ccff;
    }
    
    #bio_item {
    	margin-top:10px;
    	clear:right;
    }
    
    #bio_text {
    		width:530px;
    }
    
    #bio_text p{
    	background-color:#000000;
    	display:inline;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I don't know exactly what you mean, sorry . I go to the page in FF/Chrome/IE and all appear the same. You say the side bar is ok, however the text shifts to the right. I assume you mean the main contents text. The reason it's to the right is because you have float:right; on .bio_block and if you change that to left, it'll move the entire block moreover to the sidebar. Is that what you want? Feel free to use pictures to explain what you want . I find it easier to see what people want from pictures.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is what i want and i have tried that but then i have problems with the bg image lol....
    screen grab image from DW image

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    If you give .bio_block a right padding, it will separate the text from the background image. Something like 230px .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are my savior Ryan Reese.... you are my savior haha

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Glad I could be of help . You're welcome .
    Off Topic:

    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •