Jump to content

smallball

Members
  • Posts

    3
  • Joined

  • Last visited

Everything posted by smallball

  1. Responsive header issue: HI ALL. I’m having an issue with making my header responsive. I do have it the way I like more/less when non responsive. So here’s the problem. I want my header to contain three items, an image to the left but not quite all the way to the left, a short paragraph just to the right of it that will stay just to the right of it no matter the size, and an h1 that will stay top and center even when shrunk. Everything I try(flex, media quarries, different positioning etc) always seem to collide with each other at some point. At wits end so any help appreciated. The code: <div class="container"> <div class="navbar"> <img src="./images/1.jpg" class="logo"> <div class="p"> Xxxx xxxxx xxxxxxx xx ? <div> <div class="h1"><h1>Xxxx xxxxxx xxxxxx</h1></div> </div> </div> And the css .container { position:absolute; width:100%; height:100vn; background-position:center; background-size:cover; background:#f3f3f3; } .navbar{ height:150px; align-items:center; flex-wrap:wrap; display:flex; } .logo{ height:150px; width:150px; margin-left:200px; display:flex; position:relative; } .p{ border:1px solid red; font-size: 1.5em; padding-top:15px; margin-top:15px; display:flex; position:relative; } .h1{ border:1px solid red; font-size:2em; display:flex; position:relative; margin-top:15px; }
  2. Im working on a sort "hero" section of sorts with a right hand aside. i cant make it responsive on one without it adversely affecting the other. at this point im not sure what to do and thought if anyone had any ideas that would be great. so heres the code any help appreciated: <div class="content clearfix"> <div class="main-content"> <h1 class="recent-post-title"> Recent Post</h1>` <div class="post"> <img src="./images/football.jpg" class="post-image"> <div class="post-preview"> <h2> <a href="single.html">This is some text. This is not the final say on the matter.</a></h2> <i class="far fa-user"> don juan </i> &nbsp; <i class="far calanderr">mar 2019</i> <p class="preview-text"> this is also some text. This text will be a little longer as it will likely be more descriptive <p> <a href="single.html" class="btn read-more">read more</a> </div> </div> <div class="post"> <img src="./images/1000.jpg" class="post-image"> <div class="post-preview"> <h2> <a href="single.html"> This is some text. This is not the final say on the matter </a></h2> <i class="far fa-user">don juan</i> &nbsp; <i class="far calanderr">mar 2019</i> <p class="preview-text"> this is also some text. This text will be a little longer as it will likely be more descriptive <p> <a href="single.html" class="btn read-more">read more</a> </div> </div> <div class="post"> <img src="./images/fire2.jpg" class="post-image"> <div class="post-preview"> <h2> <a href="single.html"> This is some text. This is not the final say on the matter </a></h2> <i class="far fa-user"> don juan </i> &nbsp; <i class="far calander">mar 2019</i> <p class="preview-text"> this is also some text. This text will be a little longer as it will likely be more descriptive.</p> <a href="single.html" class="btn read-more">read more</a> </div> </div> </div> <div class="sidebar"> <div class="section search"> <h2 class="section-title">search</h2> <form action="index.html" method="post"> <input type="text" name="search-term" class="text-input" placeholder="search..."> </form> </div> <div class="section topics"> <h2 class="section-title">topics</h2> <ul> <li><a href="#>this </a></li> <li><a href="#>should </a></li> <li><a href="#>beeeee </a></li> <li><a href="#>much easier </a></li> <li><a href="#>than this</a></li> <li><a href="#>crap </a></li> </ul> </div> </div> </div> .content{ width:90%; margin: 30px auto 30px; border:1px solid red; } .content .main-content { width:70%; float:left; border:1px solid blue; } .content .main-content .post .post-preview{ width:60%; padding:10px; float:right; } .content .main-content .post .post-preview h2{ color:red; } .content .main-content .recent-post-title{ margin: 20px; } .content .main-content .post{ width:95%; height:270px; margin: 20px auto; border-radius:5px; background:white; position:relative; } .content .main-content .post .read-more{ position:absolute; bottom:10px; right:10px; border:1px solid #005255; background: transparent; border-radius: 0px; color: #005255 !important; } .content .main-content .post .read-more:hover{ color:white !important; background:#005255; transition:.25s; } .content .main-content .post .post-image{ width:40%; height:100%; float:left; } .clearfix { overflow: auto; } .btn{ padding: .5rem 1rem; background:#006669; color:white; border: 1px solid transparent; border-radius: .25rem; } .btn:hover{ color:white !important; background:#005255; } .content .sidebar{ width:30%; float:left; border:1px dashed green; height:300px; } .content .sidebar .section { background: white; padding: 20px; border-radius: 5px; margin-bottom: 20px; } .content .sidebar .section.search { margin-top: 80px; } .text-input{ padding: .7rem 1rem; display:block; width:100%; border-radius:5px; border: 1px solid #e0e0e0; outline: none; color: #444444; line-height: 1.5rem; line-size: 1.2em; font-family: lora; } .content .sidebar .section.topics ul{ margin:0px; padding:0px; list-style:none; border-top: 1px solid #e0e0e0; } .content .sidebar .section.topics ul li a { display:block; padding: 15px 0px 15px 0px; border-bottom: 1px solid #e0e0e0; transition: all 0.3s; } .content .sidebar .section.topics ul li a:hover{ padding-left:10px; transition: all 0.3s; } .content .sidebar .section .section-title{ padding: 10px 0px 10px 0px; }
  3. ive been stuck for a couple of weeks on my drop-down menu cant seem to quite get what i need. there is space above it and cant seem to get rid of it. any help greatly appreciated. the code: <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="description" content="affordable and professional web design"> <meta name="keywords" content="web design, affordable web design "> <meta name="author" content="brad traversty"> <title>offski</title> <link rel="stylesheet" type="text/css" href="homercss.css"> <script src="nav.js" defer> </script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </head> <body> <header> <div class="container"> <IMG STYLE="position:absolute; TOP:0px; LEFT:250px;WIDTH:140px; HEIGHT:138px " SRC="scrooge4.jpg"> <h1><span class="highlight">blue</span> xxxxxxx xxxxxx</h1> <p>xxxx xxxxx xxxxxx xx?</p> </div> <div id="smb"> <a class="social-icon" href="https://www.crediful.com/top-personal-finance-blogs/" target="blank"> <ion-icon name="logo-youtube"></ion-icon> <a class="social-icon" href="https://www.cnn.com/election/2020/results/president" target="blank"> <ion-icon name="logo-twitter"></ion-icon> <a class="social-icon" href="https://www.amazon.com/" target="blank"> <ion-icon name="logo-facebook"></ion-icon> <a class="social-icon" href="https://ionic.io/ionicons/v4" target="blank"> <ion-icon name="logo-instagram"></ion-icon> </div> </header> <nav id="main-nav"> <ul> <li class="active"> <a href="#">HOME</a></li> <li><a href="#">SERVICES<span class="arrow">&#x25BC;</span></a> <ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul> </li> <li><a href="#">THE MOVIES<span class="arrow">&#x25BC;</span></a> <ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul></li> <li><a href="#">FAQs<span class="arrow">&#x25BC;</span></a> <ul class="submenu"> <li><a href="#">Android</a></li> <li><a href="#">iOS</a></li> <li><a href="#">iOS</a></li> </ul> </li> <li><a href="#">FASHION<span class="arrow">&#x25BC;</span></a> <ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul></li> <li><a href="#">LATEST NEWS<span class="arrow">&#x25BC;</span></a><ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul></li> <li><a href="#">BLOG</a></li> </ul> </nav> </body> </html> and the css * { margin: 0; padding: 0; box-sizing: border-box; } .container{ width:80%; margin:auto; overflow:hidden; } .highlight{ color:blue; } /* Header **/ header{ background:#ffffff; padding-top:10px; min-height:140px; border-bottom:#b7b9ec 1px solid; } header h1{ text-transform: uppercase; float:left; margin-left:210px; color:#000000; font-size:30px; } header p{ text-transform: uppercase; float:left; font-size:20px; color:#000000; float:left; display:inline; margin-top:55px; margin-left:-375px; } #smb { position: absolute; right: 250px; top: 80px; margin-top: 18px; padding-top: 0px; padding-bottom: 0px; background: #F0F0F0; } .social-icon{ padding: 0px; color:#000000; text-decoration:none; font-size:30px; } #main-nav a { color:#000000; background: #ffffff; height: 64px; font-family: lato; font-weight: bold; display: flex; align-items: center; justify-content: center; text-decoration: none; } #main-nav a:hover { background: green; } #main-nav ul { list-style: none; display: flex; } #main-nav li { width: 100%; text-align: center; position: relative; } #main-nav ul li a{ background: #000000; color: red; } #main-nav li:hover .submenu > li { display: block; flex-direction: column; top: 0px; } .submenu li { display: none; position: absolute; top: 0px; } .submenu { display: flex; flex-direction: column; position: absolute; width: 100%; } .submenu li { position: relative; } .arrow { margin-left: 8px; color: #eee; font-size: 12px; } .active a{ color: yellow; border-radius:3px; background-color: #ffffff; }
×
×
  • Create New...