i have a page containing css menu.
I want to position it where i want. if i do {margin-top: 30pt;} it works but it shift other things or get shifted itself. is there anyway to position it ignoring other elements.
Ignore my bad english.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10./jquery.min.js'> </script>
</head>
<body>
<h1>HELLPO!</h1>
<div id="cssmenu" style = "position: relative; margin-top: 100pt; overflow: hidden;">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
Yes , by using position: absolute. Position absolute does not effect the other elements, and does not care about where they are located.
Adjust the px according to what works best.
<div id="cssmenu" style = "position: absolute; top: 100px; left: 100px; overflow: hidden;">
Related
<html>
<head>
<style>
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Expected Output
Expected Output
when I add display : inline of <li> then
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
output like this
And my question is after adding padding , margin , line-style-type : circle; I didn't get Expected output ( The missing )
Maybe Using flex I get desired output but what happens in here !!!
You have to use some class names is better to add style directly into li and ul
Using Flex u need to give list style also.
<html>
<head>
<style>
.list li {
display: inline;
padding: 20px;
}
</style>
</head>
<body>
<ul class="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
In the process of updating a website, we are required to support IE in compatibility mode so as to not break existing functionality.
There is a new side menu, which uses Kendo UI's PanelBar. However if the content overflows and we have to scroll, the kendo controls do not scroll correctly - the items float on top in a fixed position.
IE Compatibility Mode vs IE Edge: (please ignore size difference)
I've created a fiddle here to replicate:
<!DOCTYPE html>
<html class="k-webkit k-webkit40">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Kendo UI - jsFiddle demo by paulcoghill</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.blueopal.min.css">
<script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<style type="text/css">
h1{
margin-bottom: 30px;
}
#container{
height: 200px;
width: 200px;
padding 5px;
background-color: red;
overflow: auto;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
});//]]>
</script>
</head>
<body hola-ext-player="1">
<div id="container">
<h1>Header</h1>
<ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu">
<li class="k-item k-state-default k-first" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
</ul>
<div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/
You can view the result in compatibility mode to test:
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/embedded/result/
Can anyone find a workaround or resolve this?
I've tried messing about with difference overflows and z-indexes, updating kendo, but I can't figure out what's going on.
Paul, try adding "position: relative;" to the container. Found this on another question: IE7 CSS Scrolling Div Bug
Hi I'm working on a little website and need some help with some CSS coding. I'm trying to display the image on top/first, insted of the a href headline and I can't use float to do this or change the HTML this has to be done only by CSS, anyone know an alternative way of doing this? TIA
<ul>
<li>
headline
<img class="thumbnail" alt="" src="image.jpg">
some text here...
read more about this article
</li>
</ul>
You could do something like this (following the lines of what user3008011 said above): http://codepen.io/pageaffairs/pen/Lzwxc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul {list-style: none; margin: 0; padding: 0;}
li {position: relative; overflow: hidden;}
a {display: block;}
a:first-child {margin-top: 210px;}
a:nth-child(2) {position: absolute; top: 0;}
</style>
</head>
<body>
<ul>
<li>
headline
<img class="thumbnail" alt="" src="http://placehold.it/200X200">
some text here...
read more about this article
</li>
</ul>
</body>
</html>
I found another way of doing this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul {list-style: none; margin: 0; padding: 0;}
li {position: relative; overflow: hidden;}
a {display: block;}
a:first-child {display: table-footer-group;}
a:nth-child(2) {display: table-header-group;}
a img{width:100%;}
</style>
</head>
<body>
<ul>
<li>
headline
<img class="thumbnail" alt="" src="http://placehold.it/200X200">
some text here...
read more about this article
</li>
</ul>
</body>
</html>
I have a div of an aeroplane inside parent div with overflow: hidden, so it looks as though the aeroplane div is flying from under an element on the page and dragging a banner with it.
See my diagram here:
The css code I have already is:
#plane{
width: 195px;
background-image: url(images/plane.png);
background-repeat: no-repeat;
height: 444px;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#plane-holder {
height: 569px;
width: 960px;
overflow: hidden;
z-index: 2200;
display: inherit;
}
And the HTML:
<!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>Netball Plane</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="header"><div id="topbar"><img src="images/contact-us-bar.gif" width="960" height="45" /></div>
</div>
<div id="content"><div id="mainbody"><div id="menubar"><div id="logo"><img src="images/logo.gif" width="284" height="103" /></div>
<div class="menu">
Menu to go here
</div>
</div>
</div><div id="hero"><div id="information-that"><h1>Hello welcome to the site</h1>
<p></p><p>Some more text here.</p>
<p><img src="images/netball.png" alt="Rollover the netball for more information" width="187" height="46" border="0" /></p>
</div>
</div><div id="hero-shadow"></div><script type="text/javascript">
$(function(){
var iCounter = 1;
var iMaxCounter = 4;
$( '#plane' ).animate({
top: "-=450px",
left: "+=857px"
}, 30000, function(){
}
);
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
after:onAfter
});
});
</script>
<div id="plane-holder"><div id="plane"></div>
</div><div id="base-content"><div id="footer"></div>
</body>
</html>
but this is displaying as a block pushing the other elements below these divs down the page.
Do you know of a way to fix this so the plane and it's containing div is floating above my site? I've tried setting the z-index, but that doesn't seem to work.
probably you should use position relative+absolute setting position: relative on the container and absolute (with a defined z-index) for the #plane
place the #plane with top/left/right/bottom properties
at the begin you have bottom : -<somepixels>, left : 0
at the end you have top : 0, right : 0
Doing so other elements won't be affected by the presence of the plane, staying where you placed them
Use also pointer-events: none if you want to allow click/hover events behind the plane: see https://developer.mozilla.org/en/CSS/pointer-events (unfortunately it's not supported by IE<=8although some js workarounds have been published, e.g. by Lea Verou)
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. I do not know much about CSS at all.
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011
</div>
</body>
</html>
What you are asking and the code you have presented is extremely unclear. If you are extremely new to html/css then drawing a picture instead of trying to explain it in words often helps.
Here is an example where the sidebar is in a fixed position on the left. Fixed means that it will always be there, no matter where the page scrolls to.
http://jsfiddle.net/Bceat/
Don't make CSS declarations inside of other CSS declarations. They should each be on their own.
/* BAD */
div#left-sidebar{
position:fixed;
iframe { width: 250px !important; }
}
/* GOOD */
div#left-sidebar {
position:fixed;
}
iframe { width: 250px !important; }
You've also declared your styles inside the body of your html. Don't do that. Declare styles between the <head></head> tags.
/* BAD */
<head>
</head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
/* GOOD */
<head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
</head>
You also have some invalid declarations like:
/* right-sidebar-<length> means nothing */
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
I know that you are new, but you are going to have to read up on the basics of html and css. That will allow you to do two things. One is pose questions using language that other developers will understand. The second is presenting at a minimum, code that is properly formatted. That way even if your terminology is incorrect, your code can speak for you. Right now you aren't getting any answers because everything is kind of a mess.
I think you must create a table layout like this
<table width ="100%">
<tr><td></td> </tr>
<tr ><td rowspan="3"></td></tr>
your monkey servey here
<tr><td>nav content</td></tr>
<tr><td> main content</td></tr>
</table>