I'm trying to build a <ul> with two links inside each <li>. The second link inside each <li> should be vertically aligned, and it should work in Firefox and Internet Explorer 7. The problem is, when I add a float, IE7 automatically expands the <ul> to 100% of the page rather than allowing the width to be automatic (or flexible). The code below works in FF, but not IE7. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.menu-block {
position:absolute; /*this gives the menu a flexible width in FF,
preventing the <ul> from expanding to 100%*/
}
ul {
list-style:none;
width:auto; /* allows for flexible lengths on the first link in the li*/
}
a.leftlink {
background:#CC9900;
float:left;
}
a.rightlink {
background:#006699;
float:right;
width:50px; /*fixed width for the "more" link*/
}
</style>
</head>
<body>
<div class="menu-block">
<ul>
<li> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. More</li>
<li> bbbbbbbbbb. More</li>
</ul>
</div>
</body>
</html>
Any help at all would be greatly appreciated!! Thanks, here are some visual examples:
Example image from Firefox with the desired output: http://tinypic.com/view.php?pic=1564lte&s=7
Example image from IE7 with the broken layout: http://tinypic.com/view.php?pic=2h5oabk&s=7
Here, give this a try:
http://jsfiddle.net/p5a76/4/
Found the answer for anyone who needs this in the future!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div.menu-block {
position:absolute; /*this gives the menu a flexible width in FF, preventing the <ul> from expanding to 100%*/
}
ul {
list-style:none;
width:auto; /* allows for flexible lengths*/
}
li{ position:relative; width:auto;}
a.leftlink {
background:#CC9900;
margin-right: 50px;
}
a.rightlink {
background:#006699;
position:absolute;
top: 0;
right:0; /*key piece I was missing before*/
width:50px; /*fixed width for the "more" link*/
text-align:right;
}
</style>
</head>
<body>
<div class="menu-block">
<ul>
<li> aaaaaaaaa. More</li>
<li> bbbbbbbbbbbbbbbbbbbbbbb. More</li>
</ul>
</div>
</body>
</html>
Related
I'm trying to make a webpage with a horizontally aligned navigation bar menu on the right and for some reason nothing I'm trying is seeming to work? If anyone could point out what I'm doing wrong that would be great, thanks in advance. Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArtStore</title>
<link rel = "stylesheet" href="styles.css">
</head><body>
<div class="navbar">
<div class="logo">
<img src="logo.png" width="125px">
</div><nav class="topnav">
Home
Products
Login
Cart
</nav>
</div>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.navbar{
display:flex;
align-items:center;
padding:20px;
}
.topnav{
flex:1;
text-align: right;
}
.topnav ul{
display: inline-block;
list-style-type: none;
}
.topnav ul li{
display: inline-block;
margin-right:20;
}
a
{
text-decoration: none;
}
All it's showing is the logo on the left with the text all horizontally laid out underneath it, as well as underlined :/
This code actually works - I'd linked the wrong CSS file. Wow lol
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.abc {
width:600px;
height:120px;
background-color:yellow;
display:inline-block;
}
ul{
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
</style>
</head>
<body>
<div class="abc">
<img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" />
<ul >
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</body>
</html>
I want to take this navigation bar up( on alignment of middle of the logo). How to do this?
I am new to html/css as well new to stack overflow.
You can use the HTML5 <nav> tag, and FlexBox box model to achieve this.
Here is the a live DEMO.
HTML:
<nav>
<img src="path/to/my/logo" width="180" height="100%">
home
gallery
about us
contact
</nav>
CSS:
body{
margin: 0 !important;
}
nav{
height: 60px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(21, 138, 194);
}
nav > a{
margin: 0 1em;
display: flex;
color: #036088;
text-transform: capitalize;
text-decoration: none;
}
nav > a:hover{
color: white;
}
What I usually do is capture page elements within div tags and play with margins...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.bar{
margin-left: 150px;
margin-top: -95px;
}
.abc {
width:600px;
height:120px;
background-color:yellow;
position:absolute;
display:inline-block;
}
ul{
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
</style>
</head>
<body>
<div class="abc">
<div class="Image"><img src="../../../Desktop/254014_208382935867586_7113053_n.jpg" width="180" height="120" /></div>
<div class="bar">
<ul >
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</div>
</body>
</html>
want something like this right? :)
In your CSS, you can set the margin of your page to 0, making the elements on the very border of the page.
Add like below :
*{
margin:0px;
}
This will set all the content of your page with a 0 margin. The * selector matches every element in your html page.
Set the 'vertical-align' property on the image in the navbar to 'middle'.
This will align any other inline elements next to that image relative to the image's vertical center.
This link describes how the vertical-align property works https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
.abc {
width:600px;
height:120px;
background-color:yellow;
display:inline-block;
}
ul {
position:relative;
display:inline-block;
}
ul li {
display:inline;
font-size:24px;
}
/* THIS IS THE ONLY NEW CODE */
.abc img {
vertical-align: middle;
}
<body>
<div class="abc">
<img src="http://lorempixel.com/400/200/" width="180" height="120" />
<ul>
<li>Home</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
</body>
I am using below code but when tap on greybox section text/image appear hidden. I am trying other ways but issue not resolved. Can any one help me please which will appreciate.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
<style>
*{-webkit-tap-highlight-color:#eaeaea; -tap-highlight-color:#eaeaea; -moz-tap-highlight-color:#eaeaea; -webkit-appearance:none;}
.brands ul{ margin:0; padding:0; float:left; width:100%;}
.brands ul li{ width:50%; list-style:none; margin:0; padding:1px; float:left; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.brands ul li div{ float:left; width:100%; position:relative;}
.brands ul li div a{background:#f6f6f6; min-height:60px; text-align:center; display:block; height: 70px; overflow: hidden; float:left; width:100%; position:relative; cursor:pointer; }
</style>
</head>
<body>
<div class="brands">
<ul>
<li><div><a>Test</a></div></li>
<li><div><a>Test</a></div></li>
<li><div><a>Test</a></div></li>
<li><div><a>Test</a></div></li>
<li><div><a>Test</a></div></li>
<li><div><a>Test</a></div></li>
</ul>
</div>
</body>
</html>
Issue solved. I am using rgba color code instead short color code
* { -webkit-tap-highlight-color:rgba(0,0,0,0.1);
-tap-highlight-color:rgba(0,0,0,0.1);
-moz-tap-highlight-color:rgba(0,0,0,0.1);
-webkit-appearance:none;
}
When I zoom in or out my element is moving and I've tried every code I know but it's still the same, so I've posted my html and css code and I hope you can help me. I have this problem with every element I put in my page
<!DOCTYPE html> //html code
<html>
<head> // head tag
<title></title>
<link rel="stylesheet" type="text/css" href="untitled2.css" /> //css link
<meta http-equiv="content-type" content="text/html":charset-windows-1256">
</head>
<body>
<div id="menu"> // div for menu
<ul>
<li>link</li>
<li>link</li>
<li>link</li> // ul li
<li>link</li>
<li>link</li>
</ul>
</div>
</body>
</html> // closing html
// css
body {
background-image: url('3.jpg');
background-position: top center;
background-repeat: no-repeat;
background-size: 100% ;
width:100%;
height:100%;
min-width:600px; //body attribute
max-width:2000px;
margin:0px;
padding:0px;
}
#menu{
margin-top: 380px;
padding: 0px;
background-color:#555258; //menu attribute
width:2500px;
}
Why are you setting the width and height to 100% and also setting min and max width? If you are trying to make sure it will look right regardless of the device used to view your site, look at this tutorial.
http://www.dwuser.com/education/content/responsive-design-a-crash-course-and-demo/
I'm making a wild guess here, because it's not clear to me what you want to achieve, but I hope something is helpful.
I'll start from a blank slate.
/* Styles go here */
.menu {
background-color: grey;
text-align: center; /* Center text */
}
.menu li {
display: inline-block; /* Place the list items on inline (on the same row) */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
Is this a good start?
I am trying to align an image and some text together. If you refer the below code there will be and image and some text( Name and Age) I want both of them to be next to each other. I did try float: left but still no luck.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style>
img {
height: 10px;
width: 20px;
}
ul li{
display:block;
}
ul {
margin: 0;
float: left;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
</div>
</body>
</html>
Technically your HTML is invalid. A list is a block level element and you can't (or shouldn't) embed then in paragraphs since they should only take inline elements.
There is no Name and Age mentioned anywhere in your markup so I'm not sure what you're referring to there.
Edit: to put the image on the left and have the two labels on the right one above the other, use this markup:
<div id="container">
<img src="cat.jpg">
<ul>
<li>Source</li>
<li>Item Link Title</li>
</ul>
</div>
and either this CSS:
html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; overflow: hidden; float: left; }
#container img { float: left; }
#container ul { list-style-type: none; float: left; background: green; }
The float: left on the container is optional. It simply means that it isn't as wide as its container. The first line is a crude reset CSS. I'd suggest using a real CSS and a DOCTYPE always.
You can't put an unordered list inside of a paragraph (well you can but it's not valid). I don't know exactly what you're trying to do but see if this helps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style type="text/css">
img {
height: 10px;
width: 20px;
}
ul li{
display:inline;
}
ul {
display:inline;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<img src="la.jpg" alt=""/> <ul><li>Source</li><li>Item Link Title</li> </ul>
</div>
</body>
</html>
smallest change to your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title></title>
<style>
img {
height: 10px;
width: 20px;
}
ul li{
display:block;
}
ul {
margin: 0;
padding-left:0;
}
#container {
margin: 10px
}
</style>
</head>
<body>
<div id="container">
<p>
<img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
</div>
</body>
</html>
Having said that, the other 2 are correct. lists really shouldn't be inside a paragraph if you want to be HTML strict.