HTML/CSS problems

cmyk · 24-09-2009 11:13pm #1

Been sitting doing a html/css tutorial and trying to teach myself by building a very very simple dummy site in photoshop and coding it.

However I'm stuck at the first hurdle on the css and been sitting here tryin to figure it out for the last few hours. I wonder would anyone be willing to take a gander at the code/layout for me?

Dave! · 25-09-2009 1:13am

Yeah post the css and html

Use [cod.e] tags

cmyk · 25-09-2009 9:20am

Many Thanks

This is what I'm trying to acheive, but can't seem to nest the topbar and float the text in the centre of it?

<!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" xml:lang="en" lang="en">

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>First site trial</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>		

<body>
	
	<div id="main">
		
		<div id="topbar">
			
			<div class="container">
				<p id="login">Welcome, Guest <a href="#">Login</a> <a href "#">Sign Up</a></p>
				<p id="subscribe">Stay Updated <a href="#">Subscribe via RSS</a> <a href="#">Email updates</a><p>	
			</div><!-- container -->
				
		</div><!-- end top bar -->
		
		<div id="header">
			<div id="branding" class="container">
				<h1>Fitnow</h1>
				<p id="desc">A fitness blog with a twist</p>
			</div><!-- end branding -->			
				
				<div id="navigation">
					<ul id="menu" class="container">
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Archives</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>	
				</div><!-- end navigation -->		
		</div><!-- end header -->	
		
		<div id="content" class="container">
			<div id="posts">
				<h2>The Paleo Diet</h2>
				<small>on September 24 in <a href="#">General</a>by<a href="#">Colin</a></small>
				<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
                professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
                consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
                discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
                Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
                on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
                dolor sit amet..", comes from a line in section 1.10.32.</p> <blockquote><p>(The Extremes of Good and
                Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
                the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                section 1.10.32.</p></blockquote>
				<p>For more information on the Paleo Diet <a href="#">Read more</a></p>
				
				<h2>Nutrition 101</h2>
				<small>on September 18 in <a href="#">General</a>by<a href="#">Colin</a></small>
				<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
                professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
                consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
                discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
                Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
                on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
                dolor sit amet..", comes from a line in section 1.10.32.</p> <p>(The Extremes of Good and Evil) by
                Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.</p>
				<ul>	
					<li>The first line of Lorem Ipsum </li>
					<li>The second line of Lorem Ipsum </li>
					<li>The third line of Lorem Ipsum </li>
				</ul>	
				<p>For more information on Nutrition for adults <a href="#">Read more</a></p>
			</div><!-- end posts -->
			
			<div id="sidebar">
				<h3>Categories</h3>
				<ul>
					<li><a href="#">Fitness</a></li>
					<li><a href="#">Nutrition for Adults</a></li>
					<li><a href="#">Nutrition for Children</a></li>
					<li><a href="#">Strength Training</a></li>
					<li><a href="#">Calesthenics</a></li>
				</ul>
				
				<h3>Recent Posts</h3>
				<ul>
					<li><a href="#">Paleo Diet</a></li>
					<li><a href="#">Crossfit Ireland</a></li>
					<li><a href="#">Strength Conditioning</a></li>
					<li><a href="#">What Cheese?</a></li>
					<li><a href="#">What about Dairy?</a></li>
				</ul>
				
				<h3>Archives</h3>
				<ul>
					<li><a href="#">August 2009</a></li>
					<li><a href="#">July 2009</a></li>
					<li><a href="#">June 2009</a></li>
					<li><a href="#">May 2009</a></li>
					<li><a href="#">April 2009</a></li>
				</ul>
					
			</div><!-- end sidebar -->			
		</div><!-- end content -->	
			
			<div id="footer_content" class="container">
				<div id="copyright">
					<p>Copyright 2009.<br /> All rights reserved.</p>
				</div><!-- end copyright -->
				
				<div id="links">
					<h4>Links</h4>
					<ul>
						<li<a href="#">Boards.ie fitness forums</a></li>
						<li<a href="#">Eugenisation</a></li>
						<li<a href="#">t-nation</a></li>
					</ul>	
				</div><!-- end links -->
				
				<div id="feeds">
					<h4>Follow our updates</h4>
						<ul>
							<li<a href="#">Subscribe to our RSS feed</a></li>
							<li<a href="#">What is RSS</a></li>
							<li<a href="#">Email updates</a></li>
						</ul>	
				</div><!-- end feeds -->			
			</div><!-- end footer -->		
		
	</div><!-- end main container -->	
	
	
</body>
	
</html>

/*

Base settings and reset
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote, {
	margin:0px; padding:0px; border:0px;
}
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body { font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; }

.container { width:900px; margin: 0 auto; }

p#login { 
	float: left; 
	width: 20%;
	}

p#subscribe { 
	float: right;
	width: 50%; 
	text-align: right;
	}

#topbar { 
	overflow: hidden; 
	height: 100%;
	background: url('images/topbar_bg.jpg') top repeat-x; height: 31px;  
	border-bottom: 1px solid #f6973b;
	margin: 0;
	}
	
#header {
	background-image: url('./images/header_bg.jpg') no repeat;
	background-color: #656565;
	margin: none;
}	

h1 {
	font-family: Helvetica; Arial; sans-serif;
	color: #fff;
	font-weight: normal;
	font-size: 4em;
	margin: none;
	text-style: bold;
	
}

#topbar p { font-size: 1.2em; color: #fffdfd;}
#topbar a { font-size: 1.0em; color: #f6973b;}

Dave! · 25-09-2009 11:19am

Can you post up the images too?

cmyk · 25-09-2009 11:48am

Sorry yep of course.

Dave! · 25-09-2009 12:22pm

Try this CSS:

/*

Base settings and reset
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote, {
	margin:0px; padding:0px; border:0px;
}
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body { font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; }

.container { width:900px; margin: 0 auto; }

p#login { 
	float: left; 
	width: 20%;
	margin: 0; padding: 0;
	}

p#subscribe { 
	float: right;
	width: 50%; 
	text-align: right;
	margin: 0; padding: 0;

	}

#topbar { 
	overflow: hidden; 
	height: 100%;
	background: url('images/topbar_bg.jpg') top repeat-x; 
	height: 31px;  
	border-bottom: 1px solid #f6973b;
	margin: 0px;
	padding: 0px;
	}
	
#header {
	background: #656565 url('./images/header_bg.jpg') top repeat-x;
	margin: 0;
}


h1 {
	font-family: Helvetica; Arial; sans-serif;
	color: #fff;
	font-weight: normal;
	font-size: 4em;
	margin: 0;
	text-style: bold;
	
}

#topbar p { font-size: 1.2em; color: #fffdfd;}
#topbar a { font-size: 1.0em; color: #f6973b;}

For #h1 I just changed margin from 'none' to '0'. Dunno if 'none' is a valid option. That allowed the topbar to rest on the header.

And for p#login and p#subscribe I added margin: 0; padding: 0;, which stopped the text in the topbar from dropping down.

cmyk · 25-09-2009 12:54pm

Dave...that's great, thanks for taking the time to do that, appreciate it. Have manually changed mine and that's bang on....do you do lessons? haha

Can you answer me one last question? Neither the topbar or header (when I preview it in browser) sit flush against the sides and top of the browser, as if it has about 15px of margin allround? Any ideas on this?

Dave! · 25-09-2009 1:07pm

Haha you don't want lessons off me, I'm only learning myself ! I'm about to spend all day agonising over a website of my own

Sometimes it just takes fresh eyes to spot the problem.

As for your other problem, I just added margin: 0; to the body selector, like so:

body {
line-height: 1;
margin: 0;
}

Dunno why it wasn't covered in this selector group:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

...maybe someone else knows.

But that seems to work anyways.

Let me know if you've more problems, it's helpful for me to try and diagnose these issues!

cmyk · 25-09-2009 1:56pm

Brilliant dave...nice one, yep that's a reset that I got from eric meyer's site???

Very strange and thanks again. How are you getting on with learning, or what part of the curve are you on?

Dave! · 25-09-2009 2:08pm

Well I'm getting pretty comfortable with HTML and CSS for general layout stuff, and can easily build static pages, but at the moment I'm trying to learn how to use content management systems like Wordpress, trying to familiarize myself with PHP and eventually MySQL. I'm also gonna have to improve my graphic design skills!

At the moment I'm working on a football team website, and it will need to be easily editable by the manager, so I'm trying to figure out the best way to go about doing that

cmyk · 25-09-2009 2:15pm

Interesting, ye I'm quite daunted by php and javascript etc to be honest. I'm a graphic designer by trade so if I can help out and return the favour let me know.

How did you go about learning the html and css, just tutorials?

Dave! · 25-09-2009 2:31pm

Cheers

Yeah just tutorials really

I presume you've looked at the w3schools tutorial: http://www.w3schools.com/css/

You have a good grasp of it if you were able to do as much as you managed on the code you posted previously. You've got the basics down, so just keep practicing!

If you are able to get the Lynda.com CSS tutorials for cheap (or free...) then they're worth a look.

I would also suggest you get the code from other websites and dissect it.

Dunno if you've seen it before, but check out www.csszengarden.com. It's a project someone started whereby they use a basic html file with various classes and id's in the tags, and then don't alter the html at all. They then just use CSS for all the layout and design, and encourage others to do the same and submit them. There's some brilliant designs and they're all done with just CSS and images.

You can browse through all the best designs and view the CSS stylesheets and see how they did various things, as well as editing it and seeing if you can change it yourself. The html file never changes, and is really basic (take a look at the site without the stylesheet to see).

I found that quite helpful. I created my own CSS file and tried a few different layouts. The sites didn't turn out amazing (I'm not as creative as some of the others on that site!), but I learned alot in the process.

I'd say give that a shot once you're finished with the tutorials etc.

PHP and Javascript might be a bit daunting for someone without a programming background, but I studied Comp Sci so it's not too bad for me... It's a case of trying to see how they link in with the HTML, etc., eg. PHP handling information submitted through HTML forms -- and passing that information to a database! AGGGHH!!!!!

cmyk · 25-09-2009 2:47pm

I was lost at "daunting".

Yep I've looked at the cssgarden alright, some nice ones there alright, not a bad idea to have a play with that.

Yeh I hand typed the whole thing, but I will admit I was following a tutorial from nettuts, so I'm not quite that good yet. Have a good understanding of it, but just have to start actually writing the stuff now from scratch.

Not sure if you know of this site, some pretty good tutorials that have helped me and some that cover php too. www.nettuts.com

HTML/CSS problems

Comments