Results 1 to 7 of 7

Thread: Placing image buttons

  1. #1
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Placing image buttons

    Hey guys. Have what might be a quick solve, but I'm not sure.

    I'm redesigning my bosses site: http://rutholsonphoto.com/testbuild/index.php

    She told me at the last minute that she wants face, twitter, and rss buttons included into this design. She wants them to be in the upper right corner.

    I was told that using positioning is a bad thing, so...how would I get the darn buttons up there?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    CSS's float: right; should do it.
    Jeremy | jfein.net

  3. #3
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    CSS's float: right; should do it.
    How do I go about with direct placement, without using positioning though? They're supposed to look like this:


    Would I do the float, and then follow it with line heights? But then how do I get them in their horizontal position? I don't want them butt up against one another.
    Last edited by PsionicSin; 12-05-2010 at 11:02 PM.

  4. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Maybe margin-right and marigin-left? Can you update the page with the current code (using float: left) so I know how it looks right now?
    Jeremy | jfein.net

  5. #5
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    Maybe margin-right and marigin-left? Can you update the page with the current code (using float: left) so I know how it looks right now?
    Let me supply you with the code first, because when I try creating divs, it forces my navigation menu and the center graphic down and I'm not sure why.

    CSS
    Code:
    @charset "utf-8";
    /* CSS Styling */
    
    * {
        margin: 0;
        padding: 0;
    }
    
    /* Styling the body */
    
    body {
        margin: 0;
        font-size: 62.5%;
        font-family: Arial, Helvetica, sans-serif;
        background: url(images/body_bg.png) repeat-x top #c4c0bf;
    }
    
    /* Styling the Header */
    
    #wrapper {margin: 0pt auto; background: url(images/header_bg.jpg) no-repeat center top; width: 920px; overflow: hidden;}
    
    
    #header {
        margin: 0 auto;
        /*height: 68px;*/
        height:75px;
        /*width: 884px;*/
        overflow: hidden;
    }
    
    #facebook {
    }
    
    #twitter {
    }
    
    #rss {
    }
    
    /* Styling the Footer */
    
    #footer {
        background: #292929;
        font-size: 12px;
        color: white;
        padding: 5px 0 10px 0;
        border-top: 2px solid #606060;
        text-align: center;
    }
    
    /* Styling the Navigation Menu */
    
    #nav_container {
        margin: 46px auto 0;
        width: 920px;
        height: 29px;
    }
    
    ul {    /* the unordered list */
        height:/*25px*/ 100%;
        text-align: center;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        font-weight: bold;
    }
    
    ul li {
        display: inline;    /* changing the display property */
        height: 100%;
        width: 115px;
        float: left;    /* floating the list items to the left */
        
        list-style-type: none;    /* disabling the list icon */
        overflow: hidden;    /* hiding the overflowing content */
    }
    
    ul li a {
        text-decoration:none;    /* removing the underline text-decoration */
        display:block;
        line-height: 29px;
        height:100%;
    }
    
    /* styling the links */
    .normalMenu, .normalMenu:visited,
    .hoverMenu, .hoverMenu:visited,
    .selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
        outline:none;
        padding:0px 5px;
        display:block;
    }
    
    /* styles that are assigned individually */
    
    .hoverMenu,.hoverMenu:visited,
    .selectedMenu,.selectedMenu:visited {
        margin-top:-29px;
        background:url(images/grey_bg.gif) repeat-x #eeeeee;
        color:#444444;
    }
    
    .selectedMenu,.selectedMenu:visited {
        margin:0;
    }
    
    .normalMenu, .normalMenu:visited {
        color:white;
        font-weight: bold;
        background:url(images/dark_bg.gif) repeat-x #444444;
    }
    
    
    /* Styling the Main Content */
    
    #main_container {
        height: 540px;
        /*width: 800px;
        margin-top: 68px;*/
        margin:0 25px;
    }
    HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Ruth Olson Photography</title>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    
    <body>
    <div id="wrapper">
        <div id="header">
            <div id="nav_container">
                <ul id="navMenu">
                        <li><a href="#" class="normalMenu">Home</a></li>
                        <li><a href="#" class="normalMenu">At A Glance</a></li>
                        <li><a href="#" class="normalMenu">About Us</a></li>
                        <li><a href="#" class="normalMenu">Gallery</a></li>
        
                        <li><a href="#" class="normalMenu">Senior Challenge</a></li>
                        <li><a href="#" class="normalMenu">Prices</a></li>
                        <li><a href="#" class="normalMenu">Contact Us</a></li>
                        <li><a href="#" class="normalMenu">Log-In</a></li>
                </ul>
            </div>
        </div>
            
        <div id="main_container">
        </div>
    </div><!-- end wrapper -->
    
    <div id="footer">
    <p>Copyright &copy; 2003 - <?php echo date('Y');?> Ruth Olson Photography</p>
    </div>
    
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ie6blocker.js"></script>
    <script type="text/javascript" src="js/js_script.js"></script>
    
    </body>
    </html>

  6. #6
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Divs have default padding and margin, try using part of a css reset like this:
    Code:
    div {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    (http://meyerweb.com/eric/tools/css/reset/)
    Jeremy | jfein.net

  7. #7
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    It looks like everything is good now?
    Jeremy | jfein.net

Bookmarks

Posting Permissions

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