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

    background & padding/margin problems - simple css/html

    hello! i'm new on the forums, and i'm currently taking my first class that focuses on HTML/CSS.

    i'm having a few troubles with an assignment for class. my webpage is supposed to look like this:



    (it's a small example, but the background is the same as below, and the centering of the box.)

    and currently, looks like this:



    i'm having trouble with the background, which refuses to show up when i put it into the CSS. however, i use <style> body: background-image:url("images/bats.gif"); </style> in the HTML document, and it shows up. i have tried using both shorthand and the code above, and in several different places on the document. i know it's not the image path, because it works in the HTML.

    i'm also having trouble figuring out why there is a strange gap just below the header, which i can't seem to touch with adjusting margins and padding.


    here is my coding so far:

    CSS

    Code:
    article, aside, figure, footer, header, nav, section {
        display: block;
    }
    
    /*elements */
    body {
    	background-image:url("images/bats.gif") repeat;
    	font: .875em Arial, Helvetica, sans-serif; 
    	width: 800px; 
    	border: 5px solid black;
    	box-shadow: 0px 5px 20px 3px black;
    	margin: auto;
    	}
    
    h2 { font: bold 143.8%;}
    h3 { font: bold 150%; }
    
    img { 
    		float: left;
    		margin-right: 2.5%;
    		margin-left: 2%;
    		margin-top: 1%;
    		margin-bottom: 1%;
    }
    
    a, a:link { 
    		font-weight: bold;
    		color: orange;
    }
    
    a:hover, a:focus { color:green; }
    
    ul { line-height: 1.15em;
    }
    
    section {
    		padding-left: 2%;
    		padding-top: 0%;
    		padding-right: 2%;
    		padding-bottom: 0%;
    		margin: 0%;
    		background-color:white;}
    
    section h2:first-letter { font-size:200%}
    
    section h3 { margin-bottom: .0005%;}
    
    /* header */ 
    
    header h1 { 
    		font: Arial, Helvetica, sans-serif;
    		font-weight: bold;
    		font-size:300%;
    		margin-bottom: .0%;
    		margin-top: 0%;
    		padding: 0%;
    }
    
    header h2 { margin-top: 0%;}
    
    hgroup { margin-bottom: 1em;
    		padding: .25%;
    		border-bottom: 3px solid black;
    		border-right: 0px;
    		border-left: 0px;
    		border-top: 0px;
    		background-image: linear-gradient(45deg, white 0%, orange 75%, black 100%);
    		background-image: -moz-linear-gradient(45deg, white 0%, orange 75%, black 100%);
    		background-image: -webkit-linear-gradient(45deg, white 0%, orange 75%, black 100%);
    		background-image: -o-linear-gradient(45deg, white 0%, orange 75%, black 100%);	
    		}
    		
    /* footer */ 
    
    footer p {
    	font-size: .938em; 
    	text-align: center;
    	border-top: 3px solid black;
    	padding: 2em;
    	margin-bottom: 0px;
    	border-bottom: 0px;
    	border-right: 0px;
    	border-left: 0px;
    	background-image: linear-gradient(45deg, black 0%, orange 75%, white 100%);
    	background-image: -moz-linear-gradient(45deg, black 0%, orange 75%, white 100%;)
    	background-image: -webkit-linear-gradient(45deg, black 0%, orange 75%, white 100%);
    	background-image: -o-linear-gradient(45deg, black 0%, orange 75%, white 100%);
    
    }

    HTML

    Code:
    <!DOCTYPE html>
    
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Halloween Store</title>
    		<link rel="stylesheet" href="styles/main.css">
    	</head>
    <style> body{ background-image:url("images/bats.gif");}</style>
    <body>
    	<header>
    	<img src="images/pumpkin.gif">
    	<hgroup>
    		<h1>The Halloween Store</h1>
    		<h2>For the little Goblin in all of us!</h2>
    	</hgroup>
    </header><section>
    	<h2>Welcome to my site. Please come in and stay awhile.</h1>
    		<p> I started this web site because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.</p>
    		<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.</p>
    	<h3>Product Categories</h3>
    		<p><ul><li><a href="/products/props.html">Props</a>
    		<li><a href="/products/costumes.html">Costumes</a>
    		<li><a href="/products/special_effects.html">Special Effects</a>
    		<li><a href="/products/masks.html">Masks</a></ul>
    	<h3>My guarantee</h3>
    	<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <strong>No questions asked!</strong></p>
    </section>
    
    <footer>
    	<p>&copy; 2012 Ben Murach</p>			
    </footer>
    </body>
    </html>
    i would really appreciate anyone's help, because i'd like to get this right so i don't start coding webpages on the wrong foot. please feel free to correct or give feedback on any other part of the coding.

  • #2
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    The image path of your background image isn't correct in your style sheet and try to comment out styles, you'll find most of the time the culprit, in this case it is in the section style.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    what would be correct, and how could i fix the section?

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    A part of learning is trying things out for yourself after you get hints then you should remember them if you're faced with a similar situation.
    Correct path in style sheet could be styles/images/bats.gif or ../images/bats.gif.
    Your style sheet is in another folder that's why the path wasn't correct.
    For your section style it is margin-top:0

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    but that's the problem, the solutions i would normally retrieve from what i've learned don't work. i've tried margin-top:0 - it's already in the css i've listed above. i've tried ../images/bats.gif, as well as the full path name, and several other variations, as well as moving the image into a folder in the styles folder and putting a path to that. which is why i think i'm either overlooking something really obvious that a second pair of eyes might be able to see, or have done something that i don't yet have the skills to fix.

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    The image path for the background-image I have and this works
    Code:
    body {
    	background-image:url(../images/bats.gif);
    	font: .875em Arial, Helvetica, sans-serif;
    	width: 800px;
    	border: 5px solid black;
    	box-shadow: 0px 5px 20px 3px black;
    	margin: auto;
    if your directory structure is e.g. Public_html - styles - images -xxx.html, yyy.html.
    You should remove the margin-bottom:1em from the hgroup and clean up some of your html e.g a p-tag before your ul group.
    Hope that this helps you.

  • Users who have thanked Dznr for this post:

    vegabagel (10-02-2013)

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you! that fixed my background problem perfectly.

    i actually discovered that awkward gap was my section h2 margins. so everything is resolved!

  • #8
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    If you solved your problem, you should mark this post as resolved.

    Here's how: How to set a thread as resolved?

    Thanks!
    Last edited by Nerevarine; 10-02-2013 at 01:15 PM. Reason: Thanking :P
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #9
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i cannot seem to find an edit button...

  • #10
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Ahh. I believe you do not have enough posts to edit.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    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
    •