Layoute nicht anpassbar

[marc1812]

Hey,
ich bin zum erstenmal damit beschäftigt ein Mehrzeiliges Layoute zu erstellen. Leider bekomme ich es nicht geordnet und die einzelnen Tags werden immer mit abständen angezeigt.
Welche Möglichkeiten gibt es das zu hebeben.

LG Marc1812

..: SE-Styles - Home :..

 

[aJunkie]

Hmm, schon in CSS

* {
margin:0;
padding:0; }

probiert?

Achso, die Box, die unten ist, soll neben das Menü?
Nach'm floaten, solltest du clearen.

Ich würde auch kein Tabellen-Layout verwenden.
Für die Navi lieber (Liste): ul, li und mit CSS formatieren.

 

[vitus37]

Hallo marc1812,

HTML ist nicht dazu gedacht Layouts zu erstellen. Mit HTML gibt man Inhalt seine logische Bedeutung. Mit einer Tabelle (table-Tag) gibst du deiner Navigation die Bedeutung von tabellarischen Daten, welche hier nicht vorhanden sind. Tabellarische Daten sind zB Spielergebnisse eines Fußballturniers. Hier ist eine Liste von Links (-> <ul>) vorhanden.

Layout macht man mit CSS.

Sollte dich diese kurze Erläuterung nicht dazu veranlassen deine Arbeitsweise umzustellen, gebe ich dir zu deinem Problem mit den Anständen noch die Stichwörter table border mit, nach welchen du googlen kannst. Und wie schon gesagt, HTML ist nicht dazu gedacht etwas anzuordnen, sondern CSS.

Liebe Grüße

 

[marc1812]

@aJunkie
Ja hatte ich schon als alternative Gedacht nur bringt leider nichts.

 

[marc1812]

@vitus37

In gewisser weise nutze ich CSS schon nur anscheinend nicht profesionell genug aber ich werde der "<ul>"-Methode mal nachgehen

 

[aJunkie]

Also, nach allem, was du floatest -> clearen.
Für die Navigation:
<ul id="menue"> // kannst du mit CSS formatieren.
<li>Startseite</li>
<li>Kontakt</li>
</ul>

Edit:

CSS als Beispiel:

#menue {
    margin: 5px 0 0 0;
    padding: 0;
    width: 95px;
    border:0;
    font-size:12px;
    float:left;
}
#menue ul, #menue li {
    list-style-type: none;
    border:0;
    padding:0;
    height: 30px;
    width:95px;
    line-height: 30px;
    text-align:center;
}
#menue li a {
    display: block;
    line-height: 30px;
    height: 30px;
    background:#ffffff url(/img/button1.jpg) no-repeat;
}
#menue a:link, #menue a:visited {text-decoration: none;color: #F9C5DB;}
#menue #akt {color: #FFFFFF;}
#menue a:hover, #menu3 a:hover#akt {color: #FFFFFF;}
#menue a img {border:#FFF 1px solid;margin: 2px 0;}
#menue a:hover img {border:#6DBFFB 1px solid;}

 

[marc1812]

Ok ich verstehe deine Taktik doch leider kann ich mit dem Beispiel des CSS Codes nicht sehr viel anfangen. Ich würde dich bitten das näher zu erläutern.

Danke schonmal ;)

 

[aJunkie]

Vergiss mein Code Ist selbst bissl Unsinniges dabei, aber hier kannst du dir dein Menü aussuchen:
http://www.css-menü.de/

 

[marc1812]

Ok ich habe jetzt mal das Menue gemacht. Klapps auch soweit, nur dass ich die Einzelnen Button mit angeefertigten Grafiken bestückt habe. Sie sollten durchgehend aneinanderhängen, was jedoch nicht funktioniert.Eine zweite Frage ist wie ich die Seite so ausrichten kann damit der komplette Inhalt zentriert ist und die Navigation und der Content Bereich aneinander hängen.

 

[aJunkie]

Aneinenader hängen?
Weise die Grafik lieber für die <li>, wo du height und line-height einfügst.
#menue li {
margin:0;
height:23px;
line-height:23px;
display-block;
}
Probier dann noch display:block aus.

Kannst es dann so machen:
<div class="menue"> // </div>

Ich würde aber gleich ohne div <ul class="menue"> <li>Link1</li> </ul> bevorzugen.

Der "Oberklasse" menue fügst du noch margin:0; und padding:0; ein.
Das wird sich dann auf alle Unterklassen aus.

Alle Angaben ohne Gewähr.

Statt so viele divs zu machen, lieber menue li.kopf {grafik}
Also neue Klassen für li...


Edit:
Du arbeitest sowieso mit festen Größenangaben.
CSS:
body {
margin:0;
padding:0;
width: maximale Weite der gesamten Webseite px;
}
Also alle Inhalte deiner Page nochmal in einen Container (hier body, sollte funktioeren, wenn nicht*), dem du die feste Größe gibst. Die nebeneinander stehenden Elemente kommen dann automatisch näher.
*ansonsten neuen Container und DARIN deine Inhalte wie Menü, content, etc.
Diesen Div schließt du dann auch wieder ganz unten vor dem </body>

Also fang erstmal hier mit an, dann mit dem Menü weitermachen.

 

[marc1812]

Ok Danke jetzt bin ich damit Fertig.
Eine kleinigkeit hab ich aber dann doch noch.
Und zwar welche Varianten gibt es um die gesammte Seite am sinnvollsten zu zentrieren.

Danke nochmal für alles.

 

[aJunkie]

Mit margin:0 auto.
Hinter 0 muss nicht px stehen.

Für das Menü hast du leider wieder eine Tabelle genommen.

Mit Rumexpementieren, fragen und googlen hättest du es viel schöner in CSS bekommen.
Die Schrift hättest du dann nur noch auf die Grafik draufbabben müssen, aber okay.

Homepage zentriert:
Der erste Container, wo alle anderen DIVs drin sind:
margin: 0 auto;
Schau hier.

Sorry, bin angetrunken.

 

[marc1812]

OK

Jetzt hab ich es.
Danke nochmal für alles.
Mit der Tabelle as werde ich irgendwann mal korrigieren.
Aber momentan will ich ersmal fertg haben.

LG

Marc1812