html - Responsive Website: Faulty Logo and Banner Wrap, Navigation Bar -
i'm having couple of problems responsive website. first problem simple: banner wrapping beneath logo.
in opinion looks unprofessional. i'd achieve similar site st. louis zoo, logo , banner image (the turtle) stay on same row page gets smaller. how this?
my second problem page continues resize, navigation bar becomes sloppy. can see, "contact" link close home, projects, , store links. 
i'm new responsive web design , i'm wondering - can problem nav bar found in global styles or need create more css code within tablet section? thank you. full code below.
html:
<!doctype html> <html> <head> <title>artistic animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div id="banner"> <header> <h1> <a href="index.html"> <img class="banner" src="images/artistic_logo2.png" alt="logo"> </a> <img class="banner" src="images/artistic_banner2.png" alt="banner"> </h1> </header> </div> <div class="navigation"> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="projects.html">projects</a></li> <li><a href="#">store</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div> <div class="row"> <div class="col-3 col-m-3"> <img src="images/image2.jpg" alt="image"> <h1>header 1</h1> <p>lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, cu sit etiam iisque equidem.</p> <img src="images/image3.jpg" alt="image"> <h1>header 2</h1> <p>lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, cu sit etiam iisque equidem.</p> <img src="images/image4.jpg" alt="image"> <h1>header 3</h1> <p>lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, cu sit etiam iisque equidem.</p> </div> <div class="col-6 col-m-9"> <h1>header 1</h1> <p class="p1">lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, cu sit etiam iisque equidem.</p> <h1>header 2</h1> <p>lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id, cu sit etiam iisque equidem.</p> <p>resize browser window see how content responds resizing.</p> </div> <div class="col-3 col-m-12"> <aside> <h2>what?</h2> <p>this information website</p> <h2>where?</h2> <p>this website created in st. louis, mo.</p> <h2>how?</h2> <p>visit our contact page more information.</p> </aside> </div> </div><!--closes row--> <footer> <p>©2016 website</p> </footer> </body> </html> css:
*{box-sizing:border-box;} .row:after{content:""; clear:both; display:block;} [class*="col-"]{float:left; padding:15px;} /*global styles*/ .banner {display: inline-block; margin-left:auto; margin-right:auto;} .p1 {margin-bottom: 400px;} .navigation {text-align:center; background-color:#000000; padding:11px;} #banner {text-align:center; margin-bottom: 40px;} a{text-decoration:none; color:white;} a:visited {color:white;} nav{margin:auto; height:auto; } nav ul { list-style-type: none; margin: 0; padding: 0; font-family:arial } nav li { padding: 10px; margin-bottom: 7px; background-color :#000000; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); display:block; margin-left:30px; margin-right:30px; } nav li:hover { background-color: #8e8e8e;} aside{background-color:#19a5de; padding:15px; color:#fff; text-align:center; font-size:1.1em; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } footer{background-color:#19a5de; color:#fff; text-align:center; font-size:0.9em; padding:15px; } img{max-width:100%; height:auto; } /*mobile phones first*/ [class*="col-"]{ width:100%; } /*tablet*/ @media screen , (min-width:600px) { /*12 column grid*/ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} nav{height:auto;} nav li{display:inline;} } @media screen , (min-width:768px) { /*12 column grid*/ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} nav{height:auto;} nav li{display:inline; text-align:center;} edit: reason can't combine logo , banner 1 image because need logo remain hyperlink home page.
in action
both of solutions in action in 1 place:
.wrapper{ width: 400px; margin: 0 auto; } #banner{ margin: 0 auto 10px; } #banner header h1{ margin: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #banner header h1 .top-sections{ display: -webkit-flex; display: -ms-flexbox; display: flex; } .navigation{ text-align:center; background-color:#000000; padding:11px; } nav{ margin:auto; height:auto; } nav ul{ list-style-type: none; margin: 0; padding: 0; margin: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: space-around; font-family: arial; } nav li{ padding: 10px; margin-bottom: 7px; background-color :#000000; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } nav li:hover{ background-color: #8e8e8e; } nav a{ text-decoration:none; color:white; font-size: 10px; } nav a:visited{ color:white; }<div class="wrapper"> <div id="banner"> <header> <h1> <a class="top-sections" href="index.html"> <img class="banner" src="https://placehold.it/73x50/000000/ffffff?text=logo" alt="logo"> </a><!-- --><img class="top-sections banner" src="https://placehold.it/325x50/000000/ffffff?text=banner" alt="banner"> </h1> </header> </div> <div class="navigation"> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="projects.html">projects</a></li> <li><a href="#">store</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div> </div>
Comments
Post a Comment