Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag20.11.2009 um 12:52 (UTC)    
Titel: CSS Design Coder

Hallo,
Könntet ihr aus dieser PSD Datei ein Design Coden?
http://rapidshare.com/files/309247632/Lockerz.psd.html
Hier ist noch eine Bilddatei BMP Format.
http://img265.imageshack.us/img265/4761/lockerzo.png
Thx schonmal im vorraus.

Falls die PSD Datei nicht geht tut es mir leid, da ich Adobe Illustrator benutzt habe und es dann exportiert habe.
Beitrag20.11.2009 um 12:57 (UTC)    
Titel:

Zitat:
Hallo,
Könntet ihr aus dieser PSD Datei ein Design Coden?
http://rapidshare.com/files/309247632/Lockerz.psd.html
Hier ist noch eine Bilddatei BMP Format.
http://img265.imageshack.us/img265/4761/lockerzo.png
Thx schonmal im vorraus.


Hmm mit der grafik im BMP format kann ich was anfangen , werd mal etwas rumbasteln
Beitrag20.11.2009 um 13:24 (UTC)    
Titel:

Css Design only

Text über dem Design

Code:
<div id="Designbild"> </div>
<Div id="nav"><style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 390px;
left: 50%;
margin-left:-405px;
width:905px;
}

.menu li
{
width: 130px;
float: left;
}

.menu a
{
border: 0px solid #000000;
background-color: transparent;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #000000;
}

.menu a:hover
{
background-color: transparent;
background-image: url(URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 130px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
text-decoration: underline; 
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #0000FF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(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="LINK1"> TITEL1</a> </li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> TITEL2</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.4">Titel</a></li>
<li><a href="UNTERLINK2.5">Titel</a></li>
<li><a href="UNTERLINK2.6">Titel</a></li>
<li><a href="UNTERLINK2.7">Titel</a></li>
<li><a href="UNTERLINK2.8">Titel</a></li>
<li><a href="UNTERLINK2.9">Titel</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> TITEL3</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="UNTERLINK3.2">Titel</a></li>
<li><a href="UNTERLINK3.3">Titel</a></li>
<li><a href="UNTERLINK3.4">Titel</a></li>
<li> </li>
</ul>
</li>
<li><a href="LINK4"> TITEL4</a></li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
<ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
<li><a href="LINK5.1">Titel</a></li>
<li><a href="LINK5.2">Titel</a></li>
</ul>
</li>
</div>


CSS Code ohne Style Tags

Code:
td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px; }

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

/* Hintergrund */
body {
font-family:courier new;
color:#000000;
font-size:12px;
background-color: #C0C0C0;
background-image: url(); }
a{color:#B2CCFF; font-size: 12px; text-decoration: none;}
a:hover {color: #99B2B2; font-size: 12px; text-decoration: none;}



/* Designbild / Breite und Höhe vom Bild einfügen */
#Designbild {
position:absolute;
top: 100px;
left:50%;
margin-left:-490px;
width:950px;
height:1000px;
background-image:url(http://img.webme.com/pic/d/designsandmore/test3.png);}

/* Das Textfeld */
#content {
position: absolute;
left: 50%;
top: 530px;
margin-left:-330px;
width: 580px;
height:500px;
overflow:auto;}
color: #000000;
font-size:9px;
font-family:courier new;
text-align:left;
background-color:;
background-image:url();
border: 0px solid #FFFFFF;
z-index:1;}

/* Linkfarben im Textfeld content */
#content a{
color:#000000;}


/* Feld Navigation */
#nav_container {display:none;
position: absolute;
left:50%;
top:470px;
margin-left:240px;
border:0px solid #FFFFFF;
z-index:2;}


/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:1px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 140px;
font-family:courier new;
font-size:14px;font-weight:bold;
text-decoration: none;
text-align: center;
padding-left:1px;
color:#000000;
background-color:;
background-image:url();}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color:CCE5E5#;
font-size:14px;text-decoration: underline;
font-weight:bold;
background-color:C40000#;
background-image:url();
border: px solid #000000;}

/* rechte Box */
#sidebar_container {display:none;
position: absolute;
left: 50%;
top:810px;
margin-left:200px;
width: 214px;
height: 250px;
color: #C6BA8A;
font-size: 10px;
font-family: arial;
text-align: center;
overflow: auto;
border: 0px solid #FFFFFF;
z-index:3;}

/* Felder die wir nicht benötigen */
h1#header {display:none;}
h2#title {display:none;}
#sidebar_heading{display:none;}
#counter{display:none;}
#nav_heading{display:none;}
Beitrag20.11.2009 um 13:45 (UTC)    
Titel: THX

