I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
Related
I have a ul with several list items inside made up of h3s and lis with the class id of "close".
I have a hover style that expands the letter spacing on the h3s, the problem is, the items with the close class expand as well. I've tried a few different things before adding the class, like nth child etc (all which are visible in the code). I would like the close classed lis to remain the same size when the h3s are expanded.
Any help is appreciated.
jsfiddle here:
https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0
CSS:
a {text-decoration:none;
}
li {list-style:none;
}
}
#openClose {
position:absolute;
top:200px;
margin-top:55px;
}
#openClose li{
list-style-type:none;
display:block;
padding-right:-50px;
}
#openClose li:nth-child(2n+2){
margin:30px 0 100px 0;
background-color:#000;
border:2px #fff solid;
text-align:center;
letter-spacing:1rem;
padding:10px 0 10px 0;
}
#openClose li:nth-child(2n+2):hover{
letter-spacing:-0.1rem;
transition:.3s;
}
#openClose li a h3{
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif;
color:#73a6c2;
}
.close{
}
#openClose li a h3:hover{color:#fff;
text-shadow:2px 1px 2px #000;
transition:.2s;
letter-spacing:1rem;
}
a:visited { text-decoration: none; color:#B8CEDB; }
a:hover { text-decoration: none; color:#D7D8D8; }
a:focus { text-decoration: none; color:#fff;
}
HTML:
<section id="openClose">
<ul>
<li><h3>Tool Descriptions</h3></li>
<li class="close">Close</li>
<li><h3>Key tools</h3></li>
<li class="close">Close</li>
<li><a href="#wrapper3"><h3>Adjustment Layers & <br>
Blending modes</h3></a></li>
<li class="close">Close</li>
</ul></section>
The thing is that you don't have any element with a defined width, so every elements have the width of the largest element.
To do what you're trying to achive, you have plenty of solutions depending on your needs.
You could define a fix width on one of the parents, like the ul for example and add the white-space: nowrap property to the h3 (see the fiddle) :
ul {
width: 200px;
}
#openClose li a h3{
white-space: nowrap;
}
You could also set a fix width on your li with the close button (see the fiddle) :
#openClose li:nth-child(2n+2){
width: 200px;
}
Here is my try. Like you see i changed a little your code joining some things and clean a little, but the point is in the width property of .close
https://jsfiddle.net/7eLmarnp/12/
doing this for the first time so please be gentle. :) I am aiming for navigation menu in the centre, horizontal, with image in the middle list item. Image will be much bigger as the bottom half is name of the my company and top of the picture might be touching the top. My first problem is that the li elements are only as big as the text, whitch doesnt serve the center-thing purpouse and the second one related that it stretches the whole menu when hoovered on. Please I'm looking for solution where the text is in the middle of li and img sits down on bottom. Thanks so much for help!
<div id="menu">
<ul>
<li><span>Link 1</span></li>
<li><span>Link 2</span></li>
<span><li style="text-algin:bottom;"><img src="Linbach_tuzka.png" height="175px" alt="Domu"></li></span>
<li><span>Link 4</span></li>
<li><span>Link 5</span></li>
</ul>
</div>
body {
width: auto;
background-image: url(blue4.jpg);
background-size: cover;
margin: 2px 0 0 0;
}
#menu {
height:210px;
line-height:36px;
margin:0 auto;
text-align:center;
width:800px;
padding:0;
}
#menu ul {
display: inline;
-webkit-padding-start: 0px;
-webkit-margin-before: 2x;
-webkit-margin-after: 0px;
margin:0;
font-size: 0;
}
#menu ul li {
text-algin:center;
display:inline;
font-family:Arial,sans-serif;
font-size:40px;
padding:0;
margin:0;
text-decoration:none;
background-image:url(../Pics/Buttons/Menu/Menu.gif);
min-width:100px !important;
}
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
}
#menu a:hover {
font-weight:bolder;
}
span {
width:100%;
font-size:30px;
}
the only option is left is width to <a> tag : DEMO
I have removed the direct <span> from UL and have added class 'widthAuto' so that it will not affect your logo.
#menu a {
text-decoration:none;
color:#000000;
margin:10px 0;
padding:0;
min-width:100px !important; display:inline-block;
}
Note : Menu will stretch on hover if text exceed min-width.
I don`t understand why I have margin from the left:
CSS:
html, body {
font-family:Myriad Pro, sans-serif;
font-size:18px;
color:#000;
margin:0px;
padding:0px;
background: url('./images/background.png');
}
#container {
width:890px;
height:530px;
margin:36px auto;
}
#userList {
width:228px;
height:355px;
float:right;
border:1px solid #cccccc;
}
.users li {
list-style-type:none;
background-color: #f2f2f2;
width:100%;
height:50px;
border-bottom: 1px solid #cccccc;
}
HTML:
<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div>
When I put margin-left:-40px; in the CSS code the li item will be on the left now, but then have I a margin on the right. Why?
JSfiddle: http://jsfiddle.net/8Cwcy/
The <ul> tag has an automatic padding of 40px so you will need to change that to 0px:
ul {
padding: 0px;
}
This should work across all browsers.
Fiddle: http://jsfiddle.net/8Cwcy/3/
By default a lot of HTML elements have their own CSS rules in many browsers, and <ul> tag has a padding by default. You need to set padding:0px to de <ul> tag:
ul{
padding:0px;
}
http://jsfiddle.net/8Cwcy/1/
If you want to know more about CSS reset rules follow this link.
I have some CSS and HTML for horizontal tabs that works perfectly in jsfiddle. However, in both Firefox 13 and IE6 (the browser I most need this to work in) the tabs are displayed as a vertical unordered list.
Here is the CSS:
.tablist
{
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
.tablist li
{
display:inline-block;
float: left;
}
.tablist li a
{
float: left;
margin-right:0.13em;
padding:0 1em;
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color:#ccc;
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
.tablist li a:hover
{
background:#3cf;
color:#fff;
text-decoration:none;
}
.tablist li#current a
{
background-color: #777;
color: #fff;
}
.tablist li#current a:hover
{
background: #39C;
}
And here is the HTML:
<div class="tablist">
<ul>
<li><strong>Tutorialsphere</strong></li>
<li><strong>Photoshop</strong></li>
<li><strong>Illustrator</strong></li>
<li><strong>Fireworks</strong></li>
<li><strong>Flash</strong></li>
<li><strong>CSS</strong></li>
<li><strong>PHP</strong></li>
</ul>
</div>
For a while this was working in Firefox and I don't remember changing anything -- but I must have.
Any advice is appreciated.
Regards.
IE6 doesn't support inline-block. As such, it's just ignoring your display property and leaving it at its default.
I don't have IE6 handy, but try display: block; float:left to this selector: .tablist li a
I have the following menu. Seems to work in all browser but not IE6 or IE7. What is causing the problem and How can i fix that.
Check working example at http://jsfiddle.net/2ysCC/
#menu_wrap {
margin-top:20px auto 0 auto;
padding:0;
width:780px;
height:40px;
list-style-type:none;
}
.button a {
cursor:pointer;
text-align:center;
font:13px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
position:relative;
min-width:50px;
height:20px;
float:left;
padding:10px;
padding-right:0;
text-decoration:none;
}
.Red, .Red .button a {
color:#faddde;
background: #ed1c24;
}
.button:last-child a {
float:left;
border:none;
}
<ul id="menu_wrap" class="Red">
<li class="button">Home</li>
<li class="button">portfolio</li>
<li class="button">Latest</li>
</ul>
This is how it looks in IE7
Add 'display: inline;' to your 'li'.
#menu_wrap .button {
display: inline;
}
Here is an article describing the bug in further detail: http://css-tricks.com/501-prevent-menu-stepdown/
Float the li tags instead of the a tags:
.button {
float: left;
}
JSFiddle
Try to remove position: relative and make it float: left
Use this CSS, float left element <LI>
li.button{
float: left;
}