CSS-html was zuerst?

Beitrag von **chriss** » Di 2. Aug 2011, 16:32

Naja... der Code zum ersten Bild... den PHP-Teil musst du dir wegdenken

<!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" xml:lang="de" lang="de">

<head>
    <title>nPage-Hilfe Filebase</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <script language="javascript" type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="includes/ajaxfileupload.js"></script>
    <script language="javascript" type="text/javascript" src="includes/main.js"></script>
    <link href="styles/main.css" type="text/css" rel="stylesheet" />

</head>
<body>
        <div id="header">
            <h1><strong>files</strong>.npage-hilfe</h1>
        </div>
        <div id="note">
        <?php echo $echo; ?>
        </div>
        <div id="page">
                <div id="navi">
                    <ul>
                        <?php include("includes/navi.php"); ?>
                    </ul>
                </div>

                <div id="sidebar">
                <?php if(isset($_SESSION['UserID'])){ ?>
                    <div class="sidebar_element">
                        <h2>Upload</h2>
                        <p>Jetzt eine Datei hochladen</p>
                        <img id="loading" src="images/loading.gif" style="display: none; float: right;" />
                        <form name="form" action="" method="POST" enctype="multipart/form-data">
            	               <div id="divToUpload">
            	                    <input id="fileToUpload" onchange="ajaxFileUpload();" size="1" type="file" name="fileToUpload" class="input" />
                            		<button class="button" id="buttonUpload" >Upload</button>

                            	</div>
                        </form>
                    </div>
                    <div class="sidebar_element">
                        <h2>Kontrollzentrum</h2>
                        <p>
                            <ul class="nav">
                                <li><a href="#!/my_uploads.php" onclick="load_content('my_uploads.php');">Meine Uploads</a></li>
                                <li><a href="#!/my_data.php" onclick="load_content('my_data.php');">Einstellungen</a></li>
                                <li><a href="#!/my_downladlists.php" onclick="load_content('my_downloadlists.php');">Meine Downloadlisten</a></li>
                                <li><a href="#!/my_history.php" onclick="load_content('my_history.php');">Mein Verlauf</a></li>
                                <li><a href="?do=logout">Logout</a></li>
                            </ul>
                        </p>
                    </div>
                <?php  }
                else{  ?>
                     <div class="sidebar_element">
                        <h2>Unsere Leistungen</h2>
                            <ul class="norm">
                                <li>300 MB Speicher f&uuml;r ihre Dateien</li>
                                <li>maximale Uploadgr&ouml;&szlig;e von 20 MB</li>
                                <li>unterst&uuml;tzung aller Dateitypen</li>
                                <li>bis zu 200 MB Downloads pro Stunde</li>
                                <li>Speicherung bis 60 Tage inaktivit&auml;t</li>
                                <li>maximale Download geschwindigkeit</li>
                            </ul>
                    </div>
                    <div class="sidebar_element">
                        <h2>Regeln</h2>
                            <ol class="norm">
                            <li>Es ist verboten pornografische Inhalte hochzuladen. Erotikmaterial ist davon nicht betroffen</li>
                            <li>Es ist vorboten rassistisches, politisch unkorrektes oder urheberrechtlich gesch&uuml;tztes Material hochzuladen</li>
                            <li>Es darf nur ein Account pro IP-Adresse erstellt werden.</li>
                         </ol>
                    </div>
                <?php }?>
                </div>

                <div id="content">
                  <?php if(!isset($_SESSION['UserID'])){ ?>
                    <div class="content_element">
                        <h1>Willkommen auf files.nPage-Hilfe.de</h1>
                        <p>Wir bieten dir eine sichere Speicherung deiner Daten, sowie Weltweiten uneingeschrenkten Zugriff darauf.
                        Au&szlig;erdem kannst du alle deine Dateien auch anderen Usern zum Download anbieten.</p>
                        <p>Melde dich jetzt an, oder logge dich mit deinem bereits vorhandenen Account ein.</p>
                        <br />
                        <div class="two_column">
                            <div class="column_50">
                                <h4>Neu Registrieren</h4>
                                <form>
                                <label for="name">Benutzername:</label>
                                    <input type="text" name="name" id="name" />
                                <label for="pw1">Passwort:</label>
                                    <input type="password" name="pw1" id="pw1" />
                                <label for="pw2">Passwort best&auml;tigen:</label>
                                    <input type="password" name="pw2" id="pw2" />
                                <label for="mail">E-Mail:</label>
                                    <input type="text" name="mail" id="mail" />
                                <input type="submit" name="submit" id="submit" class="submit" value="Registrieren" />

                                </form>
                            </div>
                            <div class="column_50">
                                <h4>Login</h4>
                                <form action="" method="post">
                                <label for="Lname">Benutzername:</label>
                                    <input type="text" name="Lname" id="Lname" />
                                <label for="pw">Passwort:</label>
                                    <input type="password" name="pw" id="pw" />
                                <input type="submit" name="login" id="login" class="submit" value="Einloggen" />
                                </form>
                            </div>
                        </div>
                         <button onclick="show_error('Sie m&uuml;ssen sich einloggen.');">Test</button>
                    </div>
                    <?php }
                    else {  ?>
                    <div class="content_element">
                        <h1>Hallo <?php echo $_SESSION['Nickname']; ?></h1>
                        <p>Zum ersten mal hier?<br />
                        Dann sieh dir unsere <a href="#!/demo.php" onclick="load_content('demo.php');">Demotour</a> zu den wichtigsten Funktionen dieser Seite an.</p>
                        <p>Derzeit gibt es keine Neuigkeiten zu files.nPage-Hilfe.de</p>
                    </div>
                   <?php }?>

                </div>
        </div>
             <div id="footer">
                    <p>
                        &copy; files.npage-hilfe.de Alle Rechte vorbehalten
                    </p>
                </div>
</body>
</html>

Und dann halt angefangen den CSS teil zu schreiben. Von oben nach unten :p

Code: Alles auswählen

*
{
    margin: 0px;
    padding: 0px;
}
html, body
{
    background: url(images/html_background.jpg) repeat-x;
	font-family: Calibri, Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	font-size: 101%;
	color: #333;
}
#header
{
    width: 960px;
    height: 49px;
    margin: auto;
}
#page
{
    margin: auto;
    width: 960px;

}
#navi
{
    width: 960px;
    height: 46px;

}
#sidebar
{
    height: 300px;
    width: 280px;
    float: left;
    padding-top: 10px;
}
#content
{
    width: 680px;
    padding-top: 10px;
    float: left;
}
#footer
{
    height: 20px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    border-top: solid 1px #676767;
    background: #DDDDDD;
    text-align: center;
    color: black;
    margin: auto;

}
#navi ul
{
    list-style-type:  none;
    width: 100%;
    border-bottom: solid 6px #FF882C;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
}
#navi ul li
{
    list-style-type:  none;
    display: inline-block;
    height: 29px;
    background-color: #FF882C;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    position: relative;
    margin-top: 1px;
    top: 6px;
}
#navi ul li a
{
    font-size: 110%;
    color: #F3F3F3;
    font-weight: bold;
    text-decoration: none;
}
#navi ul li:hover
{
    background-color: #F3F3F3;
    height: 28px;
    border-top: solid 1px #C9C9C9;
    margin-top: 0px;
    top: 7px;

}
#navi ul li:hover a
{
    color: #333;
    text-decoration: underline;
}
.first_navi_element
{
    border-left: solid 6px #FF882C;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
}
.last_navi_element
{
    border-right: solid 6px #FF882C;
    -moz-border-radius-topright: 3px;
}
#header h1
{
    color: #333;
    padding-top: 50px;
    padding-right: 30px;
    text-align: right;
    font-size: 440%;
	font-family: Tahoma;
	border: 0px;
}
#header h1 strong
{
    color: #FF882C;
}
.sidebar_element
{
    border: solid 1px #C9C9C9;
    width: 260px;
    padding:8px;
    margin-bottom: 10px;
    background: #F9F9F9;
}
.sidebar_element h2
{
    color: #808080;
    font-size: 160%;
    padding: 5px 0px 5px 5px;
    border-bottom: dotted 1px #C9C9C9;
    margin-bottom: 7px;
}
.sidebar_element p{
    padding: 5px;
}
.content_element
{
    border: solid 1px #C9C9C9;
    width: 658px;
    padding:8px;
    margin-bottom: 10px;
    margin-left: 4px;
        background: #F9F9F9;
}
h1
{
    color: #808080;
    font-size: 160%;
    padding: 5px 0px 5px 5px;
    border-bottom: dotted 1px #C9C9C9;
    margin-bottom: 7px;
}
h2
{
    color: #808080;
    font-size: 140%;
    padding: 5px 0px 5px 5px;
    border-bottom: dotted 1px #C9C9C9;
    margin-bottom: 7px;
}
h3
{
    color: #808080;
    font-size: 120%;
    padding: 5px 0px 5px 5px;
    border-bottom: dotted 1px #C9C9C9;
    margin-bottom: 7px;
}
h4
{
    color: #808080;
    font-size: 110%;
    padding: 5px 0px 5px 5px;
    border-bottom: dotted 1px #C9C9C9;
    margin-bottom: 7px;
}
.content_element p{
    padding: 5px;
}
.content_element a{
    color: #FF882C;
}
.content_element p.info{
    text-align: right;
}
.content_element p.beitrag_info{
    float: right;
    padding-top: 10px;
}
.comment
{
    list-style:none;
    border: solid 1px #EFCFA5;
    background: #F9EFE2;
    padding: 5px 40px 5px 10px;
    position: relative;
    margin-bottom: 8px;
}
.author
{
    font-size: 130%;
    font-weight: 700;
}
.date
{
    float: right;
}
.comment_number
{
    font-size: 200%;
    color: #EBC79A;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
#comments
{
    margin: 10px 0px 10px 0px;
}
input#download
{
    width: 50%;
    height: 40px;
    background-color: #EBC79A;
    font-size: 200%;
    font-weight: bold;
    border: solid 2px #FF882C;
    -moz-border-radius: 8px;
}
input#download:hover
{
    background-color: #FF882C;
    cursor: pointer;
}
div.sexybookmarks
{
clear:both;
height:29px;
margin:auto;
overflow:hidden;
position:relative;
float: right;
top: 10px;
}
div.sexybookmarks a
{
background-position:0 bottom;
border:0;
display:block;
float:left;
height:29px;
text-decoration:none;
width:60px;
}
div.sexybookmarks a:hover
{
background-position:0 top;
}
div.sexybookmarks a span
{
display:none;
}
div.sexybookmarks a.sexy-delicious
{
background-image:url('../images/delicious.png')
}
div.sexybookmarks a.sexy-facebook
{
background-image:url('../images/facebook.png')
}
div.sexybookmarks a.sexy-google
{
background-image:url('../images/google.png')
}
div.sexybookmarks a.sexy-misterwong
{
background-image:url('../images/misterwong.png')
}
div.sexybookmarks a.sexy-twitter
{
background-image:url('../images/twitter.png')
}

label
{
    display:  inline-block;
    width: 145px;
    margin-bottom: 6px;

}
input, textarea
{
    width: 160px;
    display: inline;
	font-family: Calibri, Helvetica,Arial,sans-serif;
	font-size: 100%;
    border: 0px;
    border-bottom: solid 2px #FFDEC9;
    border-left: solid 1px #FF6505;
    margin-bottom: 6px;
}
input.checked, textarea.checked
{
    width: 160px;
    display: inline;
	font-family: Calibri, Helvetica,Arial,sans-serif;
	font-size: 100%;
    border: 0px;
    border-bottom: solid 2px #88FF7F;
    border-left: solid 1px #2EC404;
    margin-bottom: 6px;
}
input.failed, textarea.failed
{
    width: 160px;
    display: inline;
	font-family: Calibri, Helvetica,Arial,sans-serif;
	font-size: 100%;
    border: 0px;
    background: #FF9A8E;
    border-bottom: solid 2px #FF1E05;
    border-left: solid 1px #FF1E05;
    margin-bottom: 6px;
}
td input, td textarea
{
    width: 100px;
}
input.submit
{
    width: 200px;
    border: solid 1px #FF882C;
    background: #FFE9D8;
}
input.submit:hover
{
    background: #FF882C;
}
.sidebar_element ul.link
{
    list-style-type: none;
}
.sidebar_element ul.link li
{
    margin-top: 4px;
}
.sidebar_element a
{
    color: #FF882C;
}
.sidebar_element ul li a
{
    color: #FF882C;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
}
.sidebar_element ul li a:hover
{
    text-decoration: underline;
}
ul.norm {
    padding: 0px 0px 0px 15px;
}
ul.norm li {
    margin-bottom: 3px;
}
ol.norm {
    padding: 0px 0px 0px 18px;
}
ol.norm li {
    margin-bottom: 3px;
}
div.two_column
{
    width: 100%;
    overflow: auto;
}
div.column_50
{
    width: 48%;
    float: left;
    margin: 0px 0.8% 0px 0.8%;
}
div#note .error
{
    background-color: #FFACA7;
    border: solid 2px #FF1205;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    width: 30%;
    left: 35%;
    top: 35%;
    text-align: center;
    font-size: 130%;
    color: black;
    font-weight: bold;
    padding: 10px 5px 10px 5px;
}
.loading
{
    opacity: 0.5;
}
ul.nav
{
    list-style-type: none;
}
#divToUpload
{
    position: relative;
    width: 150px;
    height: 30px;
}
#fileToUpload
{
    position: absolute;
    width: 15px;
    height: 30px;
    top:0px;
    left:0px;
    z-index: 100;
    opacity: 0;
}
#buttonUpload
{
    width: 164px;
    height: 30px;
    background-color: #EBC79A;
    font-size: 110%;
    font-weight: bold;
    border: solid 2px #FF882C;
    -moz-border-radius: 8px;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 1;
}
#fileToUpload:hover
{

    cursor: pointer;
}

Beim CSS-Teil wird aber noch viel folgen...

Beitrag von **Eowyn_Rohan** » Di 2. Aug 2011, 18:39

oha, na das sieht ja interessant aus... ich komme gern auf euch zurück

bis jetzt wurde mir ja hier auch immer wieder geholfen

Vielen Dank und Chriss natürlich ist Kritik erwünscht *zwinker solange sie konstruktiv ist nehm ich sie gern an, denn davon lerne ich ja nur nicht wahr
*bigsmile

Beitrag von **moni** » Di 2. Aug 2011, 20:33

@ Chriss...

...ich glaube das ich so halb geschnallt habe wie du das machst....

also ich schreibe oder male eine vorlage und drin alles wie sein soll..Navi , mitte , Header , boxen usw..
dann mache ich die Kästchen und zwar für jede teil extra..und gebe den einen div Name ein...
dann schreibe ich das css und angefangen vom oben nach unten.....

wen ich fragen darf wie machst die Kästchen

Beitrag von **chriss** » Di 2. Aug 2011, 20:39

Das ist ein FireFox plugin...
Information -> Anordnung von Div Elementen anzeigen

Beitrag von **moni** » Di 2. Aug 2011, 20:52

OK hab runter geladen..habe so was jetzt zu sehen...
http://chrispederick.com/work/web-devel ... talled/11/

ist ja super ich kann kein englisch.. :JJ

und einen extra tollbar Balken oben dazu ..glaub das ist das richtige..schau mir das an was ich da habe

Beitrag von **chriss** » Di 2. Aug 2011, 21:11

Also erstmal installiert sich das plugin selbst... die Seite nach dem neustart kannst du getrost schließen...

Und ja... dieser neue Balken ist das plugin... müsste eigentlich sogar deutsch sein (siehe meine screenshots...)
Kannst die funktionen ja mal ausprobieren... ist wirklich alles dabei was man so braucht.

Beitrag von **moni** » Di 2. Aug 2011, 21:16

Danke es ist auf Deutsch..und das ist der Hammer..habe da ein bisschen getestet... auch man kann css html validieren...

shitt mein HP hat etlich fehler... aha und die jürg neu eHp hat das gezeigt bei css
Ungültige Nummer : color Einlese-Fehler :#3F0000
bei HTML Bereich meisten Fehler an diesen Wetter zeug

OK..da habe ich das und was dann ?

Beitrag von **chriss** » Di 2. Aug 2011, 22:33

Also um das kastensystem zu sehen musst du auf Infomation gehen oder dort "Anordnung von Div-Elementen einblenden" anklicken.

Beitrag von **moni** » Mi 3. Aug 2011, 07:26

chriss hat geschrieben:Also um das kastensystem zu sehen musst du auf Infomation gehen oder dort "Anordnung von Div-Elementen einblenden" anklicken.

OK..habe so weit gemacht und das System zeigt mir alles Divs was an einer HP so sind...

aber glaub müssen jetzt von vorne...
Ich will eine HP machen und habe noch nichts gemacht ...und man kann quasi auch keine div sehen ..
der erste schritt soll sein ..
1)Seite schreiben...
Ok meine frage ist ..wo auf welchen Programm...online oder auf den HTML Editor ...
muss ich auch besondere angaben dazu machen oder wie soll man sich das praktisch vorstellen ??

Beitrag von **chriss** » Mi 3. Aug 2011, 07:58

Bei den Programmen scheiden sich die geister...
Also ich benutze Weboctan Scriptly, da besonders die ganzen Projektfuntionen mir viel arbeit ersparen.

HomepageHelfer.org

CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Re: CSS-html was zuerst?

Wer ist online?