SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text in Nested Div Won't Style

    I'm a newbie at CSS and Styling. Up to now I've done everything in tables. I'm trying to be good and get on board the CSS train but ... dang tables were easier. HELP!

    I've created a nested div and put some text into it with a h1 header assignation. I try and change the font family for that nested div but I can't get the html to recognize it. I'm using a preformated page straight out of Dreamweaver and I've got it attached below. No external style sheet yet, everything on the one page.

    Thanks for looking.
    Attached Files Attached Files

  2. #2
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I should mention that what I'm trying to do is change the Kiropraktikk First in the topleft div, which is nested inside the top div which is inside the container div. I'm trying to change it to a serif font.

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also A TOTAL IDIOT!! I took out the styling that I was trying to do so now there is nothing there. Let me change this to a question of: Take a look at the code I've got now and tell me how you would go about styling the Kiropraktikk First so that later I can import the styling into an external style sheet.

    Thank you again.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hmmm, there's lot of nasty stuff in that file—lits of \ symbols, and a whole bunch of muck before the doctype at the top of the page that shouldn't be there. Not sure if that's all appeared in translation or not …

    Anyhow, here's a slightly cleaned up version (with a more modern doctype. Set Dw to a strict doctype by default.)

    Also, what you want is something basically like this:

    Code:
    .topleft p {font-family: georgia, times, serif;}
    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" lang="en" xml:lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Norway Template</title> 
    <style type="text/css"> 
    body  { 
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
    	margin: 0; 
    	padding: 0; 
    	color: #000; 
    	background: #c56065; 
    	background-image:url(images/backgroundbase.png); 
    	background-repeat:repeat-x; 
    	 
     } 
     
    /* ~~ Element/tag selectors ~~ */ 
    ul, ol, dl  { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ 
    	padding: 0; 
    	margin: 0; 
     } 
    h1, h2, h3, h4, h5, h6, p  { 
    	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */ 
    	padding-right: 15px; 
    	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */ 
     } 
    a img  { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ 
    	border: none; 
     } 
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ 
    a:link  { 
    	color: #42413C; 
    	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ 
     } 
    a:visited  { 
    	color: #6E6C64; 
    	text-decoration: underline; 
     } 
    a:hover, a:active, a:focus  { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ 
    	text-decoration: none; 
     } 
     
    /* ~~ this fixed width container surrounds all other elements ~~ */ 
    .container  { 
    	width: 960px; 
    	background: /*#FFF*/; 
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ 
    	 
    	background-image: url("images/people.png"); 
    	background-repeat: no-repeat; 
    	background-attachment:fixed; 
    	background-position: 50% 0px; 
    	 
     } 
     
     
    /* ~~ This is the layout information for div's inside the container. ~~  
     
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.*/ 
     
     
     
    .content  { 
     
    	padding: 10px 0; 
     } 
     
     
     
     
    /* ~~ miscellaneous float/clear classes ~~ */ 
    .fltrt  {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ 
    	float: right; 
    	margin-left: 8px; 
     } 
    .fltlft  { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ 
    	float: left; 
    	margin-right: 8px; 
     } 
    .clearfloat  { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */ 
    	clear:both; 
    	height:0; 
    	font-size: 1px; 
    	line-height: 0px; 
     } 
    
    .topleft p {font-family: georgia, times, serif;}
     </style>
    </head> 
     
     
     
     
     
     
    <body> 
     
    <div class="container"> 
     
     
    	<div class="top"> 
         
         
        <div class="topleft">  
          <p>Kiropraktikk First</p> 
        </div> 
         
        <div class="topright"> 
         
        </div> 
         
         
     
    </div> 
     
    	<div class="nav"> 
     
    </div> 
     
     
    	<div class="label"> 
     
    </div> 
     
     
      <div class="content"> 
       
        <h1>Instructions</h1> 
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p> 
        <h2>Layout</h2> 
        <p>Since this is a one-column layout, the .content is not floated. If you add a .footer within the .container, it will simply follow the .content div. </p> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
         
        <!-- end .content --></div> 
         
        <div class="footer"> 
         
         
    </div>     
         
      <!-- end .container --></div> 
       
    </body> 
    </html>

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. This is still like Norwegian to me. I'm going to have to study it for a bit before I fully understand and can learn from it. Again, thanks.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Because the paragraph is inside a div with a class of "topleft", you can target it specifically in your stylesheet like so:

    Code:
    .topleft p {font-family: georgia, times, serif;}
    However, if you wanted everything in that div to have that serif font, you could just do this:

    Code:
    .topleft {font-family: georgia, times, serif;}

  7. #7
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ralph. I'm going to play around with all this tomorrow and really learn it so I can own it. I've been watching all kinds of videos on how to do this, and it all seemed to make so much sense until I actually sat down and tried to do some things. I'm sure you'll be hearing more from me in the near future.

  8. #8
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As an addendum, I just realized I'd made the div a class instead of an ID. Stupid nuubb mistake. Now I'm creating div's with ID's and it's going so much better. Duh.

    Thanks again for the help folks. You've set me on the right path. I'll be back with more dumb nuubb questions in just a little while.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by G2G2 View Post
    As an addendum, I just realized I'd made the div a class instead of an ID. Stupid nuubb mistake. Now I'm creating div's with ID's and it's going so much better. Duh.

    Thanks again for the help folks. You've set me on the right path. I'll be back with more dumb nuubb questions in just a little while.
    Whether you use a class or id shouldn't matter. Just remember that you can only use an id once per page, while classes are re-usable.

    Lately, I've been pulling back heavily on id usage. They have a bit of a sledgehammer effect on CSS when only a light hammer tap is needed (so to speak). I now use classes even on main sections of the page that only appear once per page. Using a class instead of an id makes complex styling a little easier, I find—especially when overriding one style with a more specific style. If the style you are overriding includes an id, then you need a more powerful dose of selectors to override it than you really should need. This is because ids carry a lot more weight than classes, so they are harder to override.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •