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

Inhalt in die Mitte machen

F

Freaky

Mitglied
Hallo
wie krige ich es hin das der inhalt (als beispiel steht da test) in der mitte und keine absicht auf die menüs links hat?
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#links{
    float:left;
    margin-left:20px;
    margin-right:20px;
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
    clear: left;

}
#rechts{
    float:right;
    margin-left:20px;
    margin-right:20px;
}
#mitte{
    margin-left:20px;
    margin-right:20px;
    float:inherit;
    margin: auto;
}
#funktion{
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
}
#footer{
    clear: both;
    background-image:url(images/footer.png);
    background-position:center;
    text-align:center;
}
li{
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
}
#menu{
    float:inherit;
    background-image:url(images/linkbar1.png);
    background-repeat:repeat-x;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #FFF;
}
a{
    font:"Comic Sans MS", cursive;
    font-size:20px;
    color: #fff;
    text-decoration: none;
}
</style>
</head>

<body>
<div align="center">
  <img src="images/header.png"></img>
    <p id="menu">
        <a href="index.html" target="_iframe">Home</a>
        <a href="http://noshacks.de" target="_blank">Forum</a>
        <a href="download.html" target="_iframe">Download</a>
        <a href="partner.html" target="_iframe">Partner</a>
    </p>
</div>
<div id="mitte" align="center">
    test
</div>
    <p id="links">
        <img src="images/funktionen.png"/>
        <br />
        <img src="images/pfeil.gif"/><b>Auto Leveln<br />
        <img src="images/pfeil.gif"/>Auto Skills benutzen<br />
        <img src="images/pfeil.gif"/>HP kontrolle<br />
        <img src="images/pfeil.gif"/>MP kontrolle<br />
        <img src="images/pfeil.gif"/>Automatisch aufheben<br />
        <img src="images/pfeil.gif"/>Automatisch laufen<br />
        <img src="images/pfeil.gif"/>Hidde modus</b><br />
    </p>
    <p id="links">
        <img src="images/kontakt.png"/>
        <br />
        <img src="images/pfeil.gif"/>Mail: [email protected]<br />
        <img src="images/pfeil.gif"/>ICQ: 489-453-803 <img src="http://status.icq.com/online.gif?icq=489453803&img=27"/><br>
        <img src="images/pfeil.gif"/>ICQ: 387-465-429 <img src="http://status.icq.com/online.gif?icq=387465429&img=27"/>
    </p>
<div id="footer" wight="500px">
        lol
    </div>
</body>
</html>
 
Werbung:
HTML:
Code: 
<p>Test</p>
CSS:
Code: 
p {
  text-align:center;
}

P.S.: Der Code kommt mir bekannt vor...haben wir nicht schonmal drauf hingewiesen, was daran eändert werden müsste?
 
der kommt dir bekannt vor weil du ihn mal in ner tabelle gesehen hast und mir gesagt hast das ich die tabelle vergessen soll

das mit text-align weiß ich aber der inhalt sollte in der mitte sein und funktion + kontakt auf der linken seite und auf der gleichen höhe nur das mit der höhe krige ich nicht hin :(

/EDIT:
so hier kann man das jetz genauser sehen wen man es öffnet
wen man auf z.b. home klickt das der linkere text nicht oben bleibt sondern nach unten rutscht

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#links1{
    float:left;
    margin-left:20px;
    margin-right:20px;
    margin-top:-44px;
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
    clear: left;
}
#links2{
    float:left;
    margin-left:20px;
    margin-right:20px;
    margin-top:-10px;
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
    clear: left;
}
#rechts{
    float:right;
    margin-left:20px;
    margin-right:20px;
}
#mitte{
    margin-left:20px;
    margin-right:20px;
    margin: auto;
    text-align:center;
}
#funktion{
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
}
#footer{
    clear: both;
    background-image:url(images/footer.png);
    background-position:center;
    text-align:center;
}
li{
    background-image:url(images/img0012.png);
    background-repeat:repeat-y;
}
#menu{
    background-image:url(images/linkbar1.png);
    background-repeat:repeat-x;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #FFF;
}
a{
    font:"Comic Sans MS", cursive;
    font-size:20px;
    color: #fff;
    text-decoration: none;
}
</style>
</head>

<body>
<div align="center">
  <img src="images/header.png"></img>
    <p id="menu">
        <a href="index.html" target="_iframe">Home</a>
        <a href="http://noshacks.de" target="_blank">Forum</a>
        <a href="download.html" target="_iframe">Download</a>
        <a href="partner.html" target="_iframe">Partner</a>
    </p>
</div>
    <p id="mitte">
        <img src="images/news.png"/>
        <br />
        <iframe width="547px" height="500px" name="_iframe" onload="this.style.height = '0px';  h = this.contentDocument.body.scrollHeight; this.style.height = h + 60 + 'px'"></iframe>
    </p>
    <p id="links1">
        <img src="images/funktionen.png"/>
        <br />
        <img src="images/pfeil.gif"/><b>Auto Leveln<br />
        <img src="images/pfeil.gif"/>Auto Skills benutzen<br />
        <img src="images/pfeil.gif"/>HP kontrolle<br />
        <img src="images/pfeil.gif"/>MP kontrolle<br />
        <img src="images/pfeil.gif"/>Automatisch aufheben<br />
        <img src="images/pfeil.gif"/>Automatisch laufen<br />
        <img src="images/pfeil.gif"/>Hidde modus</b><br />
    </p>
    <p id="links2">
        <img src="images/kontakt.png"/>
        <br />
        <img src="images/pfeil.gif"/>Mail: [email protected]<br />
        <img src="images/pfeil.gif"/>ICQ: 489-453-803 <img src="http://status.icq.com/online.gif?icq=489453803&img=27"/><br>
        <img src="images/pfeil.gif"/>ICQ: 387-465-429 <img src="http://status.icq.com/online.gif?icq=387465429&img=27"/>
    </p>
<div id="footer" wight="500px">
        lol
    </div>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Freaky schrieb:
so hier kann man das jetz genauser sehen wen man es öffnet
Zum Vergrößern anklicken....
Am besten ist immer ein Link. Dann kann man sich die Dinge wirklich live ansehen.

Aber Dein HTML-Code ist immer noch fehlerhaft. Wenn Du jetzt schon das Stylesheet dazu machst, wirst Du hinterher wieder alles ändern müssen, wenn Du diverse Tags rauswirfst und durch andere ersetzt.
 
Schnuppe sollte es dir nicht sein :D Denn HTML sollte schon richtig angewendet werden. Es kann auch in verschiedenen Browsern zu Darstellungsschwierigkeiten kommen, wenn dein HTML nicht richtig ist. Und wenn du es dann änderst musst du dann auch wieder dein CSS ändern. Erspar dir doch die doppelte Arbeit und mach erst das korrekte HTML und dann CSS:)
 
Werbung:
Auf der Seite steht nirgendwo "Test".

Schnuppe kann Dir das nicht sein, weil die Lösung mit richtigem HTML womöglich anders aussieht, als mit dem Kuddelmuddel jetzt.

Aber wenn Du keinen Bock hast, dann sehe ich keinen Sinn, mich damit weiter zu beschäftigen...
 
ich will erstmal diese seite fertig zu machen mehr nicht vll bescheftige ich mich später weiter damit

test habe ich mit dem news bild und der iframe vertauscht
 
Werbung:
Und was genau soll das sein? Richtiges HTML ist das jedenfalls nicht!
Obwohl ich ja schon stolz auf Dich bin, dass Du <p> statt <div> genommen hast.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben