• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fragen zum Layout meiner Website!

deflox

Neues Mitglied
Guten Abend,

Ich habe einige Fragen zu meinem Layout:

Ich habe bisher mehr oder weniger Erfolgreich ein Layout erstellt, welches ganz auf den Standard ausgelegt ist. Also head, Navigation, Text, footer... Damit ihr sehen könnt, wie meine Website bis jetzt aussieht, könnt ihr euch hier ein Bild von meinem jetzigen Layout ansehen.

Der Code meines Index HTML Dokuments und der CSS Datei sieht so aus:

HTML:
<html><head>
    <title>Website</title>
    <link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
    <div id="webseite" >
    <a href="index.html"><div id="header"></a>
    <h1>Hier könnte Ihr Text stehen!</h1>
    </div>
    <div id="mini"><font size="5">Menu</font></div>
    <div id="main">
        <div id="left"></div>
        <div id="right">
        <hr>
        <center><h2>Beispieltext</h2></center>
        <hr>
        Hier steht der Beispieltext...</div>
        </div>
    <div id="footer">
    <b><a href="impressium.html">Impressium</a></b>
    </div>
    </div>
</body>
</html>


Code:
body {text-align:left;
background-image: url(2bg.png);
background-repeat: repeat;
}
#webseite {
width:980px;
margin:0 auto;
}
#header {
text-align:center;
padding-top:50px;
width:980px;
height:150px;
background:orange;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#header h1 {
padding-top:1px;
font-size:40px;
font-weight:bold;
color:black;
font-family:Century gothic;
}


#mini{
float:left;
width:980px;
height:32px;
font-family:century gothic;
background:orange;
margin-top:5px;
margin-bottom:2px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}


#main {
width:980px;
}


#left {
float:left;
width:200px;
height:370px;
background:orange;
margin-top:3px;
margin-bottom:50px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#right{
float:right;
font-family:century gothic;
font-size:10pt;
width:775px;
background:orange;
margin-top:3px;
margin-bottom:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}
#footer {
text-align:center;
width:980px;
height:19px;
background:orange;
clear:both;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

Nun habe ich für meine Website verschiedene Ideen, welche ich realisieren möchte, ich weiss aber nicht ganz, was ich machen soll.


  1. Der Header soll mit der Menüleiste über die ganze Seite gezogen werden. Die Box für das Untermenü und dem Text soll aber weiterhin zentriert bleiben. Ist es möglich, dass diese Menüleiste, je nach Grösse des jeweiligen Bildschirms automatisch angepasst wird? Wenn ich jetzt eine bestimmte Breite definiere, sieht das bei mir sicherlich gut aus (habe einen ca. 18 Zoll grossen Bildschirm; Laptop), aber bei etwas grössen Bildschirmen würde das nicht gut aussehen, da dieses dann immer wieder in der selben Grösse dargestellt wird.
  2. In den Zentrierten Boxen für das Untermenü möchte ich eigentlich erreichen, dass die Menübox in der Textbox mit hineingezogen wird. Dazu habe ich mal ein Bild erstellt, dass man es sich ein bisschen besser Vorstellen kann. Auf dem Bild habe ich mir gedacht, dass meine Textbox in der Mitte auf die von mir definierten 980px gezogen wird und die Menübox über der Textbox steht. Der Text müsste dafür natürlich so angepasst werden, dass er die Breite zwischen dem Rechtem Rand bis zur Menübox aufweist.
  3. Bei Punkt Nummer 2 kommt meine Dritte Frage/Idee. Wie kann man den Text innerhalb einer Menübox bearbeiten/formatieren. Dass heisst zum Beispiel, dass er überall einen abstand vom Rand von 20 px aufweist etc... Die <div> Codes habe ich für die Boxen erstellt, den Text formatiert etc. Wenn ich das mit HTML machen würde, dann müsste ich jede Seite einzeln Formatieren. Gibt es auch dafür mit CSS einen Code, bei welcher sich der Text auch immer wieder auf die CSS Datei anpasst.

Danke für die Antworten... :D

Werde mir eure Antworten erst Morgen ansehen (wenn überhaupt) :) Könnt ihr euch solange Gedulden falls ihr mehr Material von mir braucht? Danke...
 
Zuletzt bearbeitet von einem Moderator:
Das ist schon mal ganz schlecht. Ein Doctype fehlt, es gibt keine Tags wie <center> und <font size="5"> mehr und die font-family: century gothic sehen nur User, die diese Schrift auch auf ihrem Rechner installiert haben.

Warum lernen die meisten Leute HTML eigentlich aus uralten Quellen?
 
Also wie Tronjer schon geschrieben hat sollten die Tags Center und font raus aus deinem HTML code.
Den Doctype kannst du ganz leicht durch HTML 5 nun so schreiben
Code:
<!DOCTYPE html>

Also zu Punkt drei, du kannst (soviel wie ich nun weiß) jedes HTML Tag mit CSS manipulieren. Also den text in deinen Menüboxen kannst du in einen <p> Tag stecken und dann mit CSS verändern.

Falls ich das nun richtig verstanden habe was du willst.
 
Zurück
Oben