Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Most likely easy HTML/CSS help =P


  • Please log in to reply
1 reply to this topic

#1 dark messenger

dark messenger

  • Members
  • 1,741 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Auckland NZ
  • Local time:08:27 AM

Posted 12 March 2013 - 07:22 PM

So I'm new to webbuilding, and I need some help with my scripts.

With reference to my screen shot:

Red Box: How can I properly center these text+images?

Green Box: I want this menu to be above the footer image, and centered accross the page. (I tried copying the css from the header menu, but its done nothing)

Orange Box: Why isn't the footer at the bottom bottom (if you look closely, theres a tiny bit of white)

Gold Box: under the posted in bar, there is a tiny bit of grey from the (I assume) text box of the half price pizza, how can I remove that?



This is going to be a word press page, however I'm following a tutorial of from PSD to HTML, and then the follow up HTML to wordpress. If necessary I can provide the links to the tutorials. NOTE: I've edited and changed and removed certain parts of the scripts in the tutorial to get what I want for my page.

Screenshot:
http://smg.beta.photobucket.com/user/darkmessenger/media/homepage_zps8c34d881.jpg.html

Codes

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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>Avenue 28</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="container">
		
		<div id="header">
			<h1><a href="#"><img src="images/Header.jpg" alt="Return to the homepage" /></a></h1>
			
			<ul id="categories">
			<li><a href="#"><img src="images/gallery.png" width="125px" height="125px"><br><center>Gallery</center></a></li>
			<li><a href="#"><img src="images/menu.png" width="125px" height="125px"><br><center>Menu</center></a></li>
			<li><a href="#"><img src="images/news.png" width="125px" height="125px"><br><center>News and Promotions</center></a></li>
			<li><a href="#"><img src="images/contact.png" width="125px" height="125px"><br><center>Contact Us</center></a></li>
			</ul>
		</div>

		
		

		<div id="content">
			<div id="main">
	
				<div class="post">
					<div class="post-content">
						<h2>Welcome to Avenue 28!</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in,
						vehicula sit amet elit. Sed gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida.</p>
						
					</div>
				</div>
				
				
				<div class="post">
					<div class="post-content">
						<h2>Half Price Pizza!</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit erat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida.
						Lorem ipsum dolor sg elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortisconsectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida. amet elit. Sed gravida.orper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit erat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper mattis placerat. Curabitur odio ipsum, lobortis vel dictum in, vehicula sit amet elit. Sed gravida. amet elit. Sed gravida.
						<a href="#">pretend link to nowhere =] </a></p>
						
						<ul class="post-meta">
							<li>Posted in <a href="#">News and Promotions</a></li>
							<li class="see-more"><a href="#">See more</a></li>
						</ul>
				
						
					</div>
				</div>
				
				
			</div>
	
			

			<div id="footer">
			
				<ul id="pages">
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Menu</a></li>
				<li><a href="#">News and Promotions</a></li>
				<li><a href="#">Contact Us</a></li>
				</ul>

			</div>

		</div>
</div>
	

</body>
</html>
CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #ebebeb url(images/bg.png) center top repeat-y;
}


#container {
	width: 600px; margin: 0 auto;
}

#header {
	overflow: hidden;
	padding: 0 0 10px 0;
}

	#header h1 {
		float: left;
	}


	#header ul#categories { /*menu settings */
		float: left; list-style: none; margin: 25px 0 0 0;
	}
		#header ul#categories li {
		float: left; margin: 0 0 0 15px;
		}
		

			#header ul#categories li a {
				display: block;
				font-size: 12px; font-weight: bold; color: #b20938;
				text-decoration: none;
			}
				#header ul#categories li a:hover {
					color: #800427;
				}
				

#content {
	overflow: hidden;
}

	#content a { /* link settings in main */
		font-weight: normal; color: #b20938;
		text-decoration: none;
	}
		#content a:hover {
			color: #800427;
		}

			#content #main { /* post content spacing etc */
					width: 600px; float: left; padding: 0 0 0 0 ;
				}

				#content #main h2 { /*space between post heading and content */
							margin: 0 0 16px 10px;
							font-size: 14px; font-weight: bold; text-transform: uppercase; color: #b20938;
						}

					#content #main p { /*post text settings */
								margin:-15px 0px 25px 10px; color: #000000; font-size: 12px;
							}

						#content #main .post { /*post box */
							background: #ebebeb url(images/contentheadbg.png) right top repeat-x;
							padding: 0 10px 0 0; margin: 0 0 20px 0;
							overflow: hidden;
						}




				
#content #main .post .post-content {
	width: 600px;
}
	#content #main .post .post-content ul.post-meta {
		width: 600px; height: 21px; list-style: none; padding: 0 0 0 10px; margin: -20px 0 0 0;
		background: #ebebeb url(images/contentheadbg.png);
	}
		#content #main .post .post-content ul.post-meta li {
			float: left; margin: 0 40px 0 0;
			font-size: 12px; font-weight: bold; color: #000000;
		}
			#content #main .post .post-content ul.post-meta li.see-more {
				float: right; margin: 0 20px 0 0;
			}

			
#footer {
	background: url(images/footer.jpg) center bottom no-repeat; overflow: hidden;
	width: 600px; height: 93px;

}
	#footer ul#pages {
		overflow: hidden; list-style: none; float: left; margin: 25px 0 0 0;
	}

	
			#footer ul#pages { 
		float: left; list-style: none; margin: 0 0 0 0;
	}
		#footer ul#pages li {
		float: left; margin: 0 0 0 15px;
		}
		
			#footer ul#pages li a {
				display: block;
				font-size: 12px; font-weight: bold; color: #b20938;
				text-decoration: none;
			}
				#footer ul#pages li a:hover {
					color: #800427;
				}
I would love some help and I would love you forever :D

Cheers,

DM

BC AdBot (Login to Remove)

 


#2 andrehammink

andrehammink

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:10:27 PM

Posted 23 May 2013 - 04:08 AM

Mhh the white space can because of three div's: Your footer div, is inside your content div and in your wrapper div. Didn't see any strange paddings or margin's, but i could have overlooked. Maybe you should try to put the padding of the content and the wrapper div on "0"






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users