Autor |
Nachricht |
-

welcomelockerz
|
|
↑
|
|
 |
-

designsandmore
|
20.11.2009 um 12:57 (UTC) Titel: |
|
|
Hmm mit der grafik im BMP format kann ich was anfangen , werd mal etwas rumbasteln |
|
↑
|
|
 |
-

designsandmore
|
20.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;}
|
|
↑
|
|
 |
-

welcomelockerz
|
20.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" /> </td>
</tr>
</tbody>
</table>
</form>
<!-- End Code dw-Formgenerator --> 
Zuletzt bearbeitet von welcomelockerz am 20.11.2009, 14:45, insgesamt einmal bearbeitet
|
|
↑
|
|
 |
-

welcomelockerz
|
20.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ß.
EDIT// http://img21.imageshack.us/img21/7229/lockerzh.png
Zuletzt bearbeitet von welcomelockerz am 20.11.2009, 14:59, insgesamt einmal bearbeitet
|
|
↑
|
|
 |
-

designsandmore
|
20.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;} |
|
↑
|
|
 |
|