Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Trouble wrapping text around image

    For some reason the text refuses to wrap around this image. I have spent quite a while on this silly problem so I have decided I needed the help of an outsider.
    HTML:
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    	<title>Computers</title>
    	<link rel="stylesheet" type="text/css" href="style.css">
    	</head>
    	<body>
    	<div id="logo"><img src="ComputerTech.jpg"></div>
    		<div id="mainbody">
    	<nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="work.html">Structure</a></li>
          <li><a href="history.html">History</a></li>
          <li><a href="fun.html">Fun Facts</a></li>          
          <li><a href="creators.html">Creators</a></li>
        </ul>
    	</nav>
    	<center><h1>Welcome to Computer Technology</h1></center>
    	<img src="http://evolutionofcomputers.edublogs.org/files/2011/10/Techie_Timeline-1092xj0.jpg" height="300" width="450" id="time">
    	<p>
    	dgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrddgsgrsgsgrdgsgrsgsgrd
    	</p>
    		</div>
    	</body>
    	</html>
    CSS:
    Code:
     /* START TITLE */
    
      /* START NAV MENU */
    nav {
      background-color:#CCCCCC;
      height:40px;
      border-bottom-style: solid;
      border-bottom-color: black;
    
    }
     
     
    nav ul {
      font-family: Arial, Verdana;
      font-size: 20px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
     
    nav ul li {
      display: block;
      position: relative;
      float: left;
     
    }
     
    nav li ul { 
      display: none; 
    }
     
    nav ul li a {
      display: block;
      text-decoration: none;
      padding: 7px 15px 3px 15px;
      background: #CCCCCC;
      color: #ffffff;  
      margin-left: 1px;
      white-space: nowrap;
      height:30px; /* Width and height of top-level nav items */
      width:90px;
      text-align: center;
    }
     
    nav ul li a:hover { 
      background: #617F8A; 
    }
     
    nav li:hover ul {
      display: block;
      position: absolute;
      height:30px;
    }
     
    nav li:hover li {
      float: none;
      font-size: 11px;
     
    }
     
    nav li:hover a { 
      background: #3A464F; 
      height:30px; /* Height of lower-level nav items is shorter than main level */
    }
     
    nav li:hover li a:hover { 
      background: #95A9B1; 
    }
     
    nav ul li ul li a {
        text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
    }
     
    /* END NAV MENU */
    
    body
      {
        background-color: #2C5463;
      }
    #logo
      {
         display:block;
         margin-left: 300px;
      }
    
      #mainbody
        {
          background-color: #CCCCCC;
          width: 1500px;
          height: 1000px;
          margin: auto;
        }
    
        #time
        {
          float: right;
          padding: 10px;
        }
    Also I have uploaded it to dropbox here: https://www.dropbox.com/sh/xl295xrplcf9ite/HcgX5Ije92

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello davejet1,
    Your test text looks like one very long word, there is nowhere for a break so it's too long to wrap next to that image. Look what happens when you have breaks in your text like normal length words.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Computers</title>
    <style type="text/css">
    nav {
    	background: #CCCCCC;
    	height: 40px;
    	border-bottom-style: solid;
    	border-bottom-color: black;
    }
    nav ul {
    	font-family: Arial, Verdana;
    	font-size: 20px;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    nav ul li {
    	display: block;
    	position: relative;
    	float: left;
    }
    nav li ul { display: none; }
    nav ul li a {
    	display: block;
    	text-decoration: none;
    	padding: 7px 15px 3px 15px;
    	background: #CCCCCC;
    	color: #ffffff;
    	margin-left: 1px;
    	white-space: nowrap;
    	height: 30px; /* Width and height of top-level nav items */
    	width: 90px;
    	text-align: center;
    }
    nav ul li a:hover { background: #617F8A; }
    nav li:hover ul {
    	display: block;
    	position: absolute;
    	height: 30px;
    }
    nav li:hover li {
    	float: none;
    	font-size: 11px;
    }
    nav li:hover a {
    	background: #3A464F;
    	height: 30px; /* Height of lower-level nav items is shorter than main level */
    }
    nav li:hover li a:hover { background: #95A9B1; }
    nav ul li ul li a { text-align: left; /* Top-level items are centered, but nested list items are left-aligned */ }
    /* END NAV MENU */
    
    body { background: #2C5463; }
    #logo {
    	display: block;
    	margin-left: 300px;
    }
    #mainbody {
    	background: #ccc;
    	width: 1500px;
    	height: 1000px;
    	margin: auto;
    }
    #time {
    	float: right;
    	padding: 10px;
    }
    </style>
    </head>
    <body>
    	<div id="logo"><img src="ComputerTech.jpg" alt="logo image"></div>
    <div id="mainbody">
    				<nav>
    					<ul>
    						<li><a href="index.html">Home</a></li>
    						<li><a href="work.html">Structure</a></li>
    						<li><a href="history.html">History</a></li>
    						<li><a href="fun.html">Fun Facts</a></li>
    						<li><a href="creators.html">Creators</a></li>
    					</ul>
    				</nav>
    			<h1>Welcome to Computer Technology</h1>
    			<img src="http://evolutionofcomputers.edublogs.org/files/2011/10/Techie_Timeline-1092xj0.jpg" alt="timeline" width="450" height="300" id="time">
    			<p>
    				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    				aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    				sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    				nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    				duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    			</p>
    		<!--end mainbody--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    davjet1 (03-24-2014)


  •  

    Tags for this Thread

    Posting Permissions

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