Menu style affects my image when I add link to the image (href), notice the purple affectng the google image.
<!DOCTYPE html>
<html>
<head>
<style>
ul
{ float:left; width:100%; padding:0; margin:0; list-style-type:none;}
a { float:left; width:6em; text-decoration:none; color:white; background-color:purple;
padding:0.2em 0.6em; border-right:1px solid white; }
a:hover
{background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p>
body text
</p>
<a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif"
</body>
</html>
The CSS rule you've defined for applies to both your navigation links and the test.php link which includes the Google image. If you intend to target only the navigation links with that rule there are a variety of approaches but typically you'd apply a class to the element containing the navigation and then alter the rule for navigation links to apply only where that class is present. Something like this:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{ float:left; width:100%; padding:0; margin:0; list-style-type:none;}
ul.nav a { float:left; width:6em; text-decoration:none; color:white; background-color:purple;
padding:0.2em 0.6em; border-right:1px solid white; }
ul.nav a:hover
{background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p>
body text
</p>
<a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif"
</body>
</html>
Related
I have a strange problem: the site I build is using flexbox and LESSHAT. The strange thing I encounter is that it doesn't render correctly i.e. flexbox things seems to be omitted.
However, if I hit F12 and reload the page it is rendered is it should.
What is wrong?
UPDATE - This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Style CSS is compiled from this LESS file:
#import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
The reload and F12 solution seems to indicate one of the following issues:
<link> or <style> tag for CSS outside of the <head>
document.write via a downloaded <script>
Asking for computed styles in related JavaScript code, via:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
Changing individual styles in related JavaScript code
Getting and setting styles in a loop
References
Rendering: repaint, reflow/relayout, restyle
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
Look at this Link
It's seemed to be a Chrome bug. But it's fixed in Canary-Version. So I think it's just a temporary problem.
I need to display a MenuBar on the Liferay Portal Page (A menuBar which will be common to all portlets in that page)
For this, I have created a custom Theme, and modified the navigation.vm file under the templates folder.
I have added this below MenuBar code inside the navigation.vm file and deployed it to the server
<html>
<head>
<title>Menu Bar Using CSS</title>
<style>
.menu ul
{
list-style: none;
}
.menu ul li
{
display: inline;
}
.menu ul li a
{
/*Increase Clickable Area*/
padding: 8px;
padding-left: 15px;
padding-right: 15px;
/*Remove the Underline for the Link*/
text-decoration: none;
color: #000;
background: #ccc;
}
/*On Mouse Over the Link*/
.menu ul li a:hover
{
color: #fff;
background: #000;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>
I have put all these code under the navigation.vm file under my Applied Custom Theme, but it didn't worked (I mean the Menu Bar is not shown on the Portal page)
Please let me know if I am doing anything wrong.
navigation.vm does not contain <html>,<head> and <body> tags, these go inside the portal_normal.vm or if the page is a pop-up then portal_pop_up.vm. This file (navigation.vm) just helps in displaying the pages and is included inside the portal_normal.vm file.
So try moving your code inside portal_normal.vm for the menu-bar.
Hope this helps.
I've got some problem with css, the content is sticking out from the boundaries.
It is expected to have a scrollbar rather than hidden overflow, but the boundaries.
Please help.
Here's the code, which reflects my CSS structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-color:yellow;
background-position:top;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-color:yellow;
background-position:bottom;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png
I shouldn't style the body element like it was a <div> element, better to make a new wrapper. Furthermore, from your question I gather you're looking for something like this: http://jsfiddle.net/SQDXt/
Basically, this adds the wrapper div with the scrollbar when your content exceeds the size of the wrapper. Also, the header and footer are within the second wrapper, to span the whole width when the content exceeds the first wrapper's width.
well, I've got a straightforward layout,
but there is a problem with boundaries,
when I resize the window, the content gets outside the boundaries.
that's how it looks like:
Boundaries offset http://img819.imageshack.us/img819/1893/aproblem.png
I'd would be glad if you could offer a solution...
Dunno what's causing it.
Note, please don't change the wrapper thing, for that's really the only layout that worked for my site... But I think its possible to modify the header and the foot, or perhaps put some more wrappers, if I only knew where.
Thanks!
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-image:url('http://img804.imageshack.us/img804/4743/testcj.png');
background-position:top;
background-size:100% 100%;
background-repeat:repeat-x;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-image:url('http://img198.imageshack.us/img198/9422/test2fy.png');
background-position:bottom;
background-size:100% 100%;
background-repeat:repeat-x;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
The above seems to work perfectly on my computer.
However, if you are getting this problem on resize, try applying min-width to the div containing the background, and try again.