Danke,
Der hintergrund sollte weiß sein.
jedoch ist das Bild ein wenig verschwommen.
Könntest du das mit den Titel etwas weiter runter machen?
Und könntest du diesen Code noch über das mit den Titel machen.

Code:
<!-- End Code dw-Formgenerator -->
<p><style type="text/css">
.font-big {
 font-family: Verdana, sans-serif;
 font-size:16px; font-weight:bold;
 color:#000000;
}
.font-small {
 font-family: Verdana, sans-serif;
 font-size:10px; font-weight:normal;
 color:#000000;
}
.table {
 background-color:transparent;
 width:90%;
}
.table2 {
 background-color:transparent;
 width:100%;
}
.head {
 background-color:transparent;
}
.main {
 background-color:transparent;
 font-family: Verdana, sans-serif;
 font-size:12px; font-weight:normal;
 color:#000000;
}
.foot {
 background-color:transparent;
}
.align {
 text-align:left;
}
.textarea {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 border : 1px solid #808080;
}
.input {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 border : 1px solid #808080;
 font-size: 12px;
}
.select {
 background-color:#FFFFFF;
 color:#000000;
 font-family : Verdana, Helvetica, sans-serif;
 font-size: 12px;
}
.button {
 width : 130px;
}
</style></p>
<!-- Start Code dw-Formgenerator -->  <script type="text/javascript">
var tv=-1;
window.onLoad=page_tv();
function VerifyEmailAddress(EmailAddress) {
 if (window.RegExp) {
  var reg1str = "(@.*@)|(\\.\\.)|(@\\.)|(\\.@)|(^\\.)";
  var reg2str = "^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\\.([a-zA-Z]{2,4}|[0-9]{1,4})(\\]?)$";
  var reg1 = new RegExp(reg1str);
  var reg2 = new RegExp(reg2str);
  if (!reg1.test(EmailAddress) && reg2.test(EmailAddress)) {
   return true
  }else {
   return false
  }
 }else {
  if (EmailAddress.indexOf("@") >= 0) {
   return true
  }else {
   return false
  }
 }
}
function page_tv() {
 tv++;
 window.setTimeout('page_tv()', 1000);
}
function check_form(f,g) {
 if (f.elements['absender_mail'].value=='') {
  alert("Bitte alle Pflichtfelder ausf\u00FCllen! \n(Ihre E-Mail Adresse)");
  f.elements['absender_mail'].focus();
  return false;
 }else {
  if (!VerifyEmailAddress(f.elements['absender_mail'].value)) {
  alert("Bitte geben Sie eine g\u00FCltige E-Mail Adresse ein! \n(Ihre E-Mail Adresse)");
  f.elements['absender_mail'].focus();
   return false;
  }
 }
 if (navigator.appName=="Microsoft Internet Explorer") {
  for (i=0;i<f.length;i++) {
   var e=f.elements[i];
   if (e.type == 'submit' || e.type == 'reset')
    e.disabled=true;
  }
 }
 if (f.elements['page_tv']) {
  f.elements['page_tv'].value = tv;
 }
 return true;
}
</script>
<form name="dwmailer" action="http://www.dw-formmailer.de/cgi-bin/dwmailer/dwmailer.pl" enctype="multipart/form-data" method="post" onsubmit="return check_form(this);">
    <input type="hidden" name="page_tv" value="" /> <input type="hidden" name="empfaenger_mail" value="bG9ja2VyendlbGNvbWVAd2ViLmRl" /> <input type="hidden" name="language" value="de" /> <input type="hidden" name="page_background_color" value="transparent" /> <input type="hidden" name="page_font_color" value="#000000" />
    <table cellspacing="1" cellpadding="3" align="center" border="0" style="width: 24px; height: 87px;" class="table">
        <tbody>
            <tr>
                <td width="30%" class="main">
                <div class="align">Ihre E-Mail Adresse*</div>
                </td>
                <td class="main"><input type="text" class="input" name="absender_mail" size="20" /></td>
            </tr>
            <tr>
                <td width="100%" height="25" align="center" class="foot" colspan="2"><input type="submit" class="button" value="Abschicken" />&nbsp;&nbsp;</td>
            </tr>
        </tbody>
    </table>
</form>
<!-- End Code dw-Formgenerator -->
Mr. Green


Zuletzt bearbeitet von welcomelockerz am 20.11.2009, 14:45, insgesamt einmal bearbeitet
Beitrag20.11.2009 um 13:57 (UTC)    
Titel: Hochladen

