Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


css-Anfängerfrage mit margin
#1
Ist ja schon peinlich für mich.... Undecided
https://www.afripix.de/nase/

Da gibt es diesen Block "Ästhetische Nasenoperation" und da drunter was ähnliches.
Ich habe dem Container einen Rahmen verpasst, auf dem Handy geht der dann natürlich ganz bis zu Rand. Sieht Kacke aus.
Nun dachte ich, ein margin:10px würde da helfen.
Ja, auf der linken Seite schon, die rechte Seite wird aus dem Bild geschoben.
Der Section ein padding geben, hilft auch nicht.
Nur mit width:95%, aber das ist irgendwie getürkt und nicht wirklich im Sinne des Erfinders.

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
ich arbeite zwar nicht mit mobirise aber
wenn Du diesen Container in einen Container legst, sollte es doch funktionieren.
viele Grüße
coco

RocketCake 3.1/NOF 2015 /win10prof/64/Freund der Insel Elba. Eigene kleine RC-Websites Wohnangebote: elba-app.de, Casa Heidrun, Gallo Nero, Paradiso, ai Peri usw.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin,

wieso gibst Du da ein "padding" (Innenabstand)? Das verbreitert den Container doch um 20px.

Code:
@media (max-width: 768px) {
  .cid-rIaLUETwjK .container {
    padding: 10px!important;
    margin-left: 10px!important;
    margin-right: 10px!important;
  }
}


hast Du mal versucht (0 oben/unten 10 links/rechts):

Code:
@media (max-width: 768px) {
  .cid-rIaLUETwjK .container {
    margin: 0px 10px;
  }
}

Ich weiß jetzt aber nicht, ob dadurch der gesamte Container nach links rutschen würde. Bin erst am Nachmittag wieder da und wenn ich wüsste welcher Block (genau) aus welchem Thema das ist, dann könnte man mal selbst versuchen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Der Container hat ein padding nach innen, damit Bild und Text nicht so am Rahmen kleben.
Nach außen sollte ein margin dann für etwas Luft zum Rand sorgen. Dass ich das ganze mit -left -right -auto etc benutzt habe, ist klar.

Seit wann VERBREITERT ein padding den Container?
"The CSS padding properties are used to generate space around an element's content, inside of any defined borders."

Block: aus AgencyM4, der Block mit Bild rechts und text links "die besten Finanzexperten". Ist der "Header10" (die Class scheint immer den genauen Block zu identifizieren)


Habe gerade Folgendes festgestellt
Wenn ich der Section dieses verpasse
@media screen and (max-width: 768px) {
.platzmachen {
padding-left: 5px;
padding-right: 5px;
}
}

gehts nicht.
Mache ich das mit Style=" padding-left: 5px; padding-right: 5px; ", dann gehts. Ist dann halt nicht auflösungsabhängig.

@Coco: geht nicht, der Effekt addiert sich: der erste Container wird rausgeschoben, der zweite innerhalb des ersten wird noch "rausgeschobener"
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
ist für die Box von Haus aus kein "box-sizing: border-box" festgelegt, musst du das in einer eigenen CSS-Anweisung tun. Damit werden Innen- und Außenabstände nicht hinzugerechnet.
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Doris - meine CSS-Fee ist wieder da Kussmund :hurra:

Wo treibst Du Dich rum :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Tommy,
ja, endlich bin ich wieder da... Kussmund .
Muss mich erst wieder einleben :D
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Hey, die Doris!
Wo warst Du denn?
Weltreise?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Juhuu! Doris, willkommen zurück!
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 10, Mozilla Firefox,  Chrome, Edge, GIMP 2.10.18; Mobirise 4.12.3, Code-Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Klasse dich wieder an Board zu wissen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Danke für euer herzliches Hallo :herzen: Ich war wohl verschollen im Bermudadreieck :D...

Aber alles (wieder) gut....

Frank, hast du dein Margin-Problem lösen können?
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Jain,
mit Border-box ging es leider auch nicht

.container {
background: white;
border-style: solid;
border-width: 1px;
border-color: grey;
border-radius: 4px;
padding-top: 40px;
padding-bottom: 40px;
@media (max-width: 768px) {
box-sizing: border-box;
margin-left: 5px;
margin-right: 5px;
}
}

Ich habs nun erstmal so
@media (max-width: 768px) {
max-width:95%
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
für die mobile Ansicht mache auch zusätzlich mal noch folgende Anweisung in die CSS:

-webkit-box-sizing: border-box
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Habs nun drin in dem Block mit den beiden Knöpfen "Online Beratungstermin und telefon"
Geht aber nicht.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Mache es doch genauso wie bei Funktionelle Nasenoperation:
Code:
.container {
    background:
white;
border-style: solid;
border-width: 1px;
border-color:
    grey;
    border-radius: 4px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Anfängerfrage: Bild in Startseite einfügen Iris 1 784 21.12.2017, 15:31
Letzter Beitrag: Tommy Herrmann
  Anfängerfrage: Vorschaubild psciga 12 1.156 18.12.2017, 18:48
Letzter Beitrag: Martin73
  Anfängerfrage: Block von einem ins andere Theme übernehmen? Gill Rogers 4 1.119 16.12.2017, 11:49
Letzter Beitrag: Gill Rogers



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!