TurkeyEater
07-08-2007, 12:45 PM
Hello all. I am new to dreamweaver and have read every tutorial that i can get my hands on but i still dont get it. How do you make the boxes with the dotted lines around them like in the templets? thanks
Click to See Complete Forum and Search --> : basic Dreamweaver help
Corey Bryant
07-08-2007, 12:51 PM
You could use CSS (http://www.w3schools.com/css/css_border.asp). if you had an example, that might help. It also might be image(s) that you are seeing.
TurkeyEater
07-08-2007, 01:07 PM
http://i8.tinypic.com/5437vxh.jpg
hope this helps. thanks
hope this helps. thanks
mactheweb
07-08-2007, 01:32 PM
This isn't a Dreamweaver specific question but an HTML/CSS one. So here's some HTML and CSS code for a sample callout.
HTML:
<div class="dottedbox">
<h3>A sample header</h3>
<p>Lorem ipsum and all that.</p>
</div>
CSS:
.dottedbox {
width: 200px;
margin: 10px;
padding: 10px;
border: 1px dotted #666666;
}
What this will give you is a box with a dotted border. The padding gives a small bit of white space on the inside of the box. The margin does the same to the outside.
You can do this without going into code view by selecting the text or graphic you want inside the box. Make sure that you have the Common view selected in the Insert palette. Click on the Insert Div Tag icon. It's just to the left of the Insert Image icon.
You will get a dialog box. Give the div a class name. If you haven't already defined the CSS styles for the class, click on the New CSS Styles button and use the CSS wizard to set your styles to something similar to the code above. The float property is totally optional. It's just common for this kind of box.
After you have set the styles click the Okay button and you will have your box.
If the div or cell is already laid out for you like the above template, just apply the CSS styles to the div id or class.
HTML:
<div class="dottedbox">
<h3>A sample header</h3>
<p>Lorem ipsum and all that.</p>
</div>
CSS:
.dottedbox {
width: 200px;
margin: 10px;
padding: 10px;
border: 1px dotted #666666;
}
What this will give you is a box with a dotted border. The padding gives a small bit of white space on the inside of the box. The margin does the same to the outside.
You can do this without going into code view by selecting the text or graphic you want inside the box. Make sure that you have the Common view selected in the Insert palette. Click on the Insert Div Tag icon. It's just to the left of the Insert Image icon.
You will get a dialog box. Give the div a class name. If you haven't already defined the CSS styles for the class, click on the New CSS Styles button and use the CSS wizard to set your styles to something similar to the code above. The float property is totally optional. It's just common for this kind of box.
After you have set the styles click the Okay button and you will have your box.
If the div or cell is already laid out for you like the above template, just apply the CSS styles to the div id or class.
TurkeyEater
07-08-2007, 04:23 PM
Thanks, I think i am finially starting to understand css now. New question: how do i get by boxes lined up side by side? Like in the print screen i too, how do i get images and text to all be horizontally alligned.
mactheweb
07-09-2007, 12:38 AM
To get boxes vertically aligned you put them inside of a container box, then stack them.
#wrapper {
float: left;
width: 200px;
border: 1px solid red;
}
.box {
border: 1px dashed #666666;
margin: 5px;
padding: 5px;
}
<div id="wrapper>
<div class="box"
<p>yada, yada</p.
<p>Some more text and all that</p>
</div>
<div class="box">
<h3>A header</h3>
<p>Lorem ipusm dolor sit amet.</p>
</div>
</div>
This will float a vertical container box to the left and give it a solid border of red. Yes it's probably ugly but instructive. Inside of the container there are two stacked boxes, each with a dashed border. I gave them a touch of margin and padding for breathing room.
To get boxes to line up side by side you need to understand floats. They're not to difficult as they work just like the align attribute of images. Let's go through the example again. This time the two boxes will live side by side with no containing box.
<div id="wrapper>
<div class="box"
<p>yada, yada</p.
<p>Some more text and all that</p>
</div>
<div class="box">
<h3>A header</h3>
<p>Lorem ipusm dolor sit amet.</p>
</div>
</div>
Same HTML. A bit different CSS. This time I set the wrapper div to contain the box divs horizontally instead of stacking them. The wrapper now doesn't float but the box divs do.
#wrapper {
width: 450px;
border: 1px solid red;
}
.box {
float: left; /* this make the box slide left; */
width: 200px; /* all floated elements need a explicit or implicit width */
padding: 5px;
margin: 5px;
}
That's it. You can add as many divs with class of box as you want to the page and they will form horizontal rows. That is they will line up horizontally. If you give them an explicit height then they will give you a CSS grid.
#wrapper {
float: left;
width: 200px;
border: 1px solid red;
}
.box {
border: 1px dashed #666666;
margin: 5px;
padding: 5px;
}
<div id="wrapper>
<div class="box"
<p>yada, yada</p.
<p>Some more text and all that</p>
</div>
<div class="box">
<h3>A header</h3>
<p>Lorem ipusm dolor sit amet.</p>
</div>
</div>
This will float a vertical container box to the left and give it a solid border of red. Yes it's probably ugly but instructive. Inside of the container there are two stacked boxes, each with a dashed border. I gave them a touch of margin and padding for breathing room.
To get boxes to line up side by side you need to understand floats. They're not to difficult as they work just like the align attribute of images. Let's go through the example again. This time the two boxes will live side by side with no containing box.
<div id="wrapper>
<div class="box"
<p>yada, yada</p.
<p>Some more text and all that</p>
</div>
<div class="box">
<h3>A header</h3>
<p>Lorem ipusm dolor sit amet.</p>
</div>
</div>
Same HTML. A bit different CSS. This time I set the wrapper div to contain the box divs horizontally instead of stacking them. The wrapper now doesn't float but the box divs do.
#wrapper {
width: 450px;
border: 1px solid red;
}
.box {
float: left; /* this make the box slide left; */
width: 200px; /* all floated elements need a explicit or implicit width */
padding: 5px;
margin: 5px;
}
That's it. You can add as many divs with class of box as you want to the page and they will form horizontal rows. That is they will line up horizontally. If you give them an explicit height then they will give you a CSS grid.
mactheweb
07-09-2007, 01:30 AM
This is a quick and dirty version of your page with the minimum CSS to reproduce the example. I could make the HTML a bit leaner but that would make the CSS more complicated. This is a better learning example.
http://mactheweb.com/downloads/demo.gif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type='text/css'>
body {
color: black;
margin: 0;
padding: 0;
}
a {
color: aqua;
text-decoration: none;
}
h2 {
color: jade;
}
#Header {
background: green;
width: 100%;
height: 100px;
}
#Content {
width: 100%;
background: white;
color: aqua;
}
#Leftcol {
width: 33%;
margin: 15px;
float: left;
}
#Centercol {
width: 33%;
margin: 15px;
float: left;
}
#Rightcol {
width: 33%;
margin: 15px;
float: left;
}
.box, .flashbox, .zipbox {
border: 1px dashed #666666;
}
.box img {
float: left;
margin-right: 10px;
}
.box p {
border-bottom: 1px solid #666666;
border-left: 1px solid #666666;
}
.zipbox {
background: url(map.gif) no-repeat;
padding: 40% 0 0 27px;
}
</style>
</head>
<body>
<div id="Header">
</div>
<div id="Content">
<div id="Leftcol">
<div class="box">
<h2>What's New?</h2>
<h3><a href="whatsnew.html">What's New</a></h3>
</div>
<div class="box">
<img src="bike.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Aquo Extreme cycle etc</a></p>
</div>
<div class="box">
<img src="bike.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Uber talented couple etc</a></p>
</div>
<div class="box">
<img src="runners.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Amateur runners pace etc</a></p>
</div>
<div class="box">
<img src="mtn.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Extreme skiing is intense etc</a></p>
</div>
<p><img src="view.gif" width="80" height="25" alt="view all"></p>
</div>
<div class="Centercol">
<div class="box">
<h2>Get Aquo!</h2>
<h3><a href="getaquo.html">Get Aquo!</a></h3>
</div>
<p>Aquo is now on a shelf near you. Do you care?</p>
<div class="zipbox">
<form action="action">
<p><label>Enter Zip Code<br>
<input type="text" name="zip">
</label></p>
</form>
</div>
</div>
<div id="Rightcol">
<div class="box">
<h2>Upcoming Event</h2>
<h3><a href="events.html">Upcoming Event</a></h3>
</div>
<div class="flashbox">
<p>Flash Player 9 and JavaScript Required</p>
<p><a href="flashurl.html">Get Flash Player</a></p>
</div>
</div>
</div>
</body>
</html>
The only thing I left off was an example image submit button. I just saw that.
http://mactheweb.com/downloads/demo.gif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type='text/css'>
body {
color: black;
margin: 0;
padding: 0;
}
a {
color: aqua;
text-decoration: none;
}
h2 {
color: jade;
}
#Header {
background: green;
width: 100%;
height: 100px;
}
#Content {
width: 100%;
background: white;
color: aqua;
}
#Leftcol {
width: 33%;
margin: 15px;
float: left;
}
#Centercol {
width: 33%;
margin: 15px;
float: left;
}
#Rightcol {
width: 33%;
margin: 15px;
float: left;
}
.box, .flashbox, .zipbox {
border: 1px dashed #666666;
}
.box img {
float: left;
margin-right: 10px;
}
.box p {
border-bottom: 1px solid #666666;
border-left: 1px solid #666666;
}
.zipbox {
background: url(map.gif) no-repeat;
padding: 40% 0 0 27px;
}
</style>
</head>
<body>
<div id="Header">
</div>
<div id="Content">
<div id="Leftcol">
<div class="box">
<h2>What's New?</h2>
<h3><a href="whatsnew.html">What's New</a></h3>
</div>
<div class="box">
<img src="bike.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Aquo Extreme cycle etc</a></p>
</div>
<div class="box">
<img src="bike.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Uber talented couple etc</a></p>
</div>
<div class="box">
<img src="runners.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Amateur runners pace etc</a></p>
</div>
<div class="box">
<img src="mtn.jpg" width="75" height="50" alt="demo">
<p><a href='there.html'>Extreme skiing is intense etc</a></p>
</div>
<p><img src="view.gif" width="80" height="25" alt="view all"></p>
</div>
<div class="Centercol">
<div class="box">
<h2>Get Aquo!</h2>
<h3><a href="getaquo.html">Get Aquo!</a></h3>
</div>
<p>Aquo is now on a shelf near you. Do you care?</p>
<div class="zipbox">
<form action="action">
<p><label>Enter Zip Code<br>
<input type="text" name="zip">
</label></p>
</form>
</div>
</div>
<div id="Rightcol">
<div class="box">
<h2>Upcoming Event</h2>
<h3><a href="events.html">Upcoming Event</a></h3>
</div>
<div class="flashbox">
<p>Flash Player 9 and JavaScript Required</p>
<p><a href="flashurl.html">Get Flash Player</a></p>
</div>
</div>
</div>
</body>
</html>
The only thing I left off was an example image submit button. I just saw that.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.