Frage zur Formatierung in HTML (Bild, h1, h2) nebeneinander?

Hallo Liebe Community, ich habe ein Problem mit HTML... Könnte mir bitte jemand helfen.

Und zwar übe ich gerade ein bisschen mit HTML, und mir ist gerade aufgefallen, dass wenn in im Header ein Bild, eine Überschrift

und eine Zweite Überschrift habe, diese untereinander stehen, ich meine... Das wusste ich ja... Aber nun möchte ich wissen, wie ich diese drei nebeneinander darstellen kann... Ich habe leider auch nichts im Internet gefunden...
Skript:

...
xxx yyy

...

Ich habe auch schon alles in CSS versucht, aber habe es nicht hinbekommen...

mfg Alexander

3 Antworten

SuperZockerHD

03.03.2016, 17:41

Irgendwie hat es das Format verzogen :)

Homero

05.03.2016, 14:57

Wenn Du einzelne Emelente nebeneinander sehen haben willst,

hilft Dir im CSS auch float

float:left;

float:right;

Sinvoll ist es, einen Contaienr, z.B. einen div zu nehmen,

und die elemente, die nebeneinander stehen sollen, in diesen div zu packen.

am Ende des div - containers mussst dan dann das floaten wieder aufheben.

Abhängig von den Größen (Breite und Höhe) der einzelnen Elemente, kann das eventuell etwas merkwürdig aussehen. Dann musst Du das ganze noch etwas nachformatieren, in dem Du die Überschriften z.B. in Ihrer Schrfthöhe gleich definierst, und eventuell mit margin und padding etwas positionierst.

Wenn du z-B. in CSS h2{display:inline;} einträgst, machen das alle H2-Überschriften.

Das könnte sich ungünstig auf den Rest Deiner Seite auswirken.

wenn Du Dir aber einen Conaienr nimmst, und dem z.B. die Klasse

.floattest verpasst, (kannst Du nennen wie Du willst ) und dann im CSS folgendes machst:

.floattest *{float:left;}

floatet alles in jedem Container, dem Du die Klasse floattest gibst, nach links.

Je nach Gestaltung, könnest Du ein soll-links-stehen-element links floaten und einem soll-rechts-stehen-element rechts floaten lassen.

Minilexikon

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

03.03.2016, 17:42

Die Überschriften (h1, h2) sind Blockelemente. Denen müsstest du im CSS

display: inline;

zuweisen.

Woher ich das weiß:Berufserfahrung – Seit 2014

Ähnliche Beiträge

Texte in JavaScript verschieben?

Moin, ich möchte folgende Textfelder so positionieren, dass sie anstatt untereinander, nebeneinander sind. Also eine Überschrift in h2 soll immer über einer Unterschrift in h1 stehen.

JS code:

var footer = `

<h2>Service-Hotline</h2>

<h2>Quellen</h2>

<h1><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Quellenverzeichnis</a></h1>

<h2>Anfahrt</h2>

<h1><a href="">Anfahrt</a></h1>

document.getElementsByTagName("footer")[0].innerHTML = footer;

...zum Beitrag

html ausklappbare Navigation?

Hallo Leute,

kann mir jemand sagen wie man nur mithilfe von html und css in der Navigation im Header einen ausklappbare "ul" einbauen kann. Also wenn man über bspl. über Beispiel1. swipet klappt sich eine "ul" aus, die auch links besitzt.(Natürlich sollen die Links untereinander sein)

Vielen Dank vorraus!

...zum Beitrag

Astra Pro Theme Menü ist bereits H1?

Hallo, meine Webseite ist bald fertig und jetzt gehts noch um die richtige Zuweisung der H1,H2, H3 Überschriften.
Ich verwende das Astra Pro Theme und möchte gerne wissen,
ist das hinterlegte Menü bereits H1? Oder muss ich dann jeweils auf jeder Webseite nochmal H1 definieren? Danke euch.

...zum Beitrag

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zum Beitrag

H1 überschriften wordpress?

Ich komme mit einer seltsamen aber berechtigten Frage zu euch ! H1 Überschriften in Wordpress !!?!?!? Wo kommt die H1 Überschrift hin ? hab gelesen das die h1 Überschrift automatisch im Titel generiert wird. stimmt das ?

Bis jetzt hab ich den Titel immer geschrieben dann generiert sich der permalink und dann unten im Text Feld starte ich dann mit der Überschrift H1 oder H2 ?

Sorry für die Frage aber den text den ich vor 10 Minuten gelesen habe hat mich nun verwirrt und dachte immer ich beginne im Textfeld mit H1

bitte um Klarstellung und danke

...zum Beitrag

Gibt es einen HTML-Code zum Zentrieren?

Hey.

Ich wollte gerade einen Beitrag in einem Forum (Burning Board 3 von WoltLab) schreiben und folgenden HTML-Code für die Überschrift verwenden:

<.h2>Weitere Informationen<./h2>

Ich habe die Überschrift dann mit folgendem HTML-Code zentriert (da sie sonst automatisch linksbündig erscheint, und dies will ich nicht):

<.h2 align="center">Weitere Informationen<./h2>

Funktioniert jedoch nicht. Immer noch linksbündig. Weshalb? Habe ich irgendetwas falsch gemacht?

LG.

Codes natürlich ohne Punkte.

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

HTML JavaScript Variable untereinander?

Ich habe eine Variable namens data wo mehrere Sachen drinnen sind. Diese will ich jetzt untereinander ausgeben siehe Quellcode:

document.getElementById('Ausgabe').innerHTML = data;

Sie werden aber nur nebeneinander ausgegeben ein Split hat auch nicht geholfen irgendwelche ideen? Ja es ist ein String nur leider hilft ein Split nicht da dieser sonst nur überschreibt

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

HTML Zeilen Umbruch verhindern?

So ich habe einen Überschrift h1, nach dieser entsteht ja immer ein zeilenumbruch, wie kann ich das verhindern, wenn ich mit css und xhtml arbeite?

...zum Beitrag

Problem in CSS mit fixierter Position?

Hallo liebe Ratgeber!

Ich arbeite gerade an einem kleinen Projekt in HTML. Dazu habe ich unter anderem einen Header-Bereich, welcher beim herunterscrollen stets weiter angezeigt werden soll. Ich habe ihm also die CSS EIgenschaft position: fixed verpasst, welche sich eigentlich nicht wirklich von position: relative unterscheidet, außer dass das Element nun fixiert wird. Als ich jedoch nun fixed statt relative verwendet habe, hat der Header Bereich ein Abstand nach oben bekommen. Zu Testzwecken habe ich außerhalb des Header-Bereichs eine lose Überschrift angeordnet. Diese erschien allerdings nicht wie gewollt unter dem Header-Bereich, sondern verschwand in ihm, als würde es den Header-Bereich nicht geben.

Hier mein Problem

Der Header-Bereich bekommt trotz margin:0 einen Abstand nach oben hin, eine darunter gesetzte Überschrift h2 verschwindet darin.

Wer kann mir bei meinem Problem ein wenig weiterhelfen? Ich möchte, dass der Header oben bleibt und alle folgenden Elemente auch unter dem Header angezeigt werden.

Danke im Voraus!

LG Korbi

...zum Beitrag

HTML Texte untereinander Schreiben!

Hallo ich will in HTML einen großen text untereinander schreiben allerdings immer wenn ich dies Versuch es soll eine art impressum werden . Allerdings immer wenn ich dies versuch sind die Texte nebeneinander geschrieben ! ??

Wie mach ich dies ?

...zum Beitrag

HTML: Elemente von einer CSS-Formatierung ausschließen

Hallo Leute,

ich habe jetzt folgendes Problem: Ich habe eine Seite mit einer Übreschrift und dann einer Liste (Aufzählungen) und noch einen Div-Container mit Text. Da ich auf der ganzen Seite außer in der Überschrift (h1) eine bestimmte Schrift (Trebuchet MS) und eine bestimmte Schriftgröße und Zeilenabstand (95%/115%), habe ich die Formatierung auf den ganzen Body angewandt. Mein Problem ist aber jetzt dass die Überschrift (logischerweise) auch mit formatiert wird. Das mit der Schriftartrt ist ja ganz einfach - das geht, aber wegen der Schriftgröße habe ich es schon mit "font-size:100%" versucht, aber dadurch wird die Schrift nur richtig klein (wie Größe 12) (der Zeilenabstand geht komischerweise mit "normal" wieder zurückzusetzen).

Die Frage: Wie kann ich die Überschrift aus der body-Formatierung ausschließen (Ich möchte nicht ewig probieren bei wieviel Prozent die Schrift wieder richtig groß ist...)?

...zum Beitrag

Überschrift in Bild HTML?

Hallo,

wie kriege ich es hin das meine Überschrift (h1) in einem Bild unten links ist?

Danke

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen