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.
Related
I am having trouble turning my normal navbar into a sticky one. When I don't set the position as fixed, the navbar looks and works fine. But when I make the position fixed, it glitches out and looks wonky, and I have examples of both down below. My HTML and CSS are here too:
body {
margin: 0px;
padding: 0px;
font-family: 'Arial', serif;
}
header {
position: fixed;
}
p {
line-height: 200px;
}
.navbaratta {
background-color: #E9B63C;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
margin-top: 0;
}
.navbaratta>li {
display: inline-block;
padding-right: 70px;
border-right: 1px solid #000;
margin-right: 70px;
}
.navbaratta>li>a {
text-decoration: none;
color: #1A1A1A;
font-weight: bold;
}
.navbaratta>li>a:hover {
color: #474747;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
}
.LogoDiv {
background-color: #1A1A1A;
width: 100%;
}
li.HOME {
border-left: 1px solid #000;
padding-left: 70px;
}
<header>
<div class="LogoDiv">
<img src="NavBarFinal.png" class="Logo">
</div>
<ul class="navbaratta">
<li class="HOME">HOME</li>
<li>BIOGRAPHY</li>
<li>CONTACT US</li>
<li>PHOTO GALLERY</li>
</ul>
</header>
with position fixed:
without position fixed:
The header is not taking the complete width. So, just update your header CSS.
header {
position: fixed;
width: 100%; // Added
}
You need to add positional properties when you fix a div or alternatively you give it a width. I usually prefer first approach. So use it as below will solve your problem.
Your problem caused by using element with relative positioning which is displayed as block so it takes width of parent element when it is relative. So you dont care its width since its parent is body. However when you change it to fixed positioning there is nothing in terms of reference so it wraps content thats all. By entering left:0 and right:0 you stretch it to whole screen. You also need to add a padding top to your body element. Otherwise some parts of your text will be displayed behind navbar. I hope it helps
header {
position: fixed;
left: 0;
right: 0;
}
Have some basic trouble trying to get the image to sit below the navigation. At the moment it sits behind the navigation.
Each basic page will have a unique image for About Us, Contact Us, Term
Basic page HTML setup:
<header>
<div class="basicbanner">
<%= image_tag("1280x400-about.jpg", style: "background-image", class: "img-responsive", alt: "Diving Image") %>
<div class="container">
<div class="row">
<div class="basicbanner-title center">
<h1>About us</h1>
</div>
</div>
</div>
</div>
</header>
CSS Setup for Banner Postion:
.basicbanner {
min-height: 400px;
position: relative;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.basicbanner-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 620px;
h1 {
text-transform: uppercase;
color: white;
}
}
With this setup it sits behind the nav still and trying to get it to sit below.
Not understanding where the conflict is happening and tried few methods as shown in the styling below.
Navbar CSS
.navbar {
border: 0px solid rgba(0, 0, 0, 0);
background: #70cbce;
//background: transparent;
margin: auto;
min-height: 60px;
padding-top: 10px;
position: fixed;
//top: -60px;
}
.navbar.open {
top: 0;
}
.navbar-inverse .navbar-nav > li > a, .navbar-nav a {
color: #fff;
font-size: 14px;
text-align: center;
vertical-align: middle;
line-height: 60px;
//letter-spacing: 1px;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #0a4f6f;
opacity: 0.6;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 10px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #4ec3cd;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
/* HEADER AND LOGO*/
.header{
padding-top:40px;
padding-bottom:50px;
width: 100%;
font-size:18px;
}
#logo {
float: left;
//margin-right: 10px;
//font-size: 1.7em;
//color: #fff;
//text-transform: uppercase;
//letter-spacing: -1px;
margin-top: -10px;
//font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
So need to get it to sit below the nav and also work responsively.
sorry, but it is not very clear to me what you are trying to obtain. Why are you keeping the image_tag over the navigation? The navigation html code should be on top, the image below the navigation. Then you can set the following properties:
overflow: hidden;
z-index : a negative or positive number;
z-index will make the different divs, that overflow, stay one over the other to show up. If you want to have the navigation overflow over the image with a trasparent background, the navigation should have
z-index: +1;
So that, when you hover with the mouse on the navigation the hover css style will work. The image should have:
z-index: -1;
Additionally you should position the two divs one over the other, I have used:
position: relative;
margin-top: -70px;
With position relative the div will be positioned relatively to the parent div, if you set this correctly could be the nav div, then with margin-top negative you will bring the image up, to overflow with the navigation div. In my case my navigation div had a 70px height so i used -70px, you should also check if the div has margin and padding.
I hope i did not miss anything and I have sometimes problems with the different windows sizes, so i use mediaqueries. For any additional information you can ask me, still there are tutorials online on how to do this, but I could not find them in my latest search.
Please do not downvote me if i totally misunderstood your requirement, I just though this was what you are trying to achieve.
Thanks
Best Regards
Fabrizio Bertoglio
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!
I'm required to make sure my nav bar remains on the right of my header such that the user utilises the horizontal scroll bar to access the navigation options which aren't visible.
Currently I've got 5 elements in my nested and once the user resizes the browser the nav menu jumps/moves down.
See fiddle here
HTML:
<header> <!-- Navigation menu bar -->
<nav>
<ul> <!-- Navigation menu bar options. These are fixed in terms of content. -->
<li>My Profile</li>
<li>Log Out</li>
<li>FAQs</li>
<li>Extras</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #3366FF;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90%;
}
#logo {
margin: 0px;
float: left;
width: 200px;
height: 86px;
background: url("../images/logo.png") no-repeat center;
}
nav {
float: right;
padding: 20px;
}
#menu-icon {
display: hidden;
width: 100px;
height: 86px;
background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
padding: 0;
margin: 0;
}
a:hover#menu-icon {
border-radius: 2px 2px 0 0;
}
ul {
list-style: none;
}
nav ul li {
text-align: center;
display: inline-block;
padding: 10px;
}
nav ul li a:hover {
color: #363636;
text-decoration: none;
}
I would just put a min-width on your header element, stopping it from ever becoming too narrow for the list elements to fit, yet retaining the flexibility.
I tried min-width:660px; and it seemed to work fine to me.
header {
background-color: #3366FF;
width: 100%;
min-width: 660px;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90%;
}
ALTERNATELY you can change your nav css to
nav {
text-align:right;
padding: 20px;
}
..And then change your header's "height" to "min-height" instead.
You have to remove the natural flexibility of the menu by adding a specific width. That way, regardless of the size of the browser window, the menu will remain the width you want it to be and the user will have to scroll to see it.
You can use JS to dynamically do this by setting the width of the header to be a certain amount of pixels, for e.g., greater than whatever is the width of the window upon loading of the document and resizing of the window.
You could use CSS Table display to sort the layout in the header and stop the menu from wrapping underneath. (added bonus: this avoids floats altogether)
header {
display: table;
}
header #logo, header nav {
display: table-cell;
border:1px solid red;
}
https://jsfiddle.net/S5bKq/1277/
As for the responsive menu itself - a quick internet search for 'responsive menus' will net you several examples/tutorials.
Here I have a nav bar set up with a centered logo. The only problem is that I can't get it to look quite right with spacing. The logo is set to 'position: absolute' 'left: 50%' and 'margin-left: -125px' so that is always in the center. Now I just need to get the text balanced around it in a more symmetrical way, but I can't seem to figure out how to do so.
Here's the HTML
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div><!--end header-->
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li {
display: inline-block;
padding: 105px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
#logo {
height: 60px;
padding-top: 40px;
width: 250px;
}
You can go to the site here.
Here's what I would do, and this is just the way I would normally go about things.
I would take the padding of the li, then add the 105px padding to the top of the header (or nav). Next, add some arbitrary margin-right to each li element (say 48px), while of course setting li:last-child to margin: 0; Next take the padding-top and the height off the li#logo and change it to this:
#logo { width: 250px; position: relative; }
Finally, just use a transform to center the logo if you are going to use absolute positioning. This essentially does the same thing as the margin-left, but it is a little more flexible. So the image css should look like this:
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I used this code and it worked perfectly for me. I can make you a fiddle or something also if you are having trouble still.