I have a website im creating in notepad , and i cant seem to get the css menu to line up
exactly rite with my javascript slideshow
i can mess with the padding to make the menu longer but it still wont line up corerctly
here is a image of the webpage
http://img27.imageshack.us/img27/2/websitequestion1.jpg
and here is the code ,
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.js"></script>
<style>
#galleria{ width: 1020px; height: 386px;margin:0px auto;}
body
{
background-image:url('bg.jpg');
background-repeat:no-repeat;
}
body {
text-align: center;
}
/* Menu Start Here */
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 40px 15px 40px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image: url('image2.jpg');
/* Align the image position to the left of the a */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
#menu li a:hover {
color: white;
/* Align the image position of the background to the right*/
background-position:right;
}
</style>
</head>
<body>
<div id="wrap">
<h1> </h1>
<ul id="menu">
<li> Home </li>
<li> Products </li>
<li> Services </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
<div id="galleria">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run("#galleria");
</script>
</body>
</html>
Add something like this:
margin: 0 auto;
width: 380px;
To the desire divs that you want to centered. In you case I would add a DIV arround the galeria just to centered it.
It may be that the default user agent stylesheets are causing the unordered list to be shifted as well.
#menu { margin-left: 0; padding-left: 0; }
Might help with that, many browsers add left margin to list elements by default
First, you'll want your #galleria and #wrap divs to have the same width and margin, so add:
#wrap {
margin: 0 auto;
width: 1020px;
}
Next, for your menu items to be the right size, you'll need to ditch display:inline; for your list items (because you can't set a width on inline items. So you'll want something like:
#menu li {
float: left;
width: 20%;
}
#menu li a {
display: block;
}
You could just as easily use display:inline-block; depending on the browsers you need to support. There are several ways to go about it, but this should get you going in the right direction. Also, if you're floating your li, you'll need to add overflow:hidden; or float:left; or use a clear fix method on the ul so that the floats are contained.
Related
I've looking for videos, coding, bootstrap, css.. I've been tried every thing but I still can't find out which attribute should I set for the drop down list so when it drops down, the list item margin will be aligned to the right of parent item. The default set for it is to the right.
I want the drop down list when it drops will look like this:
[1]: https://i.stack.imgur.com/Fu3AY.png][1]
Without adjusting the margin, my drop down lists look like this: All the element is aligned to the left of parent menu. But when I adjust the margin so the list will not be responsive when I change the view size.
[2]: https://i.stack.imgur.com/ks5q5.png[2]
Is there any one meet the same status & do you have any suggestion for me to solve this out?
My list codes:
<div class="menu">
<button>Menu</button>
<ul>
<li>MoonLight Ltd Co.</li>
<li>Introduction</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
Here the codes I set for the ul & li:
.navbar-wrapper .right-side-wrapper ul {
margin:0px;
padding:0px;
position: absolute;
list-style: none;
border-radius:3px;
text-align: end;
opacity: 0.5;
pointer-events: none;
transform: translateY(10px);
transition: all 0.5s ease-in;
background:rgba(255, 0, 0, 0.6);
font-size: calc(8px + 0.5vw);
}
.navbar-wrapper .right-side-wrapper li {
position:relative;
width:calc(100px + 3vw);
padding:1vh;
}
I think you can use some ways.
ul {
text-align: right;
}
or
ul {
text-align-last: right;
}
or
li {
float: right;
}
li {
text-align: right;
}
When I hover mouse over menu items they don't always fit perfectly within the navigation bar, I am also unable to fix that tiny gap between border and last navigation item and the gap changes when I zoom in/out the page, when I zoom in/out on google chrome and hover over menu items the hovered item gets taller than the rest of the bar. I've been trying to figure this out for quite some time now. Thank you for your help in advance.
Main objectives: getting rid of the gap next to "contact", making hovered items fit into the navbar, fixing google chrome navbar zooming issue.
Here's my codepen: http://codepen.io/anon/pen/QbBgKR
<nav class="menu">
<ul class="clearfix">
<li>HOME </li>
<li>PROFILE</li>
<li>STUFF</li>
<li>STUFF</li>
<li id="long"> PRODUCTS<span class="arrow">▼</span>
<ul class="sub-menu">
<li>STUFF1</li>
<li>STUFF2</li>
<li>STUFF3</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav><!-- menu -->
.clearfix:after {
display: block;
clear: both;
}
.clearfix {
margin-left: -37px;
}
nav {
font-size: 1em;
width: 700px;
background-color: #3A5199;
font-family: Verdana;
}
#current {
background-color: #6082ec;
}
.menu li {
display: inline-block;
list-style: none;
position: relative;
width: 15.2%;
text-align: center;
margin-left: -0.4%;
margin-right: -0.4%;
}
.menu li:hover {
background-color: #6082ec;
}
.menu a {
text-decoration: none;
color: white;
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#long {
width: 24%;
}
.menu .arrow {
font-size: 12px;
line-height: 0%;
}
.sub-menu {
width: 128px;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background-color : #6082ec;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li:hover {
background-color: #3A5199;
}
.sub-menu li {
width: 131%;
display: block;
right: 39.2px;
}
.sub-menu a {
position: relative;
text-align: center;
}
Using a reset stylesheet or something like normalize.css will go a long way in fighting various margin, padding and display inconsistencies across browsers and you won't have to do negative margin "hacks" like you did for .clearfix.
Although you have calculated your percentages correctly for your li to add up to 100%, the gap to the right of Contact arises with the pixel rounding of the percentage width you've applied.
15.2% of 700px = 106.4px
The browser will likely round down to 106px. The change in the gap when zooming is also likely related to the percentage widths. At one zoom level the value gets rounded differently.
106px * 5 = 530px + 24% of 700px (168px) = 698px
Since you're using a fixed with on your <nav> element, why not use fixed widths on the li also? Or change up the percentage values a bit. 15.2% for the home link creates more padding between the text Home and the left and right edges of the li than it does for Profile.
Fixed Width Solution
/* default width for all li */
.menu li {
width: 108px;
}
/* Home */
.menu li:nth-child(1) {
width: 100px;
}
/* Products */
.menu li:nth-child(5) {
width: 168px;
}
As far as zooming in Chrome and getting a height change when hovering, I cannot replicate that issue.
Negative margin for UL is working.
.clearfix {
margin-left: -37px;
margin-right:-0.4%;
}
It's strange math her - imho.
I saw a nice video on youtube about making transional gallery (http://www.youtube.com/watch?v=4sVTWY608go). I tried to do the slider right..
Now, I want to make a change. I want to give the first image a different width say(530px) and the other images(40px). Then when a user hover on any other images(not img no.1) the width of image no.1 change to be like(40px) and the hovering one (530px). how can I do that.
Here is my code:
HTML
<div class="divSlider">
<ul>
<li id="slideImg1"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
=========
CSS
===SET THE WIDTH OF THE IMAGES IN a
.divSlider li a{
width: 30px;
height: 500px;
text-decoration: none;
color: black;
display: block;
border: 2px solid gray;
border-radius: 5px;
}
=== image no.1 width
#slideImg1 a{
width: 540px;
}
=== when hovering on all the images except image no.1
.divSlider li a:hover{
width: 520px;
}
=== here is the problem I don't know how can I change it's width when user hover on other images
#slideImg1 li a:hover{
width: 20px;
}
Any help
TIA
If I understand your question correctly, here is one possible solution:
Demo Fiddle
The trick here is to set the CSS :hover to key off of the wrapping element, and then overwrite it with more specificity.
CSS:
/* initial setup */
li{ display: inline-block;}
a {
display: block;
width: 40px;
height: 150px;
background: url(http://www.placehold.it/150x150) no-repeat;
-webkit-transition: .3s;
transition: .3s;
}
#slideImg1 a { width: 150px;}
/* hover states */
.divSlider:hover #slideImg1 a {width: 50px;}
.divSlider ul #slideImg1 a:hover {width: 150px;}
a:hover { width: 150px;}
I think this would be done with javascript in a very easy way, so there's no point in trying to accomplish it with only css.
You would only need to add onMouseOver attributes and then do whatever you want with the javascript code.
I can post the code if you ask for it.
Now, I'm a real beginner, just starting, figuring out things, testing and trying html and css. I want to make something more or less like this (see picture). I want it to fully scale to fit the browser/resolution preserving aspect ratio.
my layout
My html and css code is below. The background image scales fine but now I want my navigation to scale the same way. How to do it? What to change? I also want to have a dotted line under the solid one (above the navigation). Any advice? :) Just starting/learning/making mistakes :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Layout</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="navigation">
<ul>
<li> HOME </li>
<li> O MNIE </li>
<li> PORTFOLIO </li>
<li> OFERTA </li>
<li> STREFA ŚLUBNA </li>
<li> PUBLIKACJE </li>
<li> WSPOŁPRACA </li>
<li> BACKSTAGE </li>
<li> KONTAKT </li>
</ul>
</div>
</body>
</html>
And css:
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#navigation
{
width: 100%;
height: 60px;
background-color: black;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 0;
position: absolute;
bottom: 0px;
border-top-style: solid;
border-color: white;
border-width: thin;
}
#navigation ul
{
list-style-type: none;
float: right;
margin-left: auto;
margin-right: auto;
}
#navigation ul li
{
float: left;
list-style: none;
margin-left: 18px;
margin-right: 18px;
}
#navigation li a
{
color: #FFF;
text-decoration:none;
font-family: "Calibri";
text-transform:uppercase;
}
#navigation li a:hover
{
text-decoration:none;
color: #F69;
}
#navigation li a:active
{
color: #F69;
}
You need to set any widths, heights, margins and paddings of the navigation elements to a percentage value. Maybe also set a percentage value to font-size. Just play around with numbers to see how thats affects your layout. In short, don't use fixed pixel values for the layout. You may use them to style individual buttons or similar elements in the layout.
BTW: Browser Support for background-size values contain and cover:
Chrome 3.0
Firefox (Gecko) 3.6 (1.9.2)
Internet Explorer 9.0
Opera 10.0
Safari (WebKit) 4.1 (532)
(as stated at https://developer.mozilla.org/en-US/docs/CSS/background-size)
To your dotted border: you could use a horizontally repeated background image for such a layout or you set a solid border to a wrapper-element and a dotted border to the inner navigation-element.
do you try on
#navigation
{
width: auto;
}
?
Your margin attributes to the nav items need to be % or em. Right now you have them set explicitly to pixels. This is preventing them from "scaling"
if you are using static html or deriving them from a database all you need to do is the following :
(100 / #ofNavs) /2 = left || right margin value.
If you use borders or such, you'll need to add that into your figure math.
My site was working fine across all major browsers right up until the update to Safari 5.1. Now, the primary navigation is busted up. I was using display:table-cell on the anchor element within the list element and was also using the font-size:0 hack to remove the spacing in between menu elements. Has anyone else encountered this issue and have a solution they could offer up?
Before:
After:
CSS:
#navigation {
padding-top: 7px;
}
#navigation ul.links, /* Main menu and secondary menu links */
#navigation .content ul /* Menu block links */ {
margin: 0;
padding: 0;
display: block;
font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear
since they are inline-block elements, this should be unneccessary when
CSS3 is approved */
}
#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
display: inline-block;
padding-right: 0;
padding-left: 0;
margin: 0;
/* below is a fix for IE7 to get the main navigation items lined up correctly
* in one row
*/
zoom: 1;
*display: inline;
}
#main-menu ul {
width: 100%;
}
#main-menu li {
width: 108px;
text-align: center;
padding-bottom: 7px;
font-size: 11pt;
}
#main-menu a {
display: table-cell;
width: inherit;
text-decoration: none;
font-size: 0.9em;
color: #035B9A;
background-color: white;
height: 30px;
vertical-align: middle;
}
HTML:
<div id="navigation">
<div class="section">
<h2 class="element-invisible">Main menu</h2>
<ul id="main-menu" class="links inline clearfix">
<li class="menu-379 first">About Us</li>
<li class="menu-401">Research</li>
<li class="menu-385">Education</li>
<li class="menu-402">Outreach</li>
<li class="menu-403 active-trail active">News & Events</li>
<li class="menu-439">People</li>
<li class="menu-405">Resources</li>
<li class="menu-406">Publications</li>
<li class="menu-415 last">Partners</li>
</ul>
</div>
</div>
Thanks.
Just a note, this is a Drupal 7 site.
Also I freely and humbly admit I am not the very best at CSS markup. I'm learning a lot right now and am just trying to scrape through.
For those having trouble with Safari and dimensions for elements set to display:table; I was able to fix my problems by removing the padding and adding padding to a child element set to display:table-cell;
Apparently Safari does not like it when you try to add padding to an element set to display:table; In retrospect, this makes sense.
Solved by making the list elements display as block and float them to the left.
#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
display: block;
float: left;
padding-right: 0;
padding-left: 0;
margin: 0;
/* below is a fix for IE7 to get the main navigation items lined up correctly
* in one row
*/
zoom: 1;
*display: inline;
}
You want border-collapse:collapse on the display:table element to remove cell spacing.
I took your css and html, and added to the css
body {
background-color: gray;
}
and I got the following, which looks correct.
This was run under lion, which has Safari 5.1