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.
Related
<!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 would like to have a fixed menubar at the top of my website. (which doesn't move when we scroll). My issue is that this menu bar can have a variable height (one or two (or more) levels depending of the number of items/screen size)
Because the top menu is fixed, I have to add a margin-top for my "real" content after that (or it will begin hidden under the menu), but as the menu height is variable, I can't set a margin-top.
So, is it possible to "force" the content not to be under/over my menubar ? How could I do this ? (I wish not to use javascript for this king of positioning)
Here is the code I am using to test a solution :
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style>
body
{
margin: 0;
padding: 0;
color: #575757;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #cdcdcd;
}
#page
{
margin-top: 0px;
margin-bottom: 5px;
width:100%;
max-width:1500px;
margin-left:auto;
margin-right:auto;
}
#mainmenu
{
background:#b90014 repeat-x left top;
position:fixed;
/*height:28px;*/
width:100%;
z-index:100;
left:0;
background-image:linear-gradient(#b90014, #d00018);
}
#mainmenu p#lastUpdate
{
float:right;
color:#ffffff;
margin-top:5px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
}
#mainmenu ul
{
padding:6px 20px 5px 20px;
margin:0px;
}
#mainmenu ul li
{
display: inline;
}
#mainmenu ul li a
{
color:#ffffff;
background-color:transparent;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:8px 8px 4px;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #d00018;
background-color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="page">
<div id="mainmenu">
<p id="lastUpdate">Last Update : this date</p><ul id="yw0">
<li>Accueil</li>
<li>Rapports</li>
<li>Rapports personnalisés</li>
<li class="active">Rapports instantannés</li>
</ul>
</div><!-- mainmenu -->
<div id="content">
<div id="contentbox">
HELLO WORLD
</div>
</div><!-- content -->
</div><!-- page -->
</body>
</html>
Thank you !
I think what you are looking for are media queries:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can apply CSS styles depending on the size of the screen.
I don't think you can do this in just CSS as it's not able to able detect changes in the page like that. As stated below you could get somewhere near what you want using css padding but i would suspect it wont be exactly what you want. This is one of the things JavaScript is designed for. Id happily be proved wrong though
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>
I'm stuck. I created an image and want it to be a background image accessed through CSS for the navigation menu with text placed over it in HTML.
Here is my CSS:
.menu_item {
background:url(../images/menu_normal.png) no-repeat;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Quotation Form</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li class = "menu_item"><a href="#">About</li>
<li class = "menu_item">Services</li>
<li class = "menu_item">For Translators</li>
<li class = "menu_item">Free Quotation</li>
</ul>
<img src = "images/menu_normal.png">
</body>
</html>
Here is the result: http://eximi.dreamhosters.com/turbolingvo/menu.html
I want the image to be displayed behind the menu items just like it is displayed in the <img src...> below it.
What am I doing wrong?
Thank you!
You'll need something like:
.menu_item {
background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;
float: left;
height: 53px;
line-height: 53px;
list-style: none;
text-align: center;
width: 227px;
}
You have to style your li element to adjust look
for example
.menuitem{
background:url(../images/menu_normal.png) no-repeat;
display: block;
height: 33px;
padding: 10px;
width: 207px;
}
this is just example, you can style it however you like as per requirement
Change the background to be on ul element and give the ul element the class menu.
CSS
.menu {background:url(../images/menu_normal.png) no-repeat; }
HTML
<ul class='menu'>
<li><a href="#">About</li>
<li>Services</li>
<li>For Translators</li>
<li>Free Quotation</li>
</ul>
Can somebody please explain this IE7 bug to me? It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). Here's the HTML to reproduce the behavior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* h1 { margin: 0px; } */
ul { padding: 0; margin: 0; list-style-type: none; }
ul li { float: left; width: 140px; padding: 3px; }
div { clear: left; padding: 3px; }
div, li { background-color: OrangeRed; }
/* ul { border: 1px solid blue; } */
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
This renders a floated <ul> above a <div> (supposed to be a tabbed user interface).
There's an unexplained gap between the <div> and the <ul>.
Now do one of the following:
Uncomment the CSS rule for <h1>. The gap disappears and the list is rendered tight to the <div>, but also very close to the <h1>.
Alternatively, uncomment the CSS rule for <ul>. Now a narrow blue border is rendered above the <ul>, but the gap disappears.
My questions:
How can the <h1> margin (I suppose any block level element with a defined margin will do) affect the space below the list?
Can I prevent this from happening without having to set header margins to 0 or messing with the <ul> borders (setting border-width: 0; does not work BTW)?
I suppose it is connected to the <ul> itself having no height because it has only floated children. Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. Thanks!
It's the Incorrect Float Shrink-Wrap Bug. The linked article explains the issue. It also affects IE6 btw.
As Sjaak Priester, the person whom Gérard Talbot credits for the bug, reasons is that IE first renders the floated element on the same line as the previous float, then sees clear and clears it under but fails to redraw the text.
One of the common solutions is the clearfix hack as answered by someone else here, or placing an empty clearing element after the block with the floats, like a <br style="clear:left;">. Put it between the ul and the div. This way IE will force the clear before reaching the div.
I've come up with a solution that is what seems like a good compromise. It's based on the fact that setting a border on the <ul> solves the problem, while the margin-bottom of the preceding-sibling block-level element obviously causes it.
So setting a border-top: 1px solid transparent; on the <ul> displaces it by merely one pixel, which is okay with me. As BalusC rightly points out in the comments, setting margin-top: -1px; would counteract the displacement.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
ul { padding: 0; margin: 0; border-top: 1px solid transparent; list-style-type: none; }
ul li { float: left; width: 140px; background-color: red; }
div { clear: left; background-color: red; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
I admit that this is a bit of hackery, too; it requires remembering what the bogus border is for, which is not much better than the usual CSS tricks (but a little).
Previous version of the answer: I've fixed it like this for now (seems it works across browsers and does not require CSS hackery)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div.t ul { padding: 0; margin: 0; list-style-type: none; }
div.t ul li { float: left; width: 140px; background-color: red; }
div.c { background-color: red; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<div class="t">
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<br style="clear: left;">
</div>
<div class="c">yada</div>
</body>
</html>
I don't like this solution very much because the of the extra elements it requires. But I dislike dirty CSS tricks even more.
That's a really bizarre problem, IE seems to be full of these delights. I haven't found out exactly why it's deciding to render like that but with proper clearing of the floats you can usually avoid all of this trouble. The following code seems to give some consistency (in other words it's the same with or without the H1 css rule).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
h1 { margin: 0px; }
ul { padding: 0; margin: 0; list-style-type: none;}
ul li { float: left; width: 140px; padding: 3px; }
div, li { background-color: OrangeRed; }
ul { border: 1px solid blue; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
</head>
<body>
<h1>Heading 1</h1>
<div class="clearfix">
<ul class="t">
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
</div>
<div>yada</div>
</body>