|
CSS - Load Img In Target Div (box)
*insert newbie stuff here*
got something i want to do in css that i dont even know if its possible. last time i did was in php and forgot how.lol. ok i have a side box div that i want to put links to images in and i want the images to load in another div box on the same page. so it opens the photo, just in a certain place on the page (in div id or position:absolute) is this possible in anyway? Similar TutorialsHey, I've run into a problem where I though i knew how to do it an easy way but it only worked for about 5 minutes. Here is what I have. All of my pages have the same navigation from an external PHP file. The style is saved in the main.css stylesheet. When you select a link it gets a background image. I thought that I could save my self having to edit every page for IE by doing this in the main.css stylesheet Code:
* html>#navwhatever{
/*set to gif iamge instead of PNG image*/
background-image:url('image/splash_legion.gif');
}
This doesn't work. It still uses the PNG images. I'd realy like not to have to edit every page to fix my site for IE, any suggestions would be great. Thanks for reading On this page (FAQs.html) I'm using css Code: Original - css Code *:target {background-color: #ffff00;}
*:target {background-color: #ffff00;}
to get the yellow highlight on the corresponding Q/A when you click a question. Works great in FF2, Opera, Chrome, Seamonkey, and Safari. But of course IE7 has to be a problem. It doesn't work in IE7. (Don't know about IE6, don't have that to test it on.) I've been Googling for a way to implement this effect in IE but haven't found anything. Any ideas? Thanks, Ez P.S - the text on the FAQs page is just dummy-text until i get the real content to insert. I'm using frames and I want all my anchors to launch in a separate frame. Right now I'm doing: Code: <a href="http://example.com" target="MAIN">example</a> Can I put something in my stylesheet that will automatically launch all links in the "MAIN" frame? Thanks. I'm struggling to target some headings in ie 6. They need more padding on the top as they look slightly chopped. www.efficient-heat.net/services The headings are Power Flushing and Condensing Boilers I've had a look at them in internet explorer developer toolbar and i'm seeing several paddings being applied. This suggests a conflict in the cascade. I've given the styling for the Power flushing header rule !important but that doesn't work. The headings look ok in ie 7 and ff3 How do I target these titles for styling in ie6? is there a way to set the target of a class of links using css? the html : target="_blank" is not xhtml compliant. Hi all, I'm trying to use CSS to apply style to ONLY images that are within paragraphs on my site. Code: <p> <img ... /> </p> In the past, some time ago, I thought I learned that "p img {...}" would accomplish what I'm trying to to. However, it applies the style to all images, not just images within paragraphs... Any one know any other methods? I have a couple hundred images already coded in, so just simply applying a class to the previous images isn't something I'd like to do. Thanks much, dbeg. Hi, How can I target the last element of a list. The number of items in the list is not always four. Thanks Code: <div id="mainmenu"> <div class="mod_menu"> <ul> <li>first</li> <li>second</li> <li>third</li> <li>last</li> </ul> </div> </div> Hi all, I am developing a website and kiosk display hardware. I want to target the kiosk display using a specific stylesheet. What is the best way? @media display and height:??px and width ??px or using @media ???kiosk??? etc. What other specifics can I target to define which style sheet is used? Thanks for any help. Dale. On my site I'm trying to have a messageboard within a CSS Div. While the phpBB/database is on a remote server, I think it would be easier to have it appear within the main div. Is there a way to do this? If not, I'm just going to make the messageboard appear in a new window. Thanks... Is there an equivalent to the target attribute in XHTML strict for anchor tags? new at this - learning the rope. baby steps. is there a way to set a link target to open the link in another div on the page? Hi! How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden). Thank you I just wondered if I can apply a style (background image) using css only if my href has a target assigned to it and disregard the style if target does not exist on the link I don't want to apply a class to some <a> and not to others I just wondered if I can use the css to recognise the target attribute This site..theres supposed to be a menu top-right. In IE it appears then dissappears when page finished loading! freehotsms(dot)com Html code can be viewed from the browser..heres my CSS-its quite messy and long! I think theres an JAVASCRIPT conflict but idk! THANKS..Darned IE..doesnt even support border radius Code: body {margin:0px;
}
input.rad {padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#header {
background:#ffffff;
height:auto;
border-bottom:5px solid #e71b11;
}
#inside {width:100%;
padding-top:0px;
height:211px;
clear:right;
/*border-top:5px solid #e2e2e2;
border-left:5px solid #e2e2e2;
border-right:5px solid #e2e2e2;
-moz-border-radius: 1em 1em 1em 1em;*/
margin-right:auto;
margin-left:auto;
}
#infooter {height:20px;
width:700px;
text-align:center;
margin:auto;
padding-top:10px;
}
#set {width:441px;
margin-right:auto;
margin-left:auto;
background:url(images/info.png);
height:68px;
margin-top:5px;}
td{font-family:arial;
font-size:13px;
}
#out {width:100%;
height:10px;
background:url(images/bottom.png);}
#rightlogin {
float:right;
-moz-border-radius: 0em 0em .5em .5em;
padding:5px;
background:#f7f7f7;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
margin-right:80px;}
.right_ad{height:80px;
width:auto;
float:right;
margin-top:auto;
margin-bottom:auto;
margin-right:10px;}
.somepadding {padding-left:10px;
padding-right:10px;}
.eco{width:100%;
text-align:center;
padding-right:150px;
}
img.icon{width:60px; height:60px;padding-left:10px;padding-right:10px;}
.center {margin-left:auto;
margin-right:auto;
width:468px;}
.accountbutton {
padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#button {height:17px;
width:80px;
float:left;
-moz-border-radius: 1em 1em 1em 1em;
padding:5px;
background:#0bb9ff;
margin-right:10px;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;
}
a.top:hover{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.in:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.tin:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.n:hover{text-decoration:underline;
color:#ffffff;
font-style:strong;}
a.n:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
#left_logo {width:487px;
height:211px;
background:url(images/logo.png);
float:left;
margin-left:8%;
}
#hold {width:600px;
float:left;
margin-left:346px;
}
#login {width:500px;
margin-right:auto;
margin-left:auto;
background:#f7f7f7;
-moz-border-radius: .5em .5em .5em .5em;
margin-bottom:10%;
margin-top:20px;
padding:5px;
border:2px solid #e2e2e2;
}
#log {background:#f7f7f7;
padding:10px;
}
input.o {height:35px;
width:300px;
font:28px arial;
border:1px solid #cecece;}
input.o:hover {height:35px;
width:300px;
font:28px arial;
border:1px solid #ffd35b;
background:#feff9c;}
h2.login{
font-family:Georgia;
color:#4E443C;
text-transform: none; font-weight: 100;
font-size:35px;
margin-bottom:20px;
text-align:center;
color: #000;
text-shadow: 0px 1px 1px #fff;
margin-top:10px;
margin-bottom:10px;}
#menu_container {height:25px;
padding:10px;
border-top:3px solid #e2e2e2;
width:auto;
margin-right:10px;
float:right;
background:url(images/menub.png);
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;
}
.newsletter{background:#ffffff;
width:auto;
padding:8px;}
#menuright{height:25px;
padding-top:80px;
padding:10px;
background:url(images/rig.png);
width:auto;
border-top:3px solid #e2e2e2;
float:right;
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;}
#menu_button {width:auto;
height:30px;
background:#0bb9ff;
float:left;
color:#ffffff;
font-size:13px;
font-family:Sans-serif;
padding-top:10px;
padding-left:20px;
padding-right:20px;}
#maincont{width:950px;
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
background:#f7f7f7;
min-height:800px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
border-top:2px solid #e2e2e2;
-moz-border-radius: 0em 0em .8em .8em;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
}
#bore {float:left;
width:172px;
height:74px;
background:url(images/bore.png);
clear:right;
margin-top:98px;
margin-right:10px;
}
.boretext {margin-top:34px;
text-align:center;
font-family:Georgia bold;
color:#ffffff;
font-size:15px;}
#rightcolumn {width:250px;
background:#f7f7f7;
min-height:600px;
padding-right:10px;
float:right;
margin-bottom:10px;}
#social{padding-top:10px;
padding-bottom:24px; width:190px; margin-right:auto; margin-left:auto;}
#centercolumn {width:655px;
padding:10px;
min-height:500px;
float:left;
height:auto;
background:#f7f7f7;
margin-bottom:10px;
}
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
background:#ffffff;
margin-top:1em;
min-height:500px;
.6em .6em 0em 0em;
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding:10px;
background:#f7f7f7;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
-moz-border-radius: .6em .6em 0em 0em;
}
ul.tabbernav li a
{
padding:10px;
margin-left: 3px;
-moz-border-radius: .6em .6em 0em 0em;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
}
td.images {text-align:center; color:#448; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
-moz-border-radius: .6em .6em 0em 0em;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
-moz-border-radius:.6em .6em .6em .6em;
border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
#leftcolumn {
margin-right:0px;
background:#f7f7f7;
min-height:500px;
float:left;}
.intro {height:auto;
border:2px solid #e2e2e2;
background:#f7f7f7;
margin:20px;}
.holdvideo {margin-left:auto;
width:400px;
margin-right:auto;}
.int{width:450px;
padding:10px;
margin-right:auto;
margin-left:auto;}
.testing {font-size:12px;
color:blue;
float:right;
margin:6px;
font-family:Verdana;
}
.anothercontain{width:350px;margin-right:auto;margin-left:auto;}
.containbutton {float:right;}
.containbuttonl {float:left;}
td.buttnreg {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#0261ab;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
td.buttnreg:hover {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
.scroll{overflow:auto;
height:600px;}
p.red{
font-family:Serif bold;
text-shadow: 1px 1px 2px #fff;
font-size:20px;
color:#000;
padding-bottom:6px;
margin-bottom:5px;
padding-top:6px;
text-align:center;
background:#f3f3f3;
border:2px solid #e2e2e2;
}
p.black{text-shadow: 2px 2px 3px #818173;
font-family:arial;
font-size:16px;
color:#000;
padding-bottom:10px;
margin-bottom:5px;
padding-top:16px;
text-align:center;
}
p{font-family:Verdana;
font-size:13px;
color:#000000;
margin-top:0px;
}
p.small{font-family:Sans-serif;
font-size:12px;
color:#5f5f55;
line-height:160%;
margin-top:0px;
}
p.blue{color: #448; font: bold 14px Verdana, sans-serif;}
ul {font-family:arial;
font-size:16px;
line-height:15px;
list-style-image: url(images/arrow.png);
margin-right:7px;
color:5f5f55;}
li {margin-top:7px;
margin-bottom:7px;}
#footer {-moz-border-radius: 1em 1em 0em 0em;
background:#f7f7f7;
height:40px;
clear:left;
clear:right;
border:2px solid #e2e2e2;
width:970px;
margin-right:auto;
margin-left:auto;
}
#contain {width:900px;
margin-left:auto;
margin-right:auto;}
table.fh {border-collapse:collapse;
font-size:13px;
color:#ffffff;
text-decoration:none;
width:950px;
}
.foothead { border-bottom:1px solid #f3f3f3;
height:30px;
}
tr.top {padding-top:4px;
font: strong Georgia,serif;
font-size:15px;
}
th.top {height:30px;
padding-right:50px;
text-align:left;
font: strong Georgia,serif;
font-size:15px;}
td.t {padding-right:50px;
font-style:strong;
padding:2px;
}
I have added CSS using the CoffeeCup application & believe I have succeeded....with one exception. 1 - If one goes to www.TuscanHills.co.uk/css, the CSSs load..... excellent! 2 - If one follows a link, the new CSSs don't appear on the new page. 3 - If one then does a PAGE REFRESH, the CSSs appear. .........tell me I've been stupid .........tell me I've made the same error every beginner does .........anything! Just help! I'm back... I want to click on a link and display a group of images (thumbnail) in a CSS box on the same page. For instance: lets say I have two links on my web page. I want to load different thumbnails in the same page depending upon which link I click. Make sense? Hello--I'm trying to solve a problem that I've never been able to reproduce, but my client insists that it happens for them all the time. We've just launched a new site built on PHP and Smarty Templates (I'm posting on this board because I don't think it's a PHP problem...let me know if I'm wrong about that), but with lots of javascript and css. My client sent me a screenshot (attached) which shows that all of the stylesheet-formatted text is rendered without formatting...it's coming up Times New Roman with default colors. (Please ignore the blue boxes...I masked the identifying features of the image to protect the innocent :-) ). This goes away upon refresh, but it seems to happen (though never to me) often enough that we're worried about it. Has anyone ever seen anything like this? I'll be happy to reproduce any code that anyone's interested in, but I wasn't sure where to start and I didn't want to have to display a bunch of irrelevant code. I searched the boards but couldn't find anything. Thanks in advance. Michael Schmidt I'm having some trouble around the bottom of one of my pages, where the CSS is not placing images correctly the first time the page loads. Frequently the footer is not attached to the bottom as it should be, but floating some varying number of pixels off the bottom. If I hit 'refresh' everything snaps into place as it should, but for some reason the first time it isn't working right. Here's the page I'm referring to: http://www.auroratheatre.org/show.php?prod_id=23&ref=seas (you can change that prod_id number to see the page with different queries) The photos are all pulled from a MySQL query, and the code to display them goes something like this: PHP Code: <html> <body> <div id="wrapper"> <div id="content"> <div id="col"> .... </div> <div id="main"> ... <h1>Cast</h1> <div id="cast"> <ul> <?php do { ?> <li><img src="images/headshots/<?=$row_bios['headshot']?>" /></li> <?php } while ($row_bios = mysql_fetch_assoc($bios)); ?> </ul> </div> <div class="clear"></div> <ul style="padding-top: 10px"> <li><a href="show_bios.php?prod_id=<?=$prod_id?>">read all the bios here</a></li> </ul> <div class="clear"></div> </div> <div id="photocol"> <img src="images/rightpics/<?=$rightpic?>" width="217" height="470" /> </div> </div> <div class="clear"></div> <div id="footer">...</div> </div> </body> </html> and the relevant CSS is he Code: html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
text-align: center;
}
html>body, html>body #wrapper {
height: auto;
}
#content {
width: 774px;
margin: 0px auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 403px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
width: 100%;
background-color:#000;
position: absolute;
bottom: -2px;
left: 0px;
text-align: center;
}
.clear {
clear: both;
}
#cast ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#cast li {
display: block;
width: 100px;
float: left;
text-align: center;
line-height: 70%;
}
This happens in both IE and FF - anyone have any idea what's going on, and how I could get it to load correctly the first time? Thanks, Daniel I'm having an issue where I'm displaying 3 image lines that should be inline, but on the first time the page is loaded in Firefox, the images are displayed on multiple lines (I've gotten it down to the 3rd images being displayed on a 2nd line). Once I refresh the page, the issue is gone and all 3 images sit in a row. Here's how it looks on first load : ads_bad.jpg And here's how it should look: ads_good.jpg Here's the HTML... Code: <div id="promo_ads"> <a href="#"><img src="../../Promos/deluxsprayer.jpg" alt="Promo Ad" class="promo_img"></a> <a href="#"><img src="../../Promos/halloweencandy.jpg" alt="Promo Ad" class="promo_img"></a> <a href="#"><img src="../../Promos/lawnandgarden.jpg" alt="Promo Ad" class="promo_img"></a> </div> And the relevant CSS Code:
#promo_ads {width:100%; display: block; clear: right; float: left;}
img .promo_img {display: inline; clear: none; float: left;}
Does anybody know why this is an issue in Firefox on the first load of the page? I'm designing a site: http://bargainboys.ca I use a lot of DIVs and stylesheets. The website looks great in chrome/safari/firefox... but it doesn't even load in IE! And I can't seem to narrow down the problem, even if I add/remove one element at a time. Can someone provide any feedback if they've had a similar experience? Much appreciated guys. |
|||||||