I'm new to programming and I'm trying to build a website with various links in the same line. I'm using div so I got them all on the same block. The problem is that when I put all the links on float:left, the background color dissappears, but when I put the last link with float:center it shows the background as I want it.
Can anyone help me? Thanks in advance
This is what I'm using:
<div id="links" style="width:1250;height:450;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
There is no such thing as float: center only left, right, none, and inherit. But the reason the parent container bg color is not showing is because when you float an element it no longer takes up space in its parent.
Either give your parent container a height (and specify pixels or some other unit of measure which you aren't doing now), or as a hack you can give the parent: "overflow: hidden;" css property.
Good luck in your learnings! Time and passion will get you everwhere!
EDIT: I highly recommend you get the book CSS Mastery by Andy Budd. It will teach you this and a lot more.
You had not given the unit to width, and height. Make it to px or em or as per what you need and it will work.
<div id="links" style="width:1250px;height:450px;background-color:#000000;text-align:center">
<ul type="none">
<li style="float:left;margin-right:100px;text-align:center">
Nosotros
</li>
<li style="float:left;margin-right:100px">
Desafío UNIMET
</li>
<li style="float:left;margin-right:100px">
Patrocinantes
</li>
<li style="float:left;margin-right:100px">
Contacto
</li>
</ul></div>
Try this http://jsfiddle.net/sLEYs/
Secondly, there is no such value center for float. http://www.w3schools.com/css/css_float.asp
Related
I’m messing around with HTML and I wanted to ask if it was possible to make a gallery within a gallery like so...
<ul class=‘gallery’>
<li class=‘image’><img></li>
<li class=‘image-collection’>
<ul class=‘sub-gallery’>
<li class=‘image’><img></li>
<li class=‘image’><img></li>
</ul>
</ul>
Better Use divs intead of UL LI.
Use sub-gallery div within the gallery div
i want to place a image in a very specific place (top right of the NAV bar) and i have done that using postition:relative; (also tried absolute) and moving it accordingly.
when ever i crop the browser it will stay in the white space outside of the div wrapper i have.
so basically my image is not scaling with the div wrapper i have.
can anyone provide some tips? sorry for the noob question.
here is some code.
<div id ="Wrapper">
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a> </li>
<li class='has-sub'><a href='#'><span>Product 2</span></a> </li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<img src="images/register.jpg" width="50px" height="45px" id="register"/>
</div><!-- end of css -->
Wrapper div is at the bottom.
the css for the "register" id is just positioning coordinates
The nav bar is a template i downloaded.
Based on the CSS you provided in your comment, the reason it is doing this is because you are using pixels to set width. If you use a percentage, your image will shift to the screen size. So if you want it at the very right side of your container, try: left: 99%; or change the percentage value to place it where you need it to be.
ok simple try this.
<html>
<head>
<style>
h3 {
word-spacing: 100px;
}
</style>
</head>
<body>
<!-- make sure you put it in the heading tag of nav bar right allign-->
<hr>
<h3>
Example
Example
Example
Example
<!--Put Image below here-->
<img src="IMAGE.jpg">
</h3>
<hr>
I made a menu , I have worked with chrome but now when I try with firefox I get spacing between items
In chrome
In Firefox
Here's The CSS
http://jsfiddle.net/Mazala/mpc1o2gf/
HTML :
<nav>
<ul class="menu">
<li id="accueil">Accueil</li>
<li id="bureau">Bureau</li>
<li id="actualites">Actualités</li>
<li id="partenaires">Partenaires</li>
<li id="contact">Contact</li>
<li id="liens">Liens utiles</li>
<li id="Liens">lien+subtitles
<ul class="sousmenu">
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
</ul>
</li>
</ul>
</nav>
CSS in the link .
Thanks for help.
Using inline block will make any text/spaces between your elements treated as text, and style them accordingly. One quick fix (if pure images) was to set the font-size to 0 (that wouldn't work for you since you have actual text in there).
The easiest solution, if you don't care about having the perfect looking code and just getting it to work, is to remove all extra spaces in your code. Which I did to your code, and it works:
<ul class="menu">
<li id="accueil">Accueil</li><li id="bureau">Bureau</li><li id="actualites">Actualités</li><li id="partenaires">Partenaires</li><li id="contact">Contact</li><li id="liens">Liens utiles</li><li id="Liens">lien+subtitles<ul class="sousmenu"><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li></ul></li>
</ul>
https://jsfiddle.net/mpc1o2gf/1/
That's a common issue with inline-block elements. By default, there some some spacing surrounding those elements. It's somewhat counter-intuitive but default behavior.
There are a few fixes to this. My preferred is to float the li elements. There are some caveats. Read this for a full understanding.
I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail.
Below is my code for a simple drop-down menu.
It works fine in every browser except IE.
html page:
<div id="nav">
<ul id="navul">
<li id="rootHome">
<ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
"height: 40px;" id="home" /></a>
</li>
<li id="rootProducts" onclick="showMenu(this)">Products
<ul id="Products">
<li>
<p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
</li>
<li>
<p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
</li>
</ul>
</li>
<li id="rootNews">
News
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<ul id="Company">
<li>
<p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
</li>
<li>
<p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
Us</p>
</li>
</ul>
</li>
</ul>
CSS: (formatting didn't work on here)
http://pastebin.com/raw.php?i=CjyQhXCs
Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.
The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.
http://jsfiddle.net/uTBZN/30/
Credit to:
How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
Just like #Stu, I had a filter on my nav ul (in my case, .navbar):
.navbar {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /* IE6-9 */
}
Per #Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->