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.
Related
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;
}
What the Header Should Look Like
This is how the header should look like.
What it currently looks like
As you can see, my header isn't looking too good... I seem to be having some floating issues.
Current Header Code
Here is the HMTL I used to generate my header.
I'm trying to center the h1, float the logo to the left completely and have the h2 display beside the logo. The publish date and publisher are fine.
<header>
<ul style="list-style-type:none;float:right;">
<li style="float:left;">
<img src="C:\Logo.jpg" alt="Logo"/>
</li>
<li style="float:left;">
<h2>Statuts de Production</h2>
</li>
<li style="float:right;">
<h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
</li>
<ul style="list-style-type:none;float:right;">
<li>
Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
</li>
<li>
Par: <xsl:value-of select="Table/Publish/Username"/>
</li>
</ul>
</ul>
</header>
Am I not using the right approach? Should I use a table instead of an unordered list?
If you want to vertical align the list items and indent the middle one, just remove the styles from the HTML and use this external CSS (using external CSS is the first thing to improve your approach):
ul { display: block; list-style-type:none; height: 50px; }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }
and set the padding to each list item as you want, the third item might be floated right.
Second: you can not use image path on your HDD C:\Logo.jpg to enable the access from clients, use the http://... protocol.
Third: you can not use ul as direct child of ul. Only lis are allowed inside ul
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
Dose the following help you? it is designed such that the hight is constant.
<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
<div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
left pannel
</div>
<div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
right pannel.
</div>
<div style='box-sizing:border-box;width:100%;text-align:center;'>
Center
</div>
</div>
You can see it also here.
For my webpages I have a container DIV, within that a menu DIV and a content DIV. I am arranging several 'settings' DIVs within the content DIV and I wan them to float left within the content DIV but lower ones end up under the menu DIV.
Check this jsfiddle to see clearly: http://jsfiddle.net/4KUTy/5/
The settings divs have the properties of float:right; but that leaves the last one in the wrong position and if I float:left;, then it goes under the menu.
Please help.
jsfiddle html code here:
<html>
<head/>
<body>
<div id="container">
<div class="menu">
<ul>
<li>menu option 1</li>
<li>menu option 2</li>
<li>menu option 3</li>
<li>menu option A</li>
<li>menu option B</li>
<li>menu option C</li>
</ul>
</div>
<div id="content">
<div class="settings_div">Project Settings<br/>
<ul style="display:inline-block">
<li>language</li>
<li>currency</li>
<li>mark up</li>
</ul>
</div>
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
</div>
</body>
</html>
jsfiddle css here:
.settings_div {
text-align:left;
display:inline;
width:300px;
height:80px;
padding:20px;
padding-top:10px;
margin:20px;
margin-top:0px;
margin-bottom:20px;
border-color:#33CCCC;
border-style:solid;
border-width:thick;
float:right;
}
#content {
width:600;
min-height:620px;
vertical-align:top;
display: inline;
}
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:auto;
}
#container {
margin-bottom:10px;
background-color:#eee;
width:950px;
min-height:620px;
border-radius:0px;
position:relative;
margin-top:-10;
margin-right:auto;
margin-left:auto;
overflow: visible;
}
The container of the floated divs should have:
overflow: hidden; /* Makes the container actually "contain" the floated divs */
display: block;
The floated divs should be
float:left
fiddle: http://jsfiddle.net/4KUTy/5/
I found a nice post that attempts to explain why overflow:hidden works the way it does: http://colinaarts.com/articles/the-magic-of-overflow-hidden/
In case the link dies: Setting overflow to anything other than visible will cause it to establish a new block formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting).
Two things are wrong here:
The wrapper div.content is set to display: inline.
The wrapper div.content does not scale correctly since all child elements are out of the flow.
In order to make the setting divs behave correctly use:
.content { display: block; overflow: hidden; }
and then float left all setting div's.
See updated fiddle:
http://jsfiddle.net/4KUTy/7/
Just add a placeholder div before the last div
<div class="settins_div placeholder">placeholder</div>
and add css-rule
.placeholder{
visibility: hidden;
}
have a jsfiddle to check: here
There are only small changes to your css rules:
You should add a fixed width to your menu.
.menu {
padding:5px;
background-color:#33CCCC;
float:left;
text-align:left;
width:150px;
}
And your container needs to be "moved" by that value + margin to the right. So add a margin-left to it:
#content {
width:600;
min-height:620px;
vertical-align:top;
margin-left: 160px;
}
Set your #container to overflow: hidden.
And now every settings div should be floated left.
An updated version of your jsfiddle:
http://jsfiddle.net/4KUTy/8/
Make all settings_div float:left;, but use another container that floats right and is wide enough:
<div id="setting-container" style="float:right;width:800px;">
<div class="settings_div">Your Company Settings<br/>
<ul style="display:inline-block">
<li>company details</li>
<li>bank details</li>
<li>contact details</li>
</ul>
</div>
<div class="settings_div">Output Settings <br/>
<ul style="display:inline-block">
<li>company logo</li>
<li>date format</li>
<li>fonts etc</li>
</ul>
</div>
<div class="settings_div">Graphical Settings<br/>
<ul style="display:inline-block">
<li>colors</li>
<li>text size</li>
<li>more</li>
</ul>
</div>
<div class="settings_div">I WANT THIS ONE ON THE LEFT!<br/>
<ul style="display:inline-block">
<li>But NOT under the menu</li>
<li>float:left puts it under the menu</li>
<li>should be under graphical settings</li>
</ul>
</div>
</div>
jsfiddle
Here is my result http://jsfiddle.net/burn123/4KUTy/10/
Major Changes
I changed a lot of the float properties to display:inline-block. The reason for this is so that all of the elements position themselves correctly.
I took off the width for container, so now it should be slightly more responsive
I removed the settings_div class and changed the CSS to #content div to save code
Added display:inline-block to the ul in the CSS and took it off of the inline styles
A rather large problem was you had a property of the content set as width:600, when it needed to be width:600px;. I ended up removing this style.
Because you had the #container set to a positioning of relative, then I changed margin-top:-10; to top:-10px;
Small Changes
Condensed a lot of properties such as margin and border
Removed the width, overflow, and min-height from container because they served no purpose
Update - http://jsfiddle.net/burn123/4KUTy/12/
Added border-box to every element so that it will display the exact width that you specify
Added a fluid width to container so that it will display inline with the menu when needed, but then will drop down when it is too full
I have 6 links, all different character lengths on two lines. I need everything to align evenly. Like this:
Home About Us Location
Contact Visit Schedule
I imagine the way to do this is to make the li a specific width and then apply an appropriate margin to the right side, but for some reason I can't apply a width. If I have the following html skeleton, how would I edit the CSS to accomplish this? I've looked around the web for a solution, but I've haven't found any similar questions because my menu sits on two separate lines.
<div class="footer">
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<br>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
Fix the width of <ul> and <li>. And remove the <br /> it makes the markup invalid.
HTML
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
CSS
#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }
Demo
Demo(with white-space fix)
Give the li elements a display property of inline-block and a width. Here's a jsfiddle to demonstrate:
li { display: inline-block; width: 100px; }
Check this:
<pre>
test
test
test
</pre>
Source: How do I create tab indenting in html
First, a <br/> is not a valid child element of <ul/>.
To apply a width to an <li/>, you will need to make it a block-level element.
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
and
#footerlinks {
background:#ccc;
overflow:hidden;
padding:5px;
width:300px;
}
#footerlinks li {
float:left;
padding:5px 0;
width:33%;
}
Here is a working example - http://jsfiddle.net/jaredhoyt/xbvyP/