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

    My first project and havin some trouble. please help

    Hi i am new to html and css coding and i am working on my first project. just a simple website. i have the top of the page practically finished but im having a problem. whenever i make the window smaller, everything starts to clump and overlap each-other. PLEASE tell me what is wrong or missing in my code and how i can fix this. this is my code:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href"test.css">
            <title>my webpage</title>
        </head>
    	<body>
    		<div class="head">
        	    <div id="head-title">My Website</div>   
                <div id="head-quote">"this is my quote and this <br/> is where it shall be"</div>
                <div id="head-qname">-Me</div>
                <div id="head-shadow"></div>
    		</div>
            <div class="tab-bar">
    			<a href=""><div id="home">Home</div></a>
    			<a href=""><div id="about">About</div></a>
    			<a href=""><div id="photos">Photos</div></a>
    			<a href=""><div id="contact">Contact</div></a>
    		</div>
            <div class="main-box">
                <div id="main-head">HOME</div>
                <div id="main-body">
                </div> 
            </div>
    	</body>
    </html>
    css
    Code:
    body{
    	background-color:black;
    }
    .head{
        height:130px;
        width:98.8%;
    	background-color:red;
        box-shadow:10px;
        border-right:5px solid grey;
        border-left:5px solid grey;
        border-top:5px solid grey;
    }
    #head-title{
         font-family:colonna mt;
        font-size:50px;
        margin-left:30px;
        margin-top:15px;
        text-decoration:underlin;
    }
    
    #head-quote{
        font-family:brush script mt;
        font-size:25px;
        margin-right:60px;
        margin-top:-35px;
        float:right;
    }
    #head-qname{
        font-family:brush script mt;
        font-size:25px;
        margin-right:50px;
        float:right;
        clear:right;
    }
    #head-shadow{
        height:130px;
        width:70.1%;
        margin-top:-93px;
        margin-right:-178px;
        float:right;
        box-shadow:-2px -2px 3px #B40404 inset;
    }
    .tab-bar{
    	height:0px;
    	width:98%;
    	background-color:red;	
        border-bottom:4px solid grey;
        border-right:5px solid grey;
    	position:absolute;
    	font-family:impact;
    	font-size:20px;
    	line-height:45px;
    }
    .tab-bar a{
        color:black;
        }
    #home{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    	}
    #about{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    	}
    #photos{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    }
    	
    #contact{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    	}
    .main-box{
    }
    #main-head{
        height:40px;
        width:68%;
        background-color:red;
        margin:15px 6px 0px 0px;
        float:right;
        font-family:IMPACT;
        font-size:29px;
        color:red;
        text-shadow:1px 1px 20px black;
        text-align:center;
        Border-top:4px solid grey;
        border-left:3px solid grey;
        border-right:3px solid grey;
        clear:left;
    }
    #main-body{ 
    }
    PLEASE HELP!!!! thanks!

  • #2
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    I know the solution is probably a stupidly easy one but again i am a beginner at html and css programming. I really do need the help since i am still learning. so if you have any info on how to keep my stuff from overlapping when i reduce the window size. please, tell me! thank you very much!

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    The answer isn't entirely easy, what your looking for is called responsive design. Google it or look here http://www.smashingmagazine.com/resp...nes-tutorials/ You have two places where your page needs to change. At a width of 1000px and then at 555px.

    Your layout could use some work, but for a first attempt it's not bad.
    Evolution - The non-random survival of random variants.

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much for sending me in the right direction. i guess its not going to be as easy as i originally thought haha. and thanks for the compliment too!

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Chicago, Il
    Posts
    7
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Hi skyking!

    After going through your CSS code, there are a few changes you can make to get it working a little better. I've highlighted them below with a comment next to why it should be changed.

    Quote Originally Posted by skyking View Post
    Hi i am new to html and css coding and i am working on my first project. just a simple website. i have the top of the page practically finished but im having a problem. whenever i make the window smaller, everything starts to clump and overlap each-other. PLEASE tell me what is wrong or missing in my code and how i can fix this. this is my code:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href"test.css">
            <title>my webpage</title>
        </head>
    	<body>
    		<div class="head">
        	    <div id="head-title">My Website</div>   
                <div id="head-quote">"this is my quote and this <br/> is where it shall be"</div>
                <div id="head-qname">-Me</div>
                <div id="head-shadow"></div>
    		</div>
            <div class="tab-bar">
    			<a href=""><div id="home">Home</div></a>
    			<a href=""><div id="about">About</div></a>
    			<a href=""><div id="photos">Photos</div></a>
    			<a href=""><div id="contact">Contact</div></a>
    		</div>
            <div class="main-box">
                <div id="main-head">HOME</div>
                <div id="main-body">
                </div> 
            </div>
    	</body>
    </html>
    css
    Code:
    body{
    	background-color:black;
    }
    .head{
        height:130px;
        width:98.8%;
    	background-color:red;
        box-shadow:10px;
        border-right:5px solid grey;
        border-left:5px solid grey;
        border-top:5px solid grey;
    }
    #head-title{
         font-family:colonna mt; /*add quotes around multiple font names or if it's two words*/
        font-size:50px;
        margin-left:30px;
        margin-top:15px;
        text-decoration:underlin; /*should be underline*/
    }
    
    #head-quote{
        font-family:brush script mt;
        font-size:25px;
        margin-right:60px;
        margin-top:-35px;
        float:right;
    }
    #head-qname{
        font-family:brush script mt;
        font-size:25px;
        margin-right:50px;
        float:right;
        clear:right;
    }
    #head-shadow{
        height:130px;
        width:70.1%;
        margin-top:-93px;
        margin-right:-178px;
        float:right;
        box-shadow:-2px -2px 3px #B40404 inset;
    }
    .tab-bar{
    	height:0px;
    	width:98%;
    	background-color:red;	
        border-bottom:4px solid grey;
        border-right:5px solid grey;
    	position:absolute;
    	font-family:impact;
    	font-size:20px;
    	line-height:45px;
    }
    .tab-bar a{
        color:black;
        }
    #home{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    	}
    #about{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    	}
    #photos{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    }
    	
    #contact{
    	height:50px;
    	width:100px;
    	background-color:red;
    	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:-1px -4px black inset;
    	}
    .main-box{
    }
    #main-head{
        height:40px;
        width:68%;
        background-color:red;
        margin:15px 6px 0px 0px;
        float:right;
        font-family:IMPACT;
        font-size:29px;
        color:red;
        text-shadow:1px 1px 20px black;
        text-align:center;
        Border-top:4px solid grey;
        border-left:3px solid grey;
        border-right:3px solid grey;
        clear:left;
    }
    #main-body{ 
    }
    PLEASE HELP!!!! thanks!
    Hope this helps some. Good luck!
    HTML & CSS Workbook
    Learn the difference between coding a site and building one

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts

    The solution to this problem has been posted here...

    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
    •