So I'm trying to recreate the following layout for a lab: http://i.imgur.com/T24vvGu.jpg
I've started by tackling the navigation bar. I set the position to absolute so I can give it a top: 50px; property to move it down 50px from the top.
I tried to then set the logo's position to relative, so that relative to the navigation bar, I can move it 20px from the left or so. But when I use relative positioning, the logo sits inside of the navigation bar and makes the navigation bar's height bigger.
I thought that by setting the logo's position to relative, it would treat the logo as if it's not a part of the navigation bar. However, that's not the case. So what I did was I also set the logo's position to absolute. This entire thing is just killing my soul. For some reason I can't wrap my head around how to do this.
I went to web archive, and looked up spigot design's website. What they did, was they set the navigation bar's position to fixed, and the logo to relative. I tried doing this as well but the logo would still sit inside the navigation bar and extend it's height.
Furthermore, I have to set the logo to sit in the middle of the navigation bar when the browser is 768px and below. And then, two menu links sit to the left of the logo, and the other two menu links sit to the right of the logo. I'm completely lost at how to do this. I don't think I'd have a problem with the rest of the layout. It's just this navigation bar and logo positioning that's driving me insane.
Here is my code: http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323
Should I upload my code with the logo images as well? That may make it easier to follow. I'm not sure what the best practice is as I'm new to stack overflow.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lab Eight</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar left -->
<div class="navbar">
<div id="logo"></div>
<div class="container">
<ul class="float-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="column-twelve">
</div>
<div class="column-twelve">
</div>
</div>
</div>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #332929;
}
#logo {
background: url('images/logo-left.png');
display: block;
width: 250px;
height: 100px;
position: absolute;
left: 15px;
top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
color: #f2f2f2;
}
.column-twelve h2 {
font-size: 1.875em;
}
.row .column-twelve p {
color: #f2f2f2;
font-weight: 400;
font-size: 0.875em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
width: 90%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.navbar {
position: absolute;
width: 100%;
min-height: 58px;
top: 50px;
background: #fefefe;
}
.navbar li {
position: relative;
display: inline;
list-style: none;
}
.navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
/* The row for the columns. */
.row {
margin-right: -15px;
margin-left: -15px;
}
.column-twelve {
width: 100%;
}
.column-eleven {
width: 91.66666667%;
}
.column-ten {
width: 83.33333333%;
}
.column-nine {
width: 75%;
}
.column-eight {
width: 66.66666667%;
}
.column-seven {
width: 58.33333333%;
}
.column-six {
width: 50%;
}
.column-five {
width: 41.66666667%;
}
.column-four {
width: 33.33333333%;
}
.column-three {
width: 25%;
}
.column-two {
width: 16.66666667%;
}
.column-one {
width: 8.33333333%;
}
#media screen and (max-width: 768px) {
#logo {
position: absolute;
margin: 0 auto;
background: url('images/logo-center.png');
height: 146px;
width: 250px;
}
}
Here you go: http://codepen.io/n3ptun3/pen/avrXaE?editors=110
To complete this, I positioned the #navbar relative to its normal position. Then I absolutely positioned the #logo and #container (from their first positioned ancestor element, i.e. #navbar.)
The height issue comes from setting min-height: 58px; on .navbar. Instead, you want to use height: 58px;.
FYI--when using media queries, it is best practice to write your code mobile first. This means writing your code for the smallest screen first. In order to do this, you must use min-width instead of max-width. Also, you want to use #media only screen, instead of #media screen. This targets only browsers that can understand media queries.
Hope this helps. Feel free to ask any questions about the code in the comments section.
HTML
<div id="page">
<div id="navbar">
<div id="logo"></div>
<ul id="container">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
#page {
height: 600px;
}
#navbar {
position: relative;
width: 100%;
height: 50px;
top: 75px;
background-color: #fefefe;
}
#logo {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #333;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
}
#container {
position: absolute;
top: 13px;
padding: 0;
margin: 0;
width: 100%;
}
#navbar li {
display: none;
}
#navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
position: relative;
left: 100%;
}
#media only screen and (min-width: 569px) {
#navbar li {
display: inline-block;
list-style: none;
width: 20%;
float: left;
text-align: center;
}
}
#media only screen and (min-width: 769px) {
#logo {
left: 50px;
transform: translate(0);
}
#container {
width: 30%;
right: 50px;
}
#navbar li {
width: 25%;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
left: 0;
}
}
EDIT:
In response to your additional questions:
:nth-child() is a pseudo-class selector. It selects the child that is the desired ordinal (i.e. 1st, 2nd, 3rd, 4th, 5th, etc.) of its parent. The ordinal is designated by the number in parentheses. So if you look at my code, you'll see li:nth-child(3). This means: select all li elements that are the 3rd child of their parent. If the 3rd child isn't an li element, it will NOT be selected.
In regards to your media query question: The reason I placed the left: 50%; transform: translate(-50%); code outside of the media query, is because I'm using the mobile first method of coding. Mobile First design is the current standard for responsive design. It means that you are designing for the smallest screen (mobile) first. So, I am centering the logo, and removing the text links, outside of the media query. Then I target the tablet in my first media query: #media only screen and (min-width: 569px). This targets screens that have a resolution of 569px or higher, and adds the text links in the nav bar. Finally, I use another media query: #media only screen and (min-width: 769px) to target larger screens (computers), with a screen size of 769px or higher. In this media query, I position the logo on the left and the text links on the right.
NOTE: In your code, you are using desktop first design. You are designing for the large screen first. Then you use media queries for smaller sizes. That's why your media query uses max-width. I'm using mobile first design. I am designing for the small screen first. Then I use media queries for larger sizes. That's why my media query uses min-width.
Hope this helps!
Related
I came across a problem on my HTML file. I'm fairly new to HTML, and as I was making a topbar for my static website here, I tried to add a hover to it, but it isn't working correctly, only at the "search" and "cart" buttons (and it kinda works at "contact us" too, but only at its right side) .
So, I'm not sure why the hovering doesn't work on all buttons, even though the topbar looks ok at first glance. Am I overriding something I shouldn't? This got me confused. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#topBox {
height: 250px;
margin-top:-50px;
margin-left: auto;
margin-right: auto;
background: #cbe9f3;
border-radius: 15px;
}
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed;
color: white;
font-family: "Cute Aurora Regular";
}
.topnav {
overflow: hidden;
font-family: "Cute Aurora Regular";
background-color: transparent;
border: #c9c7c7 0.1px solid;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border-left: none;
border-right: none;
}
.topnav a {
float: left;
color: #b47d50;
text-align: center;
margin-left: 27px;
padding: 14px 16px;
margin-right: -20px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
}
.topnav a:hover {
color: #ecb2ad;
}
.topnav a.search {
margin-left: 290px;
}
.topnav a.cart {
margin-left: 25px;
}
br {
display:none;
}
/* Desktop grande */
#media (min-width: 1025px) {
#topBox {
width:1000px;
}
#container {
font-size: 600%;
}
#containerBunny {
width: 250px;
margin-left: 550px;
margin-top: 150px;
}
.topnav {
width: 1000px;
}
}
/* Desktop pequeno */
#media (min-width: 769px) and (max-width: 1024px) {
#topBox {
width:750px;
}
#container {
font-size: 500%;
}
#containerBunny {
width: 200px;
margin-left: 460px;
margin-top: 170px;
}
.topnav {
width: 745px;
}
}
/* Tablets */
#media (min-width: 481px) and (max-width: 768px) {
}
/* Mobile */
#media (min-width: 320px) and (max-width: 480px) {
#topBox {
width:1000px;
}
#container {
font-size: 520%;
}
#containerBunny {
width: 250px;
}
br {
display: block;
}
}
</style>
</head>
<body>
<div id="topBox">
<div id="container">
<p>Bunny <br>Shop</p>
</div>
<img id="containerBunny" src="images/molangMilk.png" alt="">
</div>
<div class="topnav">
HOME
NEW
SALE
PRODUCTS
CONTACT US
<a class="search" href="#search">SEARCH</a>
<a class="cart" href="#cart">CART</a>
</div>
</body>
</html>
Two quick and lazy solutions are to add the following to the #topBox div:
pointer-events: none; will allow you to click "though" the div to the navbar
height: auto; will prevent the div from overlapping the navbar
The reason the rollover isn't working as expected is the #container & #containerBunny divs are covering the topnav div.
You can see the overlapping divs here
I recommend adding the Pesticide Chrome extension to help visualise your divs and make it easier to see what's going on.
Your element with the ID of "container" is overlaying your navigation buttons. It's not to do with your hover logic.
You need to adjust your layout so container no longer sits on top, as mouse events only propagate to the topmost element.
Assuming container is for holding your "Bunny Shop" header. I would suggest adjusting the height of this element. You will probably find that it doesn't need to use the "fixed" positioning, and can sit relative to it's parent component. Fixed sits an element absolutely, relative to the viewport itself.
Your container element overlap the topbar or navigation item due to you fixed the container.
chnage your code from
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed; // remove it.
color: white;
font-family: "Cute Aurora Regular";
}
to
#container {
margin-left: 27px;
margin-top: 41px;
color: white;
font-family: "Cute Aurora Regular";
}
Now you can hover navigation.
Okay, I found a solution: with #media I'm accessing the image's width and the bar separately and it's working but is there any shorter way codewise?
I searched the internet for a solution but none of what I found helped me so far.
I'm trying to make my header to be responsive to the browser's width but it isn't working.
I tried to make just the image responsive or just the top bar but nothing works...
Any ideas?
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/>
</div>
</header>
and this is the css:
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
width: 100%;
text-align: center;
}
Try to change it into:
#media screen and (max-width:900px) {
.header {
width: 100vw; /* viewport width */
}
}
device-width is not correct value for width.
Use : <
meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
When you are working om Media Queries, You have to need change inherit property if you declare cascaded down.If you have set Backgruond images on the body, there is need a queries to cancel background images.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
It's not really clear what you want, but to get your image span the whole width in all sizes, you can add this rule:
.banner img {
width: 100%;
}
This will size the image within its container (which has 100% width, so eventually the image will span the width).
BTW: .banner is a DIV that will be 100% wide anyway, so you actually can erase the 100% width for .banner
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
}
.banner img {
width: 100%;
}
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" />
</div>
</header>
I'm facing issue for responsiveness using DreamWeaver 2017.
The CSS for the logo :
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
Upon trying out the responsiveness :
I'm aware i'm using margin left which caused it.
The objective is to adapt both site and mobile site like this :
Also, if you observed even the input box also indent to the right..
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
I'm looking on other method than padding or margin.
Any critic/suggestion is welcome.
HTML codes:
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo"/>
<font color="black" class="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder="Quick Search for any city or
street in Japan" style="border:none;"/>
</div>
</div>
</header>
Codepenio : https://codepen.io/jayvicious/pen/xrxbZz
There is a lot going on here that we can look at. One thing others have commented on is that your HTML needs cleaned up. Make sure that IDs are truly unique, and that each opening tag has a closing tag (except for self-contained elements, like images and inputs).
You could also stand to use some wrapping elements to help you contain the main areas of your header: the logo, the nav items, and the search.
From there, to help with responsiveness, I would recommend using percentages for your widths whenever possible, instead of absolute units like centimeters. This will help your display flex a little bit at bigger screen sizes. At some point, though, you'll need to just redo the layout because the screen will be too wide to fit all your elements in one line. That's where media queries come into play.
Media queries will let you override a base style when the screen is smaller (or larger) than a certain width. For example, we could set the body to be blue normally, then change to red on smaller screens:
body {
background-color: blue;
}
#media all and (max-width: 800px) {
body {
background-color: red;
}
}
Another thing we can do to tidy things up and make our life easier is to use classes when possible. The nav items are a good use case for this: most of their styles will be shared. We can give them each an ID just in case, but we may not even need to use all those IDs.
Edit: Another tidying opportunity I meant to mention is that the use of the <font> tag is deprecated as of HTML5, so you should avoid that in your HTML. I removed it from the HTML in my snippet below. (End edit.)
A final thing you can do is make the little triangles next to the nav items with HTML and CSS instead of as images. (You could also do these purely in CSS using pseudo elements.)
Here is a demo where I've cleaned up your HTML quite a bit and then heavily revised the CSS to look more like what's in the pictures you provided. I have used placeholder images with my best guess at their real sizes based on the picture. You'll see that as you resize the screen, the media queries kick in to make the header get taller and to center things in the middle of the screen.
I've also forked your Pen on CodePen.
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
body {
margin: 0;
}
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
background-color: #73A7D1;
font-size: 14px;
font-style: normal;
font-weight: 400;
width: 100%;
height: 80px;
}
#header-wrapper {
width: 80%;
margin: 0 10%;
padding-top: 15px;
}
#logo, nav, #search {
float: left;
}
#logo {
width: 110px;
height: 50px;
}
nav {
width: 60%;
}
#search {
width: 200px;
}
.menu-item {
display: inline-block;
margin: 0 2.5%;
height: 30px;
color: black;
max-width: 100px; /* forces "sign in/register to break at <wbr> tab */
text-align: center;
}
#menu2 {
position: relative; /* bump "sign in/register" down a bit */
top: 7px;
}
.triangle-down { /* dropdown arrows next to nav links */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
display: block;
float: right;
margin-top: 5px;
margin-left: 3px;
}
#search img, #search input {
float: left;
height: 30px;
}
#search img {
margin-right: 5px;
}
#search input {
width: 150px;
}
#media all and (max-width: 980px) {
header {
height: 160px;
}
#logo, nav, #search {
float: none;
margin: 0 auto;
}
nav {
width: 100%;
text-align: center;
}
}
#media all and (max-width: 550px) {
header {
height: 200px;
}
}
<header>
<div id="header-wrapper">
<div id="logo"><img src="http://placehold.it/110x50" alt="sojologo"></div>
<nav>
<div class="menu-item" id="menu1">ABOUT<span class="triangle-down"></span></div>
<div class="menu-item" id="menu2">SIGN IN/<wbr>REGISTER</div>
<div class="menu-item" id="menu3">PROMOTIONS</div>
<div class="menu-item" id="menu4">TRAVEL<span class="triangle-down"></span></div>
</nav>
<div id="search">
<img src="http://placehold.it/30x30"/>
<input placeholder="Quick Search for any city or street in Japan" />
</div>
</div>
</header>
well FreedomPride
you can specify different properties for every class in each size of screens
you can use media query in this situation.
for example :
#media only screen and (max-width: 480px) {
.menu2 {
margin-left:20px;
}
}
as you see here I changed the margin in small screens 480px wide to 20px
and you can use it for each size
320px
480px
720px
1200px
you may get more information for mediaquery from here :
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
here's example of how we can do it :
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
/*header*/
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-style: normal;
font-weight: 400;
}
#menu1 {
display: inline-block;
margin-left: 3cm;
margin-right: auto;
height: 30px;
}
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
/* Logo placeholder*/
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#logodropdown {
margin-left: 0px;
border: none;
background-color: rgba(255,255,255,1.00);
}
/* div for Links in header */
#headerLinks {
float: left;
width: calc( 100% - 139px );
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(255,255,255,1.00);
}
/* Links in header */
#imgContainer{
float:left;
}
#headerLinks a {
text-decoration: none;
color: rgba(146,146,146,1.00);
padding-left: 66px;
font-size: 14px;
}
/* Offer text banner*/
#offer {
font-family: 'Montserrat', sans-serif;
clear: both;
background-color: rgba(246,246,246,1.00);
color: rgba(146,146,146,1.00);
padding-top: 57px;
padding-bottom: 57px;
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1280px) {
#logo {
margin-left:30px;
}
#menu1 {
margin-left:35px;
}
.menu2 {
margin-left:20px;
}
.menu2 input {
max-width:300px;
}
}
#media only screen and (max-width: 992px) {
#logo {
margin-left:25px;
}
#menu1 {
margin-left:25px;
font-size:18px;
}
.menu2 {
margin-left:15px;
font-size:14px;
}
.menu2 input {
max-width:250px;
font-size:11px;
}
#media only screen and (max-width: 720px) {
#logo {
margin-left:10px;
}
#menu1 {
margin-left:10px;
font-size:13px;
}
.menu2 {
margin-left:5px;
font-size:10px;
}
.menu2 input {
max-width:150px;
font-size:10px;
}
}
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo">
<font color="black" id="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder=" Quick Search for any city or street in Japan" style="border: none;"/>
</div>
Notice: This isn't the best practice. but for more efficient you have to use any grid system or framework like bootstrap, foundation or uikit.
I think you should check for media rules to get full responsiveness in any width/height you want.
I got problem with 2 elements from my header since 3 days,and cannot fix it.The problem is there that my "Search-trigger" which is my search icon and "tablet-icon" which is icon which is showing only on given browser width,are overlapping.Even search icon is going beyond tablet icon when browser is really tiny width.I tried with Float:right,leftand position:absolue,relative on both elements ,overflow:auto on site header,margin:left,righton elements and display properties on both elements display:block ,display:inline-block; Nothing works... i don't know where is the problem..
/***********************************************
Header Style
************************************************/
.admin-bar .site-header {
top: 32px;
}
.admin-bar .site-header.is-fixed {
top: -47px;
}
#media screen and (min-width:640px) and (max-width:790px){
.admin-bar .site-header.is-fixed{
top :-44px;
}
}
#media screen and (min-width:413px) and (max-width:783px){
.admin-bar .site-header{
top: 35px;
}
}
.site-header {
position: absolute;
top: 0;
left: 0;
right:0;
height: 80px;
z-index: 4;
border-bottom: 1px solid #eee;
}
/***********************************************
Search menu style
************************************************/
.search-trigger {
position: absolute;
right:0.5em;
top: 30px;
width: 40px;
text-align: center;
cursor:pointer;
cursor:hand;
display:inline-block;
}
#media screen and (min-width: 40em) {
.search-trigger {
right: 0.8em;
}
}
#media screen and (min-width:783px){
.search-trigger{
top:26px;
}
}
.search-trigger:before {
width: 100%;
display: block;
font-family: "ElegantIcons";
font-weight: normal;
text-align: center;
content: "\55";
/***********************************************
Icon Style
************************************************/
.tablet-icon{
position: absolute;
display:inline-block;
left:90%;
top: 23px;
width: 40px;
float:right;
}
.tablet-icon:before{
width: 100%;
font-size:1.6em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\61";
}
<header id="masthead" class="site-header" role="banner">
<span class="tablet-icon"></span>
<a id="search-trigger" class="search-trigger"></a>
</header>
That happens when you use position:fixed, position:absolut, and z-index. You have to change this in your media queries for each resolution.
When I have resizing issues I replace as many px sizings as I can with %. That way when the screen resizes, the elements resize proportionately. i.e. Change out things at 50px with 5%
Well i make the positions on my elements INSIDE the "" element to relative and float:right; and left my position of<header>to absolute,and it worked like a magic.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need help.
I have been at this for a good couple of hours. I am new to html and css. I have been googling the hell out of this question and the only thing that seems to work is the follow: http://codepen.io/wolfcry911/pen/HyLdg.
Here is what I am trying to accomplish:
create a navigation with 4 links (Home, About Me, Contact, Resume) with a logo in the middle that can adjust to any screen size (tablets, laptops, smartphones). I have tried an unordered list with the logo as the 3rd item (didn't really like this way. Seemed very sloppy and couldn't get the logo to be in the center of the screen since the text lengths were different) and I have tried using the logo as a background image but I cannot seem to center the logo in the middle of the page or when I do, the text never adjusts around the logo, always through the logo. With the link above, I was able to understand about 50% of the css and when I tried to tweak it, I couldn't get the text aligned in the center of the navigation and I can not get the logo to fit into the navigation. Here is my code:
body {
background: #f5f5f5;
font-family: arial;
font-size: 11px;
margin: 0;
}
#header {
height: 56px;
position: relative;
margin: auto;
background: #fff;
box-shadow: 0px 2px 2px #ebebeb;
text-align: center;
padding: 20px 10px;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235, 200, 35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
background: url(img/logo.jpg) 50% 0 no-repeat;
background-size: 125px 56px;
width: 125px;
height: 56px;
top: 20px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
<html>
<head>
<title>Template</title>
<link rel="stylesheet" href="navigation.css">
</head>
<body>
<div id="header">
<a class="logo" href="index.html">
<img src="img/logo.jpg" alt="Michigan State" width="215" height="140" />
</a>
<ul>
<li>Home
</li>
<li>About Me
</li>
<li>Contact
</li>
<li>Resume
</li>
</ul>
</div>
</body>
</html>
I am able to understand about 50% of the css code. So if someone could help explain what is going on with the ul, li, logo, and the #media format, that would be greatly appreciated.
Thank you for the help.
ul is an unordered list which will show bullet points instead of numbers as with and ordered list, ol. They have the list-style set to none so the bullet points will not show and set the width of each element to a set width of 97px.
ul li:nth-of-type(4) is a CSS selector that was implemented in CSS3. It basically tells the browser for the 4th item of the unordered list, use these set styles. http://css-tricks.com/almanac/selectors/n/nth-of-type/
ul li a:hover is just what styles happen when the user hovers over the item of an unordered list.
.logo is a class. These styles handle the position, size, image used, and other styles to format the picture.
#mediadetects the size of the browser and depending on that size uses a different set of styles that are indicated. http://css-tricks.com/css-media-queries/
Check out that site, css-tricks.com. It has a lot of information which has helped me out a lot in the past, especially getting up to speed on all the new tricks and properties with CSS3.
I'll give you a brief explanation of what's going on but you should really read up on CSS. There are some great tutorials for beginners out there as well(codeacademy for example)
#header ul {
margin: 0 auto; /* Centers the UL. */
width: 800px;
padding: 0;
list-style: none; /* Remove list bullets */
}
#header ul li {
float: left; /*Floats the LI's meaning it will place them next to eachother instead of stacking them underneath eachother*/
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px; /* Adds a left-margin to your fourth LI-itme(Resume). This is here so to prevent the link from overlapping the image. The left-margin should be the same width as you image. This needs to be added because your logo has position:absolute. */
}
.logo {
position: absolute; /* This means that the image is taken out of the flow and can be placed anywhere on the page.
Position absolute elements are relative to parent elements containing the position:relative style. In your case that's #header*/
left: 50%;/* places the left edge of the imaget 50% from the left*/
margin: -48px 0 0 -108px; /* adds a negative top/bottom margin to center the image. */
width: 125px;
height: 56px;
top: 20px; /* places the image 20px from the top.
}
The media queries is there to define what will happen to the menu when the window size is less than 800px
Here is a basic markup/layout for you. (BTW it's very basic). It's using positioning, and allows you to easily customize bits and pieces.
.nav {
margin-top: 50px;
height: 40px;
width: 100%;
background-color: blue;
position: relative;
border-bottom: 5px solid gold;
border-top: 5px solid gold;
}
.link {
position: absolute;
width: 20%;
height: 100%;
background: red;
}
.link2 {
left: 20%;
background: green;
}
.logo {
left: 40%;
background: orange;
}
.link3 {
left: 60%;
background: purple;
}
.link4 {
left: 80%;
background: pink;
}
#media screen and (max-width: 800px) {
.link {
position: absolute;
width: 25%;
height: 100%;
background: red;
}
.link2 {
left: 25%;
background: green;
}
.logo {
display:none;
}
.link3 {
left: 50%;
background: purple;
}
.link4 {
left: 75%;
background: pink;
}
}
<div class="nav">
<div class="link link1">Link1</div>
<div class="link link2">Link2</div>
<div class="link logo">logo</div>
<div class="link link3">Link3</div>
<div class="link link4">Link4</div>
</div>
You can use media queries to add styling for different sized screens. For example, when my snippet gets smaller than a width of 800px, the 'logo' div will disappear, and yet when it gets wider, the logo div will reappear. (best viewed in full screen mode to see this effect)
It's just something simple, but i think you could work with this.