|
CSS - Css And Module Position
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. Similar TutorialsHi. im used to using tables for things like this, trying to get it all into css, im having a little trouble creating like module boxes, with tables i would slice the corners up, etc and put arrange them in a table, Row 1: 3 columns //header Row 2: 1 column spanning 3 //content Row 2: 3 columns //footer corners heres a diagram of what im trying to do will make it easier to understand, appreciate anyones help. Cheers Rob I have my "global" a:link color set to WHITE, but the WEATHER.COM module's background color that I want to use is also white, so the links are not visible. How do I change the color of JUST the WEATHER.COM module, given the code that I'm using below? Any help is HUGELY appreciated! /*-- global settings --*/ a { color: #FFFFFF; text-decoration: none;} a:hover { text-decoration: none; color: #FF5134; /*-- module settings --*/ #ads { float: right; width: 160px; padding: 0 0 0 20px; .ads a {color: #1200FF;} .ads a:hover {color: #1200FF;} } /*-- Weather --*/ #weather { .weather a:link {color: #1200FF;} .weather a:hover {color: #1200FF;} } I 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;
}
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 How to make div stick to top of a page and align center I have an section of code, that on the html side has 7 items in a list, and it's displaying vertically, how (if any) is it possible to break up items and arrange them horizontaly within css? i am trying to do this example here w3schools.c0m/css/tryit.asp?filename=trycss_position_fixed the o, in .com has been changed to 0 so i could post. sorry the text " Some more text " I wish to had dead center on the right side of the page, not near the top like that, mainly, i wish to put two more lines of text just under it as well, all being dead center of the page, on the right, i cannot figure it out, any help please? Hi, I have 2 divs. The first one is set to a specific width and height. The second one varies in size. The problem is that I need the second div to sit on top the first, and the page to position itself according to the first div. Here's an example:http://www.caillouette.com/testSite/index2.php The blank image will be white, but it's dark grey for demonstration purposes. here's the CSS: Code: .big_image{
z-index:9;
position:absolute;
left:0px;
top:0px;
margin: 5px 0x 0px 27px;
}
.big_image_blank{
z-index:0;
position:relative;
width:262px;
height:262px;
background-image: url(images/Uploads/Listings/blank.jpg);
margin: 5px 0x 0px 27px;
}
Im working on a project that required some css that I'm not used to using to pull off an effect. here is the url http://www.staging.crea8te.com/ftea I'm having one issue: Issue: the basic structure is <div1>position: relative <subdiv></div>position:absolute <subdiv></div>position:absolute </div> <div2> </div> <div3 </div> I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1 i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas? If you look at that page in IE6 you'll see the image with the woman is misaligned. It looks fine in FF and IE7. I'm not sure what I need to do to get it to align in IE6. This isn't my site design and frankly the CSS is a mess (too many css includes, etc), so I'm actually pretty lost as to how to fix this. Does it have something to do with the #leftcontent being absolute positioned? Hi, The following example is positioned as I want. Code: <div><label id="day">Day:</label><span> <input type="checkbox" name="day" value="1" />Sat <input type="checkbox" name="day" value="2" />Sun </span> </div> How do I make in next example <table> vertically aligned with <label> element? Right now <table> element is positioned next to it but way below <label> element. Code: <div><label id="lang_lbl">What languages do you speak?:</label> <span> <table><tr><td><input type="checkbox" name="lang" value="1" />English </td> <td><input type="checkbox" name="langs" value="2" />Spanish</td> </tr> </table> </span> </div> Thank you. I'm having an issue using position: relative in IE6. Basically I'm doing this: Code:
<style>
.class1 {
width: 900px;
padding: 0px;
margin: 0 auto 0 auto;
}
.floatimg {
position: relative;
top: -200px;
left: 0px;
padding: 0px;
margin: 0px;
}
</style>
<div class="class1">
<img class="floatimg" src="foo.gif" />
<p>Some text.</p>
</div>
So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap. I have a container DIV a with absolute position containing DIV's b,c,d each with absolute position. Code: <DIV class="a"> <DIV class="b"></DIV> <DIV class="c"></DIV> <DIV class="d"></DIV> </DIV> <DIV class="e"></DIV> DIV e has no asssigned position and is not displayed(floating in the background). I want to replace any of b,c or d (setting display to none) with e, displaying e in the position of either b,c or d. How do I assign the style of one DIV to another that is not its parent? I could if necessary place e inside a and do a swap, but I have quite a lot of DIV's like a, and would rather not have to repeat the code in each container DIV. Hope this makes sense! I'm trying to piece together a sliced image using CSS, but I need it in percentages so it stays together when the window is resized! Does anybody know if this is possible or a better way to go about it? Thanks! www . myspace . com / newsoundproduction I cant get the background image to sit at the bottom of the page... already tried millions of things and im still getting the same error... Code:
<style>
body {
background-color:FFFFFF;
background-image: url('http://copydential.net/gus/newwall5.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom center;
}
table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
background-color:FFFFFF;
filter:alpha(opacity=90); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
}
table table table table td {filter:none;}
table table table {
border-width:3px;
border-color:FFFFFF;
border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:000000 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:000000 !important;}
a {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
.r{;}
.navbar {visibility:visible;} .navbar font {visibility:hidden;}
a.text, table div font a {display:none;}
table div div {visibility:hidden;}
table table div div {visibility:visible;}
a img {filter:alpha(opacity=100); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
img {border:0px;}
table table table {width:300px;}
table table td.text table, table table td.text table td {width:100%;}
</style>
<style>
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url("http://copydential.net/gus/newcontact.jpg");
background-attachment:scroll; background-position:center center;background-repeat:no-repeat;
background-color:transparent;}
.contactTable table, table.contactTable td {
padding:0px !important;border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style>
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
</style>
Alright here goes. I just redesigned my website. To see how it *SHOULD* display, use Mozilla, Safari, etc... Use Internet Explorer on Windows to see how it displays incorrectly. The first way that I wanted to do it was to have everything either float: left; or float: right; and then use relative positioning on the left menu to bump it left. The problem with this is that Internet Explorer didn't want to do that and since I'm designing with every internet user in mind, I must make everything viewable for eve I assume that the problem lies with the stylesheet in these two sections... Code: #menu {
position: absolute;
top: 115px;
left: 145px;
width: 50px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
margin-top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
z-index: 200;
}
a.tab, a.tab:link {
background-color: #222222;
border: 1px solid #EFEFEF;
padding: 12px 0em 12px 10px;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
float: left;
width: 95px;
margin: 5px 0px 5px 0px;
text-decoration: none;
}
a.tab:visited {
color: #FFFFFF;
}
a.tab:hover {
background-color: #666666;
color: #FFFFFF;
}
a.tab:active {
color: #FFFFFF;
}
a.tab.activeTab, a.activeTab:link {
border-right-width: 0px;
width: 100px;
background-color: #000000;
}
and Code: .rightContent {
float: right;
width: 535px;
background-color: #000000;
border: 1px solid #EFEFEF;
margin-left: 0px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 5px;
text-align: center;
color: #FFFFFF;
}
The (X)HTML for this section looks like this... Code: <div id="menu"> <a class="tab activeTab" href="http://www.paularms.com">Home</a><br /> <a class="tab" href="http://www.paularms.com/archives.html">Archives</a><br /> <a class="tab" href="http://www.paularms.com/about/downloads.html">Downloads</a><br /> <a class="tab" href="http://www.paularms.com/about/tutorials.html">Tutorials</a><br /> <a class="tab" href="http://www.paularms.com/about/index.html">About</a><br /> </div> <div id="content"> <div class="rightContent"> .......... Does anyone know WHY Internet Explorer is displaying this wrong? Even more helpful would be HOW to fix the problem. Thanks everyone. I want to position my website logo to top left corner (0,0) and I dont want it push my container div down. I cant place logo tag within container tag because the logo overflows to left. if you couldnt picture it in your mind, please check the attached image thank you in advance. http://www.refinethetaste.com/html/ |
|||||||