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?
heres the css:
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: Verdana, Geneva, sans-serif;
Hello Chris. heres the HTML
<h1>California’s Natural Heritage</h1>
<li><a href="kingscanyon.html">Kings Canyon</a></li>
<li><a href="deathvalley.html">Death Valley</a></li>
<li><a href="joshuatree.html">Joshua Tree</a></li>
<h2>Yosemite: Towering Cliffs and Waterfalls</h2>
<p>Luck was definitely on my side when I visited Yosemite. It was mid-October, and I planned to enter over the Tioga Pass; but a great storm blew up as I set out from Los Angeles, depositing a huge amount of snow on the Sierra Nevada. My first stop was in Death Valley, where I planned to spend a couple of nights. Fellow guests looked haggard. They had planned to cross the Tioga Pass in the opposite direction, but had been forced to drive all the way from Yosemite around the southern end of the mountains—more than eight hours of solid driving.</p>
<p>Half Dome seen from Olmstead Point</p>
<p>Fortunately, the storm was short-lived, the sun came out for three days, and the road reopened. But everywhere on either side of the road above 6,000 feet (1,828 m) was blanketed in snow. Driving over the pass with the sun shining off the snow and lakes was breathtaking. As was the first view of Half Dome from Olmstead Point (see photo). Half Dome is a majestic granite rock rising to 8,836 feet (2,693 m). It dominates many vistas in Yosemite, and stands at the eastern end of Yosemite Valley.</p>
<p>The valley itself is surrounded by towering cliffs and waterfalls, including two of the world's tallest falls. The Yosemite Falls drop 2,425 feet (739 m), and the Sentinel Falls 2,000 feet (610 m). The Bridalveil Fall (see photo) is much smaller (620 feet, 189 m), but it has a special beauty. As the wind swirls about the cliff, it often lifts the falling water and blows it from side to side.</p>
<p>Yosemite's stunning scenery remains largely untouched today thanks to the efforts of conservationists in the mid-nineteenth century. The California gold rush of 1848 brought large numbers of prospectors to the area, followed soon after by tourists. President Abraham Lincoln signed the Yosemite Grant in 1864, protecting Yosemite Valley and the nearby Mariposa Grove of sequoias. The rest of the national park was established 26 years later following efforts by John Muir, who hated seeing the area invaded by cattlemen, shepherds, and land speculators. Muir, who originally came from Scotland, described Yosemite as "by far the grandest of all the special temples of Nature I was ever permitted to enter."</p>
<p>Yosemite certainly is something special, and well worth a visit. The only drawback is that it is so popular. Yosemite Valley attracts such large numbers that visitors are encouraged to leave their cars in massive car parks and to use the free shuttle buses that go to all the main points of interest.</p>
<p>The little animal munching away at a pine cone at the top of the page is a chickaree (or Douglas squirrel) that I spotted in Mariposa Grove at the southern end of Yosemite National Park. When alarmed, a chickaree makes a series of short, high-pitched calls.</p>
<h3>When to Visit</h3>
<p>Yosemite National Park is open all year round, but weather conditions can change unexpectedly from November to April, and chains may become mandatory on any park road. The Tioga Pass over the Sierra Nevada is closed by snow in winter.</p>
<h3>Where to Stay</h3>
<p>There are three hotels inside Yosemite National Park, as well as several other locations offering simpler accommodation and campsites. For details and reservations, visit <a href="http://www.yosemitepark.com/Accommodations.aspx">Yosemite Accomodations</a>.</p>
<p>There are also plenty of places to stay just outside the park. For details, visit <a href="http://yosemite.com/tripplan/lodging.html">Yosemite.com</a>.</p>
<p>Yosemite National Park is a four-hour drive from San Francisco, and six hours from Los Angeles. You can also enter the park from the East through the Sierra Nevada over the Tioga Pass. The western routes are normally open all year, but the Tioga Pass is closed by snow from November to April.</p>
<p>Park entrance is $20 for a car and all occupants for seven consecutive days.</p>
<p><a href="http://www.nps.gov/yose/index.htm">Yosemite National Park website</a>.</p>
<p><a href="http://www.nps.gov/yose/planyourvisit/upload/YOSEpark2003.pdf" title="Opens in new window or tab" target="new">Detailed map of Yosemite (PDF 1.8MB)</a>.</p>
<p>All photos: Copyright © 2012 David Powers.</p>
'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:
margin-left: 20px; /*Gives you 20px margin on left before starting the right box*/
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:
padding: 20px; /*Pushes content inside the boxes by 20px on all 4 sides*/
And one more thing Id like to ask is, how can I center the webpage?
I have added:
But it will not center.
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:
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:
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:
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;