Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with inserting CSS and HTML into DreamWeaver CS5

Status
Not open for further replies.
JuStCaLLMeBLaZn

JuStCaLLMeBLaZn

MIS
Nov 2, 2010
3
GB
Recently, i've been asked to design a website, but i'm on a very tight schedule and as much and any help will be really appreciated.

I basically don't know what I'm doing with any of it, but the problem I face at the moment is this; I have created a basic layout of a webpage in DreamWeaver which consists of some tables. I have a navigation bar that I wish to insert into one of the tables, namely the second one down which runs horizontal. I believe (and I could be horribly wrong here) that for it to display correctly on my index page for the website, that I must paste the HTML code into the code section when my cursor is in the aforementioned table. And then I attatch a Style Sheet by clicking the icon on the right hand side of the window (at the bottom of the CSS styles pane).

However, when I paste the HTML code in, it doesn't display properly (it either completely fills the screen with rubbish or gets stretched in a strange way). And then when I try to attatch the CSS file, it simply changes the font of everything on the page and makes the background white.

I have been at this for hours and feel I am missing something blidingly obvious, but Google hasn't helped at all with this matter.

Once again, as much help as possible would be appreciated and many thanks in advance.
 
Sort by date Sort by votes
Can we see an example page or the entire code of the page?
I won't be the first to tell you not to use tables for layout. But seeing what you are trying to do I can help you with the basic layout using divs and css.
 
Upvote 0 Downvote
The code of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Niagra Nights</title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #000;
}
body,td,th {
color: #FFF;
background-color: #000;
text-align: left;
}
</style>
</head>

<body>

<div class="container">
<div class="header"><!-- end .header -->
<img src="images/Niagra Nights Logo v2.png" width="350" height="210" alt="Niagra Nights Logo" />
<table width="100%" border="0">
<tr>
<th scope="col">THIS IS WHERE I WANT TO INSERT THE NAVIGATION BAR&nbsp;</th>
</tr>
</table>
</div>
<div class="content">
<table width="100%" height="233" border="0">
<tr>
<th width="50%" height="229" scope="row"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></th>
<th width="50%" scope="row"><blockquote>
<p>&nbsp;</p>
</blockquote></th>
</tr>
</table>
<p><!-- end .content --></p>
</div>
<div class="footer">
<p>Copyright © 2010 by William Owen</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

If it make any difference, i have the HTML and CSS of the Navigation bar open in DreamWeaver, and it displays absolutely fine. But as soon as I make any effort to copy it to the code above it all goes wrong.
 
Upvote 0 Downvote
Is it supposed to be a fluid layout? (this is the cause of the "get stretched in a weird way" or should it be a fixed size?
Is the navigation imaged based? text based? Is it single menu items or a css drop down menu?
 
Upvote 0 Downvote
I selected a liquid layout when I initally set up the website (if that's what you mean). I'm not quite sure exactly how to answer your questions regarding the navigation bar, but this is the exact one I am using -
The HTML code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<table width="75%" border="0">
<tr>
<th scope="col">&nbsp;</th>
</tr>
</table>

<link rel="stylesheet" href="menu.css" type="text/css" media="screen" /><!-- Menu -->

<title>Mega Menu Drop Down</title>

<!--[if IE 6]>
<style>
body {behavior: url("css/csshover3.htc");}
.menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<![endif]-->

</head>

<body>


<ul class="menu">


<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->


<div class="dropdown_2columns"><!-- Begin 2 columns container -->


<div class="col_2">
<h2>Welcome !</h2>
</div>

<div class="col_2">
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>
</div>

<div class="col_2">
<h2>Cross Browser Support</h2>
</div>

<div class="col_1">
<img src="img/browsers.png" width="125" height="48" alt="" />
</div>

<div class="col_1">
<p>This mega menu has been tested in all major browsers.</p>
</div>

<div class="col_2">
<h2>Compatible Browsers</h2>
</div>

<div class="col_1">
<ul class="plus">
<li>Internet Explorer</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
</div>

<div class="col_1">
<ul class="plus">
<li>Chrome</li>
<li>Safari</li>
<li>What else ?</li>
</ul>
</div>


</div><!-- End 2 columns container -->


</li><!-- End Home Item -->




<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->


<div class="dropdown_5columns"><!-- Begin 5 columns container -->


<div class="col_5">
<h2>This is an example of a large container with 5 columns</h2>
</div>

<div class="col_1">
<p class="dark_grey_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>

<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>

<div class="col_1">
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>

<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>

<div class="col_1">
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>

<div class="col_5">
<h2>Here is some content with side images</h2>
</div>

<div class="col_3">

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>

<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>

</div>

<div class="col_2">

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>


</div><!-- End 5 columns container -->


</li><!-- End 5 columns Item -->




<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->


<div class="dropdown_4columns"><!-- Begin 4 columns container -->


<div class="col_4">
<h2>This is a heading title</h2>
</div>

<div class="col_2">
<p class="favorite">This is a paragraph with a favorite icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>
<p class="help">This is a paragraph with a help icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>
</div>

<div class="col_2">
<p class="mail">This is a paragraph with a mail icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>
<p class="print">This is a paragraph with a print icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>
</div>

<div class="col_1">

<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>

</div>

<div class="col_1">

<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>

</div>

<div class="col_1">

<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>

</div>

<div class="col_1">

<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>

</div>


</div><!-- End 4 columns container -->


</li><!-- End 4 columns Item -->




<li><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->


<div class="dropdown_3columns"><!-- Begin 3 columns container -->


<div class="col_3">
<h2>Lists in Boxes</h2>
</div>

<div class="col_1">

<ul class="greybox">
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>

</div>

<div class="col_1">

<ul class="greybox">
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>

</div>

<div class="col_1">

<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>

</div>

<div class="col_3">
<h2>Here are some image examples</h2>
</div>

<div class="col_3">
<img src="img/03.jpg" width="70" height="70" class="img_right imgshadow_light" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>

<img src="img/04.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
</div>


</div><!-- End 3 columns container -->


</li><!-- End 3 columns Item -->




<li><a href="#" class="drop">2 columns</a><!-- Begin 2 columns Item -->


<div class="dropdown_2columns"><!-- Begin 2 columns container -->

<div class="col_1">

<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
<li><a href="#">VideoHive</a></li>
<li><a href="#">3DOcean</a></li>
</ul>

</div>

<div class="col_1">

<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
</ul>

</div>

<div class="col_1">

<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
</ul>

</div>

<div class="col_1">

<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>

</div>


</div><!-- End 2 columns container -->


</li><!-- End 2 columns Item -->




<li><a href="#" class="drop">1 Column</a><!-- Begin 1 column Item -->


<div class="dropdown_1column"><!-- Begin 1 column container -->


<div class="col_1">

<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
<li><a href="#">PhotoTuts</a></li>
<li><a href="#">ActiveTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>

</div>


</div><!-- End 1 column container -->


</li><!-- End 1 column Item -->




<li class="right"><a href="#" class="drop">Contact</a><!-- Begin Contact Item -->

<div class="dropdown_2columns align_right">

<div class="col_2">
<h2>Contact Us</h2>
</div>

<div class="col_2">

<form action="post"><!-- Begin contact form -->

<fieldset>

<p><label>Name</label><input type="text" size="30" /></p>
<p><label>Email</label><input type="text" size="30" /></p>
<p><label>Subject</label><input type="text" size="30" /></p>
<p><label>Message</label><textarea cols="30" rows="10"></textarea></p>

<button type="submit" class="submit">Send</button>

</fieldset>

</form><!-- End contact form -->

</div>

<div class="col_2">
<h2>Find us on social networks</h2>
</div>

<div class="col_2">
<ul class="social">
<li><a href="#"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>
<li><a href="#"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>
<li><a href="#"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>
<li><a href="#"><img src='img/rss.png' alt="" /><span>RSS Feed</span></a></li>
<li><a href="#"><img src='img/technorati.png' alt="" /><span>Technorati</span></a></li>
<li><a href="#"><img src='img/delicious.png' alt="" /><span>Delicious</span></a></li>
</ul>
</div>

</div>

</li>
<p>
<!-- End Contact Item -->


</p>
<p>&nbsp;</p>
</ul>

</body>
</html>

And like I said in the earlier post I need it inserting into a table about half way through the initial HTML code I posted (i've marked it in the code).

Many thanks guys.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

LonnieJohnson
  • Locked
  • Question
Downloading Dreamweaver
Replies
0
Views
86
LonnieJohnson
LonnieJohnson
Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
242
Mike Lewis
Mike Lewis
FALCONSEYE
  • Locked
  • Question
ColdFusion microservices with REST
Replies
0
Views
198
FALCONSEYE
FALCONSEYE
MDEJAKE
  • Locked
  • Question
autosuggest (cfc and jquery) help
Replies
0
Views
96
MDEJAKE
MDEJAKE
RosieGp
  • Locked
  • Question
How to read string of 0s and 1s 1
Replies
3
Views
250
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top