Bild nach rechts unten ausrichten und Menü Helden nach unten drückt in Foundation 6

Question

Ich versuche, meinen Portfolio zu codieren, und das ist das Layout ich in Photoshop:

Hinweis: Dies ist ein verkleinerten Bildvorschau

Vollbildgröße: http://imgur.com/a/8aaHS

ich versuche, die Bilder und den Inhalt auszurichten, aber ich habe einige Herausforderungen mit. Vielleicht mache ich etwas falsch an der allgemeinen Struktur?

Link zur Website: https://danielvianna.github.io/

Probleme:

1- Ich versuche, den Text und die Faust Fall UI Screenshot innerhalb des div auszurichten rechts unten zunächst dann, wenn geschrumpft zu erbringenden zum mobilen Stapel als eine Spalte unter dem Text. Ich habe versucht, verschiedene Dinge zu verwenden, wie zum Beispiel das Bild mit einem Div zu kapseln und Position zu machen: relativ zu diesem Elternteil und dem Bild absolut, aber es hat nicht funktioniert. Ich habe auch andere Parameter wie Rand, Float, Ausrichtung verwendet.

Problem Vorschau:

HTML-Code:

<!-- start of case 1 --> 
    <div id="case1" class="row fullWidth"> 
    <div class="small-6 medium-6 large-6 columns"> 
     <div class="case1text"> 
     <h2>A new class of real-time software<h2> 
     </div> 
    </div> 
    <div class="small-6 medium-6 large-6 columns"> 
     <div class=case_image_container> 
     <img class="case_image" alt-check_content_below src="https://danielvianna.github.io/images/blacktrax_gui.png"> 
     </div> 
    </div> 
    </div> 
    <!-- End of case 1--> 

CSS-Code:

/* START OF CASE 1 SECTION HOMEPAGE*/ 

#case1 { 
    /* Permalink - use to edit and share this gradient:   http://colorzilla.com/gradient-editor/#040e1d+0,000000+100 */ 
    background: #040e1d; /* Old browsers */ 
    background: -moz-linear-gradient(top, #040e1d 0%, #000000 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #040e1d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #040e1d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#040e1d', endColorstr='#000000',GradientType=0); /* IE6-9 */ 
    height: 95vh; 
    width: 100%; 
    position: relative; 
} 

.case1text { 
    position: relative; 
    top: 50%; 
    left: 70%; 
    margin: -6.25em 0 0 -9.38em; /* this defines the position for the hero text*/ 
    background-color: transparent; /* used colored for detecting problems*/ 
    height: 31.5em; 
} 

.case_image_container { 
    position:relative; 
    margin-left: 0; 
    background-color: red; 
    margin-bottom: 1em; 

} 

.case_image { 
    height:auto; 
    width: 40em; 
    position: sticky; 
    margin-left: 5; 
    border: 0; 
    font-size: 1.4em; 

} 
/* END OF CASE 1 SECTION HOMEPAGE*/ 

2-My-Menü geöffnet, wenn ist Sachen nach unten drücken den Helden Bild auf Mobil, anstatt oben als eine andere Schicht trotz Gi zu rendern ving einen z-index für beiden Entitäten

Problem Vorschau:

Code html:

<!-- Start Top Menu Bar --> 
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium"> 
    <button class="menu-icon" type="button" data-toggle></button> 
    <div class="title-bar-title">Menu</div> 
    </div> 

    <div class="top-bar" id="main-menu"> 
    <div class="top-bar-left"> 
     <ul class="dropdown menu" data-dropdown-menu> 
     <li class="menu-text"><img id="arrow" alt-check_content_below src="https://danielvianna.github.io/images/daniel_logo2.png"></li> 
     </ul> 
    </div> 
    <div class="top-bar-right"> 
     <ul id="menu" class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown"> 
     <li class="has-submenu"> 
      <a href="#">Work</a> 
      <ul class="submenu menu vertical" data-submenu> 
      <li><a href="#">Blacktrax UI</a></li> 
      <li><a href="#">Pocket Freud</a></li> 
      <li><a href="#">Blacktrax Website</a></li> 
      <li><a href="#">WWF E-store</a></li> 
      <li><a href="#">Walrus</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
    <!-- end of Top Menu Bar --> 



    <!-- Start Hero Section--> 

    <div class="row fullWidth" id="hero"> 
    <div class="small-6 medium-6 large-6 column"> 
    </div> 
    <div class="small-6 medium-6 large-6 column"> 
    <div id="text_hero"> 
     <div id="portfolio_text_container"> 
     <h6 id="portfolio_text">PORTFOLIO</h6> 
     </div> 
     <h1>I’m <br /> Daniel Vianna</h1> 
     <h3>a UX designer with <br /> a mission to make <br /> technology more <br />human.</h3> 
     <div id="arrow_container"> 
     <img id="arrow" alt-check_content_below src="https://danielvianna.github.io/images/arrow.svg"> 
     </div> <!-- arrow container close --> 
    </div> <!-- text hero close --> 
    </div> <!-- second div column close --> 

</div> <!-- row close --> 
    <!-- End Hero Section --> 

CSS CODE:

/* START GLOBAL CONTAINER STYLES*/ 
body { 
    margin-top: 2rem; 
} 


.fullWidth { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: initial; 
} 

/* START GLOBAL CONTAINER STYLES*/ 

/* START GLOBAL FONT STYLES*/ 
h1{ 
    font-family: open sans, sans-serif; 
    color: white; 
    font-weight: 700; 
    font-size: calc(3.0rem + 0.4vw); 
    line-height: 1.1; 
    max-width: calc(28rem + 0.5vw); 
    margin-bottom: 0.5rem; 
    } 


h2{ 
    font-family: open sans, sans-serif; 
    color: white; 
    font-weight: 700; 
    font-size: calc(3.0rem + 0.4vw); 
    line-height: 1.1; 
    max-width: calc(28rem + 0.5vw); 
    margin-bottom: 0.5rem; 
} 

h3{ 
    font-family: open sans, sans-serif; 
    color: white; 
    font-weight: 300; 
    font-size: calc(0.9rem + 0.4vw); 
    line-height: 1.5 ; 
    max-width: calc(28rem + 0.5vw); 
    margin-bottom: 0.5rem; 
    } 

/* END OF START GLOBAL FONT STYLES*/ 


/* START OF NAVIGATION BAR*/ 
.title-bar { 
    background-color: #1e1e1e; 
    padding: 0.9rem; 
} 

.title-bar-title { 
    color: #fff; 
    font-family: "open sans", sans-serif; 
    font-weight: 400; 
} 

.top-bar-right { 
    z-index: 9999!important; 
} 

.top-bar { 
    background-color: #1e1e1e; 
} 

.top-bar ul { 
    background: #333; 
} 

.top-bar ul li { 
    background-color: #1e1e1e; 
} 

.top-bar ul li a { 
    color: #fff; 
    font-family: "open sans", sans-serif; 
    font-weight: 400; 
} 

#main-menu li:hover, 
#main-menu li a:hover { 
    background: #2f2f2f; 
} 

#main-menu ul { 
    background: #1e1e1e ; 
    border: none; 
} 

#main-menu, 
.title-bar { 
    background: #1e1e1e; 
} 

.menu-text { 
    background:-color: #fff; 
} 


@media only screen and (min-width: 40em) { 
.menu:last-child { 
    border-left: none; 
} 
.menu:first-child { 
    border-left: none; } 
.menu li:not(:last-child) { 
    border-right: none; 
} 
.menu-text { 
    display: none !important; 
} 
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after  { 
    border-color: white transparent transparent; /* changes triangle back icon when in medium & large screens */ 
} 
} 

.js-drilldown-back > a::before { 
border-color: transparent white transparent transparent; /* changes triangle back icon when in mobile */ 
} 

.dropdown.menu .submenu { 
border: none; 
} 

.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after { 
    border-color: #fff transparent transparent; 
} 

.is-drilldown-submenu-parent > a::after { 
    border-color: transparent transparent transparent #fff; 
} 

.js-drilldown-back::before { 
    border-color: transparent #fff transparent transparent; 
} 




/* END OF NAVIGATION BAR*/ 


/* START HERO SECTION HOMEPAGE*/ 
#hero { 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c009a+0,1000b3+15,1300d8+28,1200d3+42,1100d7+53,1300e8+61,1600fa+74,1400f8+87,1400f8+100 */ 
    background: #0c009a; /* Old browsers */ 
    background: -moz-linear-gradient(45deg, #0c009a 0%, #1000b3 15%, #1300d8 28%, #1200d3 42%, #1100d7 53%, #1300e8 61%, #1600fa 74%, #1400f8 87%, #1400f8 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(45deg, #0c009a 0%,#1000b3 15%,#1300d8 28%,#1200d3 42%,#1100d7 53%,#1300e8 61%,#1600fa 74%,#1400f8 87%,#1400f8 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(45deg, #0c009a 0%,#1000b3 15%,#1300d8 28%,#1200d3 42%,#1100d7 53%,#1300e8 61%,#1600fa 74%,#1400f8 87%,#1400f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c009a', endColorstr='#1400f8',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
    background-image: url(https://danielvianna.github.io/images/daniel_vianna_background-min.jpg); 
    background-repeat: no-repeat !important; 
    background-size: cover; 
    height: 95vh; 
    width: 100%; 
    background-position: center !important; 
    margin: 0; 
} 

@media only screen and (max-width : 480px) { /* this switches the background for a darker one in small res */ 
#hero { 
    background-color: #0c009a; 
    background-image: url(https://danielvianna.github.io/images/daniel-header-hero-smallscreens-darker.jpg); 
    background-position: right !important; 
    } 
} 


#text_hero { 
    position: absolute; 
    top: 50%; 
    left: 70%; 
    margin: -6.25em 0 0 -9.38em; /* this defines the position for the hero text*/ 
    background-color: transparent; /* used colored for detecting problems*/ 
    height: 31.5em; 
} 

#portfolio_text_container { 
    display:flex; 
    flex-direction:row; 
    justify-content:left; 
    flex-wrap:wrap; 
    align-items:flex-start; 
    background: transparent; /* used colored for detecting problems*/ 
    margin:auto; 
    height:5em; 
    z-index: 9; 
} 

#portfolio_text { 
    font-family: open sans, sans-serif; 
    color: #ff6300!important; 
    font-weight: 700; 
    font-size: calc(0.5rem + 0.4vw); 
    line-height: 1.5 ; 
    max-width: calc(28rem + 0.5vw); 
    margin-bottom: 0.5rem; 
    z-index: 9; 
} 

#arrow_container{ 
    display:flex; 
    flex-direction:row; 
    justify-content:left; 
    flex-wrap:wrap; 
    align-items:flex-end; 
    background: transparent; /* used colored for detecting problems*/ 
    margin:auto; 
    height:10em; 
} 


@media only screen and (max-width : 480px) { 
#arrow_container { 
    height:2em; 
    } 
} 

Answer 1

genau dem Bild gibt eine Breite von 100%:

.case_image { 
    height: auto; 
    width: 100%; 
    position: sticky; 
    margin-left: 5; 
    border: 0; 
    font-size: 1.4em; 
} 

Answer 2

1. Um es nach rechts unten zu bewegen müssen Sie

   <div class="small-6 medium-6 large-6 my-custom-class column"> 
   

Die Klasse eine benutzerdefinierte Klasse hinzuzufügen, muss Stil nur anzuwenden, wenn auf größeren Bildschirmen so Breakpoint verwenden.

Dann sind unsere Klasse Stil:

.my-custom-class{ 
position: absolute; 
bottom: 0; 
right: 0; 
padding-right:0; 
} 

Als nächstes gehen zu .case_image_container in Ihrem CSS und fügen Sie diese:

float:right; 

und entfernen Sie diese:

margin-bottom: 1em; 

Jetzt Ihr Bild wird wie unten auf dem Bildschirm angezeigt:

1. Genau dies #main-menu hinzufügen Denken Sie daran, auf mobilen Geräten nur anzuwenden, um es in einem mediaquery hinzuzufügen, oder es nur auf mobile Menü Klasse anwenden, wenn Sie eine haben .

   position: fixed; 
   width: 100%; 
   

Denken Sie daran, z-index hinzufügen, wenn nötig.