Externe stijlpagina maken en gebruiken

Status
Niet open voor verdere reacties.

love-miranda

Gebruiker
Lid geworden
29 jan 2006
Berichten
90
Hallo :)

ook ik ben bezig met dreamweaver:love:

Nu ben ik begonnen leuk te knutselen mbv een online cursus.. ik loop alleen tegen het volgende aan..
Ik heb een pagina met achtergrond, een spry menu, een getekende div met een logo erin en een met met een tekst erin..
Ik wil hiervan mijn standaard sjabloon maken en daarop verder werken per pagina.
Dan ga ik naar CSS stijlen werkbalk, selecteer alles (spr menu en style)
Als ik dan klik op opslaan krijg ik de melding dat er al een regel met dezelfde naam is..
Als ik doorga dan wordt het opgeslagen, maar als ik het dan koppel in een nieuwe pagina zie ik alleen de achtergrond.. In mijn code zie ik wel de spry menu staan, maar ik zie het niet terug in de ontwerp pagina..

Ik neem aan dat ik het een en ander qua codes moet kopieeren en hier plakken voordat iemand mij kan helpen? Hoe zorg ik ervoor dat de code niet heel de pagian vult, maar in een apart vensterje komt in mijn bericht?

Bij voorbaat dank! :D
 
Hoi love-miranda,
Voor de code hier in een venstertje:


  • Eerst de code intikken / inplakken in het reactie-venster.
  • Dan de code selecteren en op het knopje <> klikken als het html-code is, en op het knopje # als het css-code is.

Als je op "Voorbeeld van bericht" klikt (rechts onder, naast "Reactie plaatsen"), zie je of het gelukt is.

Met vriendelijke groet,
CSShunter
 
Ik raad aan om slechts 1 stylesheet te gebruiken, dit houd het wat overzichtelijker vind ik, en als je het wel wilt moet je hem een andere naam geven ;)
 
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:189px;
	top:53px;
	width:1277px;
	height:629px;
	z-index:4;
	color: #F0F0F0;
}
#apDiv2 {
	position:absolute;
	left:489px;
	top:68px;
	width:792px;
	height:200px;
	z-index:0;
}
body {
	background-image: url(afbeeldingen/The-best-top-desktop-purple-wallpapers-purple-wallpaper-purple-background-hd-25.jpg);
	background-repeat: no-repeat;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv3 {
	position:absolute;
	left:213px;
	top:86px;
	width:170px;
	height:138px;
	z-index:0;
}
#apDiv4 {
	position:absolute;
	left:1133px;
	top:218px;
	width:255px;
	height:217px;
	z-index:4;
}
#apDiv5 {
	position:absolute;
	left:400px;
	top:115px;
	width:255px;
	height:350px;
	z-index:4;
}
#apDiv6 {
	position:absolute;
	left:751px;
	top:164px;
	width:266px;
	height:345px;
	z-index:4;
}
#apDiv7 {
	position:absolute;
	left:1196px;
	top:297px;
	width:268px;
	height:345px;
	z-index:0;
	overflow: hidden;
}
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Behandelingen</a>
      <ul>
        <li><a href="#">Acryl</a></li>
        <li><a href="#">Gel</a></li>
        <li><a href="#">Mani-q</a></li>
        <li><a href="#">Manicure</a></li>
      </ul>
    </li>
    <li><a href="#">Prijslijst</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Foto's</a>
      <ul>
        <li><a href="#">Nailart</a></li>
        <li><a href="#">French Manicure</a></li>
        <li><a href="#">French Pedicure</a></li>
        <li><a href="#">Voor & Na</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Gastenboek</a></li>
    <li><a href="#">Voorwaarden </a></li>
  </ul>
</div>
<div id="apDiv3"><img src="afbeeldingen/11.png" width="204" height="145" /></div>
<div id="apDiv7"><img src="afbeeldingen/epileren.png" width="255" height="323" /></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Dit is mijn pagina (voordat ik css regels verplaats heb)

Hieronder heb ik het gekoppeld op een nieuwe pagina. Dit is dan mijn broncode

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<link href="file:///C|/Users/user/Documents/ej/CSS_Stijlen/test22.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

Naast brondcode kan ik ook de code zien van mijn CSS pagina, dat is dit:

Code:
@charset "utf-8";
#apDiv1 {
	position:absolute;
	left:189px;
	top:53px;
	width:1277px;
	height:629px;
	z-index:4;
	color: #F0F0F0;
}
#apDiv2 {
	position:absolute;
	left:489px;
	top:68px;
	width:792px;
	height:200px;
	z-index:0;
}
body {
	background-image: url(../afbeeldingen/The-best-top-desktop-purple-wallpapers-purple-wallpaper-purple-background-hd-25.jpg);
	background-repeat: no-repeat;
}


/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 8em;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #FCF;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #909;
	color: #FFF;
	text-align: center;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #909;
	color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(../SpryAssets/SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	text-align: center;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(../SpryAssets/SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(../SpryAssets/SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(../SpryAssets/SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
#apDiv3 {
	position:absolute;
	left:213px;
	top:86px;
	width:170px;
	height:138px;
	z-index:0;
}
#apDiv4 {
	position:absolute;
	left:1133px;
	top:218px;
	width:255px;
	height:217px;
	z-index:4;
}
#apDiv5 {
	position:absolute;
	left:400px;
	top:115px;
	width:255px;
	height:350px;
	z-index:4;
}
#apDiv6 {
	position:absolute;
	left:751px;
	top:164px;
	width:266px;
	height:345px;
	z-index:4;
}
#apDiv7 {
	position:absolute;
	left:1196px;
	top:297px;
	width:268px;
	height:345px;
	z-index:0;
	overflow: hidden;
}
 
Hoi love-miranda,
Het koppelen van het stylesheet is goed gegaan, zie ik.
Maar er hoort ook in gekoppeld te worden:
het script voor de Spry-menu <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>.
En in de html van de nieuwe pagina moeten ook de standaard-elementen opgenomen worden die je steeds wilt zien.

Nu heb ik zelf geen DW, maar hier zou iets te vinden moeten zijn over hoe je een compleet sjabloon maakt (met niet alleen de css, maar ook de html die nodig is):



Succes!
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan