Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
mizzlizzi
Threadersteller
Dabei seit: 14.02.2008
Ort: sauerland
Alter: 37
Geschlecht:
|
Verfasst Di 13.03.2012 00:06
Titel Dreamweaver Menu - wie krieg ich DAS hin? |
|
|
Guten Morgen!
Ich möchte mich vorher kurz vorstellen, ich bin Lisa, zwar schon länger hier angemeldet, aber heute mit meine ersten Frage zu Dreamweaver. Ich hoffe, ihr könnt mir weiterhelfen.
Es geht um ein Menü, welches ich in Dreamweaver erstellen möchte. Ein Bild davon habe ich angehangen.
http://img829.imageshack.us/img829/5098/bildschirmfoto20120309u.png
Zu sehen ist zu Beginn nur das Hauptmenü, die anderen Balken (grün und blau) erscheinen erst, wenn ich mit der Maus über den jeweiligen Punkt gehen. (zusätzlich wird die Schrift bold)
Jetzt meine Frage... kann ich das überein Spry-Menü lösen? Und wenn nicht, wie bekomme ich es anders hin? Ich habe leider total ein Brett vor dem Kopf und ich hoffe ihr könnt mir ein paar Tipps geben.
Wäre es nicht möglich, die Horizontale Spry Menüleiste zu wählen und dann die unteren nachher zu bearbeiteten, also auch horizontal auszurichten?
Liebe Grüße, Lisa
|
|
|
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Di 13.03.2012 09:44
Titel
|
|
|
Moin Lisa,
wo ist denn das Problem bzw. was hast du bisher versucht? Ist doch eigentlich eine Standard-Navigation, die sich mit Pseudoklasse :hover und entsprechender Positionierung bauen lässt.
|
|
|
|
|
Anzeige
|
|
|
mizzlizzi
Threadersteller
Dabei seit: 14.02.2008
Ort: sauerland
Alter: 37
Geschlecht:
|
Verfasst Di 13.03.2012 11:13
Titel
|
|
|
hallo tschuingum!
Danke für deine Antwort. Ja, du hast ja wahrscheinlich recht, aber ich weiß nicht recht wie ich anfangen soll... Habe bis jetzt immer nur mit dem sprsy menüs gearbeitet bin halt doch recht frisch in Dreamweaver.
Kannst du mir da einen Tipp geben wie ich anfangen soll? Hab mir bis jetzt mal einen div-Bereich erstellt, in dem ich das Hauptmenu schon mal eingesetzt habe, also die 5 Punkte. Und dann? Die nächste Zeile darunter erstellen? aber die soll man ja nur sehen, wenn ich über das Hutpmenüu gehe mit der Maus. Du siehst, viel Können bringe ich nicht mit.
Liebe grüße, Lisa
|
|
|
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
|
|
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Di 13.03.2012 12:30
Titel
|
|
|
Naja, anfangen sollte man immer mit vernünftigem HTML-Code:
Code: | <ul>
<li><a href="">Unternehmen</a>
<ul>
<li><a href="">Profil</a></li>
<li><a href="">Philosophie</a></li>
<li><a href="">Jobs</a>
<ul>
<li><a href="">Stellenangebote</a></li>
<li><a href="">Ausbildung</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Kompetenzen</a></li>
<li><a href="">Service</a></li>
</ul> |
Den kannst du dann problemlos per CSS stylen (Stichworte: :hover, :after, position, float)
|
|
|
|
|
mizzlizzi
Threadersteller
Dabei seit: 14.02.2008
Ort: sauerland
Alter: 37
Geschlecht:
|
Verfasst Mo 19.03.2012 11:54
Titel
|
|
|
Guten Morgen!
Vielen Dank erstmal für eine Tipps und Ratschläge. Ich habe schon recht viel geschafft in der Zeit, aber jetzt stehe ich weder vor einem Problem und finde die Lösung nicht...
Wir ihr seht, steht das Logo nicht in dem dunkelgrauen Header, sondern oben links. Es ordnet sich nicht, wie alle anderen Bereiche in den Hauptteil ein, sondern steht völlig losgelöst davon. Ich habe es ja nachträglich eingesetzt. Wisst ihr, woran es liegen könnte?
(Außerdem: wenn ich das Browserfenster kleiner schiebe, erscheinen keine Scroll-Balken....??)
http://img404.imageshack.us/img404/4923/websitefehler.jpg
|
|
|
|
|
mochi
Dabei seit: 20.04.2011
Ort: Hinterm Bretterzaun
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2012 13:32
Titel
|
|
|
Der dazugehörige HTML und CSS Code wäre sehr hilfreich, um nachvollziehen zu können, wie du das ganze aufgebaut hast und woran der Fehler liegen könnte.
|
|
|
|
|
mizzlizzi
Threadersteller
Dabei seit: 14.02.2008
Ort: sauerland
Alter: 37
Geschlecht:
|
Verfasst Mo 19.03.2012 19:40
Titel
|
|
|
ja, stimmt, das macht das ganze ntaürlich einfacher:
<!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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #FFFFFF;
height: 100px;
overflow: hidden;
}
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; }
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 980px;
margin-right: auto;
margin-left: auto;
background-color: #f0f0f0;
position: static;
}
.content {
position: relative;
}
#logoblock {
position: absolute;
height: 90px;
width: 217px;
float: none;
margin-top: 0px;
margin-left: 749px;
visibility: visible;
background-image: url(images/01_Home_blau_NEU2.png);
background-repeat: no-repeat;
background-position: center center;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #777777;
border-left-width: 1px;
border-left-style: outset;
border-left-color: #888;
border-right-width: 1px;
border-right-style: inset;
border-right-color: #888;
}
#hauptbild {
height: 289px;
width: 980px;
background-color: #999;
margin-top: 1px;
}
#inhalt {
background-color: #f0f0f0;
height: 300px;
width: 650px;
margin-left: 13px;
position: relative;
margin-top: 25px;
}
#header {
background-color: #444444;
height: 53px;
width: 980px;
position: relative;
}
#news {
height: 300px;
width: 230px;
position: absolute;
margin-top: 290px;
padding-top: 20px;
padding-left: 10px;
float: none;
clear: none;
margin-left: 739px;
border-left-style: solid;
border-left-color: #777;
border-left-width: 1px;
background-color: #eceded;
}
#social {
height: 25px;
width: 82px;
float: left;
background-image: url(images/social3.png);
background-repeat: no-repeat;
background-position: right;
margin-top: -25px;
position: relative;
margin-left: 0px;
}
#footer {
background-color: #afafae;
height: 21px;
width: 965px;
font-size: 10px;
color: #FFF;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-align: right;
white-space: normal;
vertical-align: middle;
position: relative;
line-height: 18px;
float: none;
clear: none;
font-weight: normal;
overflow: auto;
top: 10px;
border-right-width: 15px;
border-right-style: solid;
border-right-color: #afafae;
}
.pro_line2 {
height:27px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
width: 800px;
color: #FFF;
letter-spacing: 1px;
text-decoration: none;
font-weight: relative;
z-index: 1000010;
position: relative;
float: left;
clear: right;
}
.pro_line2 .select {
list-style:none;
font-size: 10px;
letter-spacing: 1px;
position: relative;
color: #FFF;
height: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
text-decoration: none;
visibility: visible;
font-weight: normal;
margin-right: auto;
margin-left: auto;
}
.pro_line2 li {
height: 27px;
float: left;
background-color: #444444;
position: relative;
}
.pro_line2 .select a {
display:block;
height:26px;
float:left;
line-height:28px;
color:#FFF;
padding-top: 0;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
text-decoration: none;
}
.pro_line2 .select a b {
display:block;
color: #FFF;
height: 27px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
text-decoration: none;
font-weight: normal;
}
.pro_line2 .select a:hover,
.pro_line2 .select li:hover a {
line-height:27px;
color:#444444;
background-color: #9fca4a;
height: 27px;
padding-top: 0;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
text-decoration: none;
font-weight: normal;
position: relative;
}
.pro_line2 .select a:hover b,
.pro_line2 .select li:hover a b {
display:inline;
color: #FFF;
text-decoration: none;
height: 23px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-weight: bold;
}
.pro_line2 .sub {
display:none;
color: #FFF;
text-decoration: none;
height: 27px;
float: left;
padding-right: 10px;
padding-left: 10px;
}
/* IE6 only */
.pro_line2 table {
border-collapse:collapse;
margin:0px;
font-size:1em;
width:0;
height:027;
color: #FFF;
text-decoration: none;
background-color: #444444;
padding-right: 10px;
padding-left: 10px;
}
.pro_line2 .sub {
list-style:none;
text-decoration: none;
height: 27px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
float: left;
}
.pro_line2 .sub li {
color: #FFF;
text-decoration: none;
background-color: #444444;
height: 27px;
}
.pro_line2 .select :hover .sub {
height:27px;
display:block;
position:absolute;
float:left;
width:700px;
top:28px;
left:0;
text-align:center;
color: #FFF;
text-decoration: none;
}
.pro_line2 .select :hover .sub li a:hover
{
color:#444444;
border-color: #fff #333 #000 #fff;
text-decoration: none;
height: 27px;
font-weight: bold;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<link href="stylesheets/blauline.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pro_line2">
<ul class="select">
<li><a href="#nogo"><b>UNTERNEHMEN</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">PROFIL</a></li>
<li><a href="#nogo">PHILOSOPHIE</a></li>
<li><a href="#nogo">MEILENSTEINE</a></li>
<li><a href="#nogo">TEAM</a></li>
<li><a href="#nogo">NEWS+PRESSE</a></li>
<li><a href="#nogo">STELLENANGEBOTE</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>KOMPETENZEN</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">LITHO</a></li>
<li><a href="#nogo">DRUCK</a></li>
<li><a href="#nogo">KATALOGMANAGEMENT</a></li>
<li><a href="#nogo">KREATION</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>REFERENZEN</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">AKTUELL</a></li>
<li><a href="#nogo">KUNDEN</a></li>
<li><a href="#nogo">PARTNER</a></li>
<li><a href="#nogo">MEINUNGEN</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b> SERVICE</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">DOWNLOADS</a></li>
<li><a href="#nogo">DATENUPLOAD</a></li>
<li><a href="#nogo">MEDIAPOOL</a></li>
<li><a href="#nogo">DUON</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>KONTAKT</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo">ANSPRECHPARTNER</a></li>
<li><a href="#nogo">ANFRAGE</a></li>
<li><a href="#nogo">ANFAHRT</a></li>
<li><a href="#nogo">IMPRESSUM</a></li>
</ul>
</li>
</ul>
</div>
<h3> </h3>
<div class="pro_line4"></div>
<div class="pro_line5"></div>
<span class="pro_line5"></span>
<div class="container">
<div class="container" id="header">
<div class="container" id="logoblock"></div>
</div>
<div class="container" id="news"><span class="grauline">ÜBERSCHRIFT EINS</span></div>
<div class="container" id="hauptbild"></div>
<div class="container" id="inhalt">
<p class="blauline"> HEADLINE NUMMER EINS – FERTIG</p>
<p class="fliesstext">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
<p class="fliesstext"> Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem </p>
<p class="fliesstext"> </p>
<p class="fliesstext">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
<p class="fliesstext"> Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem</p>
</div>
<div class="container" id="social"></div>
<div class="container" id="footer">Impressum </div>
</div>
</script>
</body>
</html>
|
|
|
|
|
|
|
|
Ähnliche Themen |
Dreamweaver CS3 - Horizontales Menu (SpryAssets) Hintergrund
wo krieg ich ie7
wie krieg ich das hin?
website - mein krieg mitm DIV!
splash screen, wie krieg ich transparenz?
Wappen vektorisieren - Ich krieg noch nen Fön
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|