So ich lade mal nochmal die Bilddatei hoch (dieses mal bessere Qualität). Musst PNG nehmen. BMP war 68 mb groß. Shocked

EDIT// http://img21.imageshack.us/img21/7229/lockerzh.png


Zuletzt bearbeitet von welcomelockerz am 20.11.2009, 14:59, insgesamt einmal bearbeitet
Beitrag20.11.2009 um 14:05 (UTC)    
Titel:

dein code für das Kontaktformular musst du bei eigene Seiten editieren einfügen aber vorher auf Quelltext klicken code einfügen und speichern.




Code:
<div id="Designbild"> </div>
<Div id="nav"><style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 400px;
left: 50%;
margin-left:-405px;
width:905px;
}

.menu li
{
width: 130px;
float: left;
}

.menu a
{
border: 0px solid #000000;
background-color: transparent;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #000000;
}

.menu a:hover
{
background-color: transparent;
background-image: url(URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 130px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
text-decoration: underline; 
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #0000FF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(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="LINK1"> TITEL1</a> </li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);"> TITEL2</a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.3">Titel</a></li>
<li><a href="UNTERLINK2.4">Titel</a></li>
<li><a href="UNTERLINK2.5">Titel</a></li>
<li><a href="UNTERLINK2.6">Titel</a></li>
<li><a href="UNTERLINK2.7">Titel</a></li>
<li><a href="UNTERLINK2.8">Titel</a></li>
<li><a href="UNTERLINK2.9">Titel</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="javascript:void(0);"> TITEL3</a>
<ul onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" id="smenu3">
<li><a href="UNTERLINK3.2">Titel</a></li>
<li><a href="UNTERLINK3.3">Titel</a></li>
<li><a href="UNTERLINK3.4">Titel</a></li>
<li> </li>
</ul>
</li>
<li><a href="LINK4"> TITEL4</a></li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="javascript:void(0);"> TITEL5</a>
<ul onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" id="smenu5">
<li><a href="LINK5.1">Titel</a></li>
<li><a href="LINK5.2">Titel</a></li>
</ul>
</li>
</div>






Code:
td[height="102"] {
position:absolute;
left:50%;
margin-left:-376px; }

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

/* Hintergrund */
body {
font-family:courier new;
color:#000000;
font-size:12px;
background-color: #ffffff;
background-image: url(); }
a{color:#B2CCFF; font-size: 12px; text-decoration: none;}
a:hover {color: #99B2B2; font-size: 12px; text-decoration: none;}



/* Designbild / Breite und Höhe vom Bild einfügen */
#Designbild {
position:absolute;
top: 100px;
left:50%;
margin-left:-490px;
width:950px;
height:1000px;
background-image:url([color=red]http://img.webme.com/pic/d/designsandmore/test3.png[/color]);}  [color=red]hier kannst du dann deine eigene Bild url einfügen. solltest aber vorher deine auf dem Bild geschriebene Navi entfernen[/color]

/* Das Textfeld */
#content {
position: absolute;
left: 50%;
top: 530px;
margin-left:-330px;
width: 580px;
height:500px;
overflow:auto;}
color: #000000;
font-size:9px;
font-family:courier new;
text-align:left;
background-color:;
background-image:url();
border: 0px solid #FFFFFF;
z-index:1;}

/* Linkfarben im Textfeld content */
#content a{
color:#000000;}


/* Feld Navigation */
#nav_container {display:none;
position: absolute;
left:50%;
top:470px;
margin-left:240px;
border:0px solid #FFFFFF;
z-index:2;}


/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:1px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 140px;
font-family:courier new;
font-size:14px;font-weight:bold;
text-decoration: none;
text-align: center;
padding-left:1px;
color:#000000;
background-color:;
background-image:url();}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color:CCE5E5#;
font-size:14px;text-decoration: underline;
font-weight:bold;
background-color:C40000#;
background-image:url();
border: px solid #000000;}

/* rechte Box */
#sidebar_container {display:none;
position: absolute;
left: 50%;
top:810px;
margin-left:200px;
width: 214px;
height: 250px;
color: #C6BA8A;
font-size: 10px;
font-family: arial;
text-align: center;
overflow: auto;
border: 0px solid #FFFFFF;
z-index:3;}

/* Felder die wir nicht benötigen */
h1#header {display:none;}
h2#title {display:none;}
#sidebar_heading{display:none;}
#counter{display:none;}
#nav_heading{display:none;}
Beiträge der letzten Zeit anzeigen:   


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