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 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Box keeps moving on other computers! PLEASE HELP!!!!!

    I am new to html/css and im working on my first website. Everything works on my computer just fine but when i switch to another computer the title box (div "main-tab") for the main box (div "main-box") moves to the left about 100-200pxs i have no clue why this is happening and i dont know how to fix it. like i said... it looks fine and lines up on my computer but when someone else trys to view the file it moves to the left! im getting really frustrated because i have no idea what to do to fix it. PLEASE HELP! the code is:

    html:
    Code:
    <!DOCTYPE html>
    <html>
        	<head>
    		<link type="text/css" rel="stylesheet" href="index.css"/>
    		<title> Home :||: My Website! </title>
    	</head>
    	<body>
            <div id="head">
                <p>My Website</p>
                <p>"this is my quote<br><span>and this is where it shall be"</span></p>
                <p>-ME</p>
             </div>
            <div id="tabs">
                <div id="buttons">
                    <a href="index.html"><div id="home">Home</div></a>
                    <a href="about.html"><div id="about">About</div></a>
                    <a href="photos.html"><div id="photos">Photos</div></a>
                    <a href="contact.html"><div id="contact">Contact</div></a>
                </div>
             </div>
            <div id="main">
                <div id="main-tab">Home</div>
                <div id="main-box">
                    <p>Video Coming Soon!</p>
                </div>
             </div>
        </body>
    </html>
    CSS:
    Code:
    body{
        background-color:black;
    }
    #head{
         height:130px;
        width:98.8%;
        background-color:#DF0101;
        border-right:5px solid grey;
        border-left:5px solid grey;
        border-top:5px solid grey;
        position:relative;
    }
    #head p:nth-child(1){
        font-family:colonna mt;
        font-size:50px;
        margin-left:30px;
        margin-top:15px;
    }
    #head p:nth-child(2){
        font-family:brush script mt;
        font-size:25px;
        margin-right:100px;
        margin-top:-90px;
        float:right;
    }
    #head span{
        margin-left:20px;
    }
    #head p:nth-child(3){
        font-family:brush script mt;
        font-size:25px;
        margin-right:50px;
        margin-top:-30px;
        float:right;
    }
    #buttons{
        height:0px;
    	width:98%;
    	background-color:#DF0101;	
        border-bottom:4px solid grey;
        border-right:5px solid grey;
    	position:absolute;
    	font-family:impact;
    	font-size:20px;
    	line-height:45px;
        z-index:3;
    }
    #buttons a{
        color:black;
        }
    #home{
    	height:50px;
    	width:100px;
    	background-color:#DF0101;
    	display:inline-block;
    	text-align:center;
        border-left:5px solid grey;
        border-bottom:3px solid grey;
        border-right:1px solid grey;
        box-shadow:-1px -4px 4px #B40404 inset;
    
    }
    #home:hover{
    	background-color:black;
    	color:red;
        box-shadow:none;
    	}
    #about{
    	height:50px;
    	width:100px;
    	background-color:#DF0101;
    	display:inline-block;
    	text-align:center;
    	margin-left:-4px;
        border-bottom:3px solid grey;
        border-right:1px solid grey;
        box-shadow:-1px -4px 4px #B40404 inset;
    }
    #about:hover{
    	background-color:black;
    	color:red;
        box-shadow:none;
    	}
    #photos{
    	height:50px;
    	width:100px;
    	background-color:#DF0101;
    	display:inline-block;
    	margin-left:-4px;
    	text-align:center;
        border-bottom:3px solid grey;
        border-right:1px solid grey;
        box-shadow:-1px -4px 4px #B40404 inset;
    }
    #photos:hover{
    	background-color:black;
    	color:red;
        box-shadow:none;
    }
    	
    #contact{
    	height:50px;
    	width:100px;
    	background-color:#DF0101;
    	display:inline-block;
    	margin-left:-4px;
    	text-align:center;
        border-bottom:3px solid grey;
        border-right:2px solid grey;
        box-shadow:-2px -4px 3px #B40404 inset;
    }
    #contact:hover{
    	background-color:black;
    	color:red;
        box-shadow:none;
    	}
    #main-tab{
        height:45px;
        width:68%;
        background-color:#DF0101;
        margin-top:15px;
        margin-right:-182px;
        float:right;
        font-family:IMPACT;
        font-size:29px;
        color:red;
        text-shadow:1px 1px 10px black;
        text-align:center;
        Border-top:4px solid grey;
        border-left:3px solid grey;
        border-right:3px solid grey;
        border-bottom:5px solid #DF0101;
        clear:left;
        position:relative;
        z-index:2;
    }
    #main-box{ 
        clear:both;
        height:450px;
        width:98.8%;
        margin:-5px 6px;
        background-color:#DF0101;
        border:5px solid grey;
        border-right:3px solid grey;
        border-top:3px solid grey;
        float:right;
        position:relative;
        z-index:1;
    }
    #main-box p{ 
        text-align:center;
        line-height:400px;
    }

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there skyking,

    here is how I would code it...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Home :||: My Website!</title>
    
    <link rel="stylesheet"  href="/">
    
    <style>
    body {
        min-width:820px;
        background-color:rgb(0,0,0);
        font-family:'colonna mt',verdana,sans-serif;
     }
    #header {
        height:130px;
        border-width:5px 5px 3px 5px;
        border-style:solid;
        border-color:rgb(128,128,128);
        background-color:rgb(223,1,1);
     }
    #header h1 {
        float:left;
        width:403px;
        line-height:130px;
        margin:0;
        font-size:50px;
        font-weight:normal;
        text-align:center;
     }
    #header div {
        float:right;
        width:350px;
        padding:30px 50px 0 0;
        font-family:'brush script mt',verdana,sans-serif;
        font-size:20px;
     }
    #header p {
        margin:0;
     }
    #header p:last-of-type {
        text-align:right;
     }
    #header span {
        margin-left:9px;
     }
    #links {
        float:left;
        width:403px;
        height:50px;
        padding:0px 0 0;
        margin:-3px 0 0;
        border-width:0 3px 3px 5px;
        border-style:solid;
        border-color:rgb(128,128,128);
        list-style-type:none;
     }
    #links li {
        float:left;
     }
    #links a {
        display:block;
        width:100px;
        height:50px;
        line-height:54px;
        border-right:1px solid rgb(128,128,128);
        font-family:impact,sans-serif;
        font-size:20px;
        color:rgb(0,0,0);
        text-align:center;
        text-decoration:none;
        background-color:rgb(223,1,1);
        box-shadow:inset -1px -4px 4px rgb(180,4,4);
     }
    #links li:last-of-type a {
        border:0;
     }
    #links a:hover {
        color:rgb(255,0,0);
        background-color:rgb(0,0,0);
        box-shadow:none;
     }
    #home {
        position:relative;
        z-index:1;
        height:50px;
        line-height:46px;
        margin:10px 0 0 422px;
        border-width:3px 5px 0 3px;
        border-style:solid;
        border-color:rgb(128,128,128);
        font-family:impact,sans-serif;
        font-size:29px;
        color:rgb(255,0,0);
        text-align:center;
        text-shadow:1px 1px 10px rgb(0,0,0);
        background-color:rgb(223,1,1);
     } 
    #main {
        position:relative;
        z-index:0;
        min-height:400px;
        padding:20px 50px;
        margin-top:-3px;
        border-width:3px 5px 5px;
        border-style:solid;
        border-color:rgb(128,128,128);
        background-color:rgb(223,1,1);
     }
    </style>
    
    </head>
    <body>
    
    <div id="header">
    
    <h1>My Website</h1>
    
    <div>
    <p>"this is my quote<br>
    <span>and this is where it shall be"</span></p>
    <p>-ME</p>
    </div>
    
    </div><!-- end #header -->
    
    <ul id="links">
     <li><a href="">Home</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Photos</a></li>
     <li><a href="">Contact</a></li>
    </ul>
    
    <div id="home">Home</div>
    
    <div id="main">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div><!-- end #main -->
    
    </body>
    </html>
    coothead


  •  

    Posting Permissions

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