Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag24.06.2010 um 21:53 (UTC)    
Titel: CSS: Herausforderung für Profis (erbitte Hilfe)

Hallo liebe Freunde vom HPBK.

Wir brauchen heute eure Hilfe, wer von euch netten Profis kann uns helfen?
Wir möchten unsere Page per CSS designt haben aber können es nicht.

Also fangen wir mal an:

So sollte die Page im Idealfall aussehen:
http://img.webme.com/pic/s/softair-hessen/page.jpg

Hier ein paar Detail Erklärungen dazu:
http://img.webme.com/pic/s/softair-hessen/page1.jpg

So, ich hab bischen Vorarbeit gemacht und bitte einen von euch Profis mir den Rest zu coden, denn ich hab keinen blassen Schimmer.

Die Homepagebestandteile

Der Banner:
http://img.webme.com/pic/s/softair-hessen/bannerbig.jpg

Der Background:
http://img.webme.com/pic/s/softair-hessen/kugeln.jpg
Dieser sollte bitte fest sein und wenn ein User runterscroolt, soll der mitgehen bzw, man sollte immer das selbe vom Banner sehn, so wie es aktuell auch ist.

Der Favikon (falls nötig)
http://img.webme.com/pic/s/softair-hessen/favicon.jpeg

Hier ist der Code für das Cool Menü

Code:
<style type="text/css">
<!--
/* Coolmenuegenerator by www.coolplace.cc */
/* keine Auflistungspunkte vor Navi-Links */
   ul, li {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
   }

/* Abstand zwischen Schrift zum Rand */
   li a {
      padding-right: 20px;
      padding-top: 5px;
      font-family: Verdana, sans-serif;
      font-size: 14px;
   }

/* Coolmenue positionieren*/
   div.menu {
      z-index: 300;
      
      /*Wenn man das Coolmenue frei positionieren moechte, die folgenden "/*" und "* /" entfernen. Dann die Werte bei "top" und "left" anpassen.*/
      
      /*position:absolute;
      top:100px;
      left:200px;*/
   }

/* Aussehen der Menuepunkte einstellen */
   .menu a {
      border: none;
      background-color: #FFFFFF;
      background-image: url(http://img.webme.com/pic/s/softair-hessen/button.jpg);
      text-decoration: none;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
      margin: 0px;
      display: block;
      height: 33px;
      color: #FFFFFF;
   }

/* Aussehen der Menuepunkte beim Hover Effekt */
   .menu a:hover {
      background-color: #FFFFFF;
      background-image: url(http://img.webme.com/pic/s/softair-hessen/hover1.gif);
      color: #FFFFFF;
   }

/* Breite der Menuepunkte einstellen */
   .menu li {
      width: 180px;
      float: left;
      overflow:hidden;
   }

   .submenue {
      font-size: 14px;
      display: none;
      width: 180px;
      float: left;
   }

   .submenue a {
      font-weight: bold;
      padding-top: 5px;
      cursor: pointer;
       color: #FFFFFF;
       background-color: #FFFFFF;
      background-image: url(http://img.webme.com/pic/s/softair-hessen/button.jpg);
   }

   .submenue a:hover {
   color: #FFFFFF;
   background-color: #FFFFFF;
    background-image: url(http://img.webme.com/pic/s/softair-hessen/hover2.gif);
   }
//-->
</style>
<script type="text/javascript">
<!--
function cool(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function coolout(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="javascript:void(0);" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">Home Area</a>
<ul class="submenue" id="submenu0" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">
    <li><a target="_self" href="http://softair-hessen.de.tl/Startseite.htm">Startseite</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Registrierung.htm">Registrierung</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">Member Area</a>
<ul class="submenue" id="submenu1" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">
    <li><a target="_self" href="http://softair-hessen.de.tl/Forum.htm">Forum</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Galerie/index.htm">Galerie</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Videos.htm">Videos</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Membermap.htm">Membermap</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Free-SMS-senden.htm">Free SMS senden</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">Info Area</a>
<ul class="submenue" id="submenu2" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">
    <li><a target="_self" href="http://softair-hessen.de.tl/Was-ist-Softair-f-.htm">Was ist Softair?</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Softair-Lexikon.htm">Softair Lexikon</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Newsletter.htm">Newsletter</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Werbung-ausblenden.htm">Werbung ausblenden</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu3');" onmouseout="coolout('submenu3');">Kontakt Area</a>
<ul class="submenue" id="submenu3" onmouseover="cool('submenu3');" onmouseout="coolout('submenu3');">
    <li><a target="_self" href="http://softair-hessen.de.tl/Umfragen.htm">Umfragen</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Kontakt.htm">Kontakt</a></li>
</ul></li>
</div>


Das Cool Menü müsste dann noch jeweils auf die weisen Markierungen im Banner plaziert werden. (keine Ahnung wie uns wo)
Und die Schrift auf den Buttons sollte Arial Black, etwas größer und mittig sein damit es besser lesbar ist.


So, ich hoffe, ich habe alles richtig und verständlich erklärt.

Ich bitte im Namen aller Softair´ler uns zu helfen.

Wir werden euch unendlich Dankbar sein.


MFG
RK1982
Beitrag15.08.2010 um 10:16 (UTC)    
Titel:

Gibt es denn wirklich niemanden der uns helfen kann oder will???
Beitrag15.08.2010 um 10:39 (UTC)    
Titel:

Hallo,

ich hab mal was probiert, aber deine Buttons vom Coolmenü sind eine falsche größe,
und ich konnte die einzelnen Coolmenübuttons nicht verschieben,

Iceblue-Design
Zitat:
<style typ= "text/css">
<!--

/* Nullformatierung für alle Browser */
*{margin:0px; padding:0px;}

/* Hintergrund hinter Design */
body {
background-color: #5EA59B;
background-image: url(http://img.webme.com/pic/s/softair-hessen/kugeln.jpg);
background-repeat: repeat-x;
background-attachment: fixed; }

/* Werbung über Design mittig */
table[height="102"] { margin: auto; }

/* Das Design mittig - zentriert ausrichten */
table.edit_main_table { margin: auto; }

/* Design kürzen (kein scrollen des Designs bei kurzen Seiten) */
td.edit_main_tr {
height: 50% !important; }

/* Schriftfarbe + Größe Baukasten-Extras */
td {
color: #000000;
font-size: 14px;
text-align: left;
font-family: arial,verdana; }

/* Schriftfarbe und Größe Seiteninhalt */
DIV {
color: #000000;
font-size: 14px;
text-align: left;
font-family: arial,verdana; }


/* Header oben */
td.edit_header_full
{background-image:url(http://img.webme.com/pic/s/softair-hessen/derbanner.jpg);
background-color:#000000;
width: 100px;
height: 158px;
border: 0px solid #c0c0c0;}

/* Titel im Header entfernen */
td.headline {visibility: hidden;}

/* Titel über Navigation */
td.nav_heading {
color: #FFFFFF;
font-size: 14px;
font-family: arial,verdana;
text-align: center;
height: 35px;
background-color: #000000;
background-image: url(http://theme.webme.com/designs/butterfly/images/headline_bg.gif);
border: 1px solid #000000; }

/* Navi Buttons */
td.nav {
background-color: #343434;
background-image: url();
border: 1px solid #000000; }

/* Hover Navi-Button */
td.nav:hover {
background-color: #xxxxxx;
background-image: url(http://img.webme.com/pic/i/iceblue-test/animiert.gif);
border: 1px solid #000000; }

/* Textlinks in Navigation */
td.nav a {
color: #FFFFFF;
font-size: 14px;
font-family: arial,verdana;
text-decoration: none;
text-align: left; }

/* Hover Textlink Navigation */
td.nav a:hover{
color: #FFFFFF;}

/* aktuell besuchte Seite */
tr.checked_menu td {
background-color: #6f8ac4;
background-image: url(); }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display: none;}

/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color: ;
background-image: url();
border: 0px solid #000000; }

/* Balken über Textfeld */
td.edit_content_top {
height: 35px;
background-color: #000000;
background-image: url(http://theme.webme.com/designs/butterfly/images/headline_bg.gif);
border: 1px solid #000000; }

/* Seitentitel über Textfeld */
td.headline2 {
color: #FFFFFF;
font-size: 12px;
font-family: arial,verdana;
text-align: left; }

/* Textfeld */
td.edit_content {
padding-top: 15px;
padding-bottom: 15px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #000000; }

/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
background-color: #FFFFFF;
background-image: url(); }

/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
background-color: #FFFFFF;
background-image: url(); }

/* Erste Balken unter Textfeld */
td.edit_content_bottom {
height: 35px;
background-color: #000000;
background-image: url(http://theme.webme.com/designs/butterfly/images/headline_bg.gif);
border: 1px solid #000000; }

/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-color: ;
background-image: url();
border: 0px solid #000000; }

/* Counter / Besucherzähler */
td.edit_content_bottom2_counter {
font-family: arial,verdana;
font-size: 12px;
background-color: #c9c9c9;
border: 1px solid #000000; }

/* große Feld unter Textfeld */
td.edit_rechts_cbg {
height: 50px;
background-color: ;
background-image: url();
border: 0px solid #000000; }

/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}

/* Titel über rechter Box */
td.sidebar_heading {
color: #FFFFFF;
font-size: 14px;
font-family: arial,verdana ;
text-align: center;
height: 35px;
background-color: #000000;
background-image: url(http://theme.webme.com/designs/butterfly/images/headline_bg.gif);
border: 1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #000080;
font-size: 14px;
font-family: arial,verdana;
text-align: center;
background-color: #F2F2F2;
background-image: url();
border: 1px solid #000000; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer {display: none; }

/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
background-color: ;
background-image: url();
border: 0px solid #000000; }


/* Coolmenuegenerator by www.coolplace.cc */
/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px;
font-family: Verdana, sans-serif;
font-size: 14px;
}

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 250px;
left: 320px;
width:850px; }

/* Aussehen der Menuepunkte einstellen */
.menu a {
border: none;
background-color: #FFFFFF;
background-image: url(http://img.webme.com/pic/s/softair-hessen/button.jpg);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 33px;
color: #FFFFFF;
}

/* Aussehen der Menuepunkte beim Hover Effekt */
.menu a:hover {
background-color: #FFFFFF;
background-image: url(http://img.webme.com/pic/s/softair-hessen/hover1.gif);
color: #FFFFFF;
}

/* Breite der Menuepunkte einstellen */
.menu li {
width: 180px;
float: left;
overflow:hidden;
}

.submenue {
font-size: 14px;
display: none;
width: 180px;
float: left;
}

.submenue a {
font-weight: bold;
padding-top: 5px;
cursor: pointer;
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(http://img.webme.com/pic/s/softair-hessen/button.jpg);
}

.submenue a:hover {
color: #FFFFFF;
background-color: #FFFFFF;
background-image: url(http://img.webme.com/pic/s/softair-hessen/hover2.gif);
}


-->
</style>

<script type="text/javascript">
<!--
function cool(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function coolout(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="javascript:void(0);" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">Home Area</a>
<ul class="submenue" id="submenu0" onmouseover="cool('submenu0');" onmouseout="coolout('submenu0');">
<li><a target="_self" href="http://softair-hessen.de.tl/Startseite.htm">Startseite</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Registrierung.htm">Registrierung</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">Member Area</a>
<ul class="submenue" id="submenu1" onmouseover="cool('submenu1');" onmouseout="coolout('submenu1');">
<li><a target="_self" href="http://softair-hessen.de.tl/Forum.htm">Forum</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Galerie/index.htm">Galerie</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Videos.htm">Videos</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Membermap.htm">Membermap</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Free-SMS-senden.htm">Free SMS senden</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">Info Area</a>
<ul class="submenue" id="submenu2" onmouseover="cool('submenu2');" onmouseout="coolout('submenu2');">
<li><a target="_self" href="http://softair-hessen.de.tl/Was-ist-Softair-f-.htm">Was ist Softair?</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Softair-Lexikon.htm">Softair Lexikon</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Newsletter.htm">Newsletter</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Werbung-ausblenden.htm">Werbung ausblenden</a></li>
</ul></li>
<li><a href="javascript:void(0);" onmouseover="cool('submenu3');" onmouseout="coolout('submenu3');">Kontakt Area</a>
<ul class="submenue" id="submenu3" onmouseover="cool('submenu3');" onmouseout="coolout('submenu3');">
<li><a target="_self" href="http://softair-hessen.de.tl/Umfragen.htm">Umfragen</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a target="_self" href="http://softair-hessen.de.tl/Kontakt.htm">Kontakt</a></li>
</ul></li>
</div>




MFG
______________
Lala Dum Dum - euch grüßt Sam Smile


Zuletzt bearbeitet von samnowi am 15.08.2010, 12:16, insgesamt 2-mal bearbeitet
Beitrag22.08.2010 um 20:24 (UTC)    
Titel:

Erstmal Danke Schön, dass sich mal einer die Mühe macht.
Vielen Dank!!!

Ich habe das mal probiert und folgende Fehler traten auf:

-Es wurde nicht der neue Banner übernommen
-Das Cool Menü wurde nicht in den Banner integriert (wie du schon sagtest)
-Links ist noch die andere Navileiste zu sehen, diese solte eigentlich dann weg


Danke schon mal.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de