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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2003
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Css box positions

    Hello,

    I'm just getting started with css and I have some issues to solve! Below, i give the .html and .css file.
    My problems are the following:
    1. I want the div upFooter3 to be in the same line as upFooter1, upFooter2,upFooter4 and i can't understand what am i doing wrong.
    2. I can't set div search to be placed above the div header logo on the right side.

    Any suggestions?

    Thank you in advance

    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/default.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="default" id="wrapper">
    <div class="upMenu" id="upMenu">
    upMenu
    </div>
    <div class="search" id="search">
    search 
    </div>
    <div id="headerLogo">
    <p>header logo </p>
    <p>&nbsp;</p>
    
    
    <div class="mainMenu" id="mainMenu">
    main menu
    </div>
    </div>
    <div class="breadcrumbs" id="breadcrumbs">
    breadcrumbs
    </div>
    <div class="mainLeft" id="mainLeft">
    main Left
    </div>
    <div class="mainRight" id="mainRight">
    main Right
    </div>
    <div class="mainCenter" id="mainCenter">
      <p>main Center </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div class="upFooter1" id="upFooter1">
    upfooter 1
    </div>
    <div class="upFooter4" id="upFooter4">
    upfooter 4
    </div>
    <div class="upFooter2" id="upFooter2">
    upfooter 2
    </div>
    <div class="upFooter3" id="upfooter3">
    upfooter 3
    </div>
    <div class="footer" id="footer">
    footer
    </div>
    </div>
    </body>
    </html>
    default.css
    Code:
    .default {
    	width: 90%;
    	margin-left: 5%;
    }
    .upMenu {
    	text-align: right;
    	width: 100%;
    }
    .breadcrumbs {
    	float: left;
    	width: 100%;
    }
    .search {
    	width: 20%;
    	float: right;
    }
    .mainMenu {
    	width: 100%;
    	text-align: center;
    }
    .mainLeft {
    	float: left;
    	width: 12%;
    }
    .mainCenter {
    	width: 66%;
    	margin-left: 12%;
    }
    .mainRight {
    	float: right;
    	width: 22%;
    }
    .upFooter1 {
    	float: left;
    	width: 25%;
    }
    .upFooter2 {
    	width: 25%;
    	margin-left: 25%;
    }
    .upFooter3 {
    	width: 25%;
    	margin-left: 50%;
    	float: left;
    }
    .upFooter4 {
    	float: right;
    	width: 25%;
    }
    
    .footer {
    	font-family: Tahoma;
    	font-size: 13px;
    	font-weight: bold;
    	color: #903;
    	background-color: #CCC;
    	text-align: center;
    	padding-top: 1%;
    	padding-bottom: 1%;
    	width: 100%;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Use following code:

    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/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .default {
        width: 90%;
        margin-left: 5%;
    }
    .upMenu {
        text-align: right;
        width: 100%;
    }
    .breadcrumbs {
        float: left;
        width: 100%;
    }
    .search {
        width: 20%;
        float: right;
    }
    .mainMenu {
        width: 100%;
        text-align: center;
    }
    .mainLeft {
        float: left;
        width: 12%;
    }
    .mainCenter {
        width: 66%;
        margin-left: 12%;
    }
    .mainRight {
        float: right;
        width: 22%;
    }
    #upFooter {
        overflow:auto;
        height:1%;    
    }
    #upFooter div{
        float:left;
        width:25%
    }
    .upFooter1 {
        
    }
    .upFooter2 {
        
    }
    .upFooter3 {
        
    }
    .upFooter4 {
        
    }
    
    .footer {
        font-family: Tahoma;
        font-size: 13px;
        font-weight: bold;
        color: #903;
        background-color: #CCC;
        text-align: center;
        padding-top: 1%;
        padding-bottom: 1%;
        width: 100%;
    }
    </style>
    </head>
    
    <body>
    <div class="default" id="wrapper">
    <div class="upMenu" id="upMenu">
    upMenu
    </div>
    <div class="search" id="search">
    search 
    </div>
    <div id="headerLogo">
    <p>header logo </p>
    <p>&nbsp;</p>
    
    
    <div class="mainMenu" id="mainMenu">
    main menu
    </div>
    </div>
    <div class="breadcrumbs" id="breadcrumbs">
    breadcrumbs
    </div>
    <div class="mainLeft" id="mainLeft">
    main Left
    </div>
    <div class="mainRight" id="mainRight">
    main Right
    </div>
    <div class="mainCenter" id="mainCenter">
      <p>main Center </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div id="upFooter">
    <div class="upFooter1" id="upFooter1">
    upfooter 1
    </div>
    <div class="upFooter4" id="upFooter4">
    upfooter 4
    </div>
    <div class="upFooter3" id="upfooter3">
    upfooter 3
    </div>
    <div class="upFooter2" id="upFooter2">
    upfooter 2
    </div>
    
    </div>
    <div class="footer" id="footer">
    footer
    </div>
    </div>
    </body>
    </html>

  • Users who have thanked vikram1vicky for this post:

    dealwi8me (08-04-2011)

  • #3
    New Coder
    Join Date
    May 2003
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your quick answer!

    I copy your code but i don't get all the upfooters at the same line.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by dealwi8me View Post
    Thank you for your quick answer!

    I copy your code but i don't get all the upfooters at the same line.

    Make changes in CSS code... no need to define seperate style for each DIV...

  • #5
    New Coder
    Join Date
    May 2003
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    my mistake... your code works just fine!

    thanks a lot for the help


  •  

    Posting Permissions

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