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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS, Html Positioning

    Hello!

    I want to put some small gif files on this blue line as buttons, but when put main image in center, everything is different on another screen...

    thanks for help and sorry for bad english...


  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    We will need code and/or a link to your website or we cannot help you.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello SabaGEO,
    I'm not sure how you're presenting that image that it would move around. Typically, if you want something to stay put you position it relative to it's parent.

    See a quick positioning tutorial here.

    You can use a regular ul menu to position your gif buttons over that blue line. See this example -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	height: 640px;
    	width: 582px;
    	margin: 30px auto;
    	position: relative;
    	background: #999 url(5c1318f54c44.jpg);
    }
    ul#buttons {
    	margin: 0;
    	padding: 0 0 0 14px;
    	position: absolute;
    	top: 112px;
    	left: 265px;	
    	list-style: none;
    }
    	ul#buttons li {display: inline;}
    		ul#buttons li a:link,
    		ul#buttons li a:visited {
    			padding: 0 15px;
    			float: left;
    			display: block;
    			line-height: 14px;
    			color: #fff;
    			text-align: center;
    			font-size: 0.6em;
    			text-decoration: none;
    		}
    		ul#buttons li a:hover,
    		ul#buttons li a:active {
    			background: #c0c0c0;
    			color: #00f;
    		}
    </style>
    </head>
    <body>
        <div id="container">
    		<ul id="buttons">
    			<li><a href="#">Linky</a></li>
    			<li><a href="#">Linky</a></li>
    			<li><a href="#">Linky</a></li>
    			<li><a href="#">Linky</a></li>
    			<li><a href="#">Linky</a></li>
    		</ul>
        <!--end container--></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


  •  

    Posting Permissions

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