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
    Sep 2017
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Two column layout problems

    I've been trying to fix this code for days now. I've done different things with the CSS and HTML and for some reason, it's just not working for me. Does anyone know what I'm doing wrong? I learn best from trying until I cant anymore, and then seeing the right way and comparing notes.

    HTML for index page:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
     <link rel = "stylesheet"
       type = "text/css"
       href = "assignment2.css" />
       
    The Fresh Cafe
    </head>
    
    
    <div class="container">
    <body>
    <article>
    <p>
    <div id="nav">
      <ul>
        <li><a href="http://nova.umuc.edu/~ct385e09/index.html">Home</a></li>
        <li><a href="<a href="http://nova.umuc.edu/~ct385e09/menu.html">Menu</a></li>
        <li><a href="http://nova.umuc.edu/~ct385e09/location.html">Location</a></li>
      </ul>
    </div>
    </p>
    <body>
      <p>
      	<ul>
    	<li>Fresh, Healthy Cuisine</li>
    	<li>Friendly Service</li>
    	<li>Open for Breakfast, Lunch and Dinner</li>
    	</ul>
    
    <div class="clearfix"><img src="plate.jpg" alt="Fresh Cafe Food" width="333" height="156" style="float:right"></div>
    
    123 Elm Street<br/>
      Appleton, CA<br/>
      1-888-555-5555
      </p>
     </article>
     
    </body>
    
    <footer>Copyright &copy; 2017 The Fresh Cafe<br/>
    <a href="mailto:[email protected]">[email protected]</a></footer>
    
    </div>
    
    </body>
    </html>


    CSS (external):
    Code:
    div.container {
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #dce9f7;
    	width: 70%;
    	min-width: 700px;
    	box-shadow: 5px 5px #828282;
    }
    
    body {
    	color: black;
    	font-family: verdana, arial, sans-serif;
    	background-color: #f2e7c9;
    }
    
    h1 {
    	background-color: #d9c7b4;
    	color: black;
    	text-align: center;
    }
    
    h2 {
    	background-color: white;
    	font-size: 1.2em;
    	padding-left: 10px;
    	padding-bottom: 5px;
    
    }
    
    footer {
    	background-color: #d9c7b4;
    	color: #000000;
    	font-size: .60em;
    	text-align: center;
    	padding: 10px;
    	font-style: italic;
    }
    
    #nav {
        float: left;
        margin: 0;
        padding: 50px;
    	height: 100%;
    	background-color: #8fb1d5;
    }
    
    #nav ul {
        list-style-type: none;
        padding: 0;
    	text-decoration: none;
    	text-align: center;
    }
    
    #nav ul a {
    	text-decoration: none;
    	color: navy;
    	font-family: verdana arial sans-serif;
    	text-align: center;
    }
       
    #nav ul a:hover{
        text-decoration: none;
    	background-color:lightblue;
    	color:black;
    	font-family: verdana arial sans-serif;
    	text-align: center;
    }
    
    .floatright {
    	float: right;
    	padding-bottom: 0px;
    }
    
    .floatleft {
    	float: left;
    	padding: 10px;
    }
    
    article {
      -webkit-column-count: 2 300px;
         -moz-column-count: 2 300px;
              column-count: 2 300px;
    	 -moz-column-fill: auto;
           column-fill: auto;
      height: 100%;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }


    live index webpage:
    http://nova.umuc.edu/~ct385e09/indexTEST.html




    What its SUPPOSED to look like:
    -html_exercise3_screenshot_new.jpg

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,082
    Thanks
    37
    Thanked 1,081 Times in 1,077 Posts
    For starters you have multiple <body> tags and some of you HTML is out side of the first one.

    You have a lot of redundant code.
    You have <div class="container"> with is doing the same job as <body> and style them both.
    Fix:
    Use one or the other. If it's container make it an id =>> <div id="container">

    You have
    Code:
    .floatright {
    	float: right;
    	padding-bottom: 0px;
    }
    
    .floatleft {
    	float: left;
    	padding: 10px;
    }
    Which is horrible and yet use .....Fresh Cafe Food" width="333" height="156" style="float:right">

    You should place the menu horizontally and remove the dots there.
    Come back after you clean this up a bit.
    Last edited by sunfighter; Sep 24th, 2017 at 08:31 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    bhudd1010 (Sep 24th, 2017)


 

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
  •