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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts

    External stylesheet issue (formatting problem)

    Hi there everyone,

    I created a website using html/css, but we have to use an external stylesheet for the site (so the same formatting/style appears on all 6 pages). My design without using an external stylesheet looks perfect: http://www.flickr.com/photos/8046922...ream/lightbox/

    However, when I make an external stylesheet and add it to my html code, the website looks like this: http://www.flickr.com/photos/8046922...ream/lightbox/

    Any help with figuring out why that is happening and what code I have to move over to the .css file from what is posted below would be greatly appreciated! (also, the .css file and the .html file are in the same folder).

    My .css is contains everything from div to the body background color without the "#" (i tried it with both the "#" and without it for the .css and it still looked like that) - I figured if the css works when in the same file as the html it'd work the same as an external stylesheet, but that doesn't appear to be the case.

    Code:
    <!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">
    
    <html>
    
    <head>
    <title> The Effects Of Electronic Reading </title>
    <style type="text/css">
    
    div
    {
    padding: -8px;
    margin: -8px;
    }
    
    body
    { 
    width: 100% 
    }
    
    .headerbg
    {
    position: float;
    width: 100%;
    height: 300px;
    }
    
    #header
    {
    position: fixed;
    top: 0;
    width: 100%;
    height: 40px;
    background-color: black;
    }
    
    #container
    {
    height: 100%;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 70px;
    margin-bottom: 4em;
    }
    
    #title
    {
    height: 100px;
    text-align:left;
    margin-left: auto;
    letter-spacing:2px;
    font-family: "Impact";
    font-size: 250%;
    color: #ffffff;
    }
    
    #menu
    {
    padding-top: 18px;
    border-bottom: double 2px white;
    border-top: double 2px white;
    width: 75%;
    height: 50px;
    margin-top: 180px;
    margin-left: 868px;
    margin-right: 203px;
    float: right;
    text-align:center;
    letter-spacing:4px;
    word-spacing:4px;
    font-family: "Arial";
    font-size: 150%;
    color: #ffffff;
    }
    
    #mainarea
    {
    margin-top: 0px;
    width: 100%;
    }
    
    #content
    {
    height: 100%;
    margin-left: 10px;
    text-align: middle;
    font-family: "Book Antiqua";
    font-size: 100%;
    color: #000000;
    }
    
    #oneline
    {
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-top: solid 3px white;
    border-bottom: solid 3px white;
    font-family: "Arial Black";
    font-size: 180%;
    color: #ffffff;
    }
    
    #paperpagetitle
    {
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    height: 200px;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 300%;
    color: #000000;
    }
    
    #papercontent
    {
    width: 100%;
    margin: 0 auto;
    margin-top: -160px;
    padding: 0 0 120px 0;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 150%;
    color: #ffffff;
    }
    
    	#content .menu
    	{
    	margin: 10px 0;
    	display: block;
    	text-align: center;
    	}
    	.valid {margin: 10px 0 0;}
    
    #footer 
    {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 160px;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 100%;
    color: #ffffff;
    background-color: black;
    }
    
    #footercontent
    {
    padding: 5px;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 35px;
    height: 85px;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 100%;
    color: #ffffff;
    }
    
    a:link { color:#ffffff; text-decoration:none; }   
    a:visited { color:#ffffff; text-decoration:none; } 
    a:hover { color:#000000; text-decoration:none; }   
    a:active { color:#000000; text-decoration:none; }  
    
    </style>
    </head>
    
    <body>
    <body bgcolor="#0099FF">
    
    <div id="header">
    </div>
    
    <div id="container">
    
    <div id="title">
    <img src="images/banner.png" alt="Books and Technology" style="margin-left: 380px"/>
    </br>
    
    </div>
    
    <div id="menu">
    <font size="5"><b><a href="html.html">HOME</a>     |     <a href="page1.html">PAGE 1</a>     |     PAGE 2     |     PAGE 3     |     PAGE 4     |     PAGE 5     |     PAGE 6</b></font>
    
    </div>
    
    <div id="mainarea">
    
    	<div id="content">
    
    <img src="images/websitebanner.jpg" alt="Books and Technology" style="margin-top:60px" class="headerbg" />
    
    <br>
    <br>
    <br>
    
    <div id="oneline">
    <font size="4.5">Welcome to my website! If you look below, you will see an overview of my paper. Feel free to look around and I hope you enjoy your visit! </font>
    </div>
    
    <br>
    
    <div id="paperpagetitle">
    What You Need To Know
    </div>
    
    <br>
    
    <div id="papercontent">
    <p align="justify">The idea of reading a book is something that every individual thinks about. While some enjoy reading more than others, everyone has participated in the act of reading at at least one point in time. However, as we continue to advance in a technological sense, books will begin to disappear, with this already starting to take place in the form of bookstores closing and libraries adding more technology between their walls than ever before. The reasons for this shift are clear, but there is not one central reason that is the cause - perhaps it is because of the context surrounding the emergence of these technologies (like the Nook or Kindle), or maybe it is the convenience of e-Books for professionals who have busy schedules and want access to info wherever they are. What is certain is that there is a divide regarding digital print versus print text. Some individuals believe there are severe biological effects of electronic reading and we must be aware of its harms before we become consumed by it and do not realize our own deterioration as a result of electronic reading. Contrasting this is a view that says electronic reading is beneficial for us, especially for reluctant readers who oppose the traditional method. The only effects on us are positive and we need to embrace this new technology and incorporate it into our lives as much as we can.</p>
    
    <p align="justify">The above information is a basic overview of the ideas you will find throughout the six pages of my website. Take a look below to view a basic outline of my paper and what to expect on each of the six pages.</p>
    
    <br>
    
    <p align="justify"> <font size="6"> <center><span style="color:black">PAGE 1</font></span>
    <br>
    Here you will find information on how electronic reading differs from the traditional method of reading a print book. We will look at the differences between interacting with digital text versus print text, and also define what an e-Book is.</center></p>
    
    <center><img src="images/ebooks.jpg" alt="Books and Technology" style="margin-top:40px"/></center>
    
    <br>
    
    <p align="justify"> <font size="6"> <center><span style="color:black">PAGE 2</font></span>
    <br>
    On page 2, we will be looking at the rise and fall of both e-Books (and electronic reading) and the traditional print book. Taking a look back at history will be useful so we can examine past context, in addition to looking at this idea from a modern perspective. This will allow us to understand the context surrounding the emergence of these new technologies (like the Nook and Kindle). </center></p>
    
    <center><img src="images/bookswithoutbatteries.jpg" alt="Books without Batteries" style="margin-top:40px"/></center>
    
    <br>
    
    <p align="justify"> <font size="6"> <center><span style="color:black">PAGE 3</font></span>
    <br>
    Page 3 takes a look at the negative aspects of both the rise of electronic books and reading and the fall of the print book. By looking at Nicholas Carr, one will be able to grasp the biological effects digital reading has on us. We will also consider why this matters to us, and look at the impact the disappearance of pronto books has on libraries, bookstores and publishers. </center></p>
    
    <center><img src="images/bookstoreclosed.jpg" alt="Bookstore Closed" style="margin-top:40px"/></center>
    
    <br>
    
    <p align="justify"> <font size="6"> <center><span style="color:black">PAGE 4</font></span>
    <br>
    Here you will find information on how electronic reading differs from the traditional method of reading a print book. </center></p>
    <br>
    <p align="justify"> <font size="6"> <center><span style="color:black">PAGE 5</font></span>
    <br>
    Here you will find information on how electronic reading differs from the traditional method of reading a print book. </center></p>
    <br>
    <p align="justify"> <font size="6"> <center><span style="color:black">PAGE 6</font></span>
    <br>
    Here you will find information on how electronic reading differs from the traditional method of reading a print book. </center></p>
    
    </div>
    
    </div>
    </div>
    
    </div>
    
    <div id="footer">
    
    <div id="footercontent">
    <p align="justify"> <i>For each area/activity, I thought of one image that best represented the area, and replaced the human head in each sign with an image reflecting the activity. While the roundness of the vinyl record, movie reel and the printer remind the viewer of the roundness of a human head, they are distinct enough (and very recognizable) that when viewed, the viewer will understand what each area in the space is for. In addition, when designing the signs I knew some level of consistency had to be present so the signs, while unique, appeared related to one another. </i></p>
    
    </div>
    
    </div>
    </div>
    </div>
    
    </body>
    </html>
    Last edited by Jake_A_T; 10-30-2012 at 04:28 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,206
    Thanks
    23
    Thanked 605 Times in 604 Posts
    I think we need to see the external style sheet. And you are not calling it in your code.
    You have a lot of errors in your code, mostly using depreciated in-line styles that should be part of the css; like <center> <font> and stuff.
    You also have two <html> tags and two extra </div> tags at the end of your code.

    My suggestion would be to re=code the html section without in-line styles and fix the errors then add the external style sheet lastly add your own to tweak things and not start with your stylings.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    923
    Thanks
    76
    Thanked 29 Times in 29 Posts
    A little tip, if you want your elements centered or change their font, instead of using <center> and <font>, you can try this:

    This would be your html:
    Code:
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="stylesheet_name.css" />
    </head>
    
    <body>
    
    <div id="wrapper">
         <h2>My Heading</h2>
    </div>
    
    </body>
    </html>
    And the corresponding CSS:
    Code:
    #wrapper {width: 40%;/*you must delcare a width on the element before using margin*/
                  margin: 0 auto;/*this line here will center the particular element on the page.*/
                  border: 1px solid black;
                  height: 120px;}
    Now, lets say you want to style the <h2> element, we can do this a number of ways.

    You can target any children headings within the div (in a nutshell, anything declared within a div for example, will be that div's child, whether it be another div, h2,p,img,a ;ANYTHING). You do this like so:

    Code:
    #wrapper > h2 {/*to style the font, font size etc, we call it like so:*/
                         font-family: 'trebuchet ms';/*it is recommended to use single quotes on any font names with a space.*/
                         font-size: 1em;
                         font-weight: bold, thin, 100,200,300 etc/*only use 1! these are possible values*/;}
                         text-decoration: underline;
    Please note, using this way of styling will style ALL your <h2> elements with this style, this might not be what you want. You can target it another way by giving your HTML elements id attributes.

    Code:
    <h2 id="first_heading">My Heading</h2>
    Then in your CSS file, do this:
    Code:
    #first_heading {/*put the styles here, same as before*/}
    By targeting it like this, you only target that specific element with an id of 'first_heading' so you can style anything you want individually.

    Hope this sheds some light.

    Kind regards,

    LC.
    Last edited by LearningCoder; 10-31-2012 at 12:23 PM.


  •  

    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
    •