Skip navigation
Currently Being Moderated

Moving-Positioning Dig Tags

May 4, 2013 1:11 AM

Hello Dreamweaver's

 

 

A) I'm following along a tutorial and I'm also experimenting along the way how Dreamweaver treats various elements of the page. In this case Id like to know how can I have a gap in between the purple

and blue div tags, just for exercise purposes really,I don't know if its correct to do such a thing. But I'm trying to figure out the CSS on this issue.

 

 

B) and another question I have is, I have made a div tag 300 x 300

and when I type within DW if I don't do return/enter the type keeps

on going out side the boundaries box.

 

 

But if i copy/paste text within the box it positions it within the boundaries. why does DW do this?

 

u2a.jpg

 

 

heres the css:

 

body {

          background-color: #FFF;

          margin-right: auto;

          margin-left: auto;

          margin-top: 0px;

 

}

#footer {

          clear: both;

}

 

 

#content {

          background-color: #CCC;

          width: 900px;

          padding-bottom: 10px;

          margin: auto;

}

#aside {

          background-color: #00F;

          float: left;

          padding: 10px;

          color: #FFF;

          width: 500px;

}

 

 

body,td,th {

          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

          color: #000;

}

 

 

 

 

#header {

          background-image: url(../_images/accent1.jpg);

          background-repeat: no-repeat;

          height: 120px;

          border-bottom-width: thin;

          border-bottom-style: solid;

          border-left-color: #333;

}

h1 {

          font-size: 250%;

          color: #FFFF00;

          text-align: center;

          margin-top: 0px;

 

}

h2 {

          color: #30F;

}

h3 {

          color: #30F;

}

h1,h2,h3,h4,h5,h6 {

          font-family: Verdana, Geneva, sans-serif;

}

a:link {

          color: #0F0;

          font-weight: bold;

          text-decoration: none;

}

a:visited {

          color: #0F3;

          text-decoration: none;

}

a:hover {

          color: #0C0;

          text-decoration: underline;

}

a:active {

          color: #0C6;

          text-decoration: none;

}

#article {

          background-color: #949;

          padding-right: 0px;

          margin-left: 0px;

          width: 500px;

          float: left;

}

#gallery {

          float: left;

          width: 0px;

}

 
Replies
  • Currently Being Moderated
    May 4, 2013 5:39 AM   in reply to inquestflash

    We need to see the HTML in order to know how the CSS is applied.

     

    Chris

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 4, 2013 7:20 AM   in reply to inquestflash

    'article' and 'aside' are both HTML5 native tags itself - I dont see why you should use those names within a div. Aside is usually used when it contains some content relevant to a container into which it is placed in. In your case, a simple div with margin should do the trick.

     

    To ensure you dont get confused, I'm using your existing HTML code here. You have 2 boxes - one with ID aside and other with ID article. You could simply add margin-left to article or margin-right to aside and/ or padding to both in CSS:

     

    CSS margin-left to right hand side box:

     

    #article{

    margin-left: 20px; /*Gives you 20px margin on left before starting the right box*/

    }

     

    #aside{

    margin-right: 20px; /*Gives you 20px margin on right before finishing the left box*/

    }

     

    And to push the content within these 2 boxes a little inside on all sides:

     

    #aside, #article{

    padding: 20px; /*Pushes content inside the boxes by 20px on all 4 sides*/

    }

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 4, 2013 10:13 PM   in reply to inquestflash

    inquestflash wrote:

     

    Hi, Surdarshan thanks for those tips. worked well. I dindt know you can nest css within another css rule.

    I have not reached that far.

     

    No, you're not nesting CSS within CSS. CSS is a cascading stylesheet file. IDs and classes can be targeted by using CSS. General page styling is also targeted using CSS. Anything in your CSS starting with # is a div ID and with . is a div class. IDs can only be used once in each page - they're unique. Classes can be used any number of times on 1 page.

     

    You can create a CSS rule like this for all paragraphs:

     

    p{

    color: #000;

    }

     

    This will make all <p> text black on your page. This is because p itself is a HTML tag that you can define attributes for.

     

    Similarly, you 'aside' and 'article' in itself are HTML5 tags that you can define in general like this:

     

    aside{

    padding: 10px;

    }

     

    This will give 10px padding to all 'aside' elements on your page. In this instance, you can simply write your HTML as:

     

    <aside>Some content here</aside>

     

    The content within this will have 10px padding.

     

    If you have lets say, 10 such <aside> content on your page and want to only give specific rules for 1 of them, you can create an ID for that and write a specific CSS for it like this:

     

    <aside id="orange">Some content here</aside>

     

    You can write specific CSS for this aside like this:

     

    aside#orange{

    color: #ff9e00;

    }

    This will make the content within aside id orange as orange.

     

    Instead of #, if you use . you can re-use that class in multiple aside tags by replacing <aside id..> with <aside class..>

     

    You can definitely name your classes or IDs 'article' or 'aside'. But, I just think that would be redundant as these in itself are HTML markup tags.

     

    For centering your content on the webpage, use on the parent (main) container:

     

    margin: 0 auto;

     

    Good luck!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points