Erste eigene Website

Jasperz

Guten Tag zusammen!
Ich hoffe hier das richtige Forum und den richtigen Bereich getroffen zu haben, ansonsten bitte einfach verschieben.

In der Schule hatten wir für ein Quartal zweimal wöchentlich eine Doppelstunde Informatik, Schwerpunkt auf HTML und CSS so nebenbei. Zum Abschluss soll dann jeder seine eigene Seite erstellen. Bei meinen Ambitionen konnte sie mir aber auch nicht mehr weiterhelfen.
Ich hab mich dann rangemacht und wollte einen Fotoblog erstellen. Links soll ein "Fenster" entstehen und ein rechts auch eins. Aufteilung etwa 25% zu 75%. Über dem ganzen soll eine Überschriftenleiste zu sehen sein, die immer ganz oben auf der Seite bleibt und der Content "unter ihr durchfährt". Und da beginngen die Probleme:

Die Leiste ist nicht ganz oben am Bildschirmrand.
Die Blöcke rechts und links (arrangiert mit DIVs) sind nicht schön unter der Überschrift angedockt.
Die Blöcke lassen sich nicht in ihrer Länge nach unten hin definieren.

Ich habe euch mal den Quelltext angehängt, hoffentlich habe ich mich verständlich genug ausgedrückt.
Ich hoffe auf eure Hilfe,

Grüße Jasper

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Eigene Website</title>
  <meta name="author" content="Jasper">
  <meta name="editor" content="html-editor phase 5">
   <style type="text/css">
   <!--


    #immeroben { position: fixed;
                 font-family: Rockwell;
                 font-size: 50px;
                 left: 0px;
                 right: 0px;
                 top: 0xp;
                 padding: 2%;
                 heigt: 50%;
                 background-color: #0090E0;
                 border: 3px solid black;
                 z-index: 999; }




    #Bilderlauf { top: 75%;
                  float: right;
                  width: 75%;  }












   -->
   </style>
   <link type="text/css" rel="stylesheet" href="standard1.css">
 </head>
 <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" style="background-image:url(bBackground.jpg)">
  <div id="immeroben"> Photoblog </div>




  <div id="leftbar">
   <p>Diese Links helfen ihnen weiter</p>
   <p><a href="#">Navigationslink1</a></p>
   <p><a href="#">Navigationslink2</a></p>
   <p><a href="#">Navigationslink3</a></p>
   <p><a href="#">Navigationslink4</a></p>
   <p>Vielleicht mit einer kleinen Erläuterung...</p>
  </div>




  <div id="Bilderlauf">
   <center>
   <img src="Vogesen.jpg">
   </center>
  </div>




 </body>
</html>

Alles anzeigen

djheke

Hier ein Bsp. mit Flexbox.

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>Text des Titels</title>
<style>




body , html {
 margin:0;
 padding:0;
 height:100%;
}




header {
 padding:20px;
 height:100px;
 background:#0c9;
 position:fixed;
 width:100%;
}


main {
 display:flex;
 padding-top:140px;
 box-sizing:border-box;
 min-height:100%;
}


nav {
 flex-basis:25%;
 background:#def;
}


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


nav a {
 display:block;
 padding:10px;
 text-decoration:none;
 color:#000;
}




nav a:hover {
 background:#a33;
 color:#fff;
}




section {
 padding:20px;
 background:#dda;
 flex-basis:75%;
}
</style>
</head> 
<body>




<header>
<h1>Photoblog </h1>
</header>
<main>
<nav>
<ul>
<li><a href="">Navigationslink1</a></li>
<li><a href="">Navigationslink2</a></li>
<li><a href="">Navigationslink3</a></li>
<li><a href="">Navigationslink4</a></li>
</ul>
</nav>
<section>
<figure>
 <img src="bild.jpg" Alternativalt="text">
 <figcaption>Beschreibung</figcaption>
</fugure>
</section>
</main>
</body>
</html>

Alles anzeigen

Jasperz

Dankeschön für die schnelle Antwort!
Ich habe das ganze mal einfach übernommen, am Ende ist allerdings nichts mehr von der Formatierung da. Was ist passiert bzw. was habe ich falsch gemacht?

Grüße Jasperz

MrMurphy

Hallo

Bei mir funktioniert djhekes Vorschlag grundsätzlich. Benutzt du überhaupt einen halbwegs aktuellen Browser?

Gruss

MrMurphy

modem-kind

na es fehlen ja auch noch die anderen Browser-Präfix:

moz-flex:
ms-flex:
webkit-flex:

oder ?

moz-Night @all
ms-Night @all
usw.
usw.

Night @ all

LG modem-kind .... bssbrrrbsssschüüübrrr...

djheke

Sorry, hätte ich wohl drauf achten sollen, die Präfixe zu benutzen. Wobei der Fehler wohl woanders liegen sollte.

Jasperz

Guten Morgen!
Ich benutze den Freeware Editor "HTML Editor" und der zeigte mir da eben gezeigtes an. Im Firefox läuft es jedoch einwandfrei, vielen Dank dafür!
Könnt ihr mir vielleicht einen besseren Editor empfehlen?

Grüße Jasper

djheke

Ja für Windows den Notepad++. Normalerweise reicht auch ein normaler Texteditor aus.

Jasperz

Nochmals Hallo!

Das ganz funktioniert mittlerweile wunderbar, danke dafür!
Jetzt kam mir die blöde Idee, einfach noch eine schwarze Leiste unter den ganzen Kram zu hängen.
Gibt es einen logischen Punkt, wo man diese per DIV einfügen muss oder wird die jeweils untendran gehängt? Also sowohl Body als auch Head Teil?
Im Body Teil habe ich sie unter den "Section" Teil gehängt da dieser ja beider Bereiche (Hauptteil und Navigation Links) beeinhaltet. Falsch? Zumindest erscheint sie als senkrechter Balken neben dem Hauptteil...
Und im Headteil natürlich einen neuen DIV erstellt und wieder unter Section angehängt.

Grüße Jasper

modem-kind

Zitat von Jasperz

Das ganz funktioniert mittlerweile wunderbar,

1.)
..aber sicher nicht im IE !! oder ? ....Du benutzt jetzt ein anderen Browser ..oder ?

UND 2tens

was meinst Du mit schwarzer Leiste ..was soll die da rechts neben section ?

------------------------

achso und @djheke
vergiß es mit den Präfixen...

moz braucht das nicht
und
IE wirds Nie können

Gruß modem-kind

djheke

Dein Footer musst du unterhalb des schließenden Main-Tag einfügen.

Code

</main>
<footer<h3>Mein Footer</h3></footer>
</body>

CSS

Code

footer {
 padding:10px;
 background:#ada;
}

Da du ja Inhalte auf deine Seiten haben wirst, solltset du die min-height:100% Angabe im main Selektorblock löschen.

Übrigens im Chrome, Opera und Chromium funktioniert alles ohne Präfixe. Allerdings unter Linux.

Jasperz

Ich meine einfach noch eine Leiste wie die Überschrift ganz unten auf der Seite einzufügen. Nur soll die eben nicht "fixed" sein sondern erst erscheinen wenn man nach ganz unten gescrollt hat.
Und das andere was ich oben geschrieben hab vergesst mal lieber wieder, ich hab mal versucht es selbst zu machen.. kläglich gescheitert.

Grüße Jasper

P.S.: Ich benutze Firefox in der aktuellsten Version.

djheke

Na, hab ich dir doch hier #11 geschrieben, wie gas geht

Jasperz

Sorry, das habe ich irgendwie im Eifer übersehen...
Danke!

Jasperz

Hi, ich wage mich nochmal hier rein!

Welche Werte sorgen für die größe des Balken oben und wie kann ich Schriftgröße getrennt bearbeiten?
Und wie bitte bekommt man die Schrift direkt unter das obere Ende der Seite ohne den Abstand?

Im konkreten Beispiel habe ich habe ich die "height" des "Header" auf 30px angepasst, addiert mit dem 2fachen Padding Wert (2x20=40) ergiebt das 70px für den "Main" Teil...

Und um die Überschrift im "Header" Teil anzupassen habe ich ihr H1 zugewiesen und diesen mit CSS formatiert. Leider nur je grrößer die Schrift, desto weiter ragt sie in den eigentlichen Main Teil hinein..

Grüße Jasperz

djheke

Das sich die Überschrift aus dem Header bewegt, liegt zum Einen daran, dass die Außen und Innenabstände nicht auf Null gesetzt sind und dein Header eine feste Höhe hat.

Hier mal eine Korrektur mit der Schriftgröße 40px

Code

header {
 padding:10px;
 background:#0c9;
 width:100%;
 position:fixed;
}


header h1 {
 margin:0;
 padding:0;
 font-size:40px;
}
main {
 display:flex;
 padding-top:64px; /* 4 Pixel für die Ober- und Unterzüge*/
 box-sizing:border-box;
 min-height:100%;
}

Alles anzeigen

Was meinst Du mit Schrift direkt unter das obere Ende der Seite ohne den Abstand?

Jasperz

Danke, jetzt passt es perfekt!
Das mit "direkt unter dem Seitenanfang" war als Ergänzung zum Verstehen meiner Idee gedacht, aber das war scheinbar nicht nötig.
Vielen Dank!!

modem-kind

na das ja schön

Jasperz -..wenn Du weiter mit Webseiten was machen willst..
versuch mal Dir die Englischen Begriffe klar zu machen + zu lernen
den die Tags , Argumente , Werte usw. sind nun mal in Englisch
und bleibt auch so -

n <header> ist nun mal von Head also ganz oben abgeleitet -
und kein " Balken"
und n <footer> von Fuß also von ganz unten abgeleitet -
keine "schwarze leiste" - und Schriftgröße heißt eben font-size im css
usw.

wenn das machst kannst auch im http://www.w3schools.com/ ..vieles lesen u. verstehen

Lg. modem-kind