3-spaltiges Layout

Dragonxy · 9. November 2013

Hi,
kurz mal ne Vorstellung von mir,
ich heiße Thomas, bin 26 und lerne am liebsten über diese Seite, HTML...
Das soll jetzt nicht nur so gesagt sein, es gibt nämlich keine, mir bekannte Seite, auf der es so verstänlich erklärt ist...
(Ich lerne erst seit wenigen Wochen)

So, jetzt zu meiner Frage:
Wie bekomm ich es hin, dass z.b. links und rechts, je ein Balken mit einem Bild ist, und in der Mitte, ein schwarzer Balken, auf dem dann meine Inhalte platziert sind?

Ich hab mir gerade ein paar Bilder, zu einem einzigen zusammen gefügt, welches die Breite von 303px hat.
Aber egal was ich mach, immer sind die Bilder überall zu sehen.

Hier mal mein CSS:

Zitat

#links {
color: transparent;
background-color: #00FF00;
border-style: solid;
border-color: #000000;
float: left;
margin-top: -40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 5px;
margin-left: -150px;
}

#rechts {
color: transparent;
background-color: #00FF00;
border-style: solid;
border-color: #000000;
float: right;
margin-top: -40px;
margin-right: -120px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 10px;
}

#Unterlinks {
color: transparent;
background-color: #00CC00;
border-style: solid;
border-color: #000000;
float: left;
margin-top: 85px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 5px;
margin-left: -150px;
}

#Unter-Unterlinks {
color: transparent;
background-color: #009900;
border-style: solid;
border-color: #000000;
float: left;
margin-top: 210px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 5px;
margin-left: -150px;
}

h1, h2, h3, h4, h5 {
text-align: center;
margin-top: 50px;
margin-right: 200px;
margin-bottom: 0px;
margin-left: 200px;

}

p {
margin-top: 50px;
margin-right: 200px;
margin-bottom: 0px;
margin-left: 200px;

}

Alles anzeigen

hier der rest:

Zitat

body {
padding-top: 50px;
min-height: 100%;
color: #FFFFFF;
padding-bottom: 150px;
padding-right: 150px;
padding-left: 150px;
background-image: url(background.gif);

}

#andere-websites {
text-align: center;
margin-top: 20px;
color: #00FFFF;
}

Alles anzeigen

und hier mein index:

Zitat

<!DOCTYPE html>
<html>

<head>
<title>Startseite von Thomas Butter</title>

<meta charset="UTF-8">
<meta name="description" content="Hobbys und Freizeit">
<meta name="author" content="Thomas Butter">
<meta name="keywords" content="Thomas, Butter, Aquaristik, Terraristik, programmieren, erstellen, Motorrad, Motorräder, Auto, Autos, Fischen, angeln, Hobbys, Interessen, Freizeit">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">

<link href="style.css" type="text/css" rel="stylesheet">
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
<script language="javascript" type="text/javascript" src="javascript.js"></script>

</head>
<ol>
<div id="links">
<li><a href="index.html">Home</a></li>
<li><a href="ueber-mich.html">Über_mich</a></li>
<li><a href="interessen.html">Meine_Interessen</a></li>
</div>

<div id="rechts">
<li><a href="bilder.html">Bilder</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</div>
</ol>

<body>
<h1>Willkommen auf meiner Website</h1>
<h3>Auf diesen Seiten möchte ich mich vorstellen</h3>

</body>

</html>

Alles anzeigen

Ich wäre für jede Hilfe dankbar.

LG
Thomas

PS: Wie mir gerade auffiel, ist das Quote, nicht für die länge meines CSS geeignet, daher in 2 Teilen...

Dragonxy · 10. November 2013

Hab jetzt noch ein bisschen rum experimentiert,
Wenn ich das Bild, zu meinen Links hinzufüge, wird es nur in dem kleinen Kasten angezeigt...

Ich könnte zwar noch in der Mitte, z.b. schwarz rein packen, und rechts wieder die Bilder, damit ich den gewünschten Style hätte, jedoch macht es auch die Datenlast der Website, um einiges größer...
Z.Z. hab ich eine größe von etwa 1mb, und wenn ich auf die Website mehrmals täglich zugreifen will, ist das wirklich nicht gut...

Müsste evtl. auch wissen, wie man eine Website, für mehrere Auflösungen, programmiert, meine ist z.z. für 1080p ausgerichtet (habs noch nicht auf weniger oder gar mehr, versucht)

Ich surfe derzeit mit UMTS auf Prepaid-Basis, und das wird schon teuer genug, wenn ich mir "nur mal kurz" ein paar videos in Youtube ansehe...
(Der Kabel-BW-Techniker lässt sich Zeit, warte schon seit 3 Wochen, auf mein 100Mbit-Anschluss)

Achja, hier mal den Link zu meiner Website
(Gebt diesen Link bitte nicht weiter, sind noch keine Quellen für die Bilder eingetragen, kommt in der nächsten Version)

Weiß leider nicht, ob andere darauf zugreifen können, ist nur ne Test-Domain...
Und, es ist noch das alte Layout online...
Meine eigene Domain sollte demnächst, freigeschaltet werden...

Ratoncito · 10. November 2013

Hallo Thomas,

sicherlich bin ich kein Experte, daher möchte ich auch nur ein paar kleine Tipps geben.
Wenn ich Dich recht verstanden habe, möchtest Du 3 Spalten. Rechts und links eine mit Bildern und in der Mitte der Text. Dazu brauchst Du 3 Bereiche, Links, Mitte und Rechts.
Auf Deiner Seite gibt es schon die Bereiche mit Links und Rechts, und den Inhalt, also Deinen Text hast Du in ein Tag <body> gepackt.
Der Tag <body> soll aber direkt nach </head> stehen, und den Header vom Inhalt trennen.
Dass, was bei Dir im Moment im <body> steht packst Du in den neu anzulegenden <div> Mitte.

Das wären die ersten Schritte. Ich hoffe, Dir ein wenig geholfen zu haben.

Auch ich habe alles hier in dem Seminar gelernt.
Den Machern und allen daran Beteiligten hier nochmal ein dickes DANKE für den Kurs
Zu Beginn hatte ich Null Ahnung von HTML und CSS. Heute weiß ich wenigstens schon mal, wie wenig ich weiß

Meine HP ist auch auf einem 3-spaltigen Layout aufgebaut, muss sich nicht verstecken (glaube ich zumindest) und ist fehlerfrei.

Hier geht es nach Mexiko

Noch einen schönen Sonntag - Wolfgang

Dragonxy · 11. November 2013

Danke, habs inzwischen aber auch anders hin bekommen, ist nun online...
Hab das von dir zwar ausprobiert, jedoch ohne sinnvolles Ergebnis.

Jedoch hab ich nun ein neues Problem.

Kann ich den Link-Kasten, irgendwie bearbeiten, dass er, falls die Seite länger ist, automatisch bis ans untere Ende geht?

Ratoncito · 11. November 2013

Zitat von Dragonxy

Danke, habs inzwischen aber auch anders hin bekommen, ist nun online...
Hab das von dir zwar ausprobiert, jedoch ohne sinnvolles Ergebnis.

Jedoch hab ich nun ein neues Problem.

Kann ich den Link-Kasten, irgendwie bearbeiten, dass er, falls die Seite länger ist, automatisch bis ans untere Ende geht?

Hallo Thomas,
ja, das geht. Schau Dir mal meine Seite an. Auch da richtet sich die Seitenlänge immer nach der längsten der 3 Spalten.

Aber bevor Du Dich mit solchen Details beschäftigst, solltest Du die Fehler in Deinem Quelltext beseitigen. Mache nicht den Fehler, den auch ich bei meiner ersten Seite gemacht habe, und probiere solange herum, bis es irgendwie klappt. Das endet in einem Chaos.
Sorge direkt für eine strukturierte Programmierung. Du hast doch geschrieben, dass Dir der Kurs gefällt. Dann arbeite ihn auch durch und setze alles Gelernte um
Im Prinzip sollte es so aussehen:
Zuerst den Doctype,dann
<html>
<head> mit allen Angaben, die in den Header gehören,
</head>
<body> mit Allem was zum Inhalt der Seite gehört, und zum Schluss
</body>
</html>

Saludos - Wolfgang

Dragonxy · 11. November 2013

ok, das heißt also, dass ich meine Seiten-Links, und den footer in den Body schiebe?
Werds heut Nacht mal testen, muss gleich aufn Bau...

Hab bei deiner Seite, nen lustigen Bug gefunden:

Geh mit der Maus auf "Reisen" (nicht klicken)
Dann auf "2013", dann rechts aufs Bild,
und zum Schluss, hoch auf nen andern Link (Aktuelles, Über uns, usw.)

Da flattert das Bild, wie meine Hände, als ich in der Alkohol-Entgiftung war...

Ratoncito · 12. November 2013

Zitat von Dragonxy

Hab bei deiner Seite, nen lustigen Bug gefunden:

Geh mit der Maus auf "Reisen" (nicht klicken)
Dann auf "2013", dann rechts aufs Bild,
und zum Schluss, hoch auf nen andern Link (Aktuelles, Über uns, usw.)

Da flattert das Bild, wie meine Hände, als ich in der Alkohol-Entgiftung war...

Hallo Thomas,

upps, ja das stimmt. Wo es dran liegt ist mir schon klar, aber jetzt muss ich erst weg. Werde mich aber am Nachmittag gleich mal daran geben, den Bug zu beseitigen.

Vielen Dank für den Tipp

Saludos - Wolfgang

Hallo zusammen,

der von Thomas beschriebene Bug macht mir mehr Probleme als gedacht. Das Flattern kommt dann, wenn man das Foto nach oben verlässt. Dabei geht Mouseover verloren, das Bild wird nach links eingefahren und die Jahreszahlen nach oben. Durch das Nach-oben-ziehen der Jahreszahlen fährt auch das Foto nach oben, und damit ist auch Mouseover wieder aktuell. Die Jahreszahlen fahren wieder nach unten, Mouseover geht verloren...

Als Lösung dachte ich daran, das Nach-oben-ziehen zu verzögern, aber das bekomme ich nicht hin. Hat jemand eine Lösung für mein Problem?

CSS

.nav-oben {
    font-size: 22px;
    margin: 10px auto 0 0;
    padding: 0px 0 0;
    width: 1288px;
}




#nav {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}




#nav li {
    float:left;
    -moz-transition: all 1s ease-in-out;         /* schiebt 2007 bis 2013 langsam nach unten */
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    list-style:none;
    margin: 0px 0 0;
    padding: 0px 0 0;
    width:150px;
}




#nav .lang a {
    float:left;
    height: 40px;
    list-style:none;
    margin: -10px 0px 0px;
    padding: 10px 0 0;
    width:220px;
    }




#nav a {
    border-radius: 25px;
    height: 40px;
    -moz-transition: all 1s ease-in-out;         /* zum langsamen ausblenden */
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    color: rgba(0,0,0, 1);
    display:block;
    margin: -10px 0px 0px;
    padding: 10px 0 0;
    text-decoration:none;
    width:130px;
}




#nav li ul li {
    display: inline;          /* hält den reservierten Platz wenn nicht sichtbar klein */
    height: 1px;
}




#nav .hoch a, #nav li:hover a  {
    border-radius: 25px;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    -moz-box-shadow: -10px 10px 2px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: -10px 10px 2px 0px rgba(0,0,0,0.4);
    box-shadow: -10px 10px 2px 0px rgba(0,0,0,0.4);
    color: rgba(255, 255, 255, 1);
    height: 40px;
    margin: -10px 0px 0px;
    padding: 10px 0px 0px 0px;
    text-shadow: -2px 2px 0px rgba(0,0,0, 1);
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}




#nav ul li a {               /* macht 2008 bis 2013 zuerst unsichtbar */
    opacity: 0;
    visibility:hidden;
    width: 110px;
}




#nav ul li a img {       /*  macht Bilder bei 2008 bis 2013 zuerst unsichtbar  */
    border: none;
    float: left;
    left: 100px;
    margin: -40px -10px;
    opacity: 0;
    position: relative;
    visibility:hidden;
    width: 1px;
    z-index: 99;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}




#nav li ul li:hover a img {         /* macht Bilder sichtbar */
    border-radius: 20px;
    border-top: 2px solid rgba(255, 255, 255, 1);
    border-right: 2px solid rgba(255, 255, 255, 1);
    -moz-box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.4);
    box-shadow: -20px 20px 2px 0px rgba(0,0,0,0.4);
    opacity: 1;
    visibility: visible;
    width: 720px;
    height: 405px;
    z-index: 99;
}




#nav li:hover ul li {
    border-radius: 20px;
    height: 30px;
    opacity: 1;
    visibility: visible;
    margin: 0px 0px 0px 0px;
    padding: 0px 0 10px;
    width: 90px;
}




#nav li:hover ul li a {
    border: none;
    opacity: 1;
    visibility: visible;
    margin: 0px 0px 0px 0px;
    box-shadow: none;
    width: 90px;
}




#nav li ul li:hover a {
    border-top: 1px solid rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(255, 255, 255, 1);
    height: 30px;
    text-shadow: -2px 2px 0px #000;
    -moz-box-shadow: -10px 10px 2px 0px rgba(0,0,0,0.4);
    -webkit-box-shadow: -10px 10px 2px 0px rgba(0,0,0,0.4);
    box-shadow: -10px 10px 2px 0px rgba(0,0,0,0.4);
}




.lang {
    width: 240px;
    letter-spacing: -1px;
}

Alles anzeigen

Für Eure Hilfe im Voraus schon mal vielen Dank.

Saludos - Wolfgang

PS Sollte das Thema hier falsch sein, da es ja eigentlich um das 3spaltige Layout von Thomas ging, dann bitte verschieben. Oder soll ich einen neuen Beitrag aufmachen?

Axel · 13. November 2013

Hast du dir einmal das Schritt für Schritt Beispiel unter http://www.html-seminar.de/3-s…out-mit-css-erstellen.htm angesehen?
Da wird 3-spaltiges Layout Schritt für Schritt gezeigt (mitsamt den Trick der Spalten bis ganz nach unten)

Jetzt mitmachen!

Teilen