Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Rahmen auf halbe Bildhöhe mit css möglich?
#1
ich habe doch schon lange nichts Unmögliches mehr gefragt!
Zu jeder Frage präsentiert Tommy innerhalb kurzer Zeit eine Lösung.

Aber nun: passend zum Logo einer Firma will ich einige Bilder mit einem gar seltsamen Rahmen versehen

.jpg  gelberRahmen.jpg (Größe: 34 KB / Downloads: 17)


Bislang habe ich nicht wirklich eine Idee mit CSS

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
da gibt es etliche Lösungen. Ich habe aber heute keine Zeit mehr (ist gleich Grillen angesagt Smiling )

http://www.anujgakhar.com/2014/07/28/par...-with-css/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Moin,

also, da fehlt mir gerade die Idee :eek: denn das geht (meiner Meinung) nur mit einer absoluten Position. Die absolute Position funktioniert dann aber nicht in der responsiven Ansicht, denn dann verrutscht die rechte Border.

Ich hatte das mal so gemacht (siehe Screenshot unten). Das geht, solange es keine Breakpoints gibt.

Code:
#mainDiv {
 border-bottom: 20px solid #ff0000;
}
div:after {
 content: "";
 position: absolute;
 right: 0;
 margin-right: -5px;
 z-index: 100;
 bottom: 0;
 width: 20px;
 height: 50%;
 background: #ff0000;
}

Code:
<div id="mainDiv">
        <img src="../_images/background2.jpg" alt="Mobirise">
</div>


.jpg  Border.JPG (Größe: 90,91 KB / Downloads: 13)


Sicher gibt es eine Lösung die rechte Border nur in einer verkürzten Höhe darzustellen - ich komme aber gerade nicht drauf, vielleicht ja jemand anderes ?!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Mir schwebt da gerade vor, das Bild als Hintergrund in einem DIV einzubinden, dann ein zweites transparentes DIV mit halber Höhe und Rahmen unten und rechts drauf zu legen....muss noch denken....
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Tommy,

da gibt es auch eine ganz, ganz einfache Lösung: Eine grafische!
So etwas kann man doch mit einem Photoprogramm Ratz-Fatz erstellen.
Es muss doch nicht zwingend CSS sein...ich sehe darain auch keinen direkten Vorteil, wenn man es mit CSS macht. Wenn doch, denn wäre eine einfache Erklärung sinnvoll Lub ich lerne gerne dazu!
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Du, natürlich ist das viel einfacher mit einem Grafik-Programm.

Mich interessierte es nur, eine kleine Herausforderung das mit CSS zu lösen. Ich mache hier ja schließlich nichts, was ich selbst gebrauchen könnte, denn ich brauche noch nicht einmal eine Webseite :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Mit Photoshop - nee, das ist ja langweilig!

Das hier wird es wahrscheinlich (noch ohne die gelben Ränder). Projekt ist noch nicht in trockenen Tüchern.
https://www.afripix.de/terra/
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
ich meine auch, wie Tommy, dass wir hier schon mal einen Beitrag mit Lösung hatten für einen Rahmen, der nicht über die ganze Bild (oder DIV) Breite geht. Finde es auch nicht wieder...

@Claus
Wie andere Formatierungen auch ist es sinnvoll, Rahmen per Css zu machen, damit man sie mit einem Durchgang auch wieder ändern kann, ohne alle Bilder einzeln wieder in einem Bildbearbeitungsprogramm zu bearbeiten und neu hochzuladen. Grafische Lösungen für eine Website sind da nur zweite Wahl, finde ich.

Vielleicht finde ich die Lösung ja wieder. Ich meine, mich zu erinnern, dass die auch von Tommy stammte. ISt aber schon ne Weile her...
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
#9
@Doris
Grafische Lösungen für und mit Mobirise
sind/ist immer die bessere Wahl.
Mach was, erstelle etwas etwas intensiver mit Mobi
und du wirst mir recht geben.
Übrigens...ich bin stocksauer:
Mit deinen Muttertagsgrüssen warst du ja fleißig..
aber den Vatertag haste ignoriert. Nee...Nee...Mädel...so nicht...ich habe bitterlich geweint.
:confused: Tounge
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Naja, Claus,
auch mit Mobirise und Bootstrap ist der Sinn, Inhalt und Layout strikt zu trennen und letzteres über CSS in Stylesheets zu formatieren. Mobirise ist ja grundsätzlich auch so aufgebaut.

Und wenn ich die Möglichkeit gefunden habe, versuche ich sie auch in Mobirise zu nutzen.

Offtopic: Das hab ich gewusst, dass du dich über den nicht von mir beachteten Vatertag beschweren wirst Smiling. Tut mir leid, dass du weinen musstest. Vielleicht tröstet es dich, dass du damit nicht alleine warst...
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
#11
eine Lösung für den unteren waagerechten Border hab ich ja. Nur den rechten krieg ich (noch) nicht hin.
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
Offtopic:
Doris schrieb:Offtopic: Das hab ich gewusst, dass du dich über den nicht von mir beachteten Vatertag beschweren wirst Smiling. Tut mir leid, dass du weinen musstest. Vielleicht tröstet es dich, dass du damit nicht alleine warst...

Ja ja die Frauen, wenigstens  einen Tag im Jahr dachte ich, ich könnte ohne ihnen auskommen.
Aber schon beim Frühstück: "Helga, wo ist die Marmelade?"  :D
Mit freundlichen Grüßen
Werner

https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Werner,
du weißt doch, wie das mit dem Denken ist :lachtot:

aber jetzt sollten wir wieder zum topic zurück kehren...
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
Ich habs mit Pseudoclass "Before" und "after" lösen können

http://www.foto-grafik-design.de/border-test.php

User: DorisR
PW: SiroD59

das Div:

<div id="Bordertest" class="bottom right"></div>

die CSS:

#Bordertest {
position: relative;
width: 500px;
height: 300px;
background: rgba(0,0,255,1.0);
margin: 100px;}



.bottom::before {
content: '';
position: absolute;
bottom: -30px;
right: -30px;
width: 70%;
border-bottom: 30px solid rgb(0,255,0)}

.right::after {
content: '';
position: absolute;
bottom: -1px;
right: -30px;
height: 60%;
border-right: 30px solid rgb(0,255,0)}
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
#15
Stober beeindruckt!!!!
Super!
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
  Immer ganzes Projekt hochladen - Einzelne Seite nicht möglich Rancher 6 239 18.02.2019, 19:48
Letzter Beitrag: Rancher
  Keine Browservorschau auf Mac Pro mehr möglich Hans Klawun 6 188 15.02.2019, 20:39
Letzter Beitrag: Hans Klawun
  Mobirise-Verschiedenfarbige Rahmen um Bild Thomas Saake 6 201 31.01.2019, 17:18
Letzter Beitrag: c-laus
  Innenliegender Rahmen? stobi_de 13 508 08.09.2018, 08:10
Letzter Beitrag: Tommy Herrmann
  Help-Anfrage in Mobirise nicht möglich stobi_de 12 1.294 11.06.2018, 10:55
Letzter Beitrag: stobi_de
  Seitenerzeugung nicht mehr möglich stobi_de 7 563 23.05.2018, 20:48
Letzter Beitrag: stobi_de
  FTP-Publizierung nicht mehr möglich stobi_de 5 729 12.01.2018, 14:58
Letzter Beitrag: Rancher
  Webprojekt einfach weg: download der Website möglich? olaf1967 18 1.418 07.11.2017, 15:30
Letzter Beitrag: Tommy Herrmann
  Mobirise-Rahmen um Foto Thomas Saake 12 825 12.09.2017, 11:03
Letzter Beitrag: Martin73



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!