Diverse Kleinigkeiten

Diskutiere Diverse Kleinigkeiten im CSS Forum im Bereich Programmierung; 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...
Z

Zhenwu

Member
Beiträge
7
Punkte Reaktionen
0
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 :D
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)
 
S

Sempervivum

Well-known member
Beiträge
215
Punkte Reaktionen
35
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:
Code:
h2.w3-center {
    border: 2px solid blue;
    border-radius: 0.2em;
    padding: 0.5em;
}
 
Z

Zhenwu

Member
Beiträge
7
Punkte Reaktionen
0
Vielen Dank.
Tatsächlich brauche ich das nur für eine Visitenkarte, 1 Himtergrundsbild und ein wenig Text :D
Dachte mit der Vorlage ist das ganz einfach :D

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

Zhenwu

Member
Beiträge
7
Punkte Reaktionen
0
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 :)
 
S

scatello

Well-known member
Beiträge
284
Punkte Reaktionen
22
Es wäre sinnvoll, wenn du uns deinen HTML/CSS Code zeigen würdest.
 
Z

Zhenwu

Member
Beiträge
7
Punkte Reaktionen
0
Den ganzen?
Wobei ich es neu Anfangen muss, irgendwas hab ich falsch gemacht und die ganze vorlage geht nicht mehr :(
 
Z

Zhenwu

Member
Beiträge
7
Punkte Reaktionen
0
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
 
S

Sempervivum

Well-known member
Beiträge
215
Punkte Reaktionen
35
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.
 
Z

Zhenwu

Member
Beiträge
7
Punkte Reaktionen
0
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).
 
Thema:

Diverse Kleinigkeiten

Oben Unten