|
CSS - Tricky Image Trick.
this is really for a counter strike source server MOTD (which lets you use HTML/CSS)
First of all for the MOTD i want to use a graphic on it, there are 2 versions of it. One that fits nicely on a 800x600 screen, and one that doesnt (meant for 1024x768+) unfourtantely the bigger one looks alot better. but I do not want it to go off the screen for gamers with smaller screen resolutions. so bassicaly what i want to do is use a different graphic depending on what's happening (if the person has less than 1024x768 screen res or if the user has 1024x768 or above). Bassicaly it's a super duper tricky fluid layout.... thing.... Can this be done or will I just have the face the music? Similar Tutorialsi'm wonderring if there's a way to add elipses ('...') to a long div that isn't suposed to wrap, contained by a table with a relative width. in other words, if somone resizes the browser window so that the div can show all of it's text, then fine, but if it's resized in such a way to clip any of the text, then the elipses are added. not sure if this can be done, but i'm wonderring if anyone has seen it or done it. thanks for any feedback. zick I'm just starting to experiment with external css files and I'm stuck on how to deal with setting color for the links. When I put this in the html page itself it works fine: <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> But when I instead move it to the body section of my external css file and link to that css from my html file, it doesn't do anything (link colors just go back to the default). I know I'm generally setting up the external css file correctly since the other things I set in that external file get picked up correctly (font family, font size, background image, etc.). Any magic to using link colors in an external sheet?? In case it helps, here is my css file: Code: body {
background-color: #000033;
color: white;
background-image:url(balbkgnd.gif);
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}
td {
font-size: 12.0pt;
font-family: Trebuchet MS;
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}
th {
font-size: 12.0pt;
font-family: Trebuchet MS;
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
}
Thanks for taking the time to read my question. I would like to make an horizontal nav. BUT I'd like 2 different sizes of buttons. The active page has a large button, and if you mouse over another button, it gets big also. I'm not entirely sure how to accomplish this. I've attached a pic of what I'm going for, and inserted my code thus far... and thus far, it's not working that great. I can put my images in the <li>s but I also need text there, so I have to use background-image in my css. Thanks, Brad CSS: Code: .NavContainer {
float: left;
/*background-color:#FF0000;*/
padding: 0px;
margin: 89px 0px 0px 0px;
width: 800px;
}
.NavContainer ul li {
display: inline;
}
.NavContainer ul {
padding: 0px;
margin: 0px;
}
.NavContainer ul li {
width: 133px;
height: 101px;
/*background-color:#FF00FF;*/
}
.NavContainer ul li .Active {
background-image:url(Images/ButtonLarge.jpg);
background-repeat:no-repeat;
background-position:top;
}
.NavContainer ul li .NotActive {
background-image:url(Images/ButtonSmall.jpg);
background-repeat:no-repeat;
background-position:top;
}
HTML: Code: <div class="HeaderContainer">
<div class="NavContainer">
<ul>
<li class="Active"></li>
<li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
<li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
<li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
<li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
<li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
<li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
</ul>
</div>
</div>
I'm fairly new to CSS and I'm really getting stuck on how to make a column on a web page behave the way that I'd like it to. I want to have a column that is composed of three parts: a header image, a footer image, and a middle section that expands in height to match the content height. These three pieces make up the "background" of the column. Now I want to overlay content on top of it and have the column expand in height to suit. I can accomplish this fairly easily if I restrict my content to the middle portion. This isn't what I want though. I want the content to overlap the header and footer images. This diagram describes what I'm trying to do: +----------------------------------------+ |........................................| |..Fixed height header image.............|...Content |........................................|...text +----------------------------------------+...to |........................................|...overlay |........................................|...all |..Expanding region (solid fill color)...|...three |........................................|...regions |........................................|...with +----------------------------------------+...the |........................................|...center |..Fixed height footer image.............|...region |........................................|...expanding +----------------------------------------+ This is what I'm doing in my html: Code: <div class="contentArea">
<div class="contentTop"></div>
<div class="contentStretch"></div>
<div class="contentBottom"></div>
<div class="main-page-content">
My Content Here
</div>
</div>
This is in my style sheet: .contentArea{ border: none; height:auto; line-height: 100%; padding: 0px; width: 785px; float:left; } .contentTop { background: url('../images/contentTop.jpg') no-repeat left center; border: none; height: 276px; line-height: 100%; padding: 0px; width: 785px; float:left; } .main-page-content{ border: none; line-height: 100%; padding: 0px; width: 515px; height: auto; position:relative; left:265px; top:-610px; } .contentBottom { background: url('../images/contentBottom.jpg') no-repeat left center; border: none; height: 317px; line-height: 100%; padding: 0px; width: 785px; vertical-align:bottom; } .contentStretch { background: url('../images/StretchPic.jpg') repeat-y left center; border: none; line-height: 100%; padding: 0px; width: 785px; float:left; } As you can see, I've tried to overlay and move the main content upwards by -610 pixels to get it to sit on top of the previously placed divs. This appears to work to position the content, but the underlying images do not behave! I've been at this for days and I'm at the point where I need help! Any suggestions? Ron FAQ what's having issues... Hi! I have an FAQ page that consists of a series of answer <ul>s nested under question <li>s. A little javascript shows the active answers alongside the question. The questions are supposed to align vertically with the answers and with a constant margin. Using relatively positioned parent li's and absolutely positioned child uls is doing the trick for all but ie 6-7, which are not respecting the left:400px declaration in a predictable (to me, at least) way. The answers are floating right and left based upon the width of the question. Any help would be greatly appreciated! Thanks.. I have a menu that needs to be pixel perfect. It uses ID's for each menu item with a specific width and background positioning property when the user hovers over the each menu item. This is fine so far. It is getting tricky now because I need to use a drop down menu. Using the Superfish js, it uses a class (sfHover) appended on the parent ul when the child li is hovered. That would be fine if it were a mere background colour but in this case I need to control background positioning. eg li#main-nav-3 a:hover{ width:83px; background position:-227px 0;} ... <li id="main-nav-3"><a href="#">Attractions</a></li> <li id="main-nav-3" =><a href="#">Business</a> <ul> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> </ul> </li> ... on rollover: ... <li id="main-nav-3" class="sfHover"><a href="#">Attractions</a></li> <li id="main-nav-3" =><a href="#">Business</a> <ul> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> <li><a href="#">dummy link</a></li> </ul> </li> ... I just wish you could write li#main-nav-3.sfHover a:hover {new background position} to solve this but you can't. Anyone else faced a similar problem? Link to the problem page: http:sidouglas.net/cmx/tourism/ The rollovers are : Business a nd About NZ. Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS.... 1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1). 2. Created the structu [html] <div class="block-top"> <div class="block-tl"></div> <div class="block-tr"></div> </div> <div class="block-content"> <div class="block-ml"> <div class="block-mr"> <div class="block-center"> <p>this is some content</p> </div> </div> </div> </div> <div class="block-bottom"> <div class="block-bl"></div> <div class="block-br"></div> </div> [/html] 3. Created the CSS [css] .block-top, .block-bottom { height:10px; line-height:0; font-size:0; } .block-tl, .block-bl { float:left; height:10px; width:10px; line-height:0; font-size:0; } .block-tr, .block-br { float:right; height:10px; width:10px; line-height:0; font-size:0; } .block-center { padding:0 10px; background-color:red; } .block-content { clear:both; } .block-top { background-image:url(../images/block-light-TM.jpg); } .block-tl { background-image:url(../images/block-light-TL.jpg); } .block-tr { background-image:url(../images/block-light-TR.jpg); } .block-ml { background-image:url(../images/block-light-ML.jpg); background-repeat:repeat-y; background-position:left; } .block-mr { background-image:url(../images/block-light-MR.jpg); background-repeat:repeat-y; background-position:right; } .block-bottom { background-image:url(../images/block-light-BM.jpg); } .block-bl { background-image:url(../images/block-light-BL.jpg); } .block-br { background-image:url(../images/block-light-BR.jpg); } [/css] In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope... In IE6 the ML and MR backgrounds don't appear at all. What am I dong wrong here? Hope this wasn't too complicated to understand. NOTE: I have zero padding and margin on all the elements as well. Hi! Let's say we have this situation: Code: <div> <div class="second"> </div> </div> Is there a way to grab in CSS the first div with the help of the class second? I mean, something like this: div .second (now I get the second div but I want the first). I don't think it is possible... that's a real pity. Im I wrong? Thanks! Hey all, I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here! Notes: I'm a bit of a css beginner and I'm using Wordpress on my site. I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website). Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post. So how can I style the link without creating a link class?? Appreciate anyone's thoughts on this, Cheers! Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Trying to delete my post but no option to delete so just removing content. On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? |
|||||||