Jump to content

DannyGolden

Members
  • Content Count

    12
  • Joined

  • Last visited

Community Reputation

1 Neutral

About DannyGolden

  • Rank
    Newbie
  • Birthday 12/01/1994

Previous Fields

  • Languages
    (X)HTML, CSS, JavaScript

Contact Methods

  • Skype
    Phailyur
  1. Hi, I'm simply trying to induce a gap between my navigation area and my content area, like this website:http://www.thearteryfoundation.com/ But whenever I try adding padding or margin, my two div's seem to be attached at the hip. HTML: [/s][s]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/s][s]<html xmlns="http://www.w3.org/1999/xhtml">[/s][s]<head>[/s][s]<title>Metalcore</title>[/s][s]<link rel="stylesheet" type="text/css" href="main.css" /> <!-- Main Paige Styling -->[/s][s]</head>[/s][s]<body>[/s][s]<div id="nav">[/s][s] <ul>[/s][s] <li><a href="#">Home</a></li>[/s][s] <li><a href="#">Bands</a></li>[/s][s] <li><a href="#">About</a></li>[/s][s] </ul>[/s][s]</div><!-- End #Nav -->[/s][s]<div id="wrapper">[/s][s]<div id="content">[/s][s] <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>[/s][s]</div><!-- End #Content -->[/s][s]</div><!-- End #Wrapper -->[/s][s]</body>[/s][s]</html>[/s][s] CSS: [/s][s]/* Begin Default Element Styling */[/s][s]html {[/s][s]background: url(images/background.png) no-repeat center center fixed;[/s][s]-webkit-background-size: cover;[/s][s]-moz-background-size: cover;[/s][s]-o-background-size: cover;[/s][s]background-size: cover;[/s][s]}[/s][s]/* End Default Element Styling */[/s] [s]/* Begin ID Styling */[/s][s]#nav {[/s][s]background-color: #000;[/s][s]float: left;[/s][s]padding: 0px;[/s][s]width: 100%;[/s][s]}[/s][s]#nav ul {[/s][s]list-style: none;[/s][s]margin: 0px auto;[/s][s]width: 960px;[/s][s]}[/s][s]#nav li {[/s][s]float: left;[/s][s]}[/s][s]#nav li a {[/s][s]color: #069;[/s][s]display: block;[/s][s]font-weight: bold;[/s][s]padding: 8px 15px;[/s][s]text-decoration: none;[/s][s]}[/s][s]#wrapper {[/s][s]background-color: rgba(245,245,245, 0.5);[/s][s]margin: 20px auto;[/s][s]padding: 10px;[/s][s]width: 960px;[/s][s]}[/s][s]/* End ID Styling */[/s][s]
  2. Unless there is something special you need to do in order to style the HTML element, here is what I did... html {background: -webkit-linear-gradient(top, #5c5b51 0%,#262622 100%); /* Chrome10+,Safari5.1+ */}
  3. Hey all, I'm getting this weird issue in Chrome when I try to apply any sort of gradient. The gradient will only extend the length of the content and not finish the entire page out. I believe my syntax is correct and all but if I just have my logic wrong please tell me. (: Here is what I mean:http://i41.tinypic.com/httf01.jpg Here is my CSS: body {background: #3B3734;background: -webkit-linear-gradient(top, #5c5b51 0%,#262622 100%); /* Chrome10+,Safari5.1+ */color: #FFFAF6;font-family: Helvetica, Arial, Sans-Serif;}
  4. I solved my own question. (: I'm not sure what the syntax would be for this so I'm asking here. I'm setting up my footer and I'm putting a dividing line in between each link( | ) but I don't want one to appear on the last link as it throws off the design. I tried the last-child pseduo selector but it doesn't seem to work, or I have the syntax wrong. This is probably a silly mistake on my part but I'm sure you guys can figure it out instantly. Thanks in advance! HTML: [/s][/s][s][s]<div id="footer">[/s][/s][s][s] <div class="footerlist">[/s][/s][s][s] <ul>[/s][/s][s][s] <li><a href="index.htm">Home</a></li>[/s][/s][s][s] <li><a href="index.htm#contact">Contact Info</a></li>[/s][/s][s][s] <li><a href="college.htm">College Info</a></li>[/s][/s][s][s] <li><a href="links.htm">Links</a></li>[/s][/s][s][s] </ul>[/s][/s][s][s] </div>[/s][/s][s][s] </div>[/s][/s][s][s] CSS: [/s][s].footerlist li {[/s][s]list-style: none;[/s][s]display: inline;[/s][s]}[/s][s].footerlist li::after {[/s][s]content: ' |'; /* Denotes a space before the diving line */[/s][s]}[/s][s].footerlist li::after:last-child {[/s][s]content:'';[/s][s]}[/s][s]
  5. Blah! Oh wow, thank you! It fixed it. I don't know why I specified I height. I don't remember putting it there. Jess and I hated the ending, but I heard there is a part 2 so maybe it will change my opinion. (:
  6. I did and it does wrap around #content_left and #content_right but it hides the content past the specified height of #content.Here is a picture:http://i44.tinypic.com/maw4js.jpg I'm just going to show you all of my code... HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="Stylesheet" type="text/css" href="style.css" /><!-- Must Watch Movies Author: Danny Golden Created: 11/01/11 Filename: index.htm Supporting Files: Images\[all]--> <title>Must Watch Movies</title></head><body> <div id="header"> </div> <div id="content"> <!-- All Content Goes here --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies dictum dapibus. In gravida turpis eget metus consectetur eu tincidunt ligula sollicitudin. Vivamus odio odio, faucibus ac bibendum sed, aliquam vel tortor. Nunc ut magna nulla, ut vestibulum erat. Ut varius sagittis leo sit amet vestibulum. Curabitur a ante nisl, eget interdum augue. Nullam id mauris urna. Suspendisse rutrum nibh sed orci malesuada molestie. Etiam porttitor, justo non ullamcorper rhoncus, lacus velit luctus purus, at pellentesque mauris dui cursus nisl.</p> <p>Duis magna sem, fringilla in fermentum eu, lobortis non erat. Aliquam ut tortor magna. Integer ut metus id metus fermentum pellentesque at et ligula. Pellentesque sem sapien, congue ac lacinia a, tempor in justo. Ut sollicitudin hendrerit suscipit. Fusce lacinia nunc nec libero dictum ullamcorper id quis sem. Nam porta, leo sed ullamcorper pharetra, mi purus congue purus, bibendum sollicitudin felis dui nec odio. Cras tempus dui quis metus mattis commodo. Morbi fermentum sem pharetra mi adipiscing vehicula.</p> <div id="content_left"> <h2>Daniel's List</h2> <div class="movie_list"> <table> <thead> <th>Movie</th> <th>Plus or Minus</th> </thead> <tbody> <tr> <td><img src="images\thedescent.jpg" alt="The Descent" /></td> <td>Minus</td> </tr> <tr> <td><img src="images\frozen.jpg" alt="Frozen" /></td> <td>Minus</td> </tr> </tbody> </table> </div> <!--End DivID Content_Left --> </div> <div id="content_right"> <h2>Jessica's List</h2> <div class="movie_list"> Friends With Benefits<br /> House of Wax<br /> The Devil Inside<br /> </div> </div> <!--End DivID Content --> </div> <div id="footer"> </div></body></html> CSS: /* Must Watch Movies Author: Danny Golden Created: 11/01/11 Filename: style.css */body {font-family: Helvetica, Arial, Sans-Serif;color: #1c1c1c;background-color: #1ccdc7;}h2 {border-right: 30px solid transparent;border-bottom: 30px solid #4c4c4c;color: #cd5a1c;display: inline-block;font-weight: bold;height: 0px;line-height: 50px;margin: 0px;padding: 10px;text-shadow: 0 1px 0 #1c1c1c;}#content {margin-left: 10%;margin-right: 10%;min-height: 800px;width: 75%;background-color: #f5f5f5;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;padding: 20px;-moz-box-shadow: 10px 1px 20px #888;-webkit-box-shadow: 10px 1px 20px #888;box-shadow: 10px 1px 20px #888;overflow: hidden;}#content_left {height: 10px;width: 40%;float: left;}#content_right {width: 40%;float: right;}.movie_list {border: 1px solid #4c4c4c;border-top: 3px solid #4c4c4c;margin: 0px;padding: 20px;}.movie_list img {height: 300px;width: 200px;}.movie_list th {border-bottom: 3px inset #4c4c4c;font-size: 20px;}.movie_list td {padding: 5px;}
  7. I do have the DOCTYPE at the top I just wanted to show you my body for times sake haha.
  8. This isn't really what I want but thank you. I just would like #content to stretch with #content_left and #content_right, but apparently I'm not understanding div's correctly. Is there another way to separate sections of a webpage without taking them out of the direct flow?
  9. Hi, everyone I just got accepted into the forums and hopefully I'll be as active as possible. I am just starting out with CSS and HTML. I'm still only 17 so try to bear with me here. I am just messing around, making something for my friend and I. We are big movie fans and such so I decided to get a list going and wanted to practice HTML at the same time. Now, my question is why does this happen? (the image is far too large to leave it in the post sorry )http://i42.tinypic.com/25ionrl.jpg The two lists are each in a div with an ID of content_left and content_right respectively. The area with the placeholder text is just the content div. I placed the two lists inside of the content div but it obviously doesn't want to do what I think should happen. Any help is appreciated :/ Here is my code: <body> <div id="header"> </div> <div id="content"> <!-- All Content Goes here --> <p>Placeholder text/p> <p>Placeholder text/p> <div id="content_left"> <h2>Daniel's List</h2> <div class="movie_list"> <table> <thead> <th>Movie</th> <th>Plus or Minus</th> </thead> <tbody> <tr> <td><img src="images\TheDescent.jpg" alt="The Descent" </td> <td>Minus</td> </tr> <tr> <td><img src="images\Frozen.jpg" alt="Frozen"</td> <td>Minus</td> </tr> </tbody> </table> </div> <!--End DivID Content_Left --> </div> <div id="content_right"> <h2>Jessica's List</h2> <div class="movie_list"> Friends With Benefits<br /> House of Wax<br /> The Devil Inside<br /> </div> </div> <!--End DivID Content --> </div> <div id="footer"> </div></body></html> CSS: #content {margin-left: 10%;margin-right: 10%;width: 75%;background-color: #f5f5f5;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;padding: 20px;-moz-box-shadow: 10px 1px 20px #888;-webkit-box-shadow: 10px 1px 20px #888;box-shadow: 10px 1px 20px #888;}#content_left {height: 10px;width: 40%;float: left;}#content_right {width: 40%;float: right;}.movie_list {border: 1px solid #4c4c4c;border-top: 3px solid #4c4c4c;margin: 0px;padding: 20px;}
×
×
  • Create New...