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

border streicht überschrift durch

gar keine Frage, ich denke schon das du was auf dem Kasten hast und werde die Ratschläge die du mir gegeben hast befolgen. Ich will ja schließlich noch was lernen! :-)
 
Na, dann ist ja gut und dann wirst Du mir verzeihen, wenn ich manchmal ein wenig ruppig klinge :-)
Aber ich will es einfach glasklar rüberbringen was Sache ist und nicht durch die Blume sprechen.

Da Du es bis hierher geschafft hast, ohne mich anzumeckern oder zu beleidigen, glaube ich, dass Du großes Potenzial hast :-)

Grüße,
-Efchen
 
es ist mir aber doch noch ein Problem aufgetaucht.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JK</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<h1><img src="images/logo.gif"></h1>

<div id="central">
<div id="nav">
<ul>
<li><a href="unternehmen.php"><span>Unternehmen</span></a></li>
<li><a href="leistungen.php"><span>Leistungen</span></a></li>
<li><a href="partner.php"><span>Partner</span></a></li>
<li><a href="stellenangebote.php"><span>Stellenangebote</span></a></li>
<li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
</ul>
</div>
<div id="maintext">
<h4>Unsere Partner</h4><p>
<table border="1">
<tr>
<td><a href="http://www.arbonia.de/Deutsch/"<img src="../jk/images/danfoss.gif"</a></td>
<td>test1</td> 
</table>
</div>
</div>


<div id="footer">

</div>

</div>
</body>
</html>

css-code:
Code: 
html {
height: 100.3%;

}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;

}

div#wrapper {
width: 850px;
margin:0 auto;
}

h1 {
background: url(../images/header.gif) no-repeat;
height: 78px;
padding: 40px;
}



div#central {
background: url(../images/central.gif) repeat-y;
padding-top:40px;
padding-left: 60px;
}


div#nav {
padding-right: 60px;
float:right;
}


div#nav li {
display: inline;
list-style-type: none;
}

div#nav a {
float:left;	
text-decoration: none;
padding-left:1.0em;
margin-left:0.4em;
background: url(../images/tab_normal.gif) no-repeat left top;
}

div#nav a span {
display: block;
padding:0.5em 1.4em 0.3em 0.5em;
background: url(../images/tab_normal.gif) no-repeat right top;
}

div#maintext {
clear:right;
width: 710px;
height: 400px;
border-style:solid;
border-color: #dddddd;
border-width: 2px;
padding: 15px;
line-height:0.4em;
}

div#footer {
background: url(../images/footer.gif) no-repeat;
height:180px;
}


a {color: #fe0101; text-decoration: none;
}

img {
border:none;
}

a:link {}
a:visited {}
a:hover {}
a:active {}



h4 {
color: #a0a0a0;
border-bottom: 1px solid #fe0101;
line-height:1.4em;
display:inline;
}
wenn ich wie du sagt, den header ändere in h1, dann habe ich eine lücke drin
JK
 
Probier mal

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

Das setzt alle Abstände universell auf null, damit auch den margin der Überschriften.
 
Genau. Allerdings nicht ganz so wie er lustig ist, meist stimmen die Verhältnisse in etwa über ein. Jeder Browser hat per se eine Definition von den Entwicklern, welche margin/padding Werte jedes Element annimmt.
 
Natürlich. Gib der Liste eine feste Breite, ordne die einzelnen Listenelemente nebeneinander an, wenn der Platz nicht ausreicht, rutschen die nachfolgenden Elemtene in die nächste Zeile.
Zum Vergrößern anklicken....
Habe folgende definiert
html-code:
Code: 
<dl>
<dt><a href="http://www.arbonia.de/Deutsch/"<img src="images/arbonia.gif"></a></dt>
</dl>
<dl>
<dt><a href="http://www.arbonia.de/Deutsch/"><img src="images/arbonia.gif"></a></dt>
</dl>

Code: 
dl {
padding-top:8px;
}
Mein Ziel ist folgendes: Ich hätte gerne das vier Bilder nebeneinander und vier Bilder untereinander angeordnet werden. Also 4 x 4.
Kann mir jemand einen Tipp geben wie ich das mit einer Definitionsliste realisieren kann?
 
Frage 1: Warum hast Du mehrere Listen gemacht, das soll doch nur eine werden?
Frage 2: Vorher hattest Du ein Logo und einen Text dazu. Nur deshalb war es eine Definitionsliste. Jetzt fehlt der Text (das <dd>). So ist das keine gültige Definitionsliste und wenn es so bleiben soll, ist es eine normale Liste (<ul>).

Bevor man irgendwas darstellt und anordnet, muss man wissen, was man eigentlich will. Erst der Inhalt. Dann HTML. Dann erst CSS.
 
also das mit dem text war nur ein Beispiel. Also ich möchte ausschließlich bilder haben. Es handelt sich wie schon gesagt 4 x 4, also vier zeilen und vier spalten.
Geht das auch mit einer definitionsliste?
 
Nein, eine Definitionsliste listet Definitionen. Da gibt es ein <dt> und ein dazu gehöriges <dd>, wie eben ein Bild mit einer Bildbeschreibung.

Wenn Du nur Bilder hast, dann ist es eine einfache Liste. Wie Du die darstellen willst, ob 4x4 oder 12x666 ist völlig irrlelevant bei der Wahl des richtigen Tags! Trenne bitte auch in Deinen Gedanken Inhalt von Layout.

Zum Layout:
Mach eine Liste draus, gib der Liste eine Breite die so gewählt ist, dass vier Bilder rein passen, dann brechen die Bilder von selber um.
 
Corraggiouno schrieb:
also das mit dem text war nur ein Beispiel. Also ich möchte ausschließlich bilder haben. Es handelt sich wie schon gesagt 4 x 4, also vier zeilen und vier spalten.
Geht das auch mit einer definitionsliste?
Zum Vergrößern anklicken....

Hallo Corraggiouno,

eine Definitionsliste besteht aus Definitionen, diese bestehen aus dem zu definierenden
Ausdruck und der dazugehörenden Beschreibung.
Das kann man also sehr gut verwenden, um Bilder mit Bildunterschrift aufzulisten.

Für Bilder ohne Bildunterschrift verwendest Du eine ungeordnete Liste:
Code: 
<ul class="galerie">
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
   <li><a href="#"<img src="images/bild.gif"></a></li>
</ul>
CSS:
Code: 
ul.galerie {
    float:left;
   clear:left;
        width:400px;
        margin:0;
        padding:0;
}
ul.galerie li {
        margin:0;
        padding:0;
        list-style-type:none;
        display:inline;
}
ul.galerie li a img {
        float:left;
        width:96px;
        margin:0 4px 4px 0;
        padding:0;
}
Grüße
Bernhard
 
also ich habe mal eine graphik im Anhang, so habe ich mir das ungefähr vorgestellt. Natürlich mit unterschiedlichen Bildern. Lässt sich dies auch mit einer Definitionsliste realisieren oder muss ich dann doch auf Tabellen zurückgreifen?
 

Anhänge

  • partner.jpg
    partner.jpg
    9,6 KB · Aufrufe: 11
HAAALLLOOOOO????
Jemand zuhause?
Liest Du, was wir schreiben? :-)

Ich bin ja ein sehr geduldiger Mensch, aber so langsam frage ich mich, ob Du Antworten einfach ignorierst, oder ob Du uns und unsere Ausdauer irgendwie testen willst. :-)

Ob Du eine Definitionsliste oder eine Tabelle verwendest hat nichts damit zu tun, wie das im Browser dargestellt wird!
Welches Tag Du verwendest, hat einzig und allein mit der Bedeutung des Inhalts zu tun!

So weit waren wir doch schon bei der letzten Antwort, dass das eine ungeordnete Liste ist und keine Definitionsliste, schon gar keine tabellarischen Daten. Wir haben Dir auch erklärt, was eine Definitionsliste ist. Und wir haben mehrfach darauf hingewiesen, dass die Wahl des Tags rein gar nichts mit der Darsellung zu tun hat. Nichts! Nichts Wirklich nichts! So einfach ist das! HTML != Darstellung
 
habe nun folgenden code definiert:
Code: 
ul.partner {
padding-top:10px;
list-style-type:none;
}

ul.partner li {
display:inline; width:500px;
}
html-code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JK</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<h1><img src="images/logo.gif" alt="Jaki und Klaiber"></h1>

<div id="central">
<div id="nav">
<ul>
<li><a href="unternehmen.php"><span>Unternehmen</span></a></li>
<li><a href="leistungen.php"><span>Leistungen</span></a></li>
<li><a href="partner.php"><span>Partner</span></a></li>
<li><a href="stellenangebote.php"><span>Stellenangebote</span></a></li>
<li><a href="kontaktformular.php"><span>Kontaktformular</span></a></li>
</ul>
</div>
<div id="maintext">
<h4>Unsere Partner</h4>
<ul class="partner">
<li><a href="http://www.arbonia.de/Deutsch/"><img src="images/arbonia.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>
<li><a href="http://www.grohe.de/"><img src="images/grohe.gif"></a></li>

</ul>

</div>
</div>


<div id="footer">

</div>

</div>
</body>
</html>
Das klappt ja schon ganz prima? Jetzt habe ich aber noch 3 Fragen:
1. was bedeutet das ausgesprochen: ul.partner li
das bedeutet doch, das der liste ul eine Klasse "partner" zugeordnet ist....und dann?

2. Wie kann ich das ganze beieinflussen, wenn ich in der ersten Zeile 5 Bilder haben möchte
3. die weiteren Bilder haben keine Abstände zu einander?

Kann mir bei diesen drei Fragen, noch jemand einen Tipp geben?
so ist das aktuelle Ergebnis
JK
 
Corraggiouno schrieb:
1. was bedeutet das ausgesprochen: ul.partner li
Zum Vergrößern anklicken....
Das gilt für alle <li>, die innerhalb von <ul class="partner"> stehen.

2. Wie kann ich das ganze beieinflussen, wenn ich in der ersten Zeile 5 Bilder haben möchte
Zum Vergrößern anklicken....
Über eine größere Breite der Liste bzw. der übergeordneten Elemente. Im Moment passen keine fünf Bilder dieser Größe nebeneinander.

3. die weiteren Bilder haben keine Abstände zu einander?
Zum Vergrößern anklicken....
Dann wirst Du wohl keine Abstände definiert haben?
Nein, Du hast sie sogar explizit abgestellt.
Aber Du hast die Listenelemente zu Inline-Elementen gemacht. Dann musst Du ohnehin statt margin line-height verwenden.

so ist das aktuelle Ergebnis
Zum Vergrößern anklicken....
Es reicht, wenn Du den Link postest, den Code kannst Du Dir sparen, den schaut sich im Forum eh niemand an, sondern auf der verlinkten Seite. :-)
 
Da die Liste ein Block-Element ist, wird sie sich - wenn Du keine andere Breite angibst - immer über 100% erstrecken, so ist das immer bei Block-Elementen. Die 100% beziehen sich auf die Größe des Elternelements. Das ist immer so bei "%".
So gesehen orientiert sich natürlich die Größe der Liste an der von div#maintext. Und da div#maintext zu klein ist für 5 Bilder, wirst Du auch keine 5 Bilder nebeneinander kriegen, wenn sich nicht entweder die Größe der Bilder oder die Größe von div#maintext verändert. Denn ein Element ist normalerweise nicht größer als sein Elternelement. Ist ja sicher auch nicht von Dir gewollt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben