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

    Smile Help with Basic CSS

    Hey everyone, I am a beginner a HTML and CSS and I am coding a website for my nonprofit, Dv8r http://dv8r.org

    On the home page you will see that the navigation is oversized and the lines aren't double spaced, even though I have written the line height and font size in the correct places. It shows up fine in Dreamweaver, it's only when I upload it that everything dies. Also on the About Us page, the pie chart is rufusing to go to the center of the page and it's border won't show, even though I set the margin at 100px. And, finally, the last picture box on 'About Us' (box 7) wont format.

    Thanks so much for your help!

    HTML for Home Page
    Code:
    <<!DOCTYPE HTML>
    
    <html>
    <head>
                
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
                
    <link href="/css/index.css" rel="stylesheet" type="text/css" media="screen">
    <link href="/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="/css/slider.css" rel="stylesheet" type="text/css" media="screen">
       
        <meta http-equiv="content-type" content="text/html"; charset=utf-8"/>
        <meta http-equiv="content-type" content="cache"/>
        <meta name="robots" content="INDEX, FOLLOW" />
        <meta name="keywords" content=" Dv8r, Nonprofit, Art, Artists, Teenagers, Design, Sponser, Schools," />
        <meta name="discription" content="Dv8r is a non profit organization founded by a group of teenagers in San Diego. Sponsers request designs and art, and teenagers learn the value of teamwork and cultural tolerance by collaberating to fill the commision. The money goes to computers for schools all over the world."
        <title></title>
    
    	<STYLE TYPE="text/css">
    <!--
    P {text-indent: 15pt;}
    -->
    </STYLE>
        
    </head>
    
    
    <body>
    
    <div id= "outer">
    
    <div id= "wrapper">
    
    <div id= "logo">
    	 <img src="/images/icons/logosample.png" />
         
    </div>
    
    <div id= "socialmediaicons">
    <ul>
        	<li> <a href="mailto:info.dv8r@gmail.com"><img src="/images/icons/email.png" /></a>
            </li>
            <li> <a href="http://www.facebook.com/pages/DV8R/108389309246079"><img src="images/icons/Facebook.png" /></a>
            </li>
     	</ul>
     </div>
    
    <div id= "topnav">
    	
        <ul>
        	<li> <a href="index.html">Home </a></li>
            <li> <a href="teacher.html">Teachers </a></li>
            <li> <a href="students.html"> Students </a></li>
            <li> <a href="sponsors.html">Sponsors </a></li>
            <li> <a href="aboutus.html"> About Us </a></li>
            <li> <a href="contactus.html"> Contact Us</a></li>
            </a>
        </ul>
            
    
    </div>
    
    <ul class="slideshow">
        <li class="show"><a href="#"><img src="/images/banner/peru.jpeg" width="900" height="300" title="Peru" alt="Founder Isabella Mahadev went to peru to talk to kids about art, and see what kind of artistic support they recieve."/></a></li>
        <li><a href="#"><img src="/images/banner/us.jpeg" width="900" height="300" title="Our Team" alt="The core team of dv8r. "/></a></li>
        <li><a href="#"><img src="/images/banner/school.jpg" width="900" height="300" title="High Tech High Media Arts" alt="The school where we are based, High Tech High Media Arts in San Diego, California. All the founders go here."/></a></li>
    </ul>
    
    <div id= "content">
    	<h1>Welcome to Dv8r!</h1>
        <p>
    	Dv8r is a nonprofit organization centered around connecting teenagers in different countries through art and design. While teenagers collaborate on commissions from companies or individuals they can form international friendships and gain artistic support. The money ultimately goes to computers for schools in the participant's local areas. Dv8r is just taking off, and right now has a small but dedicated team at High Tech High Media Arts in San Diego, California. </p> 
        <img class="imageframe" img src="/images/banner/peru1.png" />
        <img class="imageframe" img src="/images/banner/dv8r.png" />
          <p> Dv8r started with an international vacation that founder Isabella Mahadev took to Myanmar. During the trip, she experienced the artistic talent of many of the children on the streets. They were able to draw detailed pictures with skill beyond their years. But there was almost no demand for their art, if they were lucky they could fetch a couple Kyats (Burmese currency) for their work.. This is only the surface of a global problem, a problem whose solution is the future of our society. As communication technologies connect all corners of the globe more than ever, it gives us the opportunity to connect the demand of individuals and companies with the supply from poor kids in countries like Myanmar. These companies and individuals can have their artistic requests filled, all while knowing they are contributing to a good cause, since the money will go to buying computers for the participant's local schools. The kids can also gain the support they need from other creative teens. As soon as she returned to San Diego she got the rest of Dv8r's core team involved, a group of amazingly awesome teens. including Content Manager Cameron Woodard, Site Managers Nathan Rozenberg, Kirk Silva, and Kenan Millet, Treasurer Andreas Rodriguez, Local Contact Manager Jackson Teare, and Secretary Ariana Giovanelli. </p>
    </div> 
    
    <div id= "rightside"> 
    	<h2>Getting involved</h2>
        
        <h3>Spreading the Word</h3>
        
        <p>Do you have friends interested in Graphic Design? Do you think that your school would like to participate? Telling your friends or teachers is a great way to help the cause. </p> 
       
        <h3>Joining the team</h3>
       
        <p>If you feel passionate about dv8r there is always a place for you on our team. Even if you aren't artistic, technical or literary skills are also extremly useful. </p> 
    	
        <h3>Sponsoring</h3> 
      
        <p>Do want something designed? You can request anything from a character to a logo, and our awesome team work together to have something unique for you. All proceeds go to schools in underdeveloped areas. </p>
    </div>
    
    <div id= "footer">
    	<p> Copyright Dv8r 2010 | All Rights Reserved </p>
    </div>
    
    </div>
    </div>
    
    
    </body>
    
    
    </html>
    CSS for home page

    Code:
    /* CSS Document */
    
    /* Reset */
    
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Global */
    
    html	{	}
    body	{ background-color:#82CFF4	}
    
    /* Headings */
    
    
    
    
    h1, h2, h3, h4, h4, h5, h6	{ font-family:Arial, Helvetica, sans-serif; font-weight:bold; }
    
    h1	{font-size: 34px; color:#2AC1CF; padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; padding-left:15px}
    
    h2	{ font-size: 24px; color:#000; padding-bottom:5px;}
    
    h3	{color:#00CC66; padding-bottom:5px;}
    
    
    /* Text ELements */
    
    
    p, h1, h2, h3, h4, h4, h5, h6	{ font-family:Arial, Helvetica, sans-serif;	}
    
    p	{margin: 15px;}
    p .right	{	}
    
    p .left		{	}
    
    a			{	}
    
    a:link		{ 	}
    
    a:visited	{	}
    
    a:active	{	}
    
    a:focus		{	}
    
    a:hover		{	}
    
    
    
    
    
    /* Images */
    
    .imageframe	{padding:10px; border: 1px #CCC solid; margin: 10px}
    
    /* Lists */
    
    /* Containers*/
    
    #outer	{ width: 940px; margin: 0 auto; background-color:#FFF;	}
    
    #wrapper	{ width: 900px; margin: 0 auto; background-color:#FFF;	}
    
    #logo	{ margin: 30px 0; float:left; }
    
    #socialmediaicons	{ float:right;	}
    
    #socialmediaicons ul li	{ display:inline;	}
    
    #socialmediaicons ul { margin-top:40px;	}
    
    #topnav	{ clear:both;	}
    
    #topnav ul { border-top: 2px #000 solid; border-bottom: 2px #000 solid;
    	margin:20px 0; padding:10px 0; }
    
    #topnav ul li	{ display:inline; font-size:20px}
    
    #topnav ul li a	{ padding:0 20px; }
    
    #topnav a:link		{ color:#000; font-weight:bold; text-decoration:none;}
    
    #topnav a:visited	{ color:#000;	}
    
    #topnav a:active	{ color:#000;	}
    
    #topnav a:focus		{ color:#000;	}
    
    #topnav a:hover		{ color:#09F	}
    
    #rightside	{ width:195px; float:left; border-right: 1px #ccc solid; }
    #rightside h2	{ padding-bottom:5px; padding-top:20px; border-bottom:1px #ccc solid; margin-bottom: 10px;}
    #rightside p	{line-height:20px;}
    
    #content	{ width: 700px; float:right;}
    #content p	{line-height:20px;}
    
    #footer	{ clear:both; margin-top: 20px; border-top: 1px #ccc solid; text-align:center;}
    
    #footer p {font-size:12px; color:#999999; padding:10px}
    HTML for About Us

    Code:
    <!DOCTYPE HTML>
    
    <html>
    <head>
                
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
                
    <link href="/css/aboutus.css" rel="stylesheet" type="text/css" media="screen">
    <link href="/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="/css/slider.css" rel="stylesheet" type="text/css" media="screen">
       
        <meta http-equiv="content-type" content="text/html"; charset=utf-8"/>
        <meta http-equiv="content-type" content="cache"/>
        <meta name="robots" content="INDEX, FOLLOW" />
        <meta name="keywords" content=" Dv8r, Nonprofit, Art, Artists, Teenagers, Design, Sponser, Schools," />
        <meta name="discription" content="Dv8r is a non profit organization founded by a group of teenagers in San Diego. Sponsers request designs and art, and teenagers learn the value of teamwork and cultural tolerance by collaberating to fill the commision. The money goes to computers for schools all over the world."
        <title></title>
    
    	<STYLE TYPE="text/css">
    <!--
    P {text-indent: 15pt;}
    -->
    </STYLE>
        
    </head>
    
    
    <body>
    
    <div id= "outer">
    
    <div id= "wrapper">
    
    <div id= "logo">
    	 <img src="/images/icons/logosample.png" />
         
    </div>
    
    <div id= "socialmediaicons">
    <ul>
        	<li> <a href="mailto:info.dv8r@gmail.com"><img src="/images/icons/email.png" /></a>
            </li>
            <li> <a href="http://www.facebook.com/pages/DV8R/108389309246079"><img src="images/icons/Facebook.png" /></a>
            </li>
     	</ul>
     </div>
    
    <div id= "topnav">
    	
        <ul>
        	<li> <a href="index.html">Home </a></li>
            <li> <a href="teachers.html">Teachers </a></li>
            <li> <a href="students.html"> Students </a></li>
            <li> <a href="index.html">Sponsors </a></li>
            <li> <a href="aboutu.html"> About Us </a></li>
            <li> <a href="contactus.html"> Contact Us</a></li>
            </a>
        </ul>
            
    
    </div>
    
    <ul class="slideshow">
        <li class="show"><a href="#"><img src="/images/banner/peru.jpeg" width="900" height="300" title="Peru" alt="Founder Isabella Mahadev went to peru to talk to kids about art, and see what kind of artistic support they recieve."/></a></li>
        <li><a href="#"><img src="/images/banner/us.jpeg" width="900" height="300" title="Our Team" alt="The core team of dv8r. "/></a></li>
        <li><a href="#"><img src="/images/banner/school.jpg" width="900" height="300" title="High Tech High Media Arts" alt="The school where we are based, High Tech High Media Arts in San Diego, California. All the founders go here."/></a></li>
    </ul>
    
    <div id= "content">
    
    <h1>About Us</h1>
    <h2> The Founders </h2>
    <p>Our organization has a couple groups of volunteers. We have our Founders, Artists, and other key staff members. Here are our founders in all their glory.  
    
    </div>
    <div id= "pie">
    
    <h3>Work Pie</h3>
    <p>Updated once a week.</p>
     <img src="/images/icons/pie.jpeg" />
     
    
    </div>
    
    <div id= "box1">
        
       <h3> Nathan Rosenberg </h3>
        
        <p>The Content Manager</p>
        <img src="/images/team/nathan.jpeg" />
    
    </div>
    
    <div id="box2">
    
       <h3>Kirk Silva</h3>
        
        <p> Site Manager </p>
        <img src="/images/team/kirk.jpg" />
    
    </div>
    
    <div id="box3">
    
       <h3>Ariana Giovanelli</h3>
        
        <p>Secretary</p>
        <img src="/images/team/ariana.jpeg" /></p>
    </div>
    
    <div id="box4">
    
    	<h3>Cameron Woodard</h3>
        
        <p>Lead Animator and Artist</p>
        <img src="/images/team/cameron.jpeg"/>
    </div>
        
        
    <div id="box5">
    
    	<h3>Jackson Teare</h3>
        
        <p>Contact Manager</p>
        <img src="/images/team/jackson.jpeg"/>
    </div>
    
    <div id="box6">
    
    	<h3>Bella Mahadev</h3>
        
        <p>A Little Bit of Everything</p>
        <img src="/images/team/bella.jpeg"/>
    </div>
    
    
    <div id="box7">
      
      <h3>Kenan Millet</h3>
        
        <p>Site Manager</p>
        <img src="/images/team/kenan.jpeg"/>
    </div>
    
    
    
    
    <div id= "footer">
    	<p> Copyright Dv8r 2010 | All Rights Reserved </p>
    </div>
    
    </div>
    </div>
    
    
    </body>
    
    
    </html>
    CSS for About Us

    Code:
    * CSS Document */
    
    /* Reset */
    
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Global */
    
    html	{	}
    body	{ background-color:#82CFF4	}
    
    /* Headings */
    
    
    
    
    h1, h2, h3, h4, h4, h5, h6	{ font-family:Arial, Helvetica, sans-serif; font-weight:bold; }
    
    h1	{font-size: 34px; color:#2AC1CF; padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; padding-left:15px}
    
    h2	{ font-size: 24px; color:#000; padding-bottom:5px;}
    
    h3	{color:#00CC66; padding-bottom:5px;}
    
    
    /* Text ELements */
    
    
    p, h1, h2, h3, h4, h4, h5, h6	{ font-family:Arial, Helvetica, sans-serif;	}
    
    p	{margin: 15px;}
    p .right	{	}
    
    p .left		{	}
    
    a			{	}
    
    a:link		{ 	}
    
    a:visited	{	}
    
    a:active	{	}
    
    a:focus		{	}
    
    a:hover		{	}
    
    
    
    
    
    /* Images */
    
    .imageframe	{padding:10px; border: 1px #CCC solid; margin: 10px}
    
    /* Lists */
    
    /* Containers*/
    
    #outer	{ width: 940px; margin: 0 auto; background-color:#FFF;	}
    
    #wrapper	{ width: 900px; margin: 0 auto; background-color:#FFF;	}
    
    #logo	{ margin: 30px 0; float:left; }
    
    #socialmediaicons	{ float:right;	}
    
    #socialmediaicons ul li	{ display:inline;	}
    
    #socialmediaicons ul { margin-top:40px;	}
    
    #topnav	{ clear:both;	}
    
    #topnav ul { border-top: 2px #000 solid; border-bottom: 2px #000 solid;
    	margin:20px 0; padding:10px 0; }
    
    #topnav ul li	{ display:inline; font-size:20px}
    
    #topnav ul li a	{ padding:0 20px; }
    
    #topnav a:link		{ color:#000; font-weight:bold; text-decoration:none;}
    
    #topnav a:visited	{ color:#000;	}
    
    #topnav a:active	{ color:#000;	}
    
    #topnav a:focus		{ color:#000;	}
    
    #topnav a:hover		{ color:#09F	}
    
    #content p	{line-height:20px;}
    
    #pie	{ margin:200px; margin-top: 200px; margin-bottom: 100px; width: 300px; border-top:15px #000 solid; padding-top:5px; background-color:#EEE;}
    
    #box1	{ width:200px; float:left; margin-right:50px; margin-left:50px; border-top:15px #21B9EB solid; background-color:#EEE; margin-top:30px;}
    
    #box2	{ width:200px; float:left; margin-right:50px; margin-left:50px; border-top:15px #693 solid; background-color:#EEE;margin-top:30px;}
    
    #box3	{ width:200px; float:left; margin-left:50px; border-top:15px #A788F7 solid; background-color:#EEE;margin-top:30px;}
    
    #box4	{ width:200px; margin-left:50px;float:left; margin-right:50px; margin-top:50px; margin-bottom:50px;border-top:15px #28E888 solid; background-color:#EEE;}
    
    #box5	{ width:200px; float:left; margin-right:50px; margin-left:50px; margin-top:50px; margin-bottom:50px; border-top:15px #4646AC solid; background-color:#EEE;}
    
    #box6	{ width:200px; float:left; margin-left:50px; margin-top:50px;margin-bottom:50px; border-top:15px #018F56 solid;background-color:#EEE;}
    
    #box7	{width:200px; float:left; margin-top:50px; margin-bottom:100px;margin-right:50px; margin-left:50px; background-color:#EEE; border-top:15px #152157 solid;}
    
    #box1 h3 { margin-top:20px; text-align:center;}
    #box2 h3 { margin-top:20px;text-align:center}
    #box3 h3 { margin-top:20px;text-align:center}
    #box4 h3 { margin-top:20px;text-align:center}
    #box5 h3 { margin-top:20px;text-align:center}
    #box6 h3 { margin-top:20px;text-align:center}
    #box7 h3 { margin-top:20px;text-align:center}
    #box8 h3 { margin-top:20px;text-align:center}
    #pie h3 { margin-top:20px;text-align:center}
    #box1 p {text-align:center;}
    #box2 p {text-align:center}
    #box3 p {text-align:center}
    #box4 p {text-align:center}
    #box5 p {text-align:center}
    #box6 p {text-align:center}
    #box7 p {text-align:center}
    #box8 p {text-align:center}
    #pie p  {text-align:center}
    
    #content	{ width: 900px; float:left;}
    #footer	{ clear:both; margin-top: 20px; border-top: 1px #ccc solid; text-align:center;}
    
    #footer p {font-size:12px; color:#999999; padding:10px}

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Html/css

    start from here and I recommend not to use dreamweaver.
    Here http://http://dv8r.org/contactus.html php code is not working properly ,because it saves your document in UTF-8 encoding

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Certainly don't rely on DW design view for how a page will look. No reason not to use the code editor though.

    You've got quite a few typos and errors in your html. Work through these by using the W3c validator and I think you'll solve a number of them. This'll sort out the php code displaying on the contact page as well.

    I notice that you're using different css files for each page - far easier to use the same css for each page - then you only have to change it once if you want to change a colour or whatever. It also means you have a consistent display - your oversized nav on the home page is caused just because the css for the home page is different to the css for the contact page.

  • #4
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    There's a Sitepoint book called Build Your Own: Standards Compliant Website Using Dreamweaver 8 by Rachel Andrew, which still works as a reference for newer CS versions. It's a shame Sitepoint haven't updated it, and they've discontinued it now, but there are still a few copies floating around.

    Sitepoint also does Build Your Own Web Site The Right Way Using HTML & CSS. Their books are very user-friendly!

    Dreamweaver is okay to use for as a development environment - but you still need to know how HTML and CSS work. The problems will only come if you use it as a visual editor, and let Dreamweaver write your code for you, rather than write it yourself and use the tools it provides to make that easier.
    Last edited by butlins; 07-26-2011 at 11:50 AM.
    If anyone asks my boss, this counts as work, okay?


  •  

    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
    •