HTML <DIV> Container Aufbau

gstarr · 21. Januar 2011

Öhm wenn du auf die seite gehst dun Rechtsklick machst und dann Quelltext, dann siehst du sofort alles, habe noch alles in einer HTML.

mustermen · 21. Januar 2011

Cool danke, wusste gar nicht das es sowas gibt!!!!
Ich kontrollier dann mal dein Code. Bis gleich!

Ergänzung (21. Januar 2011)

Fehler im CSS:

1)

HTML:

#partner ul li {
	list-style: none;
	height. 90px; 	(Height wird mit ":" beendet und nicht mit einem "."!)
}

2)

HTML:

#menu ul li:hover ul, #menu ul li:aktive ul { (:aktive wird mit c geschrieben :active! Lösch das nach dem Komma also #menu ul li:aktive ul da raus !)
display: block;
}

3)

HTML:

#menu ul li .aktive_menu {
background: #f00;
}
#menu ul li .subnavigation li .aktive_submenu {
color: #f00;
}
#menu ul li:hover ul, #menu ul li:aktive ul {
display: block;
} (diese 3 regeln kannst du alle löschen!)

entferne nun im menu alle Klassen die ich hier nenne im html & css:

1).aktive_menu
2).aktive_submenu
<li><a href="#" class=".aktive_menu">Index</a></li> (.aktive_menu lösch das überall raus!)
<li><a href="#" class=".aktive_submenu">Aktuelle Projekte</a></li> (.aktive_submenu lösch das überall raus!)

Das war das CSS nun kommen die 25 HTMl Fehler! Geh auf
http://validator.w3.org/
und gib dort deine url an
http://www.gxpc.de/test.html#
und klick auf check dort werden dir alle Fehler aufgelistet, in welcher Zeile sie sind und wie man sie ausbessert!

Vergiss nicht noch ein paar meta tags zu vergeben damit du ein besseres Ranking bei Google bekommst!

<meta http-equiv="language" content="de" /> Das es eine deutschsprachige webseite ist!
<meta name="keywords" content="gxpc, modder, cases" /> Hier kommen die Keywords rein also schreib alles rein wonach kunden suchen könnten um zu deiner webseite geleitet zu werden. Denk daran je weniger wörter dort stehen desto höher werden diese auch gewertet!
<meta name="robots" content="INDEX, FOLLOW" /> Google soll der index Seite folgen und in den unterseiten weiter gucken
<meta name="description" content="Die webseite für alle modder!" /> Hier steht der Text der bei google bei gefunden webseiten angezeigt wird!

Vergiss auch nicht ein favicon zu generieren!

Guck nochmal im Titel deiner webseite ob dort alles steht schreib da bloß nicht willkommen auf meiner seite, sondern eher gxpc der modder Spezialist!

Wenn das alles fertig ist nimm dein CSS und mach es in eine eigene Datei und google nach css kompremieren da gibt es ein paar webseiten die dir den CSS Code kleiner machen damit er weniger speicherplatz in anspruch nimmt, Das ist aber nur optional dein CSS ist wirklich klein! Falls du es trotzdem machen willst vergiss nicht vorher eine Sicherungs kopie deines CSS zu machen und lösche noch alle Kommentare raus den nach der kompresion ist alles unübersichtlich!

Sag bescheid wen du fertig bist will es unbedingt sehen!

Im CSS:
#include{
min-height: 622px;
}
Die min-height ist ganz wichtig!

gstarr · 21. Januar 2011

Ok, ich mache mich dann nun an die Arbeit! Danke

mustermen · 22. Januar 2011

Hey ich habe es geschafft, dass wen man auf die Subnavigation geht der Oberpunkt trotzdem rot bleibt!

Hier das musst du im CSS einfach reinkopieren!

HTML:

#menu ul li:hover a {
	background: #F00;
}

Man so ein kleiner Code schnipsle macht den Unterschied! Und ich saß da ne Stunde dran bis es geklappt hat!

Und was du unbedingt noch machen solltest ist im Include ein paar padding werte zu vergeben! Damit der Text nicht so an den Kanten kleppt! Wenn du ein Padding wert vergibst, dann musst du ach die height verändern, weil
border+padding+height= tatsächliche größe!
Also wen du den Abstand nach oben 10px vergibst (padding-top: 10px; )
, dann muss min-height von 622px auf 612px korrigiert werden.
Genau das gleiche gilt auch für die Seiten!

