I'm having problems to align correctly the buttons on side by side. I need to build a solution without use the float resource. See it:
<!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>Documento sem título</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
a {
display:inline-block;
padding: .63em;
border:1px solid #ccc;
position:relative;
}
.b2 {
padding: .0em 1em .0em 2.1em;
text-decoration:none
}
.icon {
position:absolute;
width:16px;
height:16px;
background-color:#999;
top:50%;
margin-top:-8px;
left:2px;
}
</style>
</head>
<body>
<div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <span class="icon"></span>
<div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <span class="icon"></span>
<span class="icon"></span><span>Casa d wqe dde qeasd sd</span>
</div>
<h2 style="background:#999"> test</h2>
<span class="icon"></span><span>Casa d wqe dde qeasd sd</span>
</body>
</html>
Try this here:
div .b2 {
top:-6px;
}
Demo
What about using an unordered list item? See this jsFiddle: jsFiddle
You set it to be inline using the CSS properties like this:
li {
list-style:none;
display:inline;
}
Related
I have two animated .gif images in my webpage, but they are not being displayed in Firefox. It works on IE, Safari and Chrome. I have read other posts but I couldn't find a solution that works. Could someone help please?
This is the url:
http://www.lokalbericht.unibe.ch
Following is the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lokalbericht - Hermann Burger</title>
<style type="text/css">
.text_body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
background-color:#000000;
background-image:url(images/intro/background_paper.jpg);
background-position:center 50px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div.soon {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
</style>
</head>
<body>
<div class="soon"> </div>
<div class="lokalbericht"> </div>
I checked your link. Try this...
div.soon {
background-image:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
background-image:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
Try this :
content: css property which you have set for load background image is creating problem so just replaced it with background-image into both given class div.soon ,div.lokalbericht
background-image:url(images/intro/coming_soon.gif);
background-image:url(images/intro/animation.gif);
In place of :
content:url(images/intro/coming_soon.gif);
I hope this helps you!!
Firefox doesn't support the content property in the same way as Chrome — on img elements and/or when the source is an image.
So you need to use background property instead of content or you need to use :before property the classes like below.
div.soon:before {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht:before {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
I have to modify a website that another developer wrote.
I need the font and size from one class, but I need the formatting from another.
html:
<div class="box1">
<div class="box2">
<p class="p1">
The text I need printed
</p>
</div>
</div>
css:
.box1
{
float:left;
width:500px;
padding:10px 0px 10px 15px;
}
.box1 p.p1
{
font-size:15px;
color:#ff00ff;
line-height:22px;
}
...
.box2
{
padding:10px;
}
.box2 p.p1
{
font-size:12px;
color:#ff0000;
line-height:22px;
}
How do I use p1 from box1 while keeping the alignment the same? I would rather not define a new .box2 p.p2 unless that is the only way.
Thanks.
From the examples you posted, I don't think you need multiple classes here (as others are suggesting). Do you realize what is going on? Your paragraph is being applied both paragraph rules you have defined, .box1 p.p1 and .box2 p.p1. Since the latter overwrites all properties from the former, those are the styles you see.
I think all you need to do is remove the second rule (.box2 p.p1) entirely.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box1
{
float:left;
width:500px;
padding:10px 0px 10px 15px;
}
.box1 .box2 p.p1
{
font-size:15px;
color:#ff00ff;
line-height:22px;
}
.box2
{
padding:10px;
}
.box2 p.p1
{
font-size:12px;
color:#ff0000;
line-height:22px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<p class="p1">The text I need printed</p>
</div>
</div>
</body>
</html>
Here's a demo - http://jsfiddle.net/fedev/ZwrfV/
UPDATED
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box1
{
float:left;
width:500px;
padding:10px 0px 10px 15px;
}
.box1 p.p1, .box1 .box2 p.p1
{
font-size:15px;
color:#ff00ff;
line-height:22px;
}
.box2
{
padding:10px;
}
.box2 p.p1
{
font-size:12px;
color:#ff0000;
line-height:22px;
}
</style>
</head>
<body>
<div class="box1">
<p class="p1">The text I need printed under box 1</p>
<div class="box2">
<p class="p1">The text I need printed under box 2</p>
</div>
</div>
</body>
</html>
Another demo - http://jsfiddle.net/fedev/M9mWN/
I am not entirely clear on what you are trying to accomplish, but the basic answer to your question (about basically needing to combine two classes) is that you can have an element with more than one class, just separate them by spaces
class="class1 class2 ...."
I am facing some issue in printing a form created using absolute positioning in FF. I am printing on A4 sheet. The page comes fine if its single paged form, but when i have to print multi page form the only first page is printed and other elements that have to come on second page overwrites each other in a single line on the next page. Its quite weird the same is working fine on IE
NOTE I am unable to share the html as it includes a lot of css and quite complex and big HTML pages.
<!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">
<head>
<style type="text/css">
#-moz-document url-prefix() {div{position:relative} }
#media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There is a thread where the topic was already discussed:
Firefox printing only 1st page
However, the problem could be in the css.
As explained here http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/
If you have an
overflow: hidden;
in your css, change it to
overflow:visible;
and then it should work.
If it is possible, set the height of the div elements. This will at least force visibility onto two pages. However, it does not deal with overlapping divs, and there still may a problem of visibility of the div content.
Here is my revision (some visibility borders and coloring was added, and the width may or may not prove useful):
<!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">
<head>
<style type="text/css">
#-moz-document url-prefix() {
div{
position:relative;
background-color: #dddddd;
border: 1px solid #999999;
width: 20%;
}
}
#media print {
marquee {
-moz-binding: none;
}
body{
overflow:visible !important;
}
}
#a{
position:absolute;
top:50px;
left:70px;
height: 1000px;
}
#b{
position:absolute;
top:1050px;
left:170px;
height: 600px;
}
#c{
position:absolute;
top:1550px;
left:470px;
height: 500px;
}
#d{
position:absolute;
top:1650px;
left:270px;
height: 100px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There's a long standing issue with Firefox and printing absolute positioned elements as mentioned by Daniele B.
Can you redo the HTML+CSS to use relative positioning?
In the CSS add some page-break stuff (http://davidwalsh.name/css-page-breaks). That should make it easier to style the block elements so they flow in each 'page' and align things correctly when #media print.
change your position:absolute to position:relative. you can target firefox only in your print stylesheet using: #-moz-document url-prefix() {div{position:relative} }
<!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">
<head>
<style type="text/css">
#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue;
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red;
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple;
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green;
}
</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>
What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029
I'm trying to develop a Layout with CSS and using a Iframe. How can I show the full page in the iframe without scrolling? Is the iframe appropriate to show full web pages?
Here is the code:
<!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" xml:lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout basic method web</title>
<style type="text/css" media="screen">
#container
{
width: 100%;
height: 100%;
background-color: #fff;
}
iframe
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Subheading</h2>
<IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
If you test the code, you see that the CSS create a scroll inside the page. How can I get rid of this scroll and show all the page?
Best Regards,
UPDATE:
I'm almost there. I only need that the scroll up/down goes over the Header, just like goes over the footer. Is that possible? Please see the code. Just copy/paste it.
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
/*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:50px;}
.pad3 {display:block; height:500px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>
Any clues on how to achieve this?
Best Regards,
You'll have to set the height of the iframe to match the height of the page you are looking at.
If the page is within the same domain you could use javascript to dynamically resize the frame to match the body size of the page you are viewing. There's a few jQuery plugins out there that will do that.
If it's an external domain you can't do this so you'll have to just set the height property of the iframe to match.
If you want to get rid of the scrollbar on the main window, add an overflow style:
#container {
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
You can do this with javascript:
function resizeFrame(){
var iframe = parent.document.getElementById('id of your iframe');
$(iframe).height($('#your top html tag inside your iframe').height());
$(iframe).width($('#your top html tag inside your iframe').width());
}
Then call this function on load & after any hide/unhide actions that will change the form length:
resizeFrame();
If you have margins/padding on the top level html tag inside the iframe, you might need to add px to the height() / width() like this:
$(iframe).height($('#your top html tag inside your iframe').height()+40);
$(iframe).width($('#your top html tag inside your iframe').width()+20);
An iframe cannot adjust size relative to the page it is showing. You would need to adjust it's size with javascript, which implies that you know the size of the page beforehand. If you are just after showing the content of another page inside yours, indeed have a look at ajax.
A very simple example can be found here:
http://aleembawany.com/2005/09/01/ajax-instant-tutorial
be aware that loading pages with ajax in a cross-domain context might not work due to security settings of the browser.
This is really really weird. Sometimes when I reload it shows where it should be, like this:
When I change the color to Orange or Blue (haven't tested any other colors, that ul is brought down. What's the reason? Thanks for the help!
#topuserbar a
{
color:Orange;
}
Here is the complete CSS and HTML.
body
{
background-image: url('images/test.png');
background-repeat:repeat;
margin:0;
padding:0;
}
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
background-color:Black;
min-height:2px;
}
#topuserbar
{
font-family:Georgia;
font-size:large;
float:right;
margin-top:35px;
margin-right:15px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
position:relative;
top:4px;
left:2px;
}
#topuserbar a
{
color:Blue;
}
#topuserbar a:hover
{
color:Yellow;
}
/*****************BODY AREA*******************/
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:300;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!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">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<script src="../../Scripts/jquery-1.4.1.min.js"></script>
<script src="../../Scripts/jquery.tipTip.minified.js"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/tipTip.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".someClass").tipTip();
});
</script>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>
Well, your menu ( #topuserbar ) is floated and is container is not.
You can change lots of things in your css to set a proper floated layout...
- or -
Just change the way you set the position of the menu like :
#topuserbar
{
font-family:Georgia;
font-size:large;
margin-top:35px;
margin-right:15px;
text-align: right;
}
... for example.