Strona WWW - proszę o pomoc.

0

Witam,

Jestem grafikiem i stworzyłem projekt strony z którym mój kolega ma problem, żeby go zakodować. Piszę z zapytaniem czy stworzenie takiego headera jest możliwe. Chodzi mi o to żeby kształt po prawej stronie przy mniejszych rozdzielczościach niż 1920x1080 po prostu ucinał się z prawej strony ale pozostawał ciągle w tej samej pozycji. To ogólnie jest ogarnięte ale problem polega na tym że nie może zachować marginów jak dla pozostałej reszty strony (chcę aby cała strona była na szerokości 1300px) bo jak to powiedział nie może tego zrobić na width: 100% tylko cały header ma rozdzielony na dwa kontenery i w tym jest problem. Jest to do ogarnięcia jakoś sensownie? Nie wymagam żebyście mi tutaj pisali cały kod ale objaśnili mniej więcej co i jak.

Liczę na jakąś dobrą duszyczkę i z góry dziękuję :)

Tak wygląda projekt:

https://i.imgur.com/1kUxNVN.png

title

A tak obecnie wygląda strona:

https://i.imgur.com/S6rElVC.png

title

1

No jest możliwe, czemu miałoby nie być? To jest normalny header xD

1

Po pierwsze - za bardzo nie rozumiem, o co pytasz. Jedyne co mi przychodzi do głowy to to, co widać na poniższym obrazku - że ikonki wyjeżdżają w lewo spod napisu "Mia". Ale to tylko mój domysł, więc może pokaż na projekcie (zaznacz jakoś) co jest konkretnie problemem (jakieś strzałki, linie, pokaż co gdzie jest, a gdzie Twoim zdaniem powinno być). I wybacz jakość i "profesjonalizm" poniższej wizualizacji, ale nie jestem ekspertem od grafiki ;)

screenshot-20200618225137.png


A poza tym - coś chyba układ/projekt się Wam lekko rozjeżdża, bo zakładam, że nie tak to miało wyglądać :D :D :D
screenshot-20200618224721.png

0

Chodzi mi o to żeby content w headerze był na szerokości 1300 px jak reszta strony, tak jak na projekcie. Czyli krótko mówiąc marginy. Jeśli jest width: 100% to można to łatwo załatwić przez margin: 0 auto;. Ale kolega mówi, że w headerze tego nie może zrobić bo żeby ten kształt tam był musiał go rozbić na dwa kontenery.

2
Krystian Baranowski napisał(a):

Chodzi mi o to żeby content w headerze był na szerokości 1300 px jak reszta strony, tak jak na projekcie. Czyli krótko mówiąc marginy. Jeśli jest width: 100% to można to łatwo załatwić przez margin: 0 auto;. Ale kolega mówi, że w headerze tego nie może zrobić bo żeby ten kształt tam był musiał go rozbić na dwa kontenery.

Eee, że co?

Robi jeden kontener na 100%, wrzuca tam background, w nim robi drugi już na 1300px. I koniec magii.

0
serek napisał(a):
Krystian Baranowski napisał(a):

Chodzi mi o to żeby content w headerze był na szerokości 1300 px jak reszta strony, tak jak na projekcie. Czyli krótko mówiąc marginy. Jeśli jest width: 100% to można to łatwo załatwić przez margin: 0 auto;. Ale kolega mówi, że w headerze tego nie może zrobić bo żeby ten kształt tam był musiał go rozbić na dwa kontenery.

Eee, że co?

Robi jeden kontener na 100%, wrzuca tam background, w nim robi drugi już na 1300px. I koniec magii.

Tylko header nie ma background'u. Bo pewnie myślisz, że to jest taki obrazek wrzucony jako background, a ten kształt po prawej to jest osobny element który służy jako maska dla zdjęć.

2

A jak jest ten kształt/maska zdefiniowany? Jakiś plik PNG z przezroczystością, czy raczej coś wektorowego? W jaki sposób go nakładacie na zdjęcie, żeby uzyskać pożądany efekt?

0

Eeee, jaka maska? Masz na myśli to białe tło, które kończy się z prawej strony tym zawijasem? I to niby nachodzi potem na to prawdziwe zdjęcie z psem?

0
serek napisał(a):

Eeee, jak maska? Masz na myśli to białe tło, które kończy się z prawej strony tym zawijasem? I to niby nachodzi potem na to prawdziwe zdjęcie z psem?

Tak dokładnie.

2
  1. A nie możecie po prostu scalić zdjęcia z tą maską? I potem wrzucić jako tło?
  2. Tło może mieć nakładające się obrazki, jeden to będzie pies, a drugi to maska.
  3. CSS posiada takie coś jak maska na obrazek: https://css-tricks.com/clipping-masking-css/ https://bennettfeely.com/clippy/
2

O ile dobrze rozumiem, to chyba Panowie próbujecie przekombinować... wystarczy zapisać cały header jako obrazek 1920xileś tam wysokości i potem po prostu dla headera ustawić background-image i background position. A w headerze w środku ustawić sobie kontener z zawartością... wtedy zdjęcie w tle będzie się przycinac z lewej i prawej. Przykład z losowym obrazkiem poniżej.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            height: 639px;
            background: url('https://brianzinchukpublishing.files.wordpress.com/2015/11/stampede-rig-3-0341hdr-2-1920px.jpg') no-repeat center center;
            background-position: center center;
        }

        div {
            background-color: red;
            opacity: .5;
            margin: 0 auto;
            height: 639px;
            width: 1300px;
            color: white;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <div>
            Red container 1300px;
        </div>
    </header>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1