I am just starting out in web coding and am gettng an issue with positioning of menu bar items when I trying to recreate the BBC website. The menu options should go from right to left but are instead just being shows as a list which is on the same line as the logo and sign in section at the top.
I hope you can assist in telling me where I am doing wrong. Here is my jsbin code dump:
https://jsbin.com/wuteni/edit?html,output
Any assistance or tips will be most appreciated.
#topmenudiv ul {
margin:0;
padding:0;
list-style-type:none;
}
#topmenudiv ul li {
display:inline;
vertical-align:top;
}
And to now have the images also in-line change HTML to:
<div id="topmenudiv">
<ul>
<li><img src="images/signin.png"/></li>
<li><img src="images/bbclogo.png"/></li>
<li> News </li>
<li> Sport </li>
<li> Weather </li>
</ul>
</div>
Related
I want to place "Shop by category" beside the ebay logo using margin-left and margin-top.
margin-left is not working or pushes some elements with it index.html
.navclass >ul >li{
list-style-type:none;
display:inline;
padding:5px 25px;
//float:left;
margin-top:1px;
margin-left:20px;
border:1px solid black;}
in the html i made the image and search in a separate div
and added this down
</div>
<nav class="navclass">
<ul>
<li>Shop by <br> Category
<ul class="sub-menu">
<li>Collectibles&art</li>
<li>Electronics</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
<li>Collectibles&art</li>
</ul>
<span class="arrow">▼</span>
</li>
</ul>
</nav>
Why not to use float:left; in css for logo and nav? You will get what you want and i think that will work better. Because margins can not work with different size screens i think.
I have the following HTML code withe the complete code here
<div id="header">
<a href="index.html" id="logo">
<h1 class="headings">THE 100 DAYS PROJECT</h1>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="contact_container">
<h3>General Informations</h3>
<p>I am not currently looking for new design work, but I am available for speaking gigas and similar engagaments. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, twitter and email are the best way to reach me.</p>
<h3>Contact info</h3>
<ul class="contact_info">
<li>Phone</li>
<li>Email</li>
<li>Blog</li>
</ul>
Although I haven't specified any styling for the list in the contact section, the bullets do not show up and the items are displayed in-line. From what I've seen, the line of code which affects this is:
#header ul, li {
display: inline-block;
}
Why is this happening? I want my un ordered list in the contact section to display with bullets and have the items on different lines. Thx!
Because #header ul, li means #header ul or li, not #header ul or #header li.
Instead, write the selector as #header ul, #header li.
I'm learning HTML/CSS and I want to rewrite the site listed below (currently made with Windows Excel) to something custom written by me. The problem is that working with tables is kind of tough going mobile friendly. I haven't gotten' into Javascript yet (soon) but is there a CSS way to take care of this?
Site I want to change: http://libertyresourcedirectory.com/d/home.html
For this site: http://eglove.github.io/ I use #media screen only max-width 1024px and 728px to give an automatic "tablet" and "mobile" version. Doing it with the LRD site would not break up the tables properly.
Thanks in advance for any answers! :)
You could do something like this: http://jsfiddle.net/sGJW5/1/
HTML
<div class="container">
<ul>
<li>
Computers
</li>
<li>
Editing
</li>
<li>
Internet/Privacy
</li>
</ul>
</div>
<div class="container">
<ul>
<li>
Computers
</li>
<li>
Editing
</li>
<li>
Internet/Privacy
</li>
</ul>
</div>
CSS
.container
{
display:inline-block;
}
.container ul
{
list-style:none;
}
.container ul li:first-child
{
background-color:red;
}
I am try to make drop down menu but i don't know why when ul hover than drop down li not appear correctly i have use z-index and also use position relative.Please check this on top menu.
Css
#menu > ul > li:hover ul {
display:inline;
}
#menu ul li ul{
position:relative;
display:none;
list-style: none;
margin:0px;
width:200px;
z-index:1000;}
Html
<div id="menu">
<div class="home-icn">
<i class="icon-home"></i>
</div>
<ul >
<li><a id="print_menu" href="">Printing</a>
<ul id="drop_menu_f">
<li><a>Business Cards</a></li>
<li><a>Brochure</a></li>
<li><a>Door Hangers</a></li>
<li><a>Envelopes</a></li>
<li><a>Flyers</a></li>
<li><a>Invoice Books</a></li>
<li><a>Magnet Cards</a></li>
<li><a>Note Pads</a></li>
<li><a>Post Cards</a></li>
<li><a>Plastic Cards</a></li>
<li><a>Posters</a></li>
<li><a>Presentation Folders</a></li>
</ul>
</li>
</ul>
</div>
http://jsfiddle.net/hnTyB/1/
<div id="menu">
<ul>
<li>My Menu
<ul>
<li>thing</li>
<li>thing2</li>
</ul>
</li>
</ul>
</div>
I made a js fiddle of what it appears you are trying to do. Copying your css exactly, this seems to work for me. Could it be your html and css don't correctly match?
I checked out your site soniprinting.com (saw the URL in your screenshot) and it looks like you are missing a z-index from your #menu ul.
Add a z-index greater than those of the slideshow, and you should be able to see your dropdown just fine.
Can someone tell me how I can have text in line with five links please in my menu using html and css?
The current code is
<div class="menu content">
<ul id="nav">
<h1>JEWLLERY</h1>
<li>Home
</li>
<li>Jewellery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
<li>Reviews
</li>
</ul>
</div>
<!-- end of menu -->
I want the "JEWELLEY" to be on the left side with the links following, thanks.
The Content is in the menu bar at the top of my website.
I want the menu to appear as
JEWELLERY HOME Jewellery Locations Contact Us Reviews
However at present the links (home, jewellery, locations, contact us, reviews) are displaying below "JEWELLERY"
Thanks.
Try display property
h1, li{
display:inline-block;
}
Fiddle Demo
Another Scenario
In this, you have to pick out <h1>JEWLLERY</h1> from the <ul>
h1{
float:left; // can be replaced by display:inline-block; and vertical-align:top;
}
ul{
display:inline-block;
}
Updated Demo --> http://jsfiddle.net/U2PPu/1/
Note: I'm using both display:inline-block and float:left property just to make you familier with both rules, otherwise display:inline-block is enough.
#nav
{
list-style:none;
}
#nav li
{
float:left;
}