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

Verschiedene Zeilen mit Formatierung - Wie?

H

harvey4711

Neues Mitglied
Hallo. ich möchte auf einer Seite Aktuelles teilweise Links und teilweise nur eine Infozeile abbilden. Diese sollen immer linksbündig rechts neben den Button stehen, z.B.:

Button Text1

Button Text2 mit Link

Button Text3


Ich habe mich wie folgt ein wenig versucht, aber ab der zweiten Zeile ist das eingerückt. Wenn ich ab der zweiten Zeile alleine stehen lasse, ist es o.k. Ich versuche mich in Materie einzuarbeiten verstehe dies hier aber nicht so ganz. Ich hoffe, ihr habt Verständnis mit einem Anfänger!?
Gruß
Harvey4711



<div style="float:left; width:570px; padding-top:50px">
<a style=" font-size: 14pt; color: rgb(255, 255, 255)"
<a href="http://www..../Jahreshauptversammlung2013.pdf" title="Tagesordnung Jahreshauptversammlung 2013" ;">Tagesordnung Jahreshauptversammlung 2013
</a>
<p style="text-align:left; margin-left:267px; margin-right:50px; font-size: 14pt">Termine 2013 - siehe Termine
<br><br><br>
<a style=" font-size: 14pt; color: rgb(255, 255, 255)"
<a href="http://www.24h-rennen.de/" title="24 Stundenrennen Nürburgring" ;">24 Stundenrennen Nürburgring - 17. bis 20. Mai 2013
</a>
 
Der von dir gezeigte HTML-Code ist keineswegs valide - er ist fehlerhaft. Zum Einen fehlt bei 2 Links ein beendendes > - allerdings kann man an den Stellen keine Links verwenden da Link im Link nicht möglich ist.

Korrigiere das mal und prüfe, ob dein HTML-Code insgesamt valide ist.

Wenn Du wieder hier Quellcode zeigst, würde ich dich bitten die dafür vorgesehenen Code-Tags zu verwenden.
 
Das mit den vorgesehenen Code-Tags habe ich gefunden, obwohl ich den Unterschied noch nicht weiß. Sorry, beim nächsten mal schreibe ich es da herein. Der Code muss nicht so aussehen, vieleicht geht es ja auch anderes bzw. einfacher.
 
Anders geht es sicher, aber erstmal müsstest Du die Basis dafür liefern. Und die sollte fehlerfrei sein.
 
Hallo. ich möchte auf einer Seite Aktuelles teilweise Links und teilweise nur eine Infozeile abbilden. Diese sollen immer linksbündig rechts neben den Button stehen, z.B.:

Button Text1

Button Text2 mit Link

Button Text3
Zum Vergrößern anklicken....

Könnte von der Struktur her etwa so aussehen:

HTML: 
<div>
   <p><a href="">Button 1</></p>
   <p><a href="">Button 2</>Ein Text</p>
   <p><a href="">Button 3</></p>
</div>

Wenn du die Links mit display:block belegst, kannst du ihnen Höhe, Breite und Background zuweisen. Damit würden die nachfolgenden Texte linksbündig untereinander stehen.
 
Was ich bei display:block nicht verstehe ist , das die Wirkung mit und ohne das gleiche ist!? Kann ich damit dann die Position vorgeben?

Code: 
<div>
   <p><a style=" display:block; font-size: 14pt; color: rgb(255, 255, 255)" href="">Textlink 1</></p>
   <p><a style=" display:block; font-size: 14pt; color: rgb(255, 255, 255)" >Ein Text</p>
   <p><a style=" display:block; font-size: 14pt; color: rgb(255, 255, 255)" href="">Textlink 2</></p>
</div>
 
Nein, die Wirkung ist keineswegs die selbe. Links sind "von Natur aus" Inline-Element. Mit dieser Eigenschaft machst Du einen Link zu einem Blockelement, wodurch es - anders als Inline-Element - die volle zur Verfügung stehende Breite einnimmt und mit padding und margin auch in der Breite verändert werden kann. Den Unterschied kann man sehen, wenn man den Link auch noch eine Hintergrundfarbe gibt ODER (besser) mit einer Browser-Erweiterung wie Firebug.
 
Ist dann margin die richtige Syntax für die Position - in der ARt margin-left:267px? Und wie kann ich das mit der Hintergrundfarbe sichtbar machen, damit ich den Hintergrund verstehe und sehe?
 
Margin kann dazu dienen per Außenabstand Element voneinander zu entfernen.

Ich bin mir nicht sicher was Du eigentlich suchst. Diese abenteuerliche margin-Angabe sieht eher danach aus, dass du die Links nebeneinander haben willst? Dann müsstest Du es folgendermaßen machen:

HTML: 
<ul class="linkliste">
 <li><a href="linkziel.html">Text 1</a></li>
 <li><a href="linkziel2.html">Text 2</a></li>
 <li><a href="linkziel3.html">Text 3</a></li>
</ul>

Warum so?
Weil es offenbar eine Liste mit Links ist. In HTML-Syntax gesprochen wäre eine Liste die semantisch korrekte Formatierung hierfür. In dem Beispiel oben sind es einfach nur Links in Absätzen, welche eigentlich nur Texte beinhalten sollten.

Um die Links in o.g. Quelltext jetzt noch nebeneinander zu bringen, müsste folgender CSS-Code ausreichen:
Code: 
ul.linkliste li {
 display: inline;
}
ul.linkliste li a {
 display: block;
 float: left;
 width: 200px;
}

Dadurch müsste eine 600 Pixel breite Ansicht entstehen in der die Links jeweils 200 Pixel einnehmen und alle Links auf einer Linie stehen.

Wenn Du Hintergrundfarben einfügen willst, dann geht das z.B. so:
HTML: 
<a href="linkziel.html" style="background-color: red;">Text 1</a>

Auf Grund deiner Fragestellung würde ich dir dringend raten dir die CSS-Grundlagen anzuschauen. Ohne diese wirst Du immer wieder auf solche für dich scheinbar unlösbaren Dinge stoßen. Aber mit CSS ist vieles lösbar ..
 
... ich versuche es mal von vorne zu erklären: Ich bin in einem Verein, in dem derjenige, der die Homepage erstellt hat letzten Monat mit 40 Jahren gestorben ist. Ich versuche jetzt diese Seite weiter zu führen. Links (Richtung) sind die Button, sieht so aus:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <title>test</title>
    <style media="screen" type="text/css">
html {
height: 100%;
}
body {
font-family: Arial, sans-serif;
color:#fff;
margin:0px 0px;
text-align:center;
background-color: #154BB8;
font-size:13px;
font-weight:bold;
}
      h1 { font-size:40px; font-weight:bold; color:#FFFFFF; padding-top:0;}

.link_start  {
        display: block;
        padding-top:0px;
        width: 116px;
        height: 31px;
        text-indent: -99999px;
}

.link_start { background: url(../assets/images/Button/Startseite.png) bottom;}


.link_start:hover{
        background-position: 0 0;
}
{
 position:absolute;
 left:100px; top:800px; width:300px; height:150px;
}

</style>






</head>

  <body>

    <div>
      <div style="float:left; width:200px; text-align:left;"><img alt="logo" src="../assets/images/Sonstige_Bilder/Fertig_4x4cm.jpg" /></div>
      <div style="float:left; width:714px;"><img alt="head" src="../assets/images/Banner/Aktuelles_Banner.gif" /></div>
      <br clear="all" />
<!--navi-->
      <div style="float:left; width: 200px; text-align: left; padding-top:49px">
        <ul style="list-style:none;">
          <li><a class="link_start" href="http://www.xxxxx/index.html">start</a></li>
          <li><br />
          </li>
        </ul>
      </div>
  </body>
</html>
<!--navi ende-->

Rechts neben dem Button (auf der Startseite sind mehrere) möchte ich mit einem kleinen Abstand linksbündig untereinander entweder einen Link oder einfach nur einen Hinweis setzen. Bis jetzt weiß ich nur wie ich dies zentriert hinbekomme. Vielleicht kannst Du oder jemand anders mir dabei helfen? Das zentrierte finde ich optisch nicht so toll. Danke.
 
Wo kann man das online sehen? Gibt es einen Link dazu? Ich bin mir nämlich nicht sicher was Du mit "Button" meinst.
 
Ich habe ein wenig gegoogelt und auf eine tolle HTML/CSS Erklärung gestoßen: 01-Grundlagen-HTML-CSS-Editor-Auswahl.mp4 - YouTube
Dementsprechend habe ich meinen Code angepasst, der jetzt so aussieht:
HTML: 
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <title>test</title>

<style media="screen" type="text/css">
html {
height: 100%;}

body {
font-family: Arial, sans-serif;
color:#fff;
margin:0px 0px;
background-color: #154BB8;
font-size:14px;
font-weight:bold }

.link_start  {
        display: block;
        padding-top:0px;
        width: 116px;
        height: 31px;
        text-indent: -99999px; }

.link_start { background: url(../assets/images/Button/Startseite.png) bottom;}

.link_start:hover{
        background-position: 0 0; }

#header1 {
float:left;
width:200px }

#header2 {
float:left;
width:714px; }

#navi {
float: left;
width: 200px;
margin-top: 50px }

#content {
float: left;
width: 800px;
color="fff";
margin-top: 50px }

a, p {
font-family: Arial;
color="fff";
font-size:20px }

</style>

</head>

<body>

<!-- header -->
    <div id="header1">
      <img alt="logo" src="../assets/images/Sonstige_Bilder/Fertig_4x4cm.jpg">
    </div> <!-- header1 -->

    <div id="header2">
      <img alt="head" src="../assets/images/Banner/Aktuelles_Banner.gif">
    </div> <!-- header2 -->
    <br clear="all" />
<!-- header ende -->

<!--navi-->
      <div id="navi">
        <ul style="list-style:none;">
          <li><a class="link_start" href="http://www.motorsportclub-eilendorf.de/index.html">start</a></li>
          <li><br />
          </li>
        </ul>
      </div> <!-- navi -->
<!--navi ende-->

<!-- content -->
   <div id="content">
      <p>MSC-Termine 2013 - siehe Termine
      <br><br><br>
      <a href="http://www.24h-rennen.de/" title="24 Stundenrennen Nürburgring" ;">24 Stundenrennen Nürburgring - 17. bis 20. Mai 2013
      <br><br><br>
      <a href="http://www.jumbokart.de/Winterpokal/Ausschreibung.html" title="14. ADAC Winterpokal" ;">14. ADAC Winterpokal 2013 - 17. Februar und 17. März
      <br><br><br>
   </div> <!-- content -->

  </body>
</html>

Das einzige, was mir jetzt noch unklar ist, wie ich die Farbe beim Link auf weiß gesetzt bekomme. Kann mir jemand helfen?
 
Sowas per PN ist gegenüber anderen die auch helfen wollen nicht gerade nett ;)

Wenn ich das richtig sehe, ist in der Webseite ein JavaScript eingebaut, welches das Menü überhaupt erst einblendet. Ohne JavaScript sieht man kein Menü, mit JavaScript ist es ein grafisches Menü - was ein großer Nachteil für Suchmaschinen und auch in der Bedienung der Webseite ist.

Dieses JavaScript, welches dafür verantwortlich ist, scheint auf jQuery zu basieren. Offenbar wird in der Datei assets/navbars.js die "nofNavBar" gestartet, welches das Menü sowohl einblendet als auch gestaltet. Zudem kommt noch dazu, dass jeder Menüpunkt mit einer eigenen CSS-Klasse

Ich bin mir daher unsicher, was hier der richtige Weg wäre. Beim Aufruf der Seite bevor das JavaScript läuft, steht dort

HTML: 
<li id="Navigationsschaltflaeche1"><a href="./index.html" title="Startseite">Startseite</a></li>
    <li id="Navigationsschaltflaeche2"><a href="./html/aktuelles.html" title="Aktuelles">Aktuelles</a></li>

Theoretisch fügt man einen neuen Navigationspunkt dann so ein:

HTML: 
<li id="Navigationsschaltflaeche1"><a href="./index.html" title="Startseite">Startseite</a></li>
<li id="NavigationsschaltflaecheXY"><a href="./zielseite.html" title="neuer Menüpunkt">neuer Menüpunkt</a></li>
    <li id="Navigationsschaltflaeche2"><a href="./html/aktuelles.html" title="Aktuelles">Aktuelles</a></li>

Aber:
Das JavaScript wird mit diesem Menüpunkt nichts anfangen können, da es offenbar die Menüpunkte dynamisch generiert und/oder Du dafür noch Grafiken erstellen müsstest. Unter

Code: 
assets/images/autogen/Startseite_HRp4_neu_1.gif

liegt bspw. die Grafik für die Startseite. Der Verzeichnisname "autogen" deutet für mich auf eine automatische Generierung hin.

Daher müsstest Du nicht nur versuchen o.g. HTML-Code anzupassen sondern müsstest auch schauen, wie das JavaScript hier neue Menüpunkt-Grafiken generiert. Ich kenne das JavaScript nicht was dort eingesetzt wird. Kann aber jetzt nachvollziehen, dass es für dich nicht nachvollziehbar ist wie das überhaupt gehen kann.
 
... ich war mir als Anfänger in diesem Forum nicht klar, ob man den Link zur Seite hier hereinschreibt. Von wegen Reklame oder sonstiger Gründe. Also, wenn es erlaubt ist: Startseite

Das Problem mit der nicht weißen Schrift habe ich selber gefunden. Es muss nicht color="fff" sondern color: #fff" heißen. Jetzt muss ich erst einmal weg, ich werde dann später noch schauen was Du noch für Fehler entdeckt hast. Danke schon mal.
 
Farbe? Ich habe keine Fehler entdeckt sondern dich darauf aufmerksam gemacht wie das Menü links aufgebaut ist und wie Du dort einen neuen Menüpunkt theoretisch einfügen könntest. Vielleicht sprechen wir immer noch nicht vom selben?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben