CSS Layout erstellen: Hilfe

anna55 · 01. März 2009

Jonas23 schrieb:
wie sollte ich mit 15 Webdesign verkaufen, ...

Du bist spät dran, Jonas23. Dieser Inder war 13, als er seine erste Seite ins Netz gestellt hat, und er hat mit 14 seine erste Firma gegründet:
Wirtschafts-Wunderkind: Das Internet-Imperium des indischen Goldjungen - SPIEGEL ONLINE - Nachrichten - Wirtschaft
Und noch ein Link aus Deinem Land dazu:
Faircustomer.ch Internet

Also sieh zu, dass Du die Sache ordentlich lernst.

Probier doch mal dieses CSS. Ich habe überall an den Stellen, an denen ich Änderungen vorgenommen habe, Kommentare dazu geschrieben:

Code:

body {
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #505367;
	background-image:url(hintergrund.gif);
}

a img{
    border: none;
}

#container {
	width: 800px;;
	margin: 0 auto;
	padding: 0;
	text-align:left;
}

#header{
	height: 90px;
	width: 450px;
	background-image:url(logo.jpg);
	background-repeat:no-repeat;
}

#mainnav {    /* geändert für alle Browser */
	height: 45px;
	margin-top: 15px;
	position: relative;
	bottom: -16px;
	width: 508px;
}

*+html #mainnav {    /* geändert für IE7 */
margin-bottom: 27px;
}

* html #mainnav {    /* geändert für IE6 */
	margin-bottom: 16px;
}

.solidblockmenu{
	margin: 0 0 0 2px;
	padding: 0;
	float: left;
	font: bold 16px Arial;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1em;
	border: 1px solid #625e00;
	border-width: 1px 0;
	background: black url(blockdefault.gif) center center repeat-x;
}

* html .solidblockmenu {     /* geändert für IE6 */
	margin: 0 0 0 1px;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a {     /* geändert für alle Browser */
	float: left;
	color: white;
	padding: 18px 37px;
	text-decoration: none;
	border-right: 1px solid white;
}

.solidblockmenu li:hover .ohne,      /* geändert für alle Browser */
.solidblockmenu li a:hover.ohne,
.solidblockmenu li a.ohne {
	border-right: 1px solid black;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
	color: white;
	background: transparent url(blockactive.gif) center center repeat-x;
}

#content_all {
	width:865px;
}

#menu {
	float:left;
	height: 353px;
	width: 509px;
	background-image:url(menu.jpg);
	background-repeat:no-repeat;
}

#contents {
	float: left;
	width: 354px;
	height: 353px;
	background-color: yellow;
	background-image:url(news.jpg);
	background-repeat:no-repeat;
}

#footer{       /* geändert für alle Browser */
	clear: both;
	height: 20px;
	width: 861px;
	background-color: lime;
	margin-left: 2px;
}

Edit: Und aus dem HTML nimmst Du raus:

Code:

   <p> </p>

Jonas23 · 01. März 2009

Ach sieht das toll aus

vielen Dank sehr nett von dir,
was arbeitest Du eigentlich?
Nochmals vielen Dank ohne Euch würde ich noch am Anfang stehen, aber jetzt hab ich den Index dank euch und kann auf dem aufbauen. vielen Dank

anna55 · 01. März 2009

Ja, gefällt mir supergut!

Jonas23 schrieb:
was arbeitest Du eigentlich?

Ich mach Pressearbeit. Hab allerdings - dank der Unterstützung durch dkdenz -
richtig Spaß an CSS.

Jonas23 · 01. März 2009

anna55 schrieb:
Ja, gefällt mir supergut!

Ich mach Pressearbeit. Hab allerdings - dank der Unterstützung durch dkdenz -
richtig Spaß an CSS.

Ah respekt respekt alles selber beigebracht
welche Zeitung den oder Magazin?

anna55 · 01. März 2009

Meine Ausbildung hab ich bei ner Regionalzeitung gemacht: Frankenpost. Arbeite jetzt in der Öffentlichkeitsabteilung für einen Krankenkassenverband.

Jonas23 · 01. März 2009

anna55 schrieb:
Meine Ausbildung hab ich bei ner Regionalzeitung gemacht: Frankenpost. Arbeite jetzt in der Öffentlichkeitsabteilung für einen Krankenkassenverband.

Ah ich darf oder muss noch die Schulbank drücken, aber nur noch ein halbes Jahr

anna55 · 01. März 2009

Eine wichtige Ergänzung noch. Validome zeigt einen Fehler an. Schick Deine Seite

also immer durch nen Validator.

Jonas23 · 01. März 2009

anna55 schrieb:
Eine wichtige Ergänzung noch. Validome zeigt einen Fehler an. Schick Deine Seite also immer durch nen Validator.

Ok, vielen Dank,
werde den Fehler gleich beheben.
Nochmals vielen Dank für Eure Hilfe

anna55 · 01. März 2009

Gern geschehen. Lies Dich ein in die Materie, das ganze Gebiet ist sehr spannend. Dkdenz hat Dir schon den SELFHTML-Link genannt. Auch CSS4YOU ist ne gute Seite.

Jonas23 · 01. März 2009

anna55 schrieb:
Gern geschehen. Lies Dich ein in die Materie, das ganze Gebiet ist sehr spannend. Dkdenz hat Dir schon den SELFHTML-Link genannt. Auch CSS4YOU ist ne gute Seite.

Ok danke, sobald Ferien sind, fang ich an.
Momentan stressige Zeit

Jonas23 · 01. März 2009

So nun hab ich ja den Index nun hab ich eine Frage zur Shop-Datei
Bisher hab ichs ja mit html angegeben, aber da ichs jetzt mit css gemacht habe
und das ganze Design dynamisch ist würde es mir ja bei ander Bildschirmen das
Formular verschieben, wie kann ich das Formular im CSS angeben.

das ist mein Form-Code

HTML:

<script type="text/javascript">
function chkFormular(){
    var prueflinge = new Array(
        {
            node: document.Formular.NameShirt,
            re: /./,
            alertText: "Bitte den Namen des T-Shirt`s eingeben!"
        },
        {
            node: document.Formular.Stueck,
            re: /./,
            alertText: "Bitte die Stückzahl eingeben!"
        },
        {
            node: document.Formular.Grousse,
            re: /./,
            alertText: "Bitte die Grösse eingeben!"
        },
        {
            node: document.Formular.Name, 
            re: /./,
            alertText: "Bitte Ihre Name und Vorname eingeben!"
        },
        {
            node: document.Formular.Wohnort,
            re: /./,
            alertText: "Bitte Ihren Wohnort eingeben!"
        },
        {
            node: document.Formular.Ort,
            re: /./,
            alertText: "Bitte den Ort und Postleitzahl eingeben!"
        },
        {
            node: document.Formular.Land,
            re: /./,
            alertText: "Bitte Ihr Land eingeben!"
        },
        {
            node: document.Formular.Telefon,
            re: /./,
            alertText: "Bitte Ihre Telefonnummer eingeben!"
        },
        {
            node: document.Formular.Email,
            re: /./,
            alertText: "Bitte Ihre E-Mail-Adresse eingeben!"
        },
        {
            node: document.Formular.Email,
            re: /@/,
            alertText: "Keine E-Mail-Adresse!"
        }
    );
    for (var i = 0; i < prueflinge.length; i++){
        if (!prueflinge[i].re.test(prueflinge[i].node.value)){
            alert(prueflinge[i].alertText);
            prueflinge[i].node.focus();
            return false;
        }
    }
}
</script>


<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>



<blockquote>
    <form name="Formular" action=""
  method="post" onsubmit="return chkFormular()">

    <font face="Arial, Helvetica, sans-serif" size="2">
    <input type="hidden" name="email_charset:iso8859" value>
    <input type="hidden" name="email_to" value="">
    <input type="hidden" name="email_subject" value="Mailformular">
    <input type="hidden" name="email_server" value="">
    <input type="hidden" name="success_message_url" value="">
    <input type="hidden" name="email_option:copy_to_sender" value>
    <input type="hidden" name="default_email_from" value="">
    </font>

der CSS ist

PHP:

body {
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #505367;
	background-image:url(hintergrund.gif);
}

a img{
    border: none;
}

#container {
	width: 800px;;
	margin: 0 auto;
	padding: 0;
	text-align:left;
}

#header{
	height: 90px;
	width: 450px;
	background-image:url(logo.jpg);
	background-repeat:no-repeat;
}

#mainnav {
	height: 45px;
	margin-top: 15px;
	position: relative;
	bottom: -16px;
	width: 758px; /* 508px */
}

*+html #mainnav {    
margin-bottom: 27px;
}

* html #mainnav {    
	margin-bottom: 16px;
}

.solidblockmenu{
	margin: 0 0 0 2px;
	padding: 0;
	float: left;
	font: bold 16px Arial;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1em;
	border: 1px solid #625e00;
	border-width: 1px 0;
	background: black url(blockdefault.gif) center center repeat-x;
}

* html .solidblockmenu {     
	margin: 0 0 0 1px;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a {     
	float: left;
	color: white;
	padding: 18px 37px;
	text-decoration: none;
	border-right: 1px solid white;
}

.solidblockmenu li:hover .ohne,      
.solidblockmenu li a:hover.ohne,
.solidblockmenu li a.ohne {
	border-right: 1px solid black;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
	color: white;
	background: transparent url(blockactive.gif) center center repeat-x;
}

#content_all {
	width:865px;
}

#menu {
	float:left;
	height: 353px;
	width: 509px;
	background-color:#FFF;
	background-repeat:no-repeat;
}




















#contents {
	float: left;
	width: 250px;
	height: 353px;
	background-color: yellow;
	background-image:url(news.jpg);
	background-repeat:no-repeat;
}

#footer{      
	clear: both;
	height: 20px;
	width: 758px;
	background-color: lime;
	margin-left: 2px;
}

Jonas23 · 01. März 2009

Vielen Dank Herr Denz doch der Link ging leider nicht

ich hab jetzt das formular im html gelassen und das in den css eingefügt

PHP:

#menu {
	float:left;
	height: 353px;
	width: 509px;
	background-color:#FFF;
	background-repeat:no-repeat;
}

label, input, select { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 100px; /* Breite.*/
}

form br { /* Alle Zeilenumbrüche in Formularen auswählen */
  clear: left; /* das floating der labels und inputs aufheben */
}

input#submit { /* den Submit-Button */
  float: none;
  width: auto;
}

label {
 text-align: right; 
 padding-right: 1em; 
}

form {
  margin:0;
  padding:.5em;
}

stimmt dies?

dkdenz · 01. März 2009

Du hast es mit CSS gemacht?
Was würde ich darum geben, wenn die mal zu mir kommen würde...

formulare mit css gestalten - Google Search

Jonas23 · 01. März 2009

dkdenz schrieb:
Du hast es mit CSS gemacht?
Was würde ich darum geben, wenn die mal zu mir kommen würde...

formulare mit css gestalten - Google Search

Was würde ich darum geben, wenn die mal zu mir kommen würde...

aber du bist doch schon bei dir

Jonas23 · 01. März 2009

So habs jetzt ins css umgesezt (hoffe ich mal)

HTML:

<!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> 
        <link rel="stylesheet" type="text/css" href="3.css" /> 
    <title>Home</title>
    <style type="text/css">
<!--
.input {
	font-weight: bold;
}
-->
    </style>
    </head> 
<body> 
        <br /><br /> 
        <div id="container">
            <div id="header"></div> 
            
            
            <div id="mainnav"> 
            <ul class="solidblockmenu">

</ul>
            </div>
            
         
        <div id="content_all">
    <div id="menu">
    <script type="text/javascript">
function chkFormular(){
    var prueflinge = new Array(
        {
            node: document.Formular.NameShirt,
            re: /./,
            alertText: "Bitte den Namen des T-Shirt`s eingeben!"
        },
        {
            node: document.Formular.Stueck,
            re: /./,
            alertText: "Bitte die Stückzahl eingeben!"
        },
        {
            node: document.Formular.Grousse,
            re: /./,
            alertText: "Bitte die Grösse eingeben!"
        },
        {
            node: document.Formular.Name, 
            re: /./,
            alertText: "Bitte Ihre Name und Vorname eingeben!"
        },
        {
            node: document.Formular.Wohnort,
            re: /./,
            alertText: "Bitte Ihren Wohnort eingeben!"
        },
        {
            node: document.Formular.Ort,
            re: /./,
            alertText: "Bitte den Ort und Postleitzahl eingeben!"
        },
        {
            node: document.Formular.Land,
            re: /./,
            alertText: "Bitte Ihr Land eingeben!"
        },
        {
            node: document.Formular.Telefon,
            re: /./,
            alertText: "Bitte Ihre Telefonnummer eingeben!"
        },
        {
            node: document.Formular.Email,
            re: /./,
            alertText: "Bitte Ihre E-Mail-Adresse eingeben!"
        },
        {
            node: document.Formular.Email,
            re: /@/,
            alertText: "Keine E-Mail-Adresse!"
        }
    );
    for (var i = 0; i < prueflinge.length; i++){
        if (!prueflinge[i].re.test(prueflinge[i].node.value)){
            alert(prueflinge[i].alertText);
            prueflinge[i].node.focus();
            return false;
        }
    }
}
</script>


<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>



 [/PHP]

anna55 · 01. März 2009

Ich kann verstehen, dass Du das 'Lernen' auf die Ferienzeit verschiebst. Allerdings ist angesichts der bisher schon erlernten Fakten Dein HTML nicht zumutbar.

Was macht der lange Rattenschwanz am oberen und unteren Ende Deines geposteten HTML? Da blickt ja keiner durch.

Irgendwo hatte ich Dir schon die Reihenfolge einer HTML-Seite gepostet: 1 Headbereich und 1 Body und nicht bunt gemischt. Mit 'blockqoute' fängt kein Bodybereich an.

Die Seite ist nicht online, aber jeder Validator hätte die Hände über dem Kopf zusammengeschlagen. Übrigens hättest Du bei einem solchen Test schon einiges selbst reparieren können. Den Rat hatte ich Dir schon gegeben:

anna55 schrieb:
Schick Deine Seite also immer durch nen Validator.

Ich bin bestimmt sehr geduldig, aber wenn Du keine Zeit hast zu lernen, dann geht es nicht.

BTW Mach Dich auch mal schlau, was einem p-Tag von Haus aus für Verhaltensweisen zugeordnet sind.

Jonas23 · 01. März 2009

anna55 · 01. März 2009

Jonas23 schrieb:
Den Html hab ich jetzt gleich wie wir vorer den Index erarbeitet haben

Nein, hast Du nicht, schau mal nur auf diese Zeilen:

PHP:

<div id="footer">
</div>
</body>
</html>  

<body id="bg" bgcolor="black">

Und wieder fängt body an, nachdem die Seite schon zu Ende ist. Was hast Du eigentlich bei 'Validator verwenden' nicht verstanden?

BTW Mit 'Rattenschwanz' meine ich, dass man endlos weit nach rechts scrollen muss, wenn man etwas vom Code sehen will.

Jonas23 · 01. März 2009

anna55 · 02. März 2009

Jonas23 schrieb:
so und bei Validome gibt er mir diesen Fehler an:
Im Dokument befindet sich in Zeile 34 und Spalte 24 ein ungültiges Zeichen.
Dieses Zeichen ist in der verwendeten Zeichenkodierung (utf-8) nicht erlaubt.

obwohl ich alle Zeichen nach den Vorgaben gemacht habe.

In dieser Zeile steht ein ö. Setz hier die Entity ein: SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen

Dein HTML hat immer noch keinen korrekten Aufbau.

Vom linken Rand bekommst Du Dein Formular weg, wenn Du bei SELFHTML in die Suche 'Abstand links' eingibst. Unter anderem wird dann gelistet: SELFHTML: Stylesheets / CSS-Eigenschaften / Außenrand und Abstand. Das Element, das Du nun ansprechen willst, heißt 'form'.

Meinen Hinweis, Dich mal mit dem p-Tag zu beschäftigen, hast Du damit beantwortet, dass der in der kopierten Vorgabe steht. Deine Frage war jedoch, wie Du verschiedene Felder nebeneinander stellen kannst. Mit anderen Worten: Du willst etwas an dem Vorgegebenen ändern. Also lies nach: SELFHTML: HTML/XHTML / Referenz /HTML-Elementreferenz. Vielleicht fällt Dir ja etwas dazu ein.

CSS Layout erstellen: Hilfe

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

Moderator

New member

New member

New member

New member

New member

New member

Moderator

New member

Moderator

New member

Moderator