dcsimg
Results 1 to 7 of 7

Thread: [RESOLVED] CSS Positioning

  1. #1

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

    Resolved [RESOLVED] CSS Positioning

    Well I finally have the opportunity to get my first programming job. It's to develop a website for a local smoke shop. The only issue is that I'm a terrible web designer. I'm trying to do right now is something like this:

    Name:  html idea.png
Views: 100
Size:  5.4 KB

    So basically if I were doing this in visual basic, I'd do something like this:
    Code:
            Dim pnl_top As New Panel
    
            With pnl_top
                .BorderStyle = BorderStyle.FixedSingle
                .Location = New Point(100, 50)
                .Size = New Size(Me.Width - 50, 50)
            End With
    
            Dim lbl_shop, lbl_home, lbl_contact, lbl_phone, lbl_cart, lbl_price As New Label
    
            With lbl_shop
                .Left = pnl_top.Right + 25
                .Font = New Font(Me.Font.FontFamily, 18)
                .Text = "Shop Name Here"
                .Top = 5
            End With
    
            With lbl_home
                .Left = pnl_top.Right + 25
                .Text = "Home"
                .Top = lbl_shop.Bottom + 10
            End With
    
            With lbl_contact
                .Left = lbl_home.Right + 10
                .Text = "Contact Us"
                .Top = lbl_shop.Bottom + 10
            End With
    
            With lbl_phone
                .Left = pnl_top.Right + 25
                .Text = "(555)555 - 5555"
                .Top = lbl_home.Bottom + 10
            End With
    
            With lbl_shop
                .Left = pnl_top.Right - TextRenderer.MeasureText("Shopping Cart", lbl_shop.Font).Width - 35
                .Text = "Shopping Cart"
                .Top = 5
            End With
    
            With lbl_price
                .Left = lbl_shop.Right + 5
                .Text = "$0"
                .Top = 5
            End With
    
            pnl_top.Controls.AddRange({lbl_shop, lbl_home, lbl_contact, lbl_phone, lbl_cart, lbl_price})
    
            Me.Controls.Add(pnl_top)
    In HTML I'm trying this:
    Code:
    		<div id="top">
    			<!--Logo-->
    			<img alt="logo" id="imgLogo"></img>
    			
    			<!--Shop Name-->
    			<h1>I don't want to give this over the internet</h1>
    			
    			<!--Basic Navigation-->
    			<ul id="listTopNavigation">
    				<li><a>Home</a></li>
    				<li><a>Contact Us</a></li>
    			</ul>
    			
    			<!--Shopping Cart-->
    			<ul id="listCart">
    				<li><a>Shopping Cart</a></li>
    				<li>$0</li>
    			</ul>
    			
    			<!--Phone-->
    			<h2>I don't want to give this over the internet</h2>
    		</div>
    And then trying to style it with CSS like this:
    Code:
    #top
    {
    border-style:solid;
    border-width:1px;
    margin-top:50px;
    margin-bottom:50px;
    margin-right:100px;
    margin-left:100px;
    }
    
    #imgLogo
    {
    position:relative;
    top:0px;
    left:0px;
    overflow:inherit;
    }
    
    h1
    {
    position:relative;
    top:5px;
    left:0px;
    }
    
    #listTopNavigation
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    
    #listTopNavigation li
    {
    display:inline;
    }
    
    #listTopNavigation a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    
    #listCart
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    
    #listCart li
    {
    display:inline;
    }
    
    #listCart a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    The issue is that I'm not sure how to place the list items, well pretty much every element, where I want them to go! You can see I've tried setting the position property of the elements, but it's not doing what I want them to do.

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

    Re: CSS Positioning

    You're playing too much with positioning, which usually ends up causing headaches. Here is an example of how to accomplish what I think you're looking for.

    Now the rage now a days is to have everything responsive, so you might want to look into using a framework that does all that for you, like bootstrap.

    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <style type="text/css">
      	#container
    	{ 
    		border: 1px solid black;
    		width: 800px;
    		overflow: hidden;
    	}
    	
    	#logo{
    	  width: 100px;
    	  float: left;
    	  padding-right: 30px;
    	}
    	
    	#right_container{
    	  float: left;
    	  width: 670px;
    	}
    	
    	#shop_info{
    	  float: left;
    	  width: 20%;	
    	}
    	
    	#shopping_cart{
    	  float: right;
    	  margin-right: 15px;
    	}
      </style>
    </head>
    <body>
      <div id="container">
      	<div id="logo">
        	Logo
        </div>
        <div id="right_container">
        	<div id="shop_info">
            	<p>Name of Shop</p>
                <p>Home | Contact Us<br />
                	(555)555-5555
                </p>
            </div>
            <div id="shopping_cart">
            	<p>Shopping Cart | <span id="total">$0.00</span></p>
            </div>
        </div>
      </div>
    </body>
    </html>

  3. #3

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

    Re: CSS Positioning

    Well see the whole reason I'm using the list is because I want to create a navigation bar, but I think I understand what you're getting at. Store each group of elements in a div and 'float' those containers, correct?

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

    Re: CSS Positioning

    Yup, that is how you'll achieve that effect. However, if you want a horizontal list, you'll need to make sure the list is set to display: inline, and not block (but it looks like you already have that).

  5. #5

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

    Re: CSS Positioning

    The list itself or the list item? Right now I'm only setting the list item, should I set the list too?

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

    Re: CSS Positioning

    Just the list items themselves. The list would only need to be display:inline if you wanted to have something beside the entire menu.

  7. #7

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

    Re: CSS Positioning

    Okie doke. Thank you :]

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