Fragen zur Webseite Aufbau

Project-X · 19. August 2010

Hi allerseits

Ich habe da ein folgendes Problem, ich liebe es Homepages zu Stylen und habe auch schon mehrere von "0" aus aufgebaut, aber die Struktur waren bisher immer sehr ähnlich, und jetzt muss ich wegen eine Schulprojektes eine andere Art des Homepages aufbauen, nämlich eins für eine Club oder so ähnliches, deswegen haben wir uns für eine Gamer Seite entschieden.

Ich habe hier ein guten Templates gefunden die mir sehr gefiel ->
Joomla Demoseite

Da wir bei diesem Projekt "selber" einen Template kreieren müssen, ist es nicht erlaubt einen vorhandenen zu nehmen.

Der erste Schritt wäre es, eine HTML und CSS Datei zu kreieren mit den Grundlegenden Gerüst ohne Inhalt, Grafik, JS usw.
Allerdings kam es hier zu den unerwarteten Problemen, da meine Seite bisher recht Statisch ist, habe ich die Höhe und Breite immer gefixt.
Bei dem hier soll der Content nur in der Breite gefixt sein, in der Höhe aber Variable je nach Inhalt (inkl. minderst Höhe).

Bei dem Navi ganz oben, habe ich unerklärlicherweise einen Abstand zum Rand, wie kann ich dies ändern?

Bei der unteren Teil des Contents gibt es links und rechts je eine Spalte, ich hab die drei einfach in einen <div id="masterc"> verpackt, und dessen css Formatierung sieht so aus:

#masterc {
position: relative;
top: 320px;
height: auto;
min-height: 480px;
width: 1000px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
z-index: 2;
}

Und bei den drei Contents dort drin sieht es so aus:

#leftc {
position: absolute;
height: auto;
width: 200px;
z-index: 1;
}

#content {
position: absolute;
left: 200px;
height: auto;
width: 600px;
z-index: 1;
}

#rightc {
position: absolute;
left: 800px;
height: auto;
width: 200px;
z-index: 1;
}

Mein Ziel ist es, falls eine der Spalte eine Länge von über 480px erreicht, sollte Automatisch den ganzen Content alle 3 spalten länger ziehen.
Den mit dieser Code zieht es nur 1 Spalte länger. Da es "im" diesen <div id="masterc"> verpackt wurde, ging ich davon aus dass es der Automatisch länger zieht, was aber nicht passierte

Und komischerweise entsteht es neben der Navi und der Header einen Abstand, der genauso hoch ist wie der Navi selbst.
Genau dasselbe passiert beim Header zur Content Bereichen, dort ist der Header 270px gross, und der Abstand darin ist auch ca. 270px

Eine letzte Frage habe ich noch, wie kann ich so eine schatten am Rand machen wie bei der Originale Seite? Ich meinte diesen Rand beim Content und unter der Navi Leiste.
Glaube nicht das es blos normale "border" sind, oder?

Wer sich Lust hat das Problem mal anzuschauen hab ich die CSS und HTML Datei rauf geladen

Was die Farben und sonstiges anbelangt, sind nur Spielereien die später verändert werden, jetzt dient Sie nur damit um zu schauen was was ist

Edit: Das Problem mit diesen Abständen wurde behoben, sowie der blöde Abstand zur oberen Rand auch.
Bleibt nur noch der Statische Container...

TrueEdge · 20. August 2010

Ich gucke mir das gerade mal an. Ich versuch es dir mal so hinzubekommen, wie du es wolltest. Wenn ich es dir dann wieder schicke, kannst du ja mal mit WinMerge die Dateien miteinander vergleichen und sehen, was ich geändert habe.

Project-X · 20. August 2010

Hi!
Danke

Ich hab hier aber noch den Aktuelleren Version.
Wie gesagt, wurde die Probleme wegen den Abständen sowie Abstand zur Rand durch "margin: top;" und löschen des befehl "top: XXXpx;" gelöst.

Nur das Problem mit dem Dynamischen content besteht weiterhin

Edit: für die die keine Lust haben die Datei zu laden, hier wäre den Quellcode und CSS:

Quellcode:

<!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>
<title>
eLiTe GmR's
</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body style="padding-top:">



<div id="navi">
<div>
<a href="#" id="btn1"></a>
</div>
<div>
<a href="#" id="btn2"></a>
</div>
<div>
<a href="#" id="btn3"></a>
</div>
<div>
<a href="#" id="btn4"></a>
</div>
<div>
<a href="#" id="btn5"></a>
</div>
</div>



<div id="header">
</div>



<div id="masterc">



<div id="leftc">
</div>



<div id="content">
</div>



<div id="rightc">
</div>

</div>
</body>
</html>

CSS:

/* =======================================================================
Haupteinstellung für das ganzer Hompages
======================================================================= */

body {
padding-top: inherit;
font-family: Arial, Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
color: #444444;
background-color: #333;
margin: 0px;
}

/* =======================================================================
Einstellung für der obere Navigationsleiste
======================================================================= */

#navi {
position: relative;
height: 50px;
width: 750px;
background-color: #CCC;
margin-left: auto;
margin-right: auto;
}

/* =======================================================================
Buttons Formatierungen
======================================================================= */

#btn1 { /* Button 1 =============================== */
position: absolute;
left: 0px;
height: 50px;
width: 150px;
}

#btn1:hover {
background-color: #F00;
}

#btn2 { /* Button 2 =============================== */
position: absolute;
left: 150px;
height: 50px;
width: 150px;
}

#btn2:hover {
background-color: #0F0;
}

#btn3 { /* Button 3 =============================== */
position: absolute;
left: 300px;
height: 50px;
width: 150px;
top: 0px;
}

#btn3:hover {
background-color: #00F;
}

#btn4 { /* Button 4 =============================== */
position: absolute;
left: 450px;
height: 50px;
width: 150px;
}

#btn4:hover {
background-color: #FF0;
}

#btn5 { /* Button 5 =============================== */
position: absolute;
left: 600px;
height: 50px;
width: 150px;
}

#btn5:hover {
background-color: #0FF;
}

/* =======================================================================
Header Formatierungen
======================================================================= */

#header {
position: relative;
height: 220px;
width: 1000px;
background-color: #999;
margin-left: auto;
margin-right: auto;
}

/* =======================================================================
Master Container
======================================================================= */

#masterc {
position: relative;
min-height: 580px;
width: 1000px;
background-color: #666;
margin-left: auto;
margin-right: auto;
z-index: 2;
}

/* =======================================================================
Formatierungen fürs Linke Spalte im Content Block
======================================================================= */

#leftc {
position: absolute;
width: 200px;
z-index: 1;
}

/* =======================================================================
Content / Text & Info- Bereich Einstellungen
======================================================================= */

#content {
position: absolute;
left: 200px;
width: 600px;
z-index: 1;
}

/* =======================================================================
Formatierungen fürs Rechte Spalte im Content Block
======================================================================= */

#rightc {
position: absolute;
left: 800px;
width: 200px;
z-index: 1;
}

Mister Blue Sky · 21. August 2010

Den Code des Joomla-Templates find ich ... naja. Hier mal ein schematischer Nachbau:
mit einfachem, striktem xhtml [z.B. test.html]

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css"/>

<title>test</title>

<!--[if lte IE 6]><style type="text/css">* html #col2{float:left; 
width:55.8%; background:#ffff00;} * html #masterc{display:inline-block;}</style> <![endif]-->

</head><body>

<div id="top"><div class="inhalt"><p>Div top</p></div></div>
<div id="head"><div class="inhalt"><p>Div head</p></div></div>

<div id="masterc">

<div id="col1"><div class="inhalt"><p>Div col1</p></div></div>
<div id="col2"><div class="inhalt"><p>Div col2 - hier mit min-height 480px definiert</p>
</div></div>
<div id="col3"><div class="inhalt"><p>Div col3</p></div></div>

</div><!-- masterc End -->

<div id="foot"><div class="inhalt"><p>Div foot [btw] für den 6er IE ist der <a
href="http://tiny.cc/5cabw">Star-HTML-Hack</a> bereits eingebunden</p></div></div>
</body></html>

[und 2.] das Styling [schematisch] gemäß Vorlage + die Anforderung:
"automatisch den ganzen Content alle 3 Spalten länger ziehen" - hab ich folgendermaßen realisiert:

body {font-family:verdana,sans-serif; margin:0; padding:0; font-size:13.4px; background:#fff;}

#top {background:lime; width:800px; margin:auto;}
#head {background:silver; width:1000px; margin:auto;}
#foot {clear:both; background:silver; width:1000px; margin:auto;}

#masterc {overflow:hidden !important; background:yellow; width:1000px; margin:auto;}

#col1, #col2 {float:left;}
#col1 {width:22%; background:aqua;}
#col2 {width:56%; background:yellow; min-height:480px;}
#col3 {float:right; width:22%; background:aqua;}
#col1, #col2, #col3 {padding-bottom:15000px; margin-bottom:-15000px;}

p {border:2px solid white; margin:4px 0px 4px 0px; padding:2px 5px 2px 5px;}
.inhalt {display:inline-block; padding:0px 5px 0px 5px;}

[Wollt mal den Spoiler testen] GF

Suche

Fragen zur Webseite Aufbau

Project-X

Commodore

Anhänge

TrueEdge

Lt. Junior Grade

Project-X

Commodore

Anhänge

Mister Blue Sky

Gast

Ähnliche Themen