|
CSS - Random Position In Css
I am trying to position the background image of a td with a random x value. I was trying to call a js randomizing function, had no luck. Is there any way to do this? Heres what I have, I need that -125px value to be random.
.bg2 { background: url(testbg1.jpg) repeat -125px 0px; } Similar TutorialsI have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
I have divs within Divs to make background colour different to suit the template am making. Code: /* Document : default Created on : 18-Oct-2011, 10:25:09 Author : abeattie Description: Purpose of the stylesheet follows. */ /* TODO customize this sample style Syntax recommendation http://www.w3.org/TR/REC-CSS2/ */ a { text-decoration: none; color:white; } root { display: block; } html { background-color: black; } #container { width: 800px; background: black; margin: 3em auto; } #header { overflow: hidden; height: 100% /* IE6 hack */ } #header img { margin-top: 2px; float: left; } #header ul#nav { float:right; font-size: 16px; position: relative; margin-top: 20px; } #nav li { display: inline; padding-right:27px; } #nav li a:hover{ color: white; text-decoration: underline; } #WhatsNew{ background: white; } #WhatsNewtitle{ color: white; margin-bottom: -30px; } #pictureinfo img { float:left; border: 2.5px solid black; margin-top: 5px; margin-left: 5px; margin-right: 5px; } #pictext { margin-top: -19px; float: right; width: 350px; height: 228px; } div.buttons { margin-top: 37px; color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 2.5px; margin-left: 115px; width: 70px; background: black; position: relative; }
that above is the css and below is the html. my problem is that one of my divs what is inside another div seems to be spilling out. http://imageshack.us/photo/my-images/811/unledtm.jpg/ as you can see the recent posts is taking up both the image and the text next to the image but that div is meant to be below and i have tryed everything i can think of. here is html. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="default.css" type="text/css"> <title></title> </head> <body> <div id="container"> <div id="header"> <img src="images/logo.png" alt="Black & White" /> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end header--> <div id ="WhatsNewtitle"><h1>What's New</h1></div> <div id="WhatsNew"> <div id="pictureinfo"> <img src="images/whatsnew.png" alt="Estore"/> </img> <div id="pictext"> <p> <h2>Project Title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. usce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. Vestibulum ante ipsum primis in <div class="buttons"><a href="#"> Prev </a>|<a href="#"> Next</a></div> </p> </div> </div> </div> <div class="recent posts"> <h2>Recent Posts</h2> <div class="post"> <h2>Post Title</h2> <div class="postinfo"> <ul> <li><a href="#">Author</a></li> <li><a href="#">Date</a></li> <li><a href="#">Category</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Comment Count</a></li> </ul> <h2> 5 </h2> <img src="images/whatsnew.png" alt="Estore" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula sem, aliquam eget tincidunt vitae, rutrum sed ligula. Maecenas iaculis volutpat sem, a luctus odio commodo in. Cras sollicitudin nisl vel leo vulputate in dictum purus aliquet. Sed sed justo odio, sit amet sollicitudin enim. </p> </div> <!-- end post info --> </div><!-- end post --> </div> <!-- end recent posts --> </div> <!-- end container--> </body> </html> i hope i have explained enough for someone to help but if not am sorry. thnaks in advanced beattie for reference the two pages a 1) www.yahn.org/default.php 2) www.yahn.org/register.php ok both pages have 4 divs - div.main which has 3 divs inside of it. div.mainnav div.maininfo div.rightnav. the css for the divs is this Code:
div.main
{
clear: both;
font-family: verdana;
display: block;
}
div.maininfo
{
width: 60%;
display: block;
float: left;
margin-left: 2px;
}
div.rightnav
{
display: block;
float: right;
width: 18%;
}
div.mainnav
{
display: block;
float: left;
width: 20%;
font-size: 10px;
}
if you add up the widths its only 98%. yet on one page the div.rightnav gets dropped down and on the main page it doesn't. can anyone tell me how to fix this or why it is happening? If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: 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="en" lang="en"> <head> <title>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }
Any clue on this? Thanks in advance! How to make div stick to top of a page and align center Hello, I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this? Hei ppl. i am begenning of designing in css but i have a problem.. i have my website www.zyxep.net/byensguf/ i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border.. and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything.. here is my css code: Code:
body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
margin: 0px auto;
left:150px;
top:0px;
width:760px;
height:420px;
z-index:1;
border-left: 1px solid black;
border-right: 1px solid black;
}
#header {
margin: 0px auto;
left:0px;
top:0px;
width:760px;
height:200px;
z-index:2;
background-image: url(images/logo.jpg);
border-bottom: 1px solid black;
}
#menu {
margin: 0px auto;
left:0px;
top:200px;
width:760px;
height:20px;
z-index:3;
border-bottom: 1px solid black;
}
#content {
margin: 0px auto;
left:0px;
top:220px;
width:760px;
height:180px;
z-index:4;
border-bottom: 1px solid black;
}
#footer {
margin: 0px auto;
left:0px;
top:400px;
width:760px;
height:20px;
z-index:5;
}
#login {
margin: 0px auto;
left:760px;
top:15px;
width:400px;
height:50px;
z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
and my index.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>ByensGuf.dk - Byens bedste guf</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="zyxep"> <META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio"> <META NAME="Description" CONTENT="zyxep.net - portfolio"> <meta name="REVISIT-AFTER" content="1 DAYS"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">Footer</div> <div id="login"> <form action="login.php" method="post"> <div> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="login" id="loginsubmit"> </div> </form></div> </div> </body> </html> plz help me.. i am so confused I've been designing a template for my phpBB install to make it integrate with my site better, and what I have so far I like, but I noticed one small problem. I'm not sure if it's a bug in mozilla or what the cause is, but at random times my Author details column will take up 100% of the screen with, when it's defined via css to only take up 12%. A simple reload is all that is required to fix it, but it can be quite annoying when it happens. The problem only seems to happen on the post view, which is available he http://kicken.mine.nu:8008/forums/viewtopic.php?t=4 It seems I have more luck getting it to happen if I start clicking around between the Home page and the post view, or from the index to a post view. I havn't had access to any browser other than mozilla to check things in either, so I'm not sure what results will show in other browsers. I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network. When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong. In both FF and IE, my site http://niosis.awardspace.com/polend.html doesn't display right. Look at the link below to see exactly how it is supposed to look. Here is how it is supposed to look: http://niosis.awardspace.com/tempsliced.html but of course that uses tables so I'm fixing it, and as you could see in the previous link having problems doing so. and if you think it looks bad in Firefox, just open up internet explorer and take a look at it. ewww.... Anyways, thanks in advance to anyone who can help me. The XHTML Validates strictly. How can I randomize text size on a website? Like the ones done with the "tags" found on many wordpress blogs? Nothing too crazy, I just want to display words randomly and have some of the text bigger than others. You would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he http://www.goldenturmeric.com/layout.php The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know. Anyone's help is much appreciated. Hi, I'm following a tutorial and I would like to understand the position functioning. I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning. Thanks in advance. PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www) In IE7 on this page http://hometown.tmhdesign.com the background image position for my #main div is being ignored Code:
#main {
width: 990px;
margin: 0 auto;
min-height: 300px;
background: red url(images/style1/main1_div_bg.gif) 0 427px !important;
text-align: left;
}
I've been fixing errors for all of today trying to get my website to work in FF and I.E. It was all working fine until I refreshed I.E after implementing a myspace embedded link. If you're a I.E users you can see it by visiting (okay, I was going to post a link to my website so you could see, but It seems the forum rules prevents me from doing so ) Heres an image. Code: http://i4.photobucket.com/albums/y102/Macceth/error.jpg EDIT: For some reason the image isn't showing up either... but I can see it when I click preview... is posting images going againsted the rules aswell for first time posters? :S and here are the html code and styles.css code. Code: <!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Metal, Heavy Metal, Rock, Southern Rock, Music, Songs, Band, Want, For, Destruction, Want For Destruction, Destruction, UK" />
<title>Want For Destruction | The Official Want For Destruction Site</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<h1>Your Logo</h1>
</div><!--ender header-->
<div id="nav1"class="cms-editable">
<ul id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="band.htm">Band</a></li>
<li><a href="events.htm">Events</a></li>
<li><a href="music.htm">Music</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="main">
<div id="primary">
<div id="header2" class="cms-editable">
<h2>EVENTS!</h2>
</div>
<div id="content1" class="cms-editable">
<p><strong>Upcoming 2011 events!</strong></p>
<p>January 21st - The Flying Dutchman - Friday at 21:00<br />February 21st - Seabreeze - Saturday at 21:30</p>
</div>
</div><!--end primary-->
</div><!--end main-->
</div><!--end container-->
</body>
</html>
Code: html {
background: #000000 url(images/BG.jpg) no-repeat center top;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
*/ color: white */
}
a:hover {
text-decoration: underline;
}
a.selected {
font-weight: bold;
}
p {
color: #43433f;
line-height: 21px;
}
h2 {
color: #363era;
font-size: 31px;
}
li {
list-style: none;
}
img {
border: 0px;
}
#container {
position: relative;
margin: auto;
width: 971px;
text-align: left;
}
#header {
position: relative;
}
#header h1 {
text-indent: -9999px;
background: url(images/header.png) no-repeat center;
line-height: 251px;
}
#nav {
background: url(images/navBG.png) repeat-x;
overflow: hidden;
height: 40px
margin: 0 0 6px 0;
padding: 0 0 0 31px;
}
#nav li {
float: left;
line-height: 40px
}
#nav li a {
border-right: 1px dotted #959595;
padding: 0 1em;
color: white;
}
#nav li a.first {
padding-left: 0;
}
#main {
position: relative;
background: url(images/mainBG.png) repeat-y;
padding-bottom: 4em;
}
#primary h2 {
padding: 25px 0 15px 0;
margin-left: 38px;
margin-right: 38px;
border-bottom: 2px dotted #aab391;
color: white;
}
#primary p {
padding-left: 38px;
padding-right: 38px;
color: white;
font-size: 75%;
}
#content1 p {
border: 0px;
}
#padfix {
padding-left: 38px;
padding-right: 38px;
padding-top:0px;
padding-bottom:5em;
float:left;
}
Sorry for being a nuisance I am kinda new to all of this stuff. Any help would be greatly appreciated! I'm attempting to get a background image to stay in the position I've defined in the 'bannerAd" css. The problem I'm having is that when I change the position (margins or padding) of the objects in the css class code for the bannerAd-top-right, the background image in the bannerAd div is effected. How can I move the content in the bannerAd-top-right css without the content in the bannerAd div getting affected? Below is the code for the index.php showing the class definitions: Code: <div id="bannerAd">
<div class="bannerAd-top-left">
<jdoc:include type="modules" name="user5" style="bannerAd-top-left" />
</div>
<div class="bannerAd-top-right">
<jdoc:include type="modules" name="rightBanner" style="bannerAd-top-right" />
</div>
</div>
Below is my css for the above: Code: #bannerAd {
background:url(../images/banner-right.jpg) no-repeat right 0;
margin-bottom: 10px;
width: 100%;
}
.bannerAd-top-left {
margin-bottom: 10px;
height: 230px;
width: 400px;
float:left;
}
.bannerAd-top-right {
height: 60px;
width: 400px;
padding:178px 0px 0px 445px;
}
I need the .bannerAd-top-right which contains my banner to be moved in position independently from the background image found in the bannerAd css. I just need to move the position of the .bannerAd-top-right up about 10px but every time I do that it shrinks the background image. Any help would be greatly appreciated. thanks. I have been give the challenge of converting everything to use CSS. The original website is at (URL address blocked: See forum rules) And my css version at (URL address blocked: See forum rules) The header and footer I am happy with. The main content section is a content, left, and right DIV. I would like this section to be always aligned centrally with each having a fixed width. What will happen is that the main section (content,left,right) will be more narrow than the header and footer. I cannot get the content section to go alongside the left calendar type bar. Any help would be appreciated. Many thanks Martin Hello, I have tried to design a vertical menu with sub-menu's popping out to the right. I have used this onMouseOver and onMouseout events. Here is the html for the menu Code: <div id="menu">
<ul>
<li><a href="#">About Swamiji</a></li>
<li id="m1" onMouseOver="showsub('m1')" onMouseOut="hidesub('m1')">
Ashramams
<ul>
<li class="hide"><a href="#"> > ashramam@dowaleshwaram</a></li>
<li class="hide"><a href="#"> > ashramam@hyderabad</a></li>
<li class="hide"><a href="#"> > ashramam@vishakapatnam</a></li>
</ul>
</li>
<li><a href="#">Temples</a></li>
<li id="m2" onMouseOver="showsub('m2')" onMouseOut="hidesub('m2')">
Wings of Organization
<ul>
<li class="hide"><a href="#"> > Satsang Groups</a></li>
<li class="hide"><a href="#"> > Mathru Mandali</a></li>
<li class="hide"><a href="#"> > Youth Wing</a></li>
<li class="hide"><a href="#"> > Seva Samithi</a></li>
</ul>
</li>
<li><a href="#">Articles</a></li>
<li><a href="#">Swamiji's Monthly letter</a></li>
<li><a href="#">Photo Gallery</a></li>
<li id="m3" onMouseOver="showsub('m3')" onMouseOut="hidesub('m3')">
Store
<ul>
<li class="hide"><a href="#"> > Books [in Telugu]</a></li>
<li class="hide"><a href="#"> > Books [in English]</a></li>
<li class="hide"><a href="#"> > Audio CD's</a></li>
<li class="hide"><a href="#"> > Video CS's</a></li>
</ul>
</li>
<li><a href="#">Swamiji's Darshan Timings</a></li>
<li id="m4" onMouseOver="showsub('m4')" onMouseOut="hidesub('m4')">
Giridhari [Monthly Magazine]
<ul>
<li class="hide"><a href="#"> > Subscribe</a></li>
<li class="hide"><a href="#"> > Read Sample Magazines</a></li>
</ul>
</li>
<li><a href="#">Swamiji's Itinerary</a></li>
<li><a href="#">Programmes</a></li>
<li><a href="#">Donations</a></li>
</ul>
</div>
Here is the css for the menu Code: div#menu{
background-color:#ffcccc;
border-top:thin red solid;
border-bottom:thin red solid;
clear:left;
display:block;
width:100%;
float:left;
font:bold .75em helvetica;
}
div#menu ul{
padding:0;
margin:0;
list-style-type:none;
}
div#menu a{
margin:0;
text-decoration:none;
}
div#menu li{
border:1px #cfc solid;
background-color:#ffcccc;
position:relative;
}
div#menu ul * li{
background-color:#ff6666;
}
div#menu a:hover{
background-color:#ffffcc;
}
Here are the javascript functions for showing and hiding the sub-menu's Code: function showsub(elm)
{
menumain=document.getElementById(elm);
subm=menumain.getElementsByTagName("li");
for (i=0;i<subm.length;i++)
{
subm[i].className='show';
}
}
function hidesub(elm)
{
menumain=document.getElementById(elm);
subm=menumain.getElementsByTagName("li");
for (i=0;i<subm.length;i++)
{
subm[i].className='hide';
}
}
Here is the css only for hiding .hide{ visibility:hidden; display:none; } With this css for showing .show{ visibility:visible; display:block; } , I am getting this menu1. With this css for showing .show{ visibility:visible; display:block; position:absolute; top:0; width:100%; margin:0 0 0 100%; } I am getting the menu as in menu2 image. I would like the sub-menu to pop out as in menu2 image without blank space that is appearing at the bottom of the main menu item. If I am not wrong , problem is setting the position of the sub-menu which is a css issue. What should I do to get it right? Thank you. |
|||||||