I was just wondering how do I get my navigation menu to adjust in width as my div box does? help would be great!
Here is the jsfiddle example: http://jsfiddle.net/AtM2Q/
Here is the code:
<html>
<head>
<style>
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
font-size: 9pt;
}
ul#navmenu li {
min-width: 203px;
max-width: 285px;
width: 100%;
text-align: center;
position: relative;
margin-right: 0px;
display:inline-block;
}
#navmenu ul {
display: inline-block;
list-style-type: none;
white-space:nowrap;
}
#page1 {
text-align: center;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 100%;
min-width: 203px;
max-width: 285px;
height: 30px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
white-space: nowrap;
}
ul#navmenu .sub1 a {
margin-top: 0px;
}
ul#navmenu .sub2 a {
margin-left: 0px;
}
ul#navmenu li:hover > a {
background-color: grey;
}
ul#navmenu li:hover a:hover {
background-color: red;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 30px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 126px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display: block;
}
.darrow {
font-size: 8pt;
position: absolute;
top: 8px;
right: 1px;
}
#navmenu {
display: inline-block;
text-align: center;
list-style-type: none;
margin: 0px auto;
padding: 0px;
position: relative;
white-space: nowrap;
}
.rarrow {
font-size: 8pt;
position: absolute;
top: 6px;
right: 0px;
}
ul#navmenu {
width:100% !important;
}
#page1 .link1 {
color: grey;
border-top: 2px solid red;
}
#page2 .link2 {
color: grey;
border-top: 2px solid red;
}
#page3 .link3 {
color: grey;
border-top: 2px solid red;
}
.container {
width: 100%;
min-width: 1024px;
max-width: 1440px;
height: 1000px;
margin: 0px auto;
}
#box2 {
height: 1000px;
width: 100%;
min-width: 1024px;
max-width: 1440px;
height: 1000px;
background-color: yellow;
float: left;
margin: 0px auto;
}
#boxinbox1 {
width: 100%;
height: 200px;
background-color: #E51837;
}
</style>
</head>
<body bgcolor="#E51837">
<div id="box2">
<div id="page1">
<div id="boxinbox1">weiuhgqiogq</div>
<ul id="navmenu">
<li>Home
</li>
<li>hyperlink 2<font color="white">
<span class="darrow">▼</font>
</span>
<ul class="sub1">
<li>hyperlink 2.1
</li>
<li>hyperlink 2.2
</li>
<li>hyperlink 2.3
</li>
</ul>
</li>
<li>hyperlink 3
</li>
<li>hyperlink 4<span class="darrow"><font color="white">▼
</font></span>
<ul class="sub1">
<li>hyperlink 4.1
</li>
<li>hyperlink 4.2
</li>
<li>hyperlink 4.3<span class="rarrow">
<font color="white">▶</font></span>
<ul class="sub2">
<li>hyperlink 4.3.1
</li>
<li>hyperlink 4.3.2
</li>
<li>
hyperlink 4.3.3
</li>
</ul>
</li>
</ul>
</li>
<li>hyperlink 5
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
__________________________________________________________________________oamgogeponrbapoenbepoanbaepobneaporibnmaeorpbinmepobaeponbaepornbwponbwrpoBNWpornbwropUNBWORPBWPOrbwoprBWOI[rbjw[J[owigjw[oiGJWr[ogj[worgijw[rPGJ
If I understand you correctly...
You have to set the width of the ul#navmenu li in %.
With 5 main-navigation points like you have it at the moment..
Do stuff like:
ul#navmenu li {
width: 19%;
text-align: center;
position: relative;
margin-right: 0px;
display:inline-block;
}
But I'll recommend to use Twitter-Bootstrap...
Here is the answer
ul#navmenu a {
text-decoration: none;
display: block;
width: 50%;
max-width: 285px;
height: 30px;
line-height: 25px;
background-color: #2E2E2E;
border: 1px solid #777777;
border-top: 2px solid #777777;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-face: Arial;
float: left;
text-align: center;
white-space: nowrap;
}
remove min-width its not necessary and give width size to 50%, you have given it has 100%, it was covering all over the div
along with that
ul#navmenu li {
border:1px solid white;
max-width: 285px;
width: 50%;
text-align: center;
position: relative;
margin-right: 0px;
display:inline-block;
}
this is the css which is used to give width and border to "li" apply this you will be able to see what you looking for, i did it on your fiddle it worked fine
let me know
Related
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
I have an unordered list that contains several list elements inside. Also inside is an image element which is to be centered. I tried to center it using the margin: auto; property but since there are list elements on the side, it takes that into account when centering itself. How do I center the image in respect to it's container?
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;
margin: auto;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You may have to position the image absolute into the nav element using:
position: absolute;
left: 50%;
transform: translateX(-50%);
Also position:relative the nav element.
This way the image ignores whatever is inside the nav element.
body{
margin:0px;
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position:relative;
}
.nav li {
vertical-align: top;
margin: 5px 10px;
display: inline;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="assets/image/twitter-icon.png" alt="Twitter Icon">
</ul>
</nav>
You can use display:inline-block to get it.
.nav img {
display: inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
height: 21px;
width: 24px;
}
.nav li {
display:inline-block; /*Add this*/
vertical-align: middle; /*Add this*/
margin: 5px 10px;
}
.nav {
text-align:center; /*Add this*/
}
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
text-align:center;
}
.nav li {
display:inline-block;
vertical-align: middle;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
vertical-align: middle;
height: 21px;
width: 24px;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://lorempixel.com/200/200/" alt="Twitter Icon">
</ul>
</nav>
1) All Elements be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
float: left;<------Remove
display: inline-block;<-----------Add
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;<---------Change to margin-left: 0px;------
}
.nav img {
display: block;<----------Change to display: inline-block;---
margin: auto;<---------Remove
height: 21px;
width: 24px;
}
.clearfix{<-----------Add this Selector
text-align: center;
width: 100%;
padding-left: 0;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 0px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
}
.clearfix{
text-align: center;
width: 100%;
padding-left: 0;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
2) Just image be Center
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;<---------Add
}
.nav li {
float: left;<---------remove
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: block;<-------Change To display: inline-block;---
margin: auto;<----------remove---------
right: 0;<--------------Add
position: absolute;<-------------Add
height: 21px;
width: 24px;
}
.clearfix { <----------------Add
width: 50%;
padding-left: 0;
position: relative;
}
Full Code:
.nav {
width: 1280px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
position: relative;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 5px 10px;
}
nav li:first-child {
margin-left: 75px;
}
.nav img {
display: inline-block;
height: 21px;
width: 24px;
right: 0;
position: absolute;
}
.clearfix {
width: 50%;
padding-left: 0;
position: relative;
}
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon">
</ul>
</nav>
Put your img element into li and do some changes in your css like below snippet:
.nav ul {
width: 800px;
margin: 0 auto;
font-size: 16px;
font-weight: 500;
border: 1px solid black;
padding: 0;
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
vertical-align: middle;
margin: 5px 10px;
}
.nav img {
display: block;
margin: auto;
}
.nav ul:before,
.nav ul:after {
content: "";
display: table;
}
.nav ul:after {
clear: both;
}
<!--html-->
<nav class="nav">
<ul class="clearfix">
<li>Home</li>
<li>Moments</li>
<li>Notifications</li>
<li>Messages</li>
<li><img src="//login.create.net/images/icons/user/twitter_30x30.png" alt="Twitter Icon"></li>
</ul>
</nav>
When hovering over the links in drop2 div, the entire drop2 div moves upward a few pixels. Same problem with drop3.
Any ideas why the div is shifting up when I hover over it? Thank you, any advice much appreciated.
#nav {
background-color: #373737;
float: left;
height: 30px;
padding: 0px 0px 0px 0px;
width: 970px;
}
.nav a {
display: block;
}
.nav ul li a {
position: relative;
}
a {
text-decoration: none;
}
a.item {
color: white;
}
.item {
position: relative;
}
a.item:hover {
background-color: #dcd0c0;
height: 30px;
color: #373737;
font-weight: bold;
}
.menu {
list-style-type: none;
margin: auto;
width: 970px;
text-align: center;
}
.nav .items {
display: inline;
float: left;
margin: 0px 100px 0px 100px;
padding: 0;
text-align: center;
width: 82px;
}
.drop2 {
display: none;
text-align: left;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.items:hover .drop2 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop3 {
display: none;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
width: 150px;
}
.items:hover .drop3 {
display: block;
width: 150px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #f4f4f4;
position: relative;
z-index: 99;
}
.drop2 > a {
color: #373737;
}
.drop3 > a {
color: #373737;
}
.drop2 > a:hover {
font-weight: bold;
}
.drop3 > a:hover {
font-weight: bold;
}
<div id="nav">
<div class="nav">
<ul class="menu">
<li class="items">
Photos
</li>
<li class="items">
Locations
<div class="drop2">
Bays
Lakes
Pacific Ocean
</div>
</li>
<li class="items">
Catches
<div class="drop3">
Bass
Other
</div>
</li>
</ul>
</div>
</div>
Add line-height: 30px; to your #nav tag in css.
jsfiddle
Whenever I put the text on top of the rectangle it doesn't let me click the link anymore. How can I fix this? Also,
whenever I try to change the color of the "San Diego" text, it doesn't let me change the position of the text. I am a beginner in HTML by the way.
#ViewOnMaps {
background-color: #FF604C;
height: 35px;
width: 150px;
position: absolute;
top: 245px;
left: 50px;
opacity: .5;
}
#circular {
width: 150px;
height: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat;
position: absolute;
top: 15px;
left: 45px;
}
span.SanDiego {
position: absolute;
top: 250px;
left: 70px;
width: 100%;
font-size: 20px;
color: #999;
}
span.ViewOnMaps {
position: absolute;
top: 235px;
left: 78px;
}
#maps {
background-color: white;
height: 300px;
width: 220px;
border-style: solid;
border-color: #B4B4B4
}
#menu {
position: absolute;
right: 52px;
bottom: 638px;
}
body {
background-color: #E8E8E8;
}
nav {
background-color: white;
height: 75px;
width: 1140px;
float: right;
border-style: solid;
border-color: #B4B4B4
}
nav ul {} nav ul li {
list-style-type: none;
width: 150px;
float: left;
text-align: center;
}
li a {
text-decoration: none;
color: #999;
line-height: 50px;
display: block;
}
li a:hover {
text-decoration: underline;
color: #FF604C;
}
<nav>
<ul id="menu">
<li>Home
</li>
<li>Gallery
</li>
<li>Message
</li>
<li>Music
</li>
<li>Search
</li>
<li>Settings
</li>
<li>Location
</li>
</ul>
</nav>
<div id="maps"></div>
<div id="circular"></div>
<span class="SanDiego">
View on Maps
</span>
<div id="ViewOnMaps"></div>
Change/add your style with this
span.SanDiego {
position: absolute;
top: 250px;
left: 70px;
width: 100%;
font-size: 20px;
z-index:1;
}
.SanDiego a {color:red} /*--Change your text's color here--*/
Demo
You have used unnecessary positioning of the elements everywhere. If you are using absolute position you must specify the position:relative to the parent div, otherwise the position will be relative to the body of the html.
I didn't understood your question properly but from what i get i tried to solve it as much as possible.
Here is the solution: http://codepen.io/vikrantnegi007/pen/LVqvjN
HTML Code:
<div id="maps">
<div id="circular">
</div>
<div class="SanDiego">
View on Maps
</div>
</div>
<nav>
<ul id="menu">
<li>Home
</li>
<li>Gallery
</li>
<li>Message
</li>
<li>Music
</li>
<li>Search
</li>
<li>Settings
</li>
<li>Location
</li>
</ul>
</nav>
CSS Code:
#circular {
width: 150px;
height: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat;
position: absolute;
top: 15px;
left: 35px;
}
div.SanDiego {
background-color: #ff604c;
padding: 15px;
opacity: 0.5;
position: absolute;
top: 220px;
left: 35px;
font-size: 20px;
color: #999;
}
#maps {
background-color: white;
height: 300px;
width: 220px;
border-style: solid;
border-color: #B4B4B4;
float: left;
position: relative;
}
#menu {
right: 52px;
bottom: 638px;
}
body {
background-color: #E8E8E8;
}
nav {
background-color: white;
height: 75px;
width: 1140px;
float: left;
border-style: solid;
border-color: #B4B4B4;
margin-left: 30px;
}
nav ul {} nav ul li {
list-style-type: none;
width: 150px;
float: left;
text-align: center;
}
li a {
text-decoration: none;
color: #999;
line-height: 50px;
display: block;
}
li a:hover {
text-decoration: underline;
color: #FF604C;
}
Tell me if there is anything else you want to do with it.
I have a header on my website, with a list in it. The list is aligned properly on 100% size, but when I ctrl-scroll to expand, the text in the list goes out of the header area.
HTML
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 125%;
height: 4.5%;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I want the list text to remain inside the header at all times.
EDIT: If I remove the height, since there is a position:fixed; the other containers will get overlapped by the header on zooming.
In your .header class, remove the height attribute - the browser will set the height of that div based on the content inside it (in this case, your menu items).
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
height: 2.5em;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
If you want to be able to scale everything relatively when you zoom you should use em units instead of percentages.