gstarr · 24. Januar 2011

Hi, endlich bin ich wieder online, mein Rechner gings über Wochenende nicht, musste erstmal formatieren^^

Ok habe dem #Include folgendes verpasst:

HTML:

#include{padding: 50px;width:640px;height:auto;min-height: 522px;background-color:#f9f9f9;background-image:url(img/bg_m.gif);background-repeat:no-repeat;background-position:0 0;overflow:visible;margin:1px 0 0 13.5px;}

und der Subnavi noch nen Cursor

HTML:

#menu ul li .subnavigation li{cursor:pointer;color:red;padding-right:5px}

Der Text kommt in ein <p> Tag

HTML:

p {text-align: justify;line-height:15px;margin:0 0 1em;}

Allerdings fehlt mir noch eine Klasse um den Abstand zwischen den <p> 's zu machen.

Habe schon so versucht

HTML:

p .abstand {padding:5;margin 5;line-height:5}

<p>text</p>
<p class="abstand"></p>
<p>text</p>

.. klappt iwie nicht.

*EDIT*

Ok, etwas rumgespielt und alles hinbekommen, das es gut aussieht =)

HTML:

p {text-align: justify;line-height:17px;margin:0 0 1.3em;}
h1{font-size:11pt;font-family:sans-serif;font-weight:bold;padding-bottom:25px;color:red}
h2{font-size:8pt;font-family:sans-serif;font-weight:lighter;padding-top:75px;color:#b5b5b5}

<h1>Überschrift</h1>
<p>Text</p>
<p>Text2</p>
<h2>Definition von Abkürzungen ganz unten</h2>

Ich frag mich ob man padding-top:75px; von h2 auch anders regeln kann? das zb. der Text immer unten steht, mit bottom 15px o.Ä.

Gruß =)

mustermen · 24. Januar 2011

Moin, ok um das mit h2 hinzubekommen musst du im CSS folgendes hinzufügen:

HTML:

#include{
	position: relative;
}
h2{
	position: absolute;
        bottom: 25px; /*Das ist der untere Abstand!*/
}

kannst du der h2 bitte eine andere color zuweisen ist echt schwer lesbar!

Achtung es kann sein das dabei die Subnavigation nicht mehr funktioniert!

Um das zu ändern füge im CSS das hier hinzu:

HTML:

#menu{
	z-index: 1;
	position: relative;
}

Kontrolliere auch den DIV Partner, falls er sich verschoben hat. Versuch mal das hier:

HTML:

#partner{
        z-index: 2;
	position: relative;
}

gstarr · 24. Januar 2011

Ok danke, werde gleich mal ausprobieren!

Was ich aktuell nicht hinbekomme ist der Kontaktformular, will einfach nicht...

www.gxpc.de?g=contact

HTML:

<style type="text/css">
#include form {width: 402px}
#include form label {width:150;}
#include form input {width:250;align:left;border: 1px dotted #cc0000;margin:0 0 1em;}
#include form textarea {width:250;border: 1px dotted #cc0000}
#include form select {width:250;align:left;border: 1px dotted #cc0000}
</style>

das habe ich dazu geschrieben, klapp net.

*EDIT*
das mit <h2> bzw ist aktuell <h3> hat wunderbar geklaptt, partner, include und menu sind unter FF und IE i.O.

mustermen · 24. Januar 2011

Ersetze das hier mit den anderen:

HTML:

#include form label {
	background: #F00;
	width: 100px;
	height: 20px;
	display: block;
	line-height: 20px;
	text-align: center;
}
#include form input {
	padding-left: 1px;
	width: 252px;
	height: 20px;
	border: 1px dotted #cc0000;
	margin:0 0 1em;
}
#include form textarea {
	width: 548px;
	border: 1px dotted #cc0000;
}

Lösch das hier komplett raus:

HTML:

<style type="text/css">

fieldset {

    width:640px;  

    padding:10px;  

    border: 0;

    margin: auto;

 }

label {

    width:195px;

    line-height:23px;

    border: 1px dotted #cc0000;

    float:left;

}

input {

    width:100px;

    height:23px;

    border: 1px dotted #cc0000;

    text-align:center;

    float:right;

}

#clear {

    clear:both;

 }

</style>

Und das hier auch

HTML:

#include form {width: 402px}
#include form select {width:250;align:left;border: 1px dotted #cc0000}

und füge das hier noch rein

HTML:

<input style="width:100px;" type="submit" value="Absenden" />

gstarr · 24. Januar 2011

sieht immer noch nicht richtig aus: www.gxpc.de?g=contact

PHP:

<style type="text/css">
#include form label {
	background: #F00;
	width: 100px;
	height: 20px;
	display: block;
	line-height: 20px;
	text-align: center;
}
#include form input {
	padding-left: 1px;
	width: 252px;
	height: 20px;
	border: 1px dotted #cc0000;
	margin:0 0 1em;
}
#include form textarea {
	width: 548px;
	border: 1px dotted #cc0000;
}
</style>
<h1>Kontaktaufnahme</h1>
<?php
error_reporting(E_ALL);
$error = false;
$errors = array();
$receiver = 'info@gxpc.de';
function check_email ($string) {
return preg_match('/^([a-zA-Z0-9_\-])+(\.([a-zA-Z0-9_\-])+)*@((\[(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5]))\]))|((([a-zA-Z0-9])+(([\-])+([a-zA-Z0-9])+)*\.)+([a-zA-Z])+(([\-])+([a-zA-Z0-9])+)*))$/i', $string);
}
function check_onlynumbers ($string) {
return preg_match('/^[0-9,.]{1,}$/', $string);
}
function check_onlyletters ($string) {
return preg_match('/^[a-zA-ZäöüÄÖÜß]{1,}$/', $string);
}
function send_email ($subject, $body, $receiver, $html = 1) {
if ($html != 1) {
$body = str_replace('<br />', "\n", $body);
$body = str_replace('<br>', "\n", $body);
$body = strip_tags($body);
}
$subject = str_replace('\n', '', $subject);
$subject = str_replace('\r', '', $subject);
if ($html) {
$header	= 'MIME-Version: 1.0' . "\n";
$header .= 'Content-type: text/html; charset=UTF-8'."\n";
$header .= 'From: '.$receiver.' <'.$receiver.'>'."\n";
} else {
$header	= 'MIME-Version: 1.0' . "\n";
$header .= 'From: '.$receiver.' <'.$receiver.'>'."\n";
}
if (mail($receiver, $subject, $body, $header)) {
return true;
} else {
return false;
}
}
function array_stripslashes(&$var) {
if(is_string($var)) {
$var = stripslashes($var);
} else {
if(is_array($var))
foreach($var as $key => $value)
array_stripslashes($var[$key]);
}
}
if(get_magic_quotes_gpc()){
array_stripslashes($_GET);
array_stripslashes($_POST);
array_stripslashes($_REQUEST);
array_stripslashes($_COOKIE);
}
if (!empty($_POST)) {
$errors['Vorname'] = null;	if (empty($_POST['Vorname'])) {
$error = true;
$errors['Vorname'] = ' class="error"';	}
$errors['Nachname'] = null;	if (empty($_POST['Nachname'])) {
$error = true;
$errors['Nachname'] = ' class="error"';	}
$errors['Email'] = null;	if (empty($_POST['Email'])) {
$error = true;
$errors['Email'] = ' class="error"';	}
if (!empty($_POST['Email']) && !check_email($_POST['Email'])) {
$error = true;
$errors['Email'] = ' class="error"';	}
$errors['Anliegen'] = null;	if (empty($_POST['Anliegen'])) {
$error = true;
$errors['Anliegen'] = ' class="error"';	}
$errors['Nachricht'] = null;	if (empty($_POST['Nachricht'])) {
$error = true;
$errors['Nachricht'] = ' class="error"';	}
}
$_text_Vorname = (!empty($_POST['Vorname']) ? htmlspecialchars($_POST['Vorname'], ENT_QUOTES, 'UTF-8') : null);
$_text_Nachname = (!empty($_POST['Nachname']) ? htmlspecialchars($_POST['Nachname'], ENT_QUOTES, 'UTF-8') : null);
$_text_Firma = (!empty($_POST['Firma']) ? htmlspecialchars($_POST['Firma'], ENT_QUOTES, 'UTF-8') : null);
$_text_Email = (!empty($_POST['Email']) ? htmlspecialchars($_POST['Email'], ENT_QUOTES, 'UTF-8') : null);
$_select_Anliegen_Information = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Information' ? ' selected="selected"' : null);
$_select_Anliegen_Rechtliches = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Rechtliches' ? ' selected="selected"' : null);
$_select_Anliegen_Sponsoring = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Sponsoring' ? ' selected="selected"' : null);
$_select_Anliegen_Sonstiges = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Sonstiges' ? ' selected="selected"' : null);
$_textarea_Nachricht = (!empty($_POST['Nachricht']) ? htmlspecialchars($_POST['Nachricht'], ENT_QUOTES, 'UTF-8') : null);
?>
<?php
if ($error || empty($_POST)) {?>
<form action="?g=contact" method="post"><fieldset">
<?php if ($error) { ?>
Bitte alle mit * markierten Felder ausfüllen.
<?php } ?>
<label for="Vorname"<?php echo !empty($errors['Vorname']) ? $errors['Vorname'] : null ; ?>>Vorname *</label>
<input tabindex="1" type="text" maxlength="30" id="Vorname" name="Vorname" value="<?php echo $_text_Vorname; ?>" />
<label for="Nachname"<?php echo !empty($errors['Nachname']) ? $errors['Nachname'] : null ; ?>>Nachname *</label>
<input tabindex="2" type="text" maxlength="30" id="Nachname" name="Nachname" value="<?php echo $_text_Nachname; ?>" />
<label for="Firma"<?php echo !empty($errors['Firma']) ? $errors['Firma'] : null ; ?>>Firmenname</label>
<input tabindex="3" type="text" id="Firma" name="Firma" value="<?php echo $_text_Firma; ?>" />
<label for="Email"<?php echo !empty($errors['Email']) ? $errors['Email'] : null ; ?>>e-Mail *</label>
<input tabindex="4" type="text" id="Email" name="Email" value="<?php echo $_text_Email; ?>" />
<label for="Anliegen"<?php echo !empty($errors['Anliegen']) ? $errors['Anliegen'] : null ; ?>>Ihr Anliegen *</label>
<select tabindex="5" id="Anliegen" name="Anliegen">
<option value="Information"<?php echo $_select_Anliegen_Information; ?>>Information</option>
<option value="Rechtliches"<?php echo $_select_Anliegen_Rechtliches; ?>>Rechtliches</option>
<option value="Sponsoring"<?php echo $_select_Anliegen_Sponsoring; ?>>Sponsoring</option>
<option value="Sonstiges"<?php echo $_select_Anliegen_Sonstiges; ?>>Sonstiges</option>
</select> <br style="clear: both;" /><br>
<label for="Nachricht"<?php echo !empty($errors['Nachricht']) ? $errors['Nachricht'] : null ; ?>>Nachricht *</label><textarea tabindex="6" id="Nachricht" name="Nachricht" rows="5" cols="20"><?php echo $_textarea_Nachricht; ?></textarea>
<br style="clear: both;" /><br>
<input style="width:100px;" type="submit" value="Absenden" />
</fieldset>
</form>
<?php
} else {
$body = '';
$body .= 'Vorname: '.htmlspecialchars(!empty($_POST['Vorname']) ? $_POST['Vorname'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Nachname: '.htmlspecialchars(!empty($_POST['Nachname']) ? $_POST['Nachname'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Firma: '.htmlspecialchars(!empty($_POST['Firma']) ? $_POST['Firma'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Email: '.htmlspecialchars(!empty($_POST['Email']) ? $_POST['Email'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Anliegen: '.htmlspecialchars(!empty($_POST['Anliegen']) ? $_POST['Anliegen'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Nachricht:<br>'.htmlspecialchars(!empty($_POST['Nachricht']) ? $_POST['Nachricht'] : '', ENT_QUOTES, 'UTF-8').'<br><br>';
if(send_email('Kontaktaufnahme', $body, $receiver)) {
?>
<meta http-equiv="refresh" content="2; url=?g=contact">
<p>Vielen Dank für Ihre Nachricht.</p>
<?
} else {
?>
<meta http-equiv="refresh" content="3; url=?g=contact">
<p>Das Formular konnte leider nicht abgesendet werden. Bitte versuchen Sie es später noch einmal.</p>
<?
}
}
?>

Das ist der original code, die stylesheet ist noch nicht extern importiert, sondern in dem dokument.

*EDIT*

habe etwas rumgespielt und kamm dabei einiger maßen was brauchbares .. aber halt nicht sauber gearbeitet...

PHP:

<style type="text/css">
#include form label {
	background: #efefef;
	width: 230px;
	height: 20px;
	display: block;
	line-height: 20px;
	text-align: left;
	float:left;
	margin:0 0 1em;
	padding-left:10px;
}
#include form input {
	padding-left: 1px;
	width: 300px;
	height: 20px;
	border: 1px dotted #cc0000;
	margin:0 0 1em;
	float:right;
}
#include form select{
	padding-left: 1px;
	width: 300px;
	height: 20px;
	border: 1px dotted #cc0000;
	margin:0 0 1em;
	float:right;
}
#include form textarea {
	width: 640px;
	border: 1px dotted #cc0000;
}
.error {color:red;width:auto;height:40px;font-weight:bold;}
</style>
<h1>Kontaktaufnahme</h1>
<?php
error_reporting(E_ALL);
$error = false;
$errors = array();
$receiver = 'info@gxpc.de';
function check_email ($string) {
return preg_match('/^([a-zA-Z0-9_\-])+(\.([a-zA-Z0-9_\-])+)*@((\[(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5])))\.(((([0-1])?([0-9])?[0-9])|(2[0-4][0-9])|(2[0-5][0-5]))\]))|((([a-zA-Z0-9])+(([\-])+([a-zA-Z0-9])+)*\.)+([a-zA-Z])+(([\-])+([a-zA-Z0-9])+)*))$/i', $string);
}
function check_onlynumbers ($string) {
return preg_match('/^[0-9,.]{1,}$/', $string);
}
function check_onlyletters ($string) {
return preg_match('/^[a-zA-ZäöüÄÖÜß]{1,}$/', $string);
}
function send_email ($subject, $body, $receiver, $html = 1) {
if ($html != 1) {
$body = str_replace('<br />', "\n", $body);
$body = str_replace('<br>', "\n", $body);
$body = strip_tags($body);
}
$subject = str_replace('\n', '', $subject);
$subject = str_replace('\r', '', $subject);
if ($html) {
$header	= 'MIME-Version: 1.0' . "\n";
$header .= 'Content-type: text/html; charset=UTF-8'."\n";
$header .= 'From: '.$receiver.' <'.$receiver.'>'."\n";
} else {
$header	= 'MIME-Version: 1.0' . "\n";
$header .= 'From: '.$receiver.' <'.$receiver.'>'."\n";
}
if (mail($receiver, $subject, $body, $header)) {
return true;
} else {
return false;
}
}
function array_stripslashes(&$var) {
if(is_string($var)) {
$var = stripslashes($var);
} else {
if(is_array($var))
foreach($var as $key => $value)
array_stripslashes($var[$key]);
}
}
if(get_magic_quotes_gpc()){
array_stripslashes($_GET);
array_stripslashes($_POST);
array_stripslashes($_REQUEST);
array_stripslashes($_COOKIE);
}
if (!empty($_POST)) {
$errors['Vorname'] = null;	if (empty($_POST['Vorname'])) {
$error = true;
$errors['Vorname'] = ' class="error"';	}
$errors['Nachname'] = null;	if (empty($_POST['Nachname'])) {
$error = true;
$errors['Nachname'] = ' class="error"';	}
$errors['Email'] = null;	if (empty($_POST['Email'])) {
$error = true;
$errors['Email'] = ' class="error"';	}
if (!empty($_POST['Email']) && !check_email($_POST['Email'])) {
$error = true;
$errors['Email'] = ' class="error"';	}
$errors['Anliegen'] = null;	if (empty($_POST['Anliegen'])) {
$error = true;
$errors['Anliegen'] = ' class="error"';	}
$errors['Nachricht'] = null;	if (empty($_POST['Nachricht'])) {
$error = true;
$errors['Nachricht'] = ' class="error"';	}
}
$_text_Vorname = (!empty($_POST['Vorname']) ? htmlspecialchars($_POST['Vorname'], ENT_QUOTES, 'UTF-8') : null);
$_text_Nachname = (!empty($_POST['Nachname']) ? htmlspecialchars($_POST['Nachname'], ENT_QUOTES, 'UTF-8') : null);
$_text_Firma = (!empty($_POST['Firma']) ? htmlspecialchars($_POST['Firma'], ENT_QUOTES, 'UTF-8') : null);
$_text_Email = (!empty($_POST['Email']) ? htmlspecialchars($_POST['Email'], ENT_QUOTES, 'UTF-8') : null);
$_select_Anliegen_Information = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Information' ? ' selected="selected"' : null);
$_select_Anliegen_Rechtliches = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Rechtliches' ? ' selected="selected"' : null);
$_select_Anliegen_Sponsoring = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Sponsoring' ? ' selected="selected"' : null);
$_select_Anliegen_Sonstiges = (!empty($_POST['Anliegen']) && $_POST['Anliegen'] == 'Sonstiges' ? ' selected="selected"' : null);
$_textarea_Nachricht = (!empty($_POST['Nachricht']) ? htmlspecialchars($_POST['Nachricht'], ENT_QUOTES, 'UTF-8') : null);
?>
<?php
if ($error || empty($_POST)) {?>
<form action="?g=contact" method="post"><fieldset">
<?php if ($error) { ?>
<div class="error"><font style="color:#333;">Bitte alle mit</font> * <font style="color:#333;">markierten Felder ausfüllen.</font></div>
<?php } ?>
<label for="Vorname"<?php echo !empty($errors['Vorname']) ? $errors['Vorname'] : null ; ?>>Vorname *</label>
<input tabindex="1" type="text" maxlength="30" id="Vorname" name="Vorname" value="<?php echo $_text_Vorname; ?>" />
<label for="Nachname"<?php echo !empty($errors['Nachname']) ? $errors['Nachname'] : null ; ?>>Nachname *</label>
<input tabindex="2" type="text" maxlength="30" id="Nachname" name="Nachname" value="<?php echo $_text_Nachname; ?>" />
<label for="Firma"<?php echo !empty($errors['Firma']) ? $errors['Firma'] : null ; ?>>Firmenname</label>
<input tabindex="3" type="text" id="Firma" name="Firma" value="<?php echo $_text_Firma; ?>" />
<label for="Email"<?php echo !empty($errors['Email']) ? $errors['Email'] : null ; ?>>e-Mail *</label>
<input tabindex="4" type="text" id="Email" name="Email" value="<?php echo $_text_Email; ?>" />
<label for="Anliegen"<?php echo !empty($errors['Anliegen']) ? $errors['Anliegen'] : null ; ?>>Ihr Anliegen</label>
<select tabindex="5" id="Anliegen" name="Anliegen">
<option value="Information"<?php echo $_select_Anliegen_Information; ?>>Information</option>
<option value="Rechtliches"<?php echo $_select_Anliegen_Rechtliches; ?>>Rechtliches</option>
<option value="Sponsoring"<?php echo $_select_Anliegen_Sponsoring; ?>>Sponsoring</option>
<option value="Sonstiges"<?php echo $_select_Anliegen_Sonstiges; ?>>Sonstiges</option>
</select>
<br />
<label for="Nachricht"<?php echo !empty($errors['Nachricht']) ? $errors['Nachricht'] : null ; ?>>Nachricht *</label><textarea tabindex="6" id="Nachricht" name="Nachricht" rows="5" cols="20"><?php echo $_textarea_Nachricht; ?></textarea>
<br />
<input style="width:100px;" type="submit" value="Absenden" />
</fieldset>
</form>
<?php
} else {
$body = '';
$body .= 'Vorname: '.htmlspecialchars(!empty($_POST['Vorname']) ? $_POST['Vorname'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Nachname: '.htmlspecialchars(!empty($_POST['Nachname']) ? $_POST['Nachname'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Firma: '.htmlspecialchars(!empty($_POST['Firma']) ? $_POST['Firma'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Email: '.htmlspecialchars(!empty($_POST['Email']) ? $_POST['Email'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Anliegen: '.htmlspecialchars(!empty($_POST['Anliegen']) ? $_POST['Anliegen'] : '', ENT_QUOTES, 'UTF-8').'<br>';
$body .= 'Nachricht:<br>'.htmlspecialchars(!empty($_POST['Nachricht']) ? $_POST['Nachricht'] : '', ENT_QUOTES, 'UTF-8').'<br><br>';
if(send_email('Kontaktaufnahme', $body, $receiver)) {
?>
<meta http-equiv="refresh" content="2; url=?g=contact">
<div class="error"><font style="color:#333;">Vielen Dank für Ihre Nachricht.</font></div>
<?
} else {
?>
<meta http-equiv="refresh" content="3; url=?g=contact">
<div class="error"><font style="color:#333;">Das Formular konnte leider nicht abgesendet werden. Bitte versuchen Sie es später noch einmal.</font></div>
<?
}
}
?>

schaue es dir an http://www.gxpc.de/?g=contact

*EDIT*
Bin erst morgen um 8:00 Uhr wieder online, falls du Verbesserungsvorschläge hast, her damit =)

Was ich noch machen wollte, auf jeder Seite im #include unten rechts ein Pfeil nach oben, damit er die seite hoch scrollt.

Dieser Anker soll unabhängig vom Inhalt immer da sein.

Hier habe so ein Icon schon erstellt, ist transparent.
http://www.gxpc.de/img/top.png

Danke für die Hilfe!!

mustermen · 24. Januar 2011

Für den Pfeil nach oben, erstmal das CSS

HTML:

.top {
	text-indent: -9999px; /* lässt die schrift verschwinden*/
	overflow: hidden; /*wen man draufklickt sieht man nicht die punkte durch das dokument gehen */
	display: block;
	background: url(img/top.png) no-repeat center center;
	height: 15px;
	width: 15px;
	border: 1px solid #F00;
	position: absolute;
	right: 1px;
	bottom: 1px;
}
.top:hover { /* wenn man auf den pfeil geht bekommt er einen dickeren rahmen*/
	border: 2px solid #F00;
	right: 0px;
	bottom: 0px;
}

Nun kommt der Anker nach oben:

HTML:

<a href="#" class="top">Nach oben</a> <!-- Durch die # wird er andauernd nach oben springen! brauchst also keinen anker mehr platzieren -->

Für die Kontakt Seite mach folgendes:

1. Entferne bei Textarea CSS alles padding dadurch rückt sie nachoben
2. Entferne bei Input CSS das float right dadurch liegen die Felder näher einander und sehen besser aus!
3. Entferne bei Select CSS das float right.

Achtung diese CSS angaben befinden sich in 2 Dokumenten. Entfernst du die CSS nur in der einen Datei, werden sie durch das andere Dokument aber trotzdem beibehalten, du musst also in beiden Dokument diese CSS Regeln entfernen, einmal im PHP und in dem Stylesheet-Dokument!

gstarr · 25. Januar 2011

Guten Morgen =)

Danke, habe alles eingebaut, also bei dem Top-Icon wollte ich so belassen wie oben mit Kontakt und Impressum, also ohne Border, habe erstmal entfernt, sieht denke besser aus, oder was meinst du?

Allerdings ist da ein hacken, wenn du auf z.B. Partner gehst und dann auf den Pfeil klickst, kommst du auf die Index Seite automatisch wieder zurück.

Das Kontaktformular sollte endgültig fertig sein, sieht sehr gut aus, finde ich.

mustermen · 25. Januar 2011

Moin, ok leg diesen Anker ganz oben im Dokument ab, am besten schon nach dem Anfang des

HTML:

<body>
 <a name="top" id="top"></a>

und dem pfeil nach oben gebt du diesen Link

HTML:

<a href="#top">nach oben</a>

und schon bist du fertig. Was ich noch wissen wollte bist du der Typ mit der Kamera im Header?

gstarr · 25. Januar 2011

Huhu, habe das grad anders geregelt =) klappt super

PHP:

<a href="<?php $actions = $_SERVER['QUERY_STRING'];$where = '?'.$actions;echo $where; ?>#" class="top">Nach oben</a>

Hmm, das mit dem Kontakt Formular und Floats/Padding entfernen, sah aber nicht gerade besser aus, soll ich nochmal die CSS Tags entfernen, damit du dir es anschauen kannst?

Jap bin der Typ mit der Kamera^^

mustermen · 25. Januar 2011

Ja bei mir ist nämlich die textarea komplett unten! Das sind so komisch aus, als ich dann diese Regeln entfernt hatte war die textarea wieder oben, ich glaube textarea padding entfernen war das. Habe grad rausgefunden das das nur bei google chrome und safari so aussieht!!!! Brauchst also die CSS regeln nicht verändern!

gstarr · 25. Januar 2011

Hmm, also Textarea Padding hat ja nur mit dem Innenabstand zutun, damit wenn ich schreibe der Text nicht ganz am Rand ist.

Welchen Browser verwendest du? Arbeite hier mit FF 4.0 Beta und dem IE 8. Könntest du vlt. ein Screenshot machen?

Was ich noch fragen wollte, wie ich am besten den Inhalt unter http://www.gxpc.de/?g=impressum formatieren soll? Damit Konzeption und Realisierung, Kontaktmöglichkeit: neben den Inhaber / Projektleiter: , Anschrift steht und nicht da drunter, mit <ul> ? float:left?

so sieht das aktuell aus:

HTML:

<h1>Impressum</h1>

<b>Inhaber / Projektleiter:</b>
<p>Nico Ostermueller</p>

<b>Anschrift</b>
<p>Ostermueller - GXPC.DE<br />
Kuenzerweg 12<br />
30457 Hannover<br />
NIE, Deutschland<br /></p>

<b>Konzeption und Realisierung</b>
<p>Code & Design by<br />
Root-Webmedia © <?php echo date('Y'); ?></p>

<b>Kontaktmöglichkeit:</b>
<p>Formular: <a href="?g=contact">Kontaktaufnahme</a><br />
e-Mail: info [at] gxpc [dot] de</p>

<h2>Urheberrecht:</h2>
<p>Alle Informationen, Grafiken oder Quellcode dieser Seiten dürfen ohne schriftliche Genehmigung nicht kopiert, übernommen oder verändert werden. Die Angaben des Impressums dürfen in gar keinem Fall für Massensendungen, bzw. Spam oder Werbezwecken verwendet werden.</p>
<h2>Haftungshinweis:</h2>
<p>Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>

mustermen · 25. Januar 2011

Screenshot kann ich nicht mehr machen, man hat mich zu einem anderen PC grade gejagt und hier ab ich nur den firefox drauf

Auf jedenfall wird die Textarea bei google chrome und safari ganz unten platziert und zwar wegen dem padding. An sich ist padding für den Innenabstand aber chrome deutet das anscheinend als margin?! Das mit Impressum würde ich genauso wie du sagst mit ul und float left machen!

gstarr · 25. Januar 2011

Hmm, habe gerade geschrieben, haut nicht hin.

HTML:

<style type="text/css">
#include ul   {float:left;width:300px;height:150px;margin:10px}
#include ul li{display:block;}
#include ul h3{font-weight:bolder}
</style>

<h1>Impressum</h1>
<ul>
<h3>Inhaber / Projektleiter:</h3>
<li>Nico Ostermueller</li>
</ul>

<ul>
<h3>Anschrift:</h3>
<li>Ostermueller - GXPC.DE</li>
<li>Kuenzerweg 12</li>
<li>30457 Hannover</li>
<li>NIE, Deutschland</li>
</ul>

<ul>
<h3>Konzeption und Realisierung:</h3>
<li>Code & Design by</li>
<li>Root-Webmedia © <?php echo date('Y'); ?></li>
</ul>

<ul>
<h3>Kontaktmöglichkeit:</h3>
<li>Formular: <a href="?g=contact">Kontaktaufnahme</a></li>
<li>e-Mail: info [at] gxpc [dot] de</li>
</ul>

<h2>Urheberrecht:</h2>
<p>Alle Informationen, Grafiken oder Quellcode dieser Seiten dürfen ohne schriftliche Genehmigung nicht kopiert, übernommen oder verändert werden. Die Angaben des Impressums dürfen in gar keinem Fall für Massensendungen, bzw. Spam oder Werbezwecken verwendet werden.</p>

<h2>Haftungshinweis:</h2>
<p>Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>

*EDIT*

ok habe #include ul h3{font-weight:bolder} auf h4 gemacht, sonst hat er standart h3 formatierung genommen. Nun gehts =)

mustermen · 25. Januar 2011

Ich dachte du wolltest alle in einer Reihe haben, dan hätte ich das verändert:
ul {
height: 150px; Versuch das hier so niedrig wie möglich einzustellen probier aus wie klein dieser Wert sein darf!
margin: 10px; Mach daraus ein margin-right es steht nämlich versetzt zu impressum!
width: 300px; und versuch hier wieder so klein wie möglich zu machen!
}

gstarr · 25. Januar 2011

Ne ne, ich wollte immer nur 2 in einer Reihe haben, der Include ist genau 740px Breit, minus die 50px Padding, also 640px, dann noch geteil durch 2, gleich 320px^^

Die height: 150px, habe ich auf 110px gemacht, sieht, wie ich finde, gut aus.

HTML:

<style type="text/css">
#include ul   {float:left;width:320px;height:110px}
#include ul li{display:block;}
#include ul h4{font-weight:bolder;padding-bottom:5px}
</style>

was meinst du? sieht doch sauber aus oder

mustermen · 25. Januar 2011

Sieht sauber aus ist schön geworden!

HTML <DIV> Container Aufbau

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Lt. Commander

mustermen

Gast

Ähnliche Themen