SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Divs won't float correctly

    Hi.

    I have a wrapper, in that I have two upper divs, both floated to the left so they are in line.

    Under the two divs I want to do the exact same thing so under those two divs I have another two divs.

    The problem is that they wont float correctly, the div just stays under the div and dosen't float as I want it to.

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/styles.css"rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    
    <div id="wrapper">
    
    
    <div id="social">
    
    <ul>
    <li><a href="http://www.twitter.com/kvnwpts"><img src="images/Twitter.jpg" width="65" height="61" border="0" /></a></li>
    
    <li><a href="https://www.facebook.com/profile.php?id=100003071417669"><img src="images/Facebook.jpg" width="65" height="61" border="0" /></a></li>
    
    <li><a href="http://www.youtube.com/kwpvideos"><img src="images/Youtube.jpg" width="65" height="61" border="0" /></a></li>
    </ul></div>
    
    
    <div id="logodiv">
    <img id="logotyp" src="images/logo.png" width="491" height="64" />
    </div>
    
    
    <div id="one">
    
    </div>
    
    <div id="two">
    </div>
    
    
    
    </div>
    
    
    </body>
    </html>


    And the CSS:


    Code:
    body {background-image:url(../images/rutn%C3%A4t.jpg); }
    
    #wrapper {width:980px; height:800px; margin-left:auto; margin-right:auto; }
    
    #social { float:left; width:300px; height:100px;  }
    		
    #logodiv {float:left; width:680px; height:100px;  }
    
    #social ul { }
    
    #social ul li { display:inline; padding-left:15px; }
    
    #logotyp {margin-left:50px; margin-top:20px; }
    
    #one { clear:both; float:left; width:400px; float:left; height:200px; background-color:#FF9966  }
    
    #two {  width:400px; float:left; height:200px; background-color:#9C0  }
    Any help is appriciated.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi. I'm a bit confused. What part is not lining up side by side like a float should? Tested in Chrome/FF/IE7/8/9 and all of them are displaying two lines of stuff, one being those images, and the second being those colored boxes. How is it displaying for you?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Its displaying as it should in the browser(s), but in dreamweaver the boxes are under eachother. (The colored boxes)

    Sorry for not mentioning that before.
    Quote Originally Posted by RyanReese View Post
    Hi. I'm a bit confused. What part is not lining up side by side like a float should? Tested in Chrome/FF/IE7/8/9 and all of them are displaying two lines of stuff, one being those images, and the second being those colored boxes. How is it displaying for you?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Dreamweaver design view is based off a REALLY old Opera version. Don't worry at all about that design view. It's not a browser, so why should you bother coding for it .

    Move on. It's not important at all to fix this since your users won't experience seeing the site in Dreamweaver.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    But the coding is right, or is there anything to do to fix it since it's pretty annoying to work with something that's not correct seen in DW anyway? :/

    Do you also encounter problems where it dosen't show the same in the browser as in DW even though coding is right?
    Quote Originally Posted by RyanReese View Post
    Dreamweaver design view is based off a REALLY old Opera version. Don't worry at all about that design view. It's not a browser, so why should you bother coding for it .

    Move on. It's not important at all to fix this since your users won't experience seeing the site in Dreamweaver.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    As Ryan said, how a site looks in Dw is irrelevant, as it's not a browser (or is a very old version of one). Test your sites in real browsers and there's no issue. Testing your site in Dw is like testing an airplane in the water. It's an irrelevant test.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    But the coding is right, or is there anything to do to fix it since it's pretty annoying to work with something that's not correct seen in DW anyway? :/

    Do you also encounter problems where it dosen't show the same in the browser as in DW even though coding is right?
    I don't have Dreamweaver. I find it useless to me. I prefer just using straight up Notepad to code . Can't get any simpler than that.

    And your coding is right. The Opera version is REALLY old. It doesn't understand a lot of CSS correctly as most browsers do nowadays.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That really sucks to be honest, it would be good if they could like "implent" how firefox looks in the preview in DW.
    Quote Originally Posted by ralph.m View Post
    As Ryan said, how a site looks in Dw is irrelevant, as it's not a browser (or is a very old version of one). Test your sites in real browsers and there's no issue. Testing your site in Dw is like testing an airplane in the water. It's an irrelevant test.
    Heh, okay.

    Quote Originally Posted by RyanReese View Post
    I don't have Dreamweaver. I find it useless to me. I prefer just using straight up Notepad to code . Can't get any simpler than that.

    And your coding is right. The Opera version is REALLY old. It doesn't understand a lot of CSS correctly as most browsers do nowadays.
    EDIT: I just get confused over how it looks in dw preview since I'm not good at coding (I'm learning as you know).

    And you can call me Kevin if you ever gona say my name

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    I just get confused over how it looks in dw preview since I'm not good at coding
    We are all confused about Dw. Focus your confusion on real browsers, as they will provide you with plenty.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    That really sucks to be honest, it would be good if they could like "implent" how firefox looks in the preview in DW.

    Heh, okay.



    EDIT: I just get confused over how it looks in dw preview since I'm not good at coding (I'm learning as you know).

    And you can call me Kevin if you ever gona say my name
    Well you could always just recode Dreamweaver so that it includes the FF version.

    Or you could make your own WYSIWYG editor (don't)

    ORR you could just save hte file and view in browser (really such a simple thing to do. CTRL+S, switch programs. CTRL+R).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think I'll do nothing about it really. I think Ill have to live with it.

    By the way, for this question it's unnessecary to make a new thread.
    The case is:

    I have a unorderd list with three pictures in <li>.
    And I have a slideshow wich also contains ul and li properties.

    I have them both ul and li in my stylesheet but im not sure how to do them individual so the <ul><li> for the pictures is seperate to the slideshows <ul><li>.









    Quote Originally Posted by RyanReese View Post
    Well you could always just recode Dreamweaver so that it includes the FF version.

    Or you could make your own WYSIWYG editor (don't)

    ORR you could just save hte file and view in browser (really such a simple thing to do. CTRL+S, switch programs. CTRL+R).

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    I have them both ul and li in my stylesheet but im not sure how to do them individual so the <ul><li> for the pictures is seperate to the slideshows <ul><li>.
    Start with this in your HTML:

    Code:
    <ul class="slideshow"></ul>
    <ul class="pictures"></ul>
    and then this in the CSS:

    Code:
    .slideshow {... styles for the slideshow list ...}
    .pictures {... styles for the pictures list ...}

  13. #13
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ahh. Thanks

    I hate to have like jquery slider plugins on my website cause in dreamweaver it justs get confused and messy.
    Quote Originally Posted by ralph.m View Post
    Start with this in your HTML:

    Code:
    <ul class="slideshow"></ul>
    <ul class="pictures"></ul>
    and then this in the CSS:

    Code:
    .slideshow {... styles for the slideshow list ...}
    .pictures {... styles for the pictures list ...}

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kvnwpts View Post
    in dreamweaver it justs get confused and messy.
    You aren't still viewing things in Dw, are you? It's not a browser! Code in Dw, view in a browser!

  15. #15
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't, but still it's sometimes good to take a quick view. But i don't trust it.
    Quote Originally Posted by ralph.m View Post
    You aren't still viewing things in Dw, are you? It's not a browser! Code in Dw, view in a browser!


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
  •