Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

HTML/CSS problems

  • 24-09-2009 10:13pm
    #1
    Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭


    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?


Comments

  • Closed Accounts Posts: 27,857 ✭✭✭✭Dave!


    Yeah post the css and html

    Use [cod.e] tags


  • Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭cmyk


    Many Thanks blog_topleft.jpg
    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;}
    


  • Closed Accounts Posts: 27,857 ✭✭✭✭Dave!


    Can you post up the images too?


  • Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭cmyk


    Sorry yep of course.


  • Closed Accounts Posts: 27,857 ✭✭✭✭Dave!


    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.


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭cmyk


    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?


  • Closed Accounts Posts: 27,857 ✭✭✭✭Dave!


    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 :p 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!


  • Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭cmyk


    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?


  • Closed Accounts Posts: 27,857 ✭✭✭✭Dave!


    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 :(


  • Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭cmyk


    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?


  • Advertisement
  • Closed Accounts Posts: 27,857 ✭✭✭✭Dave!


    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!!!!!


  • Registered Users, Registered Users 2 Posts: 1,366 ✭✭✭cmyk


    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


Advertisement