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 to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Arrow Help with site layout/image positioning

    Hello, I am new to the site. I decided to sign up because I have been having trouble in my Web Design class and I have been falling behind.

    My current issue is that I don't understand how to position images I've made to create a page layout. I've seen it done in HTML and in CSS, but they both confused me since I haven't seen any with image URLs. I have three images, a header, body, and footer. I always wanted to make sure that the text stays within the image such as the body tag... ect
    FYI The header already on the page is just a place holder so it doesn't look too empty, its not the header I am using. An example of what I want my website to look like is here: http://sws.mnstate.edu/redmanad/266/...nt6/index.html except with the navigation bar showing on the nav image bar right under the header and there will be text in the footer.

    So yeah, Things I needed help with:
    Adding my header image
    Adding my navigation image (which is the background image not the actual drop down menu)
    Adding my body image
    Adding my footer image
    Making sure text stays within the indicated image to coordinate the layout I want.
    Any extra tips

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    		<title>Adam Redman's Website</title>
    		<link href="style.css" rel="stylesheet" type="text/css" />
    	</head>
        
    <body bgcolor="maroon">
    				<center><img src="http://i1115.photobucket.com/albums/k559/ClassyRed-/Personal%20Website/msum-adam.jpg" width="700" height="144" border="0" alt="MSU Moorhead - Adam Redman"></a></center>
    
    
    
    <div class='container'>
    
    <ul id="nav">
    
    <li><a href="http://sws.mnstate.edu/redmanad/266/index.html">Home</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/homework/index.html">Homework</a>
    <ul>
    <li><a href="http://sws.mnstate.edu/redmanad/266/homework/assignment1/header.html">Assignment1</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/homework/assignment2/sites.html">Assignment2</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/homework/assignment3/usingcss.html">Assignment3</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/homework/assignment4/garageband.html">Assignment 4</a></li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/homework/assignment6/index.html">Assignment 6</a>
    </li>
    </ul>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/index.html">Inclass</a>   
    <ul>
    <li><a href="http://sws.mnstate.edu/redmanad/266/index.html">Assignment 1</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/index.html">Assignment 2</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/assignment3/sound.wav">Assignment 3</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/assignment4/unknown.html">Assignment 4</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/portfolio/index.html">Portfolio</a> 
    <ul>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/portfolio/flash/flash.html">Flash</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/portfolio/sound/sound.html">Sounds</a>
    </li>
    <li><a href="http://sws.mnstate.edu/redmanad/266/inclass/portfolio/video/video.html">Videos</a>
    </li>
    </ul>		
    </ul>
    </li> 
    <li><a href="http://sws.mnstate.edu/redmanad/266/resume/resume.html">Resume</a></li>
    </ul>
    
    </div>
    
    <br />
    <br />
    
    <div> 
    				
    					<center><h1><b>About the Site</b></h1></center>
    
     
                		            <p>This website is a portfolio about myself containing information about work experience, things about me, and a place to displace my works. </p>
    
                	        <br />
                                    <br />
    		        <br />
                                    
                   <p><b><center>About Me</center></b></p>  
                   <p>I am a twenty year old college student. I attend Minnesota State University Moorhead and majoring in Graphic Communications. I am a hard worker and try to excel in everything I do. I am passionate about web design and creating things. I can be very open minded and creative. I love to strategize and find new solutions to problems. Academically I strive for perfection and will always try my best. I am a very social person and don't mind going out of my comfort zone.</p>  
        </div>             
                                    
    			 <center><p><i>Adam Redman</i></p>
    
    				     <p><i>Last Updated: 11/1/11</i></p>              			  		   												                     <p><i>redmanad@mnstate.edu</i></p></center>
    
    	</body>
    </html>
    This is the CSS

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    #box{
    	border-size:1px;
    	bored-bottom-style:dashed;
    	border-color:#F00;
    }
    
    .class-one{
    	height:200px;
    	width:200px;
    }
    
    .container{
    	width:500px;
    	height:auto;
    	margin:0 auto;
    }
    
    *container ul{}
    *container ul li{}
    
    #nav{
    	list-style:none;
    	font-weight:bold;
    	margin-bottom:10px;
    	/* Clear floats */
    	float:left;
    	width:100%;
    
    	/* Bring the nav above everything else--uncomment if needed.
    	position:relative;
    	z-index:5;
    	*/
    }
    #nav li{
    	float:left;
    	margin-right:10px;
    	position:relative;
    }
    #nav a{
    	display:block;
    	padding:5px;
    	color:#fff;
    	background:#333;
    	text-decoration:none;
    }
    #nav a:hover{
    	color:#fff;
    	background:#6b0c36;
    	text-decoration:underline;
    }
    
    /*--- DROPDOWN ---*/
    #nav ul{
    	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    	list-style:none;
    	position:absolute;
    	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    }
    #nav ul li{
    	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    	float:none;
    }
    #nav ul a{
    	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }
    #nav li:hover ul{ /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    }
    #nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    	background:#6b0c36;
    	text-decoration:underline;
    }
    #nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    	text-decoration:none;
    }
    #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    	background:#333;
    }
    
    #nav{
    	list-style:none;
    	font-weight:bold;
    	margin-bottom:10px;
    	/* Clear floats */
    	float:left;
    	width:100%;
    	/* Bring the nav above everything else--uncomment if needed.
    	position:relative;
    	z-index:5;
    	*/
    }
    #nav li{
    	float:left;
    	margin-right:10px;
    	position:relative;
    }
    #nav a{
    	display:block;
    	padding:5px;
    	color:#fff;
    	background:#333;
    	text-decoration:none;
    }
    #nav a:hover{
    	color:#fff;
    	background:#6b0c36;
    	text-decoration:underline;
    }
    
    /*--- DROPDOWN ---*/
    #nav ul{
    	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    	list-style:none;
    	position:absolute;
    	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    }
    #nav ul li{
    	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    	float:none;
    }
    #nav ul a{
    	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }
    #nav li:hover ul{ /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    }
    #nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    	background:#6b0c36;
    	text-decoration:underline;
    }
    #nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    	text-decoration:none;
    }
    #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    	background:#333;
    }
    
    #nav ul{
    	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    	list-style:none;
    	position:absolute;
    	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    }
    
    #nav ul li{
    	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    	float:none;
    }
    #nav ul a{
    	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }
    #nav li:hover ul{ /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    }
    
    #nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    	background:#6b0c36;
    	text-decoration:underline;
    }
    
    #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    	background:#333;
    }
    Also, if there is any unneeded code or anything that would become problematic I would like it pointed out. Thanks. Sorry if that is too much explanation of what I needed help with, I am just really confused. Some examples of positioning images to create page layouts would be nice.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I think if I wrote the code, it would help you understand, though I will probably get in trouble for doing your homework since I think it's against the site rules.

    Anyways, for the future:

    1. Make separate threads for individual problems, if you have a header issue, post a new thread. Too much information in one thread is overwhelming.

    2. For something this big, if you could upload the script to a server (there are many free online ones)

    I'll work on your problems right now.

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I think the best answer I can give you is that with chrome, there is a great inspect element tool (better than ff :P - based on opinion though)
    right click on the page --> inspect element

    essentially you can pretty much copy the code of your "example"
    I don't think it would do any good just writing the code for you.
    There's no easy A, and beside the code is mostly outdated, so if a user wrote it for you, it wouldn't be believable

    as of now, I think you should try to work out the problems individually, posting threads on things that you don't understand (though if you have an example, then you can just copy the entire code...)

    Last edited by Sammy12; 11-02-2011 at 03:12 AM.

  • Users who have thanked Sammy12 for this post:

    ClassyRed (11-02-2011)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ClassyRed,
    <center> is deprecated and you should not use it. See center tag here.
    Try this instead:
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    Don't use <br><br> for spacing from the markup. That's what CSS is for. Instead of unnecessary markup, use a margin on the element you want spaced.

    You also make it difficult to target different elements when you don't name them. <div> is too generic, give it a specific id or a class so you can style it from your CSS.

    The <div> that is holding your heading "About the Site" could also hold something like this -
    Code:
    <div> 
    	<div id="header">
        <!--end header--></div>
    				
    					<center><h1><b>About the Site</b></h1></center>
    
     
                		            <p>This website is a portfolio about myself containing information about work experience, things about me, and a place to displace my works. </p>
    
                	        <br />
                                    <br />
    You could put your header image on #header as a background image. #header will need sized and positioned from your CSS as well.

    See background images here.
    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

  • Users who have thanked Excavator for this post:

    ClassyRed (11-02-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks everyone, and I understand that you can't do the work for me, aha. I can sort of understand the header background image part, but the Div issues have been confusing me. I centered the "About the Site" because I found that on each page of the site the very first text was off centered way to the right. I thought this issue was because of the drop down menu div somehow so I created its own div for the body but it didn't seem to change much... Making the "About the Site" a header and centering it was a temporary solution so it didn't annoy me.

    I will toy with it a bit more later since I have more homework. If I come across a problem I will make a post about it. Thanks!


  •  

    Tags for this Thread

    Posting Permissions

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