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;
}
Related
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
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).
This question already has answers here:
Unwanted margin in inline-block list items [duplicate]
(10 answers)
Closed 9 years ago.
So I'm a little stumped. I'm trying to make a page to display images. I want there to be 5 images per row spaced with maximum amount when the window is at max width (~950 px), but I want them to get closer as you make it smaller and then, when there's 0 px between them, there will only be 4 images per row, and that will continue until a specific width. Kind of like Instagram, but I don't want the pictures to get smaller. Here's what I have:
HTML
<ul>
<li>
<img src="0.png">
</li>
</ul>
<ul>
<li>
<img src="1.png">
</li>
</ul>
<ul>
<li>
<img src="2.png">
</li>
</ul>
CSS
ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li
{
display: inline;
}
//the images are also float left, so they are horizontal
Basically, as you can see, I have nothing and I don't really know what to do. I'd appreciate any help. Thanks!
Can you do me a favor and try this fix (I know there is an obnoxious invisible-spacing bug related to lis written on newlines in the HTML, not sure if it applies to UL's in order too but it's worth a shot) --
<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>
this may get you closer to where you want to go:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
min-width:450px;
}
ul li {
display: inline;
float:left;
width:20%;
}
</style>
</head>
<body>
<ul>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
<li> <img src="0.png" width="150" height="50"> </li>
<li> <img src="1.png" width="150" height="50"> </li>
<li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>
It is more "proper" markup to put all the images into one list, and opens the door for setting a hard minimum width on the ul but a % on the li... which is what makes the whitespace vary with the window sizing. I am not sure if this gets you all the way there, but hopefully it will help!
Your unordered list should look like this:
<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>
Super unconventional, but it works.
Fiddle here: http://jsfiddle.net/QMs93/
http://jsfiddle.net/AgLMp/1
CSS
ul {
padding: 0;
margin: 0;
list-style-type: none;
max-width: 950px;
min-width: 600px;
}
ul li {
float: left;
width: 33%;
min-width: 200px;
}
HTML
<ul>
<li>
<img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
</li>
<li>
<img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
</li>
<li>
<img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
</li>
</ul>
like this? http://jsfiddle.net/fqTsN/
remove the float:left from your pictures by the way! I fixed that too (it's horizontal without float:left;
your best and fastest bet for more control is to use media queries, or you could also use Bootstrap.
As everyone else has said:
<ul>
<li>Stuff</li>
<li> Other Stuff</li>
</ul>
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
{
// ...
}
I am developing a website having a sidebar nested lists. Parent li has children li structure. On first display 4 li (list items) are displayed and above 4 item should be hidden with a link to "Show All" option.
html codes:
<div id="sideMenuBox">
<div class="header">
<h2 class="cufon">KATEGORİLER</h2>
<a class="moreLink" href="#" title="">Tümü</a>
</div>
<div class="body"> <!-- menubox body -->
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
Alışveriş Merkezleri
<ul>
<li>Online Alışveriş Siteleri</li>
<li>Kuyumcular</li>
<li>Hediyelik Eşya</li>
<li>Çiçek Sektörü</li>
<div class="sbSubMenu" style="border:black 1px solid">
<li>Kuyumcular</li>
<li>Kuyumcular</li>
<li>Kuyumcular</li>
<li>Kuyumcular</li>
</div> <!--// sidebar submenu -->
<li><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
<br class="clearFix" />
</li>
</ul>
</div> <!-- // menubox body -->
<div class="bottom"></div>
</div> <!-- // sideMenuBox -->
and CSS codes are:
#sideMenu {
width:200px; height:auto;
margin:10px auto;
}
#sideMenu li{
list-style-type:none;
min-height:25px;
line-height:18px;
height:auto;
border:blue 1px solid;
}
#sideMenu hr { width:100%; height:1px; color:#e69000; background:#e69000; margin:10px auto 5px; border:0;}
#sideMenu li span { width:40px; float:left;}
#sideMenu li a{
color:#003a69;
text-decoration:none;
font-size:16px;
font-weight:bold;
margin:0; padding:0;
}
#sideMenu li li {
margin-left:50px;
display:inline-block;
line-height:20px;
border:red 1px solid;
}
#sideMenu li li a { font-size:13px; height:1px;}
#sideMenu li li a.showAll,
#sideMenu li li a.showLess{
color:006aa6;
text-decoration:underline;
font-size:12px;
font-weight:normal;
margin:10px 0;
padding-right:15px;
background:url(../images/arrow-down-blue.png) right center no-repeat;
}
#sideMenu li li a.showLess{ background:url(../images/arrow-up-blue.png) right center no-repeat;}
#sideMenu .sbSubMenu {
width:100%; height:auto;
}
These codes are working fine in Firefox, Chrome, and IE8 but in IE7 is included in li. and lis included in are rendering out of div that is breaking the layout. If I remove the from the codes then its working fine but to meet the requirements of the project i have to hide list items after four thats why i have enclosed the list items in a div to be hidden by default.
I have setup a online demo page to resolve this problem and to get the experts advise. You can see this page live demo page: http://tinyurl.com/7pqo5ob
Note: I have added some borders to understand how list items and divs are rendering in IE. Its working fine in other browsers but not good in IE7. I have tried many options but in vain.
Please advise.
Thanks in advance.
Thank you very much for being concerned. I tried many tricks and finally i got it. Actual problem was in nested unordered list and list items structure. In the inner structure of "LI" i placed a "DIV" tag to be hidden by default. This was the point where IE 7 start breaking the layout. If i remove the "DIV" tag then it was okay but in project requirements the "DIV" should be there for hiding the "LI"s.
After many hours of frustration, I tried to change the "DIV" to "LI" and its working fine in IE7 and in other browsers too.
Final codes are:
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
Alışveriş Merkezleri
<ul>
<li>Online Alışveriş Siteleri</li>
<li>Kuyumcular</li>
<li>Hediyelik Eşya</li>
<li>Çiçek Sektörü</li>
<li class="sbSubMenu"> <!-- hidden list items -->
<ul>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
</ul>
</li> <!-- // sidebar submenu -->
<li class="Link"><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
</li> <!-- // main List Item --->
</ul>
and you can check this page live working fine with IE7.
Link: http://www.designforce.us/demo/kktc/index.html
Thanks