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

Layout zentrieren

X

xanthia123

Neues Mitglied
Ich bin ein wenig verzweifelt. Das Thema wurde schon öfter diskutiert aber ich kriegs selbst einfach nciht hin weil mein Code dann oft nicht so ist wie er sein müsste um bestimmte Lösungen anzuwenden.

Und zwar möchte ich mein gesamtes Layout auf dieser Seite gerne zentriert haben:

Music Diary

Ich häng euch HTML und CSS gleich mal an. Wäre jemand so lieb und würde wenn er meine funktionstüchtige Lösung hat diese gleich in meinem Code eingebaut posten? Sonst klappt es wieder nicht :( Wäre super lieb!!!

Code: 
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Music Diary</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<div id="Schriftzug">
</div>

<div id="Banner">
</div>



<div id="Leiste">
        <h3>Willkommen</h3>
auf meinem kleinem Musik-Diary. Hier werde ich regelmäßig über Musik schreiben,
 aktuelle CDs vorstellen und von Konzerten berichten, die ich besucht habe. Viel Spaß!
<p>
    
   
<h3>Navigation</h3>
<ul id="Liste">
<li><a href="http://julia1985.lima-city.de/cutenews/show_news.php" target="hauptfenster">Home</a></li>
<li><a href="cds.html" target="hauptfenster">CD-Rating</a></li>
<li><a href="top10.html" target="hauptfenster">Top 10</a> </li>
<li><a href="konzerte.html" target="hauptfenster">Konzerte</a> </li>
<li><a href="about.html" target="hauptfenster">About</a> </li>
<li><a href="http://gb.webmart.de/gb.cfm?id=1196396" target="hauptfenster">Gästebuch</a></li>
</ul>
<p><h3>About</h3>
Diese Webseite wurde zu privaten Zwecken erstellt und ich verdiene kein Geld damit. Wer mich kontaktieren möchte, kann dies per <a href="mailto:[email protected]">Mail</a> sehr gerne tun.
<p>

</div>


<div id="IFrame">
        <iframe id="hauptfenster" src="http://julia1985.lima-city.de/cutenews/show_news.php" width="780" height="570" name="hauptfenster" noresize="noresize" frameborder="0" border="0"
</iframe>
</div>


</body>

</html>
Code: 
CSS:

body { 
background-color: #ffffff; 
font: 10pt Verdana, Arial; 
text-align: justify;
}

#rezensionen {
width: 700px; 
background-color: #ffffff ; 
border: 1px solid #9d9c9c; 
font: 10pt Verdana, Arial; 
padding: 3px 5px; 
text-align: justify;
}

h3 {
border-bottom: 1px solid #9d9c9c; 
color: #5a0d0d; 
font-size: 11pt;
}

h2 {
border-bottom: 1px solid #9d9c9c;  
color: #5a0d0d; 
font-size: 10pt;
}

#Schriftzug {
width: 1024px; 
height: 100px; 
background-image: url(schriftzug.png); 
border: 0; 
}


#Banner { 
width: 1024px; 
height: 219px; 
background-image: url(filmstreifen.png); 
border: 0; 
margin: 5px 0px;

}

#Leiste { 
width: 205px; 
height: 500px; 
background-color: #ffffff; 
font: 10pt Verdana, Arial;  
border: 0; 
padding: 8px; margin: 0px 0px 5px 0px;  
text-align: justify;  
float: left;
 }

#IFrame { 
width: 756px; 
height: 500px; 
background-color: #ffffff; 
font: 10pt Verdana, Arial; 
border: 0; 
padding: 8px; 
margin: 0px 0px 0px 5px;
float: left;
}


#ratings {border: 0px;  }

#blog {border: 1px solid #9d9c9c; }

#cdcover {border: 1px solid #9d9c9c; float: left; margin: 5px; }

#Liste {list-style-type: square; padding: 0 15px; }

#fotos_berichte {border: 1px solid #9d9c9c; float: left; margin: 0px 5px 0px 0px; }

#counter {font: 9pt Verdana, Arial; }

a:link {color: #502222; text-decoration: underline; }

a:visited {color: #502222 ;text-decoration: underline; }

a:focus {color: #502222; text-decoration: underline; }

a:hover {color: #502222; text-decoration: blink; text-decoration: underline; }

a:active {color: #502222; text-decoration: underline; }
 
Werbung:
Hm, ich hab den Code eingefügt, aber es funktioniert nicht?

Codeauszug aus CSS:
Code: 
body { 
align: center;
background-color: #ffffff; 
font: 10pt Verdana, Arial; 
text-align: justify;
margin-left:auto; 
margin-right:auto;
}

Das IFrame hab ich, weil ich nicht weiß wies anders geht :D Also das Große Fenster wo sich dann die Unterseiten öffnen ist ja mein Iframe, dann brauch ich das bei einer Verlinkung nur ansprechen und es passt.. wenn ich das nicht habe, weiß ich irgendwie nicht, wie ich das schaffe, dass sich die Unterseiten genau dort öffnen :D Bin dankbar für Vorschläge.
 
Werbung:
Hallo xanthia123,

Umgebe deinen Seiten Bereich mit einem seperaten Div Container, diesen setzt du dann per CSS auf "margin: 0 auto;".

Liebe Grüße Mr. Value
 
"margin: auto;" wirkt nur auf Elemente zentrierend, wenn diese auch gleichzeitig eine feste Breite haben.

Das iframe würde ich dennoch rausschmeißen.
 
hm also ich hab das mit dem DIV außenrum probiert, klappt irgendwie auch nciht..

Wegen des Iframes, wenn ich es rausschmeiße, wie sag ich dann einem Link wo er sich öffnen soll? :D
 
Werbung:
Was hast Du denn "probiert"? Ohne Code kann dir niemand helfen.

Links öffnen die angegeben URLs normalerweise immer in dem Browserfenster selbst.
 
@threadi das würde heißen, ich müsste auf jede Unterseite einfach den HTML Code übernehmen, dass es so aussieht als würde sich nur der rechte Text ändern?
 
Werbung:
hm okay dann denk ich da mal drüber nach.. Nachteil wäre halt, dass ich dann auf jeder Unterseite das Menü + Text etc. anpassen müsste wenn ich was ändere.. aber so viele Seiten sind es ja auch nicht, mal sehen ;)
Auf jeden Fall danke für die Hilfe =) Zentriert siehts jetzt doch schöner aus =)
 
Ja, dafür gibts aber zB PHP, und dadurch geht das viel einfacher.

Mit include oder require kannst du files in deine htm dokumente reinladen.

Du hast dann zB die Datei navigation.htm

mit:

<?php
include("navigation.htm);
?>

wird die Navigation reingeladen, dadurch musst du nur eine Änderung in der navigation.htm vornehemen, was sich dann bei allen htm dokumenten auswirkt, bei denen die navi includet wird.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben