PHP User Warning: fetch_template() calls should be replaced by the vB_Template class. Template name: bbcode_highlight in ..../includes/functions.php on line 4197

PHP User Warning: fetch_template() calls should be replaced by the vB_Template class. Template name: bbcode_highlight in ..../includes/functions.php on line 4197
[RESOLVED] [CSS] Float isn't working-VBForums
Results 1 to 3 of 3

Thread: [RESOLVED] [CSS] Float isn't working

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,544

    Resolved [RESOLVED] [CSS] Float isn't working

    Maybe it is and I'm just not setting it up right... here is my HTML:

    HTML Code:
    <!DOCTYPE html>
    <html>
    
        <head>
    		<link href="home.css" rel="stylesheet" type="text/css">
            <meta name="author" content="David Day">
            <meta name="description" content="This website is designed to bring useful visual basic.net code snippets that compile with Option Strict On.">
            <meta name="keywords" content="vb.net, vb, .net, xna, windows form application, snippet, snippets">
            <meta name="language" content="English">
            <meta name="reply-to" content="david_d_day@outlook.com">
            <title>Dday Snippets - Home</title>
        </head>
    	
    	<body>
    		<div id="top_bar">
    			<img alt="Logo" id="img_logo" src="">
    			<h1>Dday Snippets</h1>
    		</div>
    		
    		<div id="ad">
    		
    		</div>
    		
    		<div id="main">
    			<div id="cssmenu">
    				<ul>
    				   <li class="active has-sub"><a href="home.html"><span>Home</span></a>
    					  <ul>
    						 <li class="last"><a href="home.html"><span>Home</span></a></li>
    					  </ul>
    				   </li>
    				   <li class="has-sub"><a href="#"><span>Snippets</span></a>
    					  <ul>
    						 <li><a href="io.html"><span>IO</span></a></li>
    						 <li><a href="data.html"><span>Data</span></a></li>
    						 <li class="last"><a href="xna.html"><span>XNA</span></a></li>
    					  </ul>
    				   </li>
    				   <li class="has-sub last"><a href="#"><span>Articles</span></a>
    					  <ul>
    					     <li><a href="gameloop.html"><span>Managed Game Loop</span></a></li>
    						 <li class="last"><a href="option_strict.html"><span>Option Strict</span></a></li>
    					  </ul>
    				   </li>
    				</ul>
    			</div>
    			<div id="content">
    				<p>Welcome to my snippet website! My name is David Day, also known as Dday or Dday9. I have been programming since March of 2011 starting with Visual Basic.Net. Currently I know Vb.Net, C#, XNA, HTML, CSS, Python and I'm in the process of learning C++. This website is designed to provide useful VB.Net snippets so that all you have to do is copy and paste and have a working, efficient piece of code. I have also made it a point to provide some useful articles, and encourage everyone to read the article on Option Strict. I hope that enjoy the website and as always I'm open for some feedback.
    				<br/>
    				-David Day-
    				</p>
    			</div>			
    		</div>
    		
    		<div id="footer">
    			<ul id="list_footer">
    				<li><a href="">About</a></li>
    				<li><a href="">Contact</a></li>
    			</ul>
    		</div>
    		
    	</body>
    
    </html>
    and here is my CSS:
    CSS Code:
    1. /* I am not responsible for the menubars, cssmenumaker.com is */
    2. /* Visit them for some sweet CSS menubars */
    3. #cssmenu,
    4. #cssmenu ul,
    5. #cssmenu ul li,
    6. #cssmenu ul ul {
    7.     list-style: none;
    8.     margin: 0;
    9.     padding: 0;
    10.     border: 0;
    11. }
    12. #cssmenu ul {
    13.     position: relative;
    14.     z-index: 597;
    15.     float: left;
    16. }
    17. #cssmenu ul li {
    18.     float: left;
    19.     min-height: 1px;
    20.     line-height: 1em;
    21.     vertical-align: middle;
    22. }
    23. #cssmenu ul li.hover,
    24. #cssmenu ul li:hover {
    25.     position: relative;
    26.     z-index: 599;
    27.     cursor: default;
    28. }
    29. #cssmenu ul ul {
    30.     margin-top: 1px;
    31.     visibility: hidden;
    32.     position: absolute;
    33.     top: 1px;
    34.     left: 99%;
    35.     z-index: 598;
    36.     width: 100%;
    37. }
    38. #cssmenu ul ul li {
    39.     float: none;
    40. }
    41. #cssmenu ul ul ul {
    42.     top: 1px;
    43.     left: 99%;
    44. }
    45. #cssmenu ul li:hover > ul {
    46.     visibility: visible;
    47. }
    48. #cssmenu ul li {
    49.     float: none;
    50. }
    51. #cssmenu ul ul li {
    52.     font-weight: normal;
    53. }
    54. #cssmenu {
    55.     font-family: 'Lato', sans-serif;
    56.     font-size: 18px;
    57.     margin-top:20px;
    58.     width: 100px;
    59. }
    60. #cssmenu ul a,
    61. #cssmenu ul a:link,
    62. #cssmenu ul a:visited {
    63.     display: block;
    64.     color: #848889;
    65.     text-decoration: none;
    66.     font-weight: 300;
    67. }
    68. #cssmenu > ul {
    69.     float: none;
    70. }
    71. #cssmenu ul {
    72.     background: #fff;
    73. }
    74. #cssmenu > ul > li {
    75.     border-left: 3px solid #d7d8da;
    76. }
    77. #cssmenu > ul > li > a {
    78.     padding: 10px 20px;
    79. }
    80. #cssmenu > ul > li:hover {
    81.     border-left: 3px solid #3dbd99;
    82. }
    83. #cssmenu ul li:hover > a {
    84.     color: #3dbd99;
    85. }
    86. #cssmenu > ul > li:hover {
    87.     background: #f6f6f6;
    88. }
    89. #cssmenu ul ul a:link,
    90. #cssmenu ul ul a:visited {
    91.     font-weight: 400;
    92.     font-size: 14px;
    93. }
    94. #cssmenu ul ul {
    95.     width: 120px;
    96.     background: none;
    97.     border-left: 20px solid transparent;
    98. }
    99. #cssmenu ul ul a {
    100.     padding: 8px 0;
    101.     border-bottom: 1px solid #eeeeee;
    102. }
    103. #cssmenu ul ul li {
    104.     padding: 0 20px;
    105.     background: #fff;
    106. }
    107. #cssmenu ul ul li:last-child {
    108.     border-bottom: 3px solid #d7d8da;
    109.     padding-bottom: 10px;
    110. }
    111. #cssmenu ul ul li:first-child {
    112.     padding-top: 10px;
    113. }
    114. #cssmenu ul ul li:last-child > a {
    115.     border-bottom: none;
    116. }
    117. #cssmenu ul ul li:first-child:after {
    118.     content: '';
    119.     display: block;
    120.     width: 0;
    121.     height: 0;
    122.     position: absolute;
    123.     left: -20px;
    124.     top: 13px;
    125.     border-left: 10px solid transparent;
    126.     border-right: 10px solid #fff;
    127.     border-bottom: 10px solid transparent;
    128.     border-top: 10px solid transparent;
    129. }
    130.  
    131. /* This is the part that I'm responsible part
    132. ----------------------------------------------
    133. */
    134.  
    135. #top_bar {
    136.     background-color: #5882FA;
    137.     border-bottom: #0404B4;
    138.     color: #ffffff;
    139.     padding: 1%;
    140.     width: 98%;
    141. }
    142.  
    143. #img_logo {
    144.     position: left;
    145. }
    146.  
    147. h1 {
    148.     text-align: center;
    149. }
    150.  
    151. #content {
    152.     float: right;
    153.     margin-left: 30px;
    154.     margin-right: 50px;
    155.     margin-top: 20px;
    156.     overflow: visible;
    157.     position: relative;
    158. }

    The relative portion is the #content. I'm wanting all the text to be to the right of my navigation menu, but it's below the menu for some reason. I thought that with Float being set to right that it would be to the right of the menu. Am I missing something?

  2. #2
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,169

    Re: [CSS] Float isn't working

    I would float your #cssmenu to left and then float your #content to left.

    Then, the #content will still wrap below, but that is because you have so much content in your div. When a div is floated and no width is specified, the div will auto size to fill the content.

    So, you'll need to either specify a size for your #content div or put less content in it.

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,544

    Re: [CSS] Float isn't working

    Ok cool! That works out nicely. I changed the float on the #cssmenu and the #content and I changed the #content to this:

    css Code:
    1. #content {
    2.     float: left;
    3.     margin-left: 13%;
    4.     margin-right: 50px;
    5.     margin-top: 20px;
    6.     overflow: visible;
    7.     position: relative;
    8.     width: 50%;
    9. }

    Now it works beautifully.

    Edit - Btw, it won't let me rep you again, but just know I am in spirit.

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width