A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
Related
I know this looks very simple, but I have been trying to figure out a solution for an hour now. I have an "a" element with text and an image inside. The problem is that the image goes below the text, and I want them lined up.
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<!-- Header right part -->
<div class="dropdown">
<a>
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
I didn't have the issue myself but you can do
#nav-user-logo {
max-height: 1em;
display: inline;
}
to guarantee it is inline with the text.
By defect, any browser, with your css will display the image side by side as, I think, you want:
example with your code:
a {
text-decoration: none;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<div class="dropdown">
<a>
User123
<img src="https://www.ajvs.com/redirect/5/Agilent_IMG300_UHV_R0343301_1,8926cf9ec9ce009a52f3ea8866b07f5f" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content">
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
Probably, you have some kind of "reset" css sheet that is turning all your images as display:block It's quite common in many wordpress themes. You may need to overwrite these css adding img {display:inline-block} or similar rule. Calling to the id image or class to not break your whole theme.
Turns out the issue was something super simple. This code is in a header, on the right side, and the "a" element was too small to display the code and image side by side. I fixed it with the following:
<!-- Header right part -->
<div class="dropdown">
<a style="display:inline-block; width: 150px;">
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
Picture
if you click on this link you will see at left corner of the navigation bar i want to create an folat image like it
so i started to get some codes to preform it
so i found this
<html>
<head></head>
<body>
<div class="menu">
<li>
<img style="float: left;margin-left: -50%;" src="../images/logo.png" alt="Tera Host inc." height="60" width="200">
</li>
</div>
</body>
</html>
but its appearing at the top of the page i want something on the top left corner so an friend told me to do something
You have to make 2 divs following each other
And on each one you do style="float:left;"
And when yuu re done with the floating left
Make a big div that contain those divs
and on the ending do
so if anyone could help me pls reply the whole code
Thanks in advance
I am not very clear with your question! But i just gave a try in an assumption and I think you need to make the menu & logo float separately.
You can check this fiddle,
https://jsfiddle.net/8brvykvn/1/
<div class="header">
<a href="#" class="logo">
<img src="../images/logo.png" alt="Tera Host inc." height="60" width="200"></a>
<ul class="menu">
<li>Dashboard</li>
<li>Game Monitor</li>
<li>TS3 Admin</li>
</ul>
css:
.header a{
float: left;
margin-right:10px;
}
.header .menu{
float : left;
margin : 0;
padding: 0;
}
.header:after{
content:'';
display:block;
clear: both
}
.header .menu li{
list-style:none;
display:inline-block;
}
.header .menu li > a{
margin-right:10px;
}
I am designing a website and I want the footer to have two small images on the bottom left side followed by #* (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.
At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.
I am using HTML and CSS on macromedia dreamweaver.
The current code is:
<div class="footer content">
<ul>
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li>#TWITTERADRESS</li>
<li>POSTAL ADDRESS </li>
<li>TEL NUMBER</li>
</ul>
</div> <!--end of footer-->
CSS
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
First of all edit the CSS as
.footer ul li {
display: inline; // in a straight line
}
Edit the HTML part as:
<div class="footer">
<ul>
<li class="image"><img src="Images/facebook.png" />
<img src="Images/twitter.png" /></li>
<li class="twitter">#TWITTERADRESS</li>
<li class="address">POSTAL ADDRESS </li>
<li class="number">TEL NUMBER</li>
</ul>
</div>
Edit the CSS part now as:
.image {
float: left; // float to the left
}
.number {
float: right; // float to the right
}
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/
maybe something like this:
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
.footer li{
float: left;
width: 25%;
}
From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):
<div id="wrapperdiv">
<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>
At this point we can write the CSS3 code (maybe at styles.css):
...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}
Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:
footer{
background:url(.../footer_bg.png) repeat_x;
width:...;
height:...;
margin:...;
}
#footerLogo_left {
float:left;
margin:...}
#footerMiddle_text {
float:left;
margin: (the same than left)}
#footerLogo_right {
float:right;
margin: (the same than left)}
Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).
I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.
I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.
Here is the page I am working with if you'd like to take a look:
http://www.bolistylus.com/shop/
This is what I'm trying to override:
.products li {
float: left;
margin: 0 10px 20px 0;
padding: 0;
position: relative;
width: 150px;
}
Here is the HTML I'm working with:
<div id="main">
<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> › Shop</div>
<h1 class="page-title">All Products</h1>
<ul class="products">
<li class="product first">
<a href="http://www.bolistylus.com/shop/boli-2/">
<img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />
<strong>Boli Pink</strong>
<span class="price">$24.00</span>
</a>
Add to cart
</li> <li class="product ">
</li></ul><div class="clear"></div>
</div></section>
</div><!-- #main -->
.products li has a specificity of (0, 0, 1, 1)
a minimal higher specificity can be created with
ul.products li which has a specificity of (0, 0, 1, 2)
See this jsfiddle: http://jsfiddle.net/DAL9A/
.products li and you can use !important if it doesnt take. Try to load that after what your trying to override.
UPDATE*
Try just using ".product"
Actually just ready your comments. What are you trying to target? The image? If So you should get the width and height out of inline and apply it in CSS