Diverse Kleinigkeiten

[Zhenwu]

Hallo zusammen,

vor vielen vielen Jahren habe ich mit HTML und CSS beschäftigt und bin auch ganz gut klar gekommen.
Nun habe ich nur noch wenig ahnung und scheiter an den kleinsten kleinigkeiten
Hier möchte ich euch um Hilfe bitten.Die Vorlage habe ich von W3CSS

<h2 class="w3-center">Text</h2> - hier hätte ich einfach gerne einen Rahmen drum herum mit angerundeten ecken und ein bisschen platz (padding) zwischen Text und Rahmen.
Ich bekomme esnicht gebacken (gerne auch im text die formatierung)

 

[Sempervivum]

Hallo Zhenwu, willkommen im Forum!
In den vergangenen Jahren hat sich allerdings sehr viel verändert in der Webentwicklung und Du wirst neu lernen müssen.
Als Einstieg empfehle ich dies bei Selfhtml:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden
und dies bei MDN:
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Selectors

Und deine konkrete Aufgabe müsste sich dann mit diesem CSS lösen lassen:

h2.w3-center {
    border: 2px solid blue;
    border-radius: 0.2em;
    padding: 0.5em;
}

 

[Zhenwu]

Vielen Dank.
Tatsächlich brauche ich das nur für eine Visitenkarte, 1 Himtergrundsbild und ein wenig Text
Dachte mit der Vorlage ist das ganz einfach

Leider macht der das nicht, ich habe bei h2 keinen Rahmen

 

[Zhenwu]

Ich habs hinbekommen

<h2 class="w3-center w3-border w3-round w3-border-black">

Leider ist der Rahmen rchts links zu weit, ich bräuchte hier weniger Abstand

 

[scatello]

Es wäre sinnvoll, wenn du uns deinen HTML/CSS Code zeigen würdest.

 

[Zhenwu]

Den ganzen?
Wobei ich es neu Anfangen muss, irgendwas hab ich falsch gemacht und die ganze vorlage geht nicht mehr

 

[scatello]

Den ganzen?

Nee, nur die ersten drei Zeilen.

Wie sollen wir dir helfen, wenn wir nicht wissen, was du da gebaut hast. Alternativ kannst du das auch online stellen, was sogar besser wäre.

 

[Zhenwu]

Hallo,

möchte ungern den ganzen Code zeigen da das erstmal bei mir bleiben soll.

Hier aber mal ein beispiel von dem was nicht geht.
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span class="w3-center w3-jumbo w3-wide">Test <img src="logo.png" height="120" /> Welt</span><br><br>
<span class="w3-center w3-xlarge w3-wide w3-center"><a href="http://test.com">Test</a>
</div>
</div>
Ich bekomme den Link nicht formatiert
Er ist Linksbündig zum Text mit Logo, ich bekomme den nicht als Button formatiert (ganz einfach mit einem abgerundeten Rahmen rund und 2px breit) und er ist natürlich unterstrichen, soll auch weg.

Ich hab ihn versucht als eigene class zu formatieren
.buttonlink {
background-color: #FF4500;
border: none;
color: white;
padding: 20px 34px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
aber das ging auch nicht

Die w3.css ist hier zu finden. Ich vermute mal an der scheiterts. https://www.w3schools.com/w3css/4/w3.css

 

[Sempervivum]

Mit solchen vorgefertigten Layouts ist es immer das gleiche: Man kann recht schnell ein ansehnliches Layout hin bekommen indem man ein paar Klassen hin schreibt aber die Probleme gehen los, wenn man individuelle und genaue Vorstellungen hat. In letzterem Fall ist es unterm Strich einfacher wenn man das Layout selber gestaltet auch wenn es am Anfang etwas schwieriger oder aufwändiger zu sein scheint.

 

[Zhenwu]

Ich hab es mir fast gedacht

Eigentlich ist die Vorlage perfekt bis auf diese 2 Sachen (Buttons als Link und das erste Thema (Rahmen um Text mit definiertem abstand).

 

[scatello]

Eigentlich ist die Vorlage perfekt

Perfekt? Das

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

ist alles andere als perfekt, das ist Käse.

 

[Zhenwu]

Das war ja auch ich