Wie kann ich diese Icons verschieben CSS?

Wie kann ich diese Icons verschieben? Wenn ich ihnen einen margin gebe wird das feld größer...

5 Antworten

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

19.11.2018, 14:13

100 Pixel nach rechts verschieben:

margin-left:100px

Nach rechts unten an die Seite verschieben:

position:absolute;
bottom:0;
right:0

Wohin willst Du sie denn verschieben?

Alex

freudenstrahl

19.11.2018, 12:48

Poste mal Deinen Code-Teil lauffähig auf z.Bsp.: https://codepen.io/

Außerdem:
Was außerdem verstehst Du unter Icon's verschieben - was genau willst
Du damit erreichen ?
Willst Du Du Icon's Links/Rechtsbündig haben was genau brauchst Du ?

Woher ich das weiß:Berufserfahrung

Ben Sellin

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Informatikkaufmann

19.11.2018, 12:22

Hallo LysergLizard,

Da ich nicht den gesamten Code zur Verfügung habe kann ich nur schätzen:

In der Klasse "btn" ist ebenfalls ein Margin eingefügt welcher "gerade so reicht" um Icon und Text anzuzeigen.

Möglichkeit wäre natürlich, in der btn Klasse das Margin zu verkleinern und so den Button auf der gleichen Größe lassen können.

Ich hoffe das ist verständlich erklärt. Wenn nicht, frag noch mal :D

Ben

GanMar

19.11.2018, 12:17

Was verstehst Du unter "verschieben"? Was genau möchtest Du machen? Welches "Feld" wird größer?

FragenFrager666

19.11.2018, 12:14

Kannst du irgendwie den Code posten?

LysergLizard

Fragesteller

19.11.2018, 12:17

habe ich doch?

FragenFrager666

19.11.2018, 12:18

@LysergLizard

Ich bräuchte den Code zum kopieren, außerdem die CSS-Datei.

Ähnliche Fragen

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table class="anker"

<tr>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

...zur Frage

CSS margin verschiebt falsches element?

Hallo!

Obwohl ich schon seit einigen Jahren recht sicher in Programmiersprachen wie Java und C# bin, hab ich mich jetzt an ein Webprojekt gewagt. Ich benutze React, doch brauche natürlich auch CSS.

Jetzt habe ich folgendes Problem. Ich will hier den Titel einfach um 1em nach unten verschieben. Wie schaffe ich das? Ich habe es einfach mit

margin-top: 1em;

versucht, aber dadurch wird aus irgendeinem Grund das ganze

<div className='home'>

nach unten verschoben. Wieso?

Unten findet ihr Bilder, zum einen wie es ohne margin aussieht, dann wie es mit margin aussieht. Hier findet ihr den Code:

HTML:

<div className='home'>
    <h1>Willkommen!</h1>

</div>

CSS:

.home{
    background: #375398;
    height: 100vh;
    width: auto;
    margin-left: 250px;
}

h1{
    font-size: 3rem;
    color: white;
    margin-left: 1em;
    /*margin-top: 1em*/
    }

...zur Frage

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zur Frage

External css funktioniert nicht?

Wenn ich das css in ein styletag mache funktioniert es aber sobald es in der css datei ist funktioniert es nicht mehr

.form {
    margin-top: 10px;
}
.input-field {
    margin-bottom: 10px;
}

(Mit css datei)

(Mit style tag)

...zur Frage

Wieso funktioniert margin-left, aber margin-right nicht?

Im CSS-Dokument

...zur Frage

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zur Frage

Warum sind die Desktop Icons so breit und nicht verschiebbar?

Die Desktop Icons lassen sich nicht mehr frei verschieben und sind zudem überlappt und scheinbar gruppiert. Man kann nur die im Vordergrund anklicken und die Flächen der Icons sind deutlich größer.

...zur Frage

Unterschied von padding-top und margin-top?

Hey, ich lerne seit neuem HTML und CSS, und würde gerne wissen, was der Unterschied zwischen diesen beiden Elementen ist

...zur Frage

HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

...zur Frage

Element aus unsortierter Liste mit CSS nach rechts verschieben?

Hallo Leute, wie kann ich das ,,ausloggen" mit CSS ganz nach rechts verschieben. Das soll das einzige Element sein.

...zur Frage

<form> verschieben?

Hallo,

ich versuche ein formular zu verschieben. mit margin-left bin ich erfolgreich, allerdings kann ich dann nach rechts rausscrollen. ich hab ein backgroundimage drin, deshalb nervt mich das ungemein.

wie kann ich das einfach mittig zentrieren?

...zur Frage

CSS Abstand von Header zu Fensterrand verschwinden lassen?

Hey, ich will den den Abstand zwischen Header und dem oberen Fensterrand verschwinden lassen, es funktioniert aber nicht

Margin: 0 und padding: 0 habe ich probiert, funktioniert aber nicht

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

Display block margin 0 auto?

Kann mir jemand auf einfache Art erklären was in CSS display block macht?

Ferner was margin: 0 auto bedeutet? ich kann zwar sehen dass es eine Box zentriert verstehe aber einfach nicht genau was das display block bedeutete.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen