So I've been trying to work on my website creation skills and was reading various tutorials concerning html/css developing. The problem I now have run into is that when I alter the size of my page the view gets incredibly altered. I was under the assumption that when the view changed it would keep it's structure but have a smaller view window (not the case).
Does the problem lie with me using percent values instead of pixels? Is there a better way to structure my design to make it responsive to window size alterations?
This is my HTML
<html>
<html lang="en">
<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div id="containerColumn1">
<div id="Fill1"> </div>
</div>
<div id="containerTopLogo">
<div id="FillTopLogo"> </div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Services <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li>
Services2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li> Contact Us</li>
<li> Site Map</li>
</ul>
</nav>
</div>
<div id="containerPicture">
<div id="headerPicture"> </div>
</div>
<div id="container">
<div id="header"> </div>
</div>
<div id="containerColumn2">
<div id="Fill2"> </div>
</div>
</body>
</html>
This is my style.css
body {
background: #FFFFFF url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*COLUMNS TO CENTER PAGE*/
#containerColumn1 {
width:18.2%;
margin-top: 0%;
margin-left: 0%;
padding: 0;
border: 5px groove #000;
}
#Fill1 {
background: red;
height:100%;
}
#containerTopLogo {
width:61.3%;
margin-left:18.4%;
margin-top:-47.4%;
height:23%;
position: absolute;
border: 5px groove #000;
}
#FillTopLogo {
background: green;
height:100%;
}
#containerColumn2 {
width:18%;
margin-top: -49.82%;
margin-left: 80%;
height:100%;
position:absolute;
padding: 0;
border: 5px groove #000;
}
#Fill2 {
background: red;
height:100%;
}
/*Menu Outline*/
.menu-wrap {
width:50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
background:#000000;
}
/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
width: 61.5%;
margin:0%;
position: absolute;
left:19%;
top: 25%;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.menu li{
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#000000;
}
.menu li a:hover > a .menu .current-item a{
color:#FFF000;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top of the Page */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a {
/* Menu Spacing Vert/Hor */
padding:10px 30px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a{
background:#FFFFFF;
}
/* Bottom Level */
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background:#FFFFFF;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a{
background:#FFFFFF;
}
/*END OF MENU TOOLBAR*/
#containerPicture {
width:62%;
margin-top: -31.7%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#headerPicture {
background: yellow;
height:20%;
}
#container {
width: 62%;
margin-top:-0.5%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#header {
background: blue;
height: 50%;
}
I would like to state that I have used a drop down menu provided by Seb Kay. His website: http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css. I only state this as a reference so that he is at least acknowledged for his craftsmanship.
Your problem comes from the vertical margin and padding rules in your css. This is a little counterintuitive but this rules, when defined with percentage, doesn't take as reference the height, but instead they take the width as reference, so all 4 margins are equal. Example:
If you have: margin: 5%, the top and left margin are the same and they don't depend on the height of the conteiner for the top and bottom margins and the with for the right and left.
For padding it is the same.
So, my solution: if you don't really need a percentage layout, I recomend you to use ems for the vertical margins and paddings. Otherwise, if you need to mantain proportions, you can use vh units. The vh units are like a percentage that refers not to the height of the parent but the height of the window, so it is great to mantain proportions on a page when you want to avoid scrolling and yet keep percentage.
Related
I have a Functional Vertical Menu. On hover state it has a vertical line that changes from same Background color to a specific color, but what I want is to create a line that follows to the selected menu área.
Attached my Actual Code and the GIF example of what I'm trying to Achieve, someone can help me?
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
CSS
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;
}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul li a:hover{
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}
You could use after pseudoelement in your ul hidden and the with a simnple transition and jquery you can make it move playing with the top property.
like this:
$('.upli').hover(function () {
$(this).parent('ul').toggleClass('up');
});
$('.downli').hover(function () {
$(this).parent('ul').toggleClass('down');
});
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul:after {
content:'';
width:5px;
height:28px;
display:block;
position:absolute;
opacity:0;
top:14px;
left:0;
background-color:#0099FF;
transition: top 0.5s ease;
}
#nav .up:after {
top:0px;
opacity:1;
}
#nav .down:after {
top:28px;
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul class="">
<li class="upli">Example 1</li>
<li class="downli">Example 2</li>
</ul>
</div>
How about this really nice and clean solution (also extendable to an infinite amount of <li> items ;)
$('li').hover(function() {
$(".verticalLine").css("top", $(this).position().top);
}, function() {
$(".verticalLine").css("top", "0px");
});
body {
margin: 0;
}
.nav {
position: relative;
}
.verticalLine {
background: coral;
height: 60px;
width: 5px;
position: absolute;
top: 0;
transition: top ease .5s;
left: 0;
}
ul {
margin: 0;
}
ul li {
list-style: none;
height: 60px;
line-height: 60px;
vertical-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<div class="verticalLine"></div>
<ul>
<li>Something</li>
<li>Something else</li>
<li>Something more</li>
<li>Aaaand more</li>
</ul>
</div>
EDIT:
This change the hover part to this piece of code if you want to use the click() element:
$(".nav2Li").click(function() {
$(".verticalLine").css("top", $(this).position().top);
})
I almost got this drop down menu knocked out. I'm having a problem centering it vertically. I tried to add padding and margin but one puts a weird line through my drop down areas and one puts extra spacing between my drop downs.
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li>Home</li>
<li>
About Us
<ul class="sub1">
<li>Introduction</li>
<li>Who We Are</li>
<li>Staff</li>
</ul>
</li>
<li>
Services
<ul class="sub1">
<li>Sunday Morning</li>
<li>Sunday Evening</li>
<li>Wednesday Evening</li>
</ul>
</li>
<li>Resources</li>
<li>Contact Us</li>
<li>News and Events</li>
</ul>
</div>
CSS
#navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;
position: relative;
text-align:center;
}
/* rules for nav menu */
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type:none;
}
ul#navmenu li {
width:125px;
text-align:center;
position:relative;
margin-right:4px;
margin-top:10px;
display: inline-block;
}
ul#navmenu a {
text-decoration:none;
display:block;
width:125px;
height 25px;
line-height:25px;
background-color:#FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li {
border: 1px solid green;
}
ul#navmenu .sub1 a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color:#CFC;
}
ul#navmenu li:hover a:hover {
background-color:#FF0;
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1 {
display:block;
}
/* end rules for nav menu */
Site at http://www.joekellywebdesign.com/churchsample1/index.html
Css at http://www.joekellywebdesign.com/churchsample1/css/styles.css
You can add margin-top:10px; to the li.
Updated CSS
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu > li {
margin-top: 10px;
}
You can also combine both margins.. margin: 10px 4px 0px 0px;
Additionally, adding inline-block and removing float:left will give you this result:
Code is really, really broke on top but this should help you out a bit.
Centering things vertically is a weird task to handle in CSS and I can't really explain why you need to do this but its how I've always done it.
#myDiv {
top:50;
margin-top:-150px;
}
Here's the link to the page:
http://themes.brixwork.com/altamont/
The positioning of the tags under the ul#menu appears to be skewed on IE7. I have put borders on the UL (#f00) and LI (#0f0) items to clarify.
IN Firefox, the LI items nest properly to the top of the UL, however on IE the LI nests to the top of the div#menubar rather than the ul#menu under it.
The DOM tree is like this:
<div id="menubar" class="grid_16 alpha omega">
<ul id="menu">
<li style="margin-left:0px;">home</li>
<li>about me</li>
<li>featured listings
<ul class="submenu">
<li>
on a map
</li>
</ul>
</li>
<li>
MLS® search
</li>
<li>
resources
<ul class="submenu">
<li>
for buyers
</li>
<li>
for sellers
</li>
<li>
pre-sale / assignment
</li>
<li>
useful links
</li>
</ul>
</li>
<li>
blog
</li>
<li>
contact me
</li>
</ul>
</div>
Pretty standard div>ul>li menu structure, with optional submenus under each as a ul.submenu>li structure.
I tried putting a "float:left;" to the #menu li node, and that did solve the positioning; however then I don't have a nice centre aligned menu - everything goes to the left on the menu.
Here's the current css revolving around this (note that I'm using 960 grid, and also the reset.css and text.css file that comes with it).
#menubar {
height:40px;
text-align: center;
}
#menu {
margin:10px auto;
padding:0px;
z-index: 20;
width: auto;
display: block;
list-style:none;
white-space: nowrap;
position: relative;
border: 1px solid #f00;
}
#menu li {
display:inline;
margin-left:40px;
margin-right:0px;
margin-top:10px;
margin-bottom:0px;
padding:0px 0px 0px 0px;
list-style:none;
z-index: 25;
position: relative !important;
border: 1px solid #0f0;
}
#menu li a:link, #menu li a:visited {
color:#fff;
text-decoration:none;
font-size:12px;
padding: 10px 0px;
text-transform: uppercase;
}
#menu li a:hover {
color:#ddd;
}
#menu li a:active {
position:relative;
top:1px;
color:#fff;
}
.submenu {
position:absolute;
left: -9999px;
display: block;
background-color:#906117;
padding:0px 0px 0px 0px;
top:0px;
z-index:30;
}
#menu li:hover .submenu {
left: 0px;
}
.submenu li {
text-align: left !important;
margin:0px !important;
padding: 3px 0px 5px 0px !important;
clear: both;
float: left;
position:relative;
overflow: hidden;
z-index: 35;
width: 100% !important;
}
.submenu li:hover {
background-color: #f79c10;
}
.submenu li a:link, .submenu li a:visited {
color:#fff !important;
font-size:12px !important;
padding: 0px !important;
margin: 0px !important;
white-space:nowrap;
display: block;
width: 100%;
padding:3px 10px 5px 10px !important;
z-index: 40;
}
.submenu li a:hover, .submenu li a:active {
color:#fff !important;
}
IE7 ignores margins when ul elements have a relative position. You can fix this by removing the margin in your ul#menu styles and add that value back in the parent div#menubar.
This will give you the same layout result, but will resolve the IE7 margin/relative bug.
So i have an issue with a CSS dropdown menu being displayed wrong in IE. In other browsers it works like it should.
<body>
<div id="container">
<header>
<div id="hlogo">
title
</div>
<nav id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</nav>
</header>
<section id="container-body">
<div id="content">
</div>
</section>
</div>
So this is my complete HTML. It has a layout provided by the following css.
/* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}
footer {
display:block;
position:relative;
width:100%;
}
footer > #disclamer {
margin-left: auto;
margin-right: auto;
width: 200px;
padding-bottom:5px;
font-size:small;
font-weight: bold;
}
#container{
background-color:#ffffff;
margin:auto;
min-width:756px;
width:60%;
overflow:hidden;
border:solid 2px #666666;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.6);
}
#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}
#hmenu{margin-top:45px;padding:10px;}
nav {
list-style:none;
display:inline;
float:right;
}
nav ul{
list-style: none;
text-align:center;
background-color:#666666;
float:left;
}
nav ul li {
width:128px;
float:left;
display:inline-block;
}
nav ul li:hover{
background-color:#cc3333;
cursor:pointer;
}
nav ul li a {
color:#ffffff;
padding:10px;
}
nav ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer
}
section {margin:10px;}
#container > header {display:block;}
#container-body {
background-color:#ececec;
height:600px;
display:block;
overflow:auto;
}
#container-body > #content {
margin: 10px;
height:95%;
position:relative;
}
.hiddenMenu
{
position:absolute;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
width: inherit;
}
.hiddenMenu > a
{
position:relative;
text-align: left;
clear:both;
font-size:0.75em;
}
nav li .hiddenMenu > a
{
display:none;
}
/*nav li:hover .hiddenMenu > a
{
display:block;
}*/
nav li .hiddenMenu > a:hover
{
background-color:#cc3333;
cursor:pointer;
border: 1px black solid;
}
This is the full CSS.
This is the CSS i use. Now in firefox it works as it should. The menu is show when i hover the menu2 item. On IE it shows the first submenu item (submenu1) and then it is cleared so i can't even click it.
I can't see what i'm doing wrong so if you can help me i would appreciate it. Thanks!
edit: added code.
The header tag has an overflow:hidden attribute; if i set that to visible it will show the complete menu but will mess up my layout completely. Is there a way around it or am i doing something wrong?
Also, i have a jquery script to set the display on the menu to none/block accordingly but in IE if i hover on the submenu items the menu will still be hidden. Why does this happen?
In my experience IE gets a bit buggy when you don't set the positions of an absolute positioned object. Like top: 0 and left: 0 for instance.
Edit:
Also, parent of the absolute positioned object should have position: relative; if the position should be using the parent dimensions as a starting point.
Edit2:
li:hover doesn't work in IE6 I think. Can't remember about IE7. One of them will only accept a:hover, and browsers below maybe none of them. jQuery solves things like that though.
Edit3:
I don't know what the nav stuff is, I haven't jumped to HTML5 so I don't know if it's relevant later. But anyway I've made something that works of your code.
Script (jquery):
$(document).ready(function () {
$('#hmenu ul li').hover(function () {
$(this).children('div').css('display', 'block');
},
function () {
$(this).children('div').css('display', 'none');
});
});
CSS:
#hmenu {
list-style: none;
display: inline;
float: right;
}
#hmenu ul {
list-style: none;
text-align: center;
background-color: #666666;
float: left;
}
#hmenu ul li {
width: 128px;
float: left;
position: relative;
display: inline-block;
}
#hmenu ul li:hover {
background-color: #cc3333;
cursor: pointer;
}
#hmenu ul li a {
color: #ffffff;
padding: 10px;
}
#hmenu ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer
}
.hiddenMenu {
display: none;
position: absolute;
top: 60;
left: 0;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
width: inherit;
}
(sorry for the formatting, bit new to this, but you can apply source formatting in your editor I guess. I changed the navs to have the id and changed the HTML nav to be div. That's it.
HTML:
<div id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</div>
You cannot have a tag named nav change it to div and try again.
tab not showing in IE 6, working fine in others
http://jsbin.com/ehege/2
how to solve?
<style type="text/css">
*
{
margin:0;
padding:0;
}
li
{
list-style:none;
}
a
{
text-decoration:none;
font-size:14px;
}
#tabcontainer
{
height:62px;
position:relative;
margin: 2em;
font-size: 12px;
}
#tabitemscontainer1 > li > a
{
-moz-border-radius: 7px 7px 0 0;
background: #F3F8C6;
float: left;
margin-right: 2px;
padding: 5px 10px;
border: 1px solid #EABF4A;
/* Added this */
position: relative;
top: 0;
/* end */
}
#tabcontainer ul li li.selected a,#tabitemscontainer1 > li.selected > a
{
color:#AE4329;
font-weight:700;
}
#tabitemscontainer1 > li.selected
{
border-bottom: 1px solid #F3F8C6;
}
#tabitemscontainer1 > li.selected > a
{
/* Added this */
position: relative;
top: 0px;
z-index: 1;
border-bottom: 0px;
/* end */
}
ul.level2
{
background: #F3F8C6;
border:1px solid #EABF4A;
left:0;
position:absolute;
top:28px;
width:463px;
padding:6px;
z-index: 0;
}
#tabcontainer ul li {float:left}
#tabcontainer ul li li
{
float:left;
padding:0 15px 0 4px;
}
</style>
</head>
<body>
<div class="tabcontainer" id="tabcontainer">
<ul id="tabitemscontainer1">
<li class="selected" >
item 1
<ul class="level2">
<li>sub item 1</li>
<li>subitem 2</li>
</ul>
</li>
<li>item2</li>
</ul>
</div>
First of all, IE6 doesn't support the > selector at all.
Secondly, there is no reason to make the a inside the li float to the left. To be able to put padding and margin on the a make it display: inline-block.
Try changing that and remove other unnecessary rules (such as position, which should not be needed on a either) and see if that helps.