XHTML Fragen von einem Anfänger

Habe mich zwar noch nicht für 'nen besseren Hoster umgeschaut, aber egal.
icon_rolleyes.gif


Ich bin jetzt mit der Umsetzung eigentlich fertig, nur bekomme ich die Navigation oben einfach nicht mittig zentriert, das gleiche mit dem Text im Footer und der eigentlichen Seite.
Habe es mit margin: 0px auto und einem div, der alle anderen umschließt probiert, aber es will nicht klappen.

Dem div habe ich auch eine bestimmte Breite gegeben undzwar 700px, so groß wie die restlichen divs alle breit sind, aber es klappt einfach nicht. :(

Die Seite: https://deevil.funpic.de
 
Du musst am ul arbeiten: Gib dem ul ne feste Breite, damit nicht die volle Breite hat. Dann kannst du mit
Code: 
margin: 0 auto
das verkleinerte ul in der Horizonalen verschieben.
 
Danke. So scheint es zu klappen. Habe jetzt einfach mal 500px bei der Breite genommen, aber jetzt ist der Abstand links nicht genau so groß wie rechts.
Wie soll ich wissen, wie groß die Breite sein muss?
 
(Mit der folgenden Aussage bin ich mir nicht 100%ig sicher)

Dadurch, dass du die li-Elemente im ul-Tag gefloatet hast, ist quasi kein echter Inhalt im ul-Tag drin. Somit weiß der Browser selber ned, wieviel Platz das Tag braucht und
Code: 
width: auto;
funktioniert nicht.

Man möge mich korrigieren, wenn das nicht stimmt.
 
Du könntest statt "clear:both" auch ein .clearfix direkt an dem Containerelement für die gefloateten Element nutzen. Ist für solche Anwendungszwecke oft besser zu handhaben...
 
tleilax schrieb:
Du könntest statt "clear:both" auch ein .clearfix direkt an dem Containerelement für die gefloateten Element nutzen. Ist für solche Anwendungszwecke oft besser zu handhaben...
Zum Vergrößern anklicken....

Cool, so etwas habe ich schon einmal selber versucht zu bauen aber bin gescheitert und dachte es wäre nicht möglich per :after was zu clear'en. Danke dir!
 
Das Problem mit :after ist allerdings, dass der IE6 dieses Pseudoelement nicht unterstützt :-? Für diejenigen, die sich um den IE6 keine Gedanken mehr machen (zurecht! :) ) ist ein clearfix also kein Problem. Ich finde, das sollte man trotzdem erwähnt haben.

//Edit: Der IE7 scheint laut quirksmode.org mit :after ebenfalls Probleme zu haben ...

Und zum Schluß noch ein netten Workaround, ebenfalls von quirksmode:
clearing
 
Zuletzt bearbeitet:
Wo genau muss ich das clearfix einbauen?
Habe es hinter den Eigenschaften für das ul und li eingebaut, aber es hat nicht geklappt.
 
Naruto123 schrieb:
Wo genau muss ich das clearfix einbauen?
Habe es hinter den Eigenschaften für das ul und li eingebaut, aber es hat nicht geklappt.
Zum Vergrößern anklicken....
Das .clearfix muss erstmal in Dein CSS integriert werden. Falls Du nicht weisst, wie das gehst, findest auf SELFHTML eine Übersicht.

Anschliessend musst Du dann wie gesagt dem Container-Element (in Deinem Fall entweder der <ul/> oder das darüberliegende Element) die Klasse "clearfix" geben und das war's dann auch schon.

Renegade schrieb:
Das Problem mit :after ist allerdings, dass der IE6 dieses Pseudoelement nicht unterstützt :-? Für diejenigen, die sich um den IE6 keine Gedanken mehr machen (zurecht! :) ) ist ein clearfix also kein Problem. Ich finde, das sollte man trotzdem erwähnt haben.
Zum Vergrößern anklicken....
Öhrm, die ersten Ergebnisse bei Google haben in der Regel aber auch direkt den Workaround für IE 6/7 mittels Starhack schon dabei, insofern ist clearfix auch für die sowieso kein Problem. ;)
 
Habe es jetzt in die CSS-Datei integriert und dem ul-Tag auch die class "clearfix" gegeben, aber es klappt nicht.
Kann es vielleicht daran liegen, dass das CSS bei mir auf eine externe Datei verlagert ist?

Hier mal die Codes:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">

    <head>
        <title>Design-Umsetzung</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    
    <body>    
        <div id="page-wrapper">
    
            <div id="header">
                
            </div>
        
            <div id="trennlinie">
        
            </div>
        
            <div id="navigation">
                <ul class="clearfix">
                    <li><a href="#">Startseiten</a></li>
                    <li><a href="#">Mediadaten</a></li>
                    <li><a href="#">Werbemittel</a></li>
                    <li><a href="#">AGB</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Impressum</a></li>
                </ul>
            </div>
        
            <div id="content">
                <div id="content-hintergrund">
                        <h1>
                            Lorem Ipsum
                        </h1>
                        
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                        
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                        
                        <p>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
                            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
                            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </p>
                </div>
            </div>
            
            <div id="footer">
                <p>
                    Copyright by Naruto123
                </p>
            </div>
            
        </div>
    </body>
    
</html>

Code: 
* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(bilder/Webdesign2_01.gif);
    width: 2px;    
    height: 100%;
    background-repeat: repeat;
}

a {
    outline: none;
}

a img {
    border: none;
}

#header {
    background: url(bilder/Webdesign2_05.gif);
    width: 700px;
    height: 110px;
    margin-top: 50px;
}

#trennlinie {
    background-image: url(bilder/Webdesign2_08.gif);
    width: 700px;
    height: 1px;
}

#navigation {
    background-image: url(bilder/Webdesign2_07.gif);
    width: 700px;
    height: 40px;
    background-repeat: repeat-x;
}

#navigation ul {
    width: 700px;
    margin: 0px auto;
}

#navigation li {
    list-style: none;
    float: left;
    padding-left: 20px;
    line-height: 40px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 0.8em;
}

/* the clearfix : ------------------ */
.clearfix {
    display: inline-block;
}
.clearfix[class] {
    display: block;
    overflow: hidden;
}

#navigation a {
    color: #401f13;
    text-decoration: none;
}

#navigation a:hover {
    font-weight: bold;
    text-decoration: underline;
}

#navigation a:focus {
    font-weight: bold;
}

#content {
    background-color: #a59d8a;
    width: 700px;
    height: 415px;
    margin-top: 25px;
    padding-top: 35px;
}

#content-hintergrund {
    background-color: #323a39;
    width: 530px;
    height: 370px;
    margin: 0px 85px 0px 85px;
    border-style: solid;
    border-width: 2px;
    border-color: #b2ac9b;
}

#content-hintergrund h1 {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    color: #e7dcc3;
    margin-left: 35px;
    margin-top: 25px;
}

#content-hintergrund p {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 0.8em;
    color: #e7dcc3;
    margin-left: 35px;
    margin-top: 10px;
}

#footer {
    background-image: url(bilder/Webdesign2_03.gif);
    width: 700px;
    height: 30px;
    background-repeat: repeat-x;
    margin-top: 25px;
    margin-bottom: 50px;
}

#footer p {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8em;
    color: #e7dcc3;
    margin-left: 250px;
    line-height: 30px;
}
 
theHacker schrieb:
@tobomator:
Kannst du mir diesen Post nochmal genau erklären?
Zum Vergrößern anklicken....

Na W3C erkennt ein & oder das i von id in der Klamm URL als Fehler an. Und noch mehr quatsch.
Manche Dinge liegen auch am CSS, kommt drauf an, was man genau macht.

W3C prüft standardmäßig xhtml strict engilsche Variante - wenn ich das richtig in erinnerung behalten habe.
Wer dagegen verstößt (fehlende Deklaration HTML Tag) kann garantiert mit fehlern rechnen !

@Naruto: Du solltest nur allgemeingültige CSS angaben verwenden beim programmieren. Alles was browser spezifisch sein könnte, finger weg!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

C
Welche Fotobearbeitungs-App ist am besten für Anfänger geeignet?
Antworten
1
Aufrufe
9K
k570046
K
Zurück
Oben