|
CSS - Adding Another Bg Image Proving Difficult
Hmmmmm... This one has me stumped.
Check out http://www.chrisbartlett.net/fd/fd/short.html please. That site is 100% perfect as far as the guy I'm building it for is concerned. But it is missing something. Now have a look at http://www.chrisbartlett.net/fd/fd/ in IE. See the "shadow" on the right? That tiny little arrow-looking image? In IE, I've gotten the image positioned close. I still want to drop it 10px below the top of the adjoining border. And it's still not even appearing in FF or Opera. And in all 3 browsers, I still have the problem with the entire outterbox being pushed down, which I solved with a "display: inline;", but when I do that, it disappears in IE, too! Every which way I turn, something goes wrong. Argh. Any thoughts, please? In a nutshell, it needs to look like this: Thanks! Chris Similar TutorialsHi guys, I think this a pretty basic layout which I am trying to achieve. I want to center an inmage horizontally. Then I want to float other images to the left and right of it, but the center image must always remain in the center regardless of how many images are displayed. I just can't do it - any clues would be appreciated. Thanks, Rob. hello ! I've got an issue with my footer on the page, it's floating sometimes through the main text that happen only in cases when main content (right side) is too short e.g.: http://www.autobazareeu.sk/error.php?2 can you advice something how to align footer on bottom of the page ? i think it's aligned right now by the height of main column and if it's too short it seems bad is there any chance to align footer by height of main content or left content, that would be best... thanx in advance I have the terrible feeling that I will not be able to explain this properly but I will try my best. It's simple enough to make a layout with colloms using css, just by floating two or three divs, but what if I wanted to make multiple collums out of one bit of text? Kind of like when your writing in a word processer that you've set to use two colums, when your writing fills up the first it just goes strait into the second. This is best explained by example. Please see http://www.drudolph.org/new/test.php for a proof of concept. Basically, there's an outside layer (red border) that contains several layers inside (blue borders), and is styled so that it has fixed dimensions and can scroll vertically if necessary. Over the blue layers, I want to position another layer (green box). This layer should move with the blue boxes, so that if you scroll up and down, the green box stays with it. On top of that - and here's the kicker - the green box, which will be large enough that it sometimes will expand beyond the outside red layer, should be completely visible. So, the green layer needs to 1.) move relative to the blue layer but 2.) be seen outside the parent red layer at all times. You can see on the test two attempts. One puts the green layer in with the blue layers, so that it can be positioned relatively. Unfortunately, this puts it "inside" the red "stack," so I don't believe any z-indexing will allow it to show outside of the red layer. The second attempt puts the green div along side the red div, or on the same "stacking level." This allows you to use a z-index to put it above the red layer, but then it can't scroll relative to the blue layers inside. So, at this point, I believe it's impossible to do. Thoughts? I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link Hello, I am running wordpress and I have a Twitter Widget known as Twitter Widget Pro. What I've done is that I made a graphic (a little TV with a twitter bird on top) to serve as a background image but be positioned right behind my Twitter widget so the twitter feed fits inside the tv. I got this positioned correctly on the front page in my style.css sheet. But as I go to my other pages: photos, travels, etc. the format of my site changes and therefore the background image (tv) and the Twitter feed don't align properly. How can I code the background image of the tv and the twitter widget to align properly together on all my pages? Would I have to insert the image into the actual twitter-widget-pro code itself? My website is: (w w w.stefantrego.com) Thanks a lot for the help! -Stefan Does anyone no some really good resources of info for adding css to xml. I promise once I become more versed in the mechanical rather than graphical side of web design, I'll start giving back more. But untill then... I have several div's, all absolutly positioned, but I need this one, (see attached picture) it is the bottem right div, that will have several above and several div's above it. I need to know how to do this without absolute positioning. Because with absolute positioning, I would have to manually resize each time I do an update. Thanks, -Sam I am wondering if it is possible to include a line break within the content area of the :after pseudo element. I would like to create a class that adds text following an image, i.e. .click_for_larger:after { font-size: 0.8em; content:"<br />- Click for larger version -"; } Of course, in this example the "<br />" would be printed. Is there any way to indicate that there should be a line break before the text is displayed? Cheers - george I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! How can this be fixed? Code:
<table border=5 cellpadding="0" cellspacing="5" bordercolor="#cc66cc" >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
firefox is doing like a bordercolorlight/dark combo out of my bordercolor, but IE is fine.. see ss's. I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container {
width:770px;
margin:0px auto 0px auto;
background:#ffffff;
text-align:left;
}
#header {
position:relative;
width:770px;
height:109px;
background-image:url(images/header.jpg);
background-color:#ffffff;
text-align:center;
}
div#leftcontainer {
float:left;
width:190px;
background-color:#ffffff;
}
div.leftcontent {
width:190px;
background-color:#004994;
padding-left:5px;
padding-right:5px;
}
div#centercontainer {
margin-top:3px;
float:right;
width:570px;
background-color:#ffffff;
padding:0px;
}
div.centercontent {
width:560px;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
}
#footer {
clear:both;
padding:4px;
width:770px;
font-size:.8em;
font-family:arial, sans-serif, courier;
color:#ffff00;
background-color:#004994;
margin:0px 0px 20px 0px;
}
Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. hi I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan I want to add some color to my HR's. Here's what I do to support IE and Netscape: Code:
hr {
width:400px;
height:5px;
color:green; /* IE */
background-color:green; /* NS */
}
Which is the web standard? Color or background-color? I have set up some links at the top of the page, and to make them appear more like buttons I have applied a background colour and border around them. Works a treat in Opera, Mozilla but IE is only showing the side border.. If I add a display type of BLOCK they run down the page as I expected but the borders are added right the way around. I have loaded the code for people to look at, from what I can see Im doing it correct, but not correct enough it seems. Code:
CSS
#nav {
position: absolute;
width: auto;
top: 112px;
left: 10px;
background-color: #ffffff;
z-index: 4;
}
/* If I add ':link' to the top selector the background and all borders drop off aswell as colour.*/
#nav a {
color: #203F71;
font-weight: bold;
text-decoration: none;
background-color: #FFFF00;
border: solid 1px #000000;
padding: 1px 5px;
}
#nav a:hover {
color: #FFFF00;
text-decoration: none;
background-color: #203F71
}
#nav a:active {
color: #203F71;
font-weight: bold;
text-decoration: none;
}
HTML
<div id="nav"><a href="#2" class="navLink">Property Search</a> <a href="#3">Services</a> <a href="#4">Holiday Letting</a> <a href="#5">Bayside Team</a> <a href="#6">Contact Us</a></div>
For some reason, when the image with the title of the page is two lines, in this case "Tax Service and Consultation" it bumps the content down in the div to the right, but only in IE and only if it is on two lines. I have an image illustrating what I mean but this awesome site won't let me post web addresses on it, WTF? I can send anyone a link to explain what I mean. The css and html validates. I cannot figure out what I am missing with this. Any help or suggestions will be greatly appreciated Thanks, Billy hi im trying to add the class "current" from this menu Code: http://www.cssplay.co.uk/menus/pro_dropline.html second example Quote: ...with top level 'current selection' tab to this menu Code: http://www.cssplay.co.uk/menus/pro_left_right_line.html appreciate any help Hi all, with your great help, the pages looks now almost fine in both IE and FF. But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential. So, is there please any solution to handle this? And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>. Here are CSS used: Fotogalerie.css, Web.css. Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before ) Hi, I have a new template, and a new separate menu; the code has been validated on both. I'm having trouble adding the new menu to the new template, replacing the menu that came with the template. What I would like to do is embed it if possible so when I add content I won't have to change the menu on 400 different pages; also this is a nice menu with lots of code in the html. Is it possible to embed a menu from a root file with a small code? If not how do I add the huge code to my template? I have tried putting it on the top but the drop down doesn't work and parts of it are obscured by the content on my page. If I put the menu about half way down my page it works alright, but I need it on the top. (I tried to post the urls below but the forum rules prevent new members from doing so.) I know this is a lot of info, but I hope you can help me, if so I really appreciate it. Thanks, Dave Hello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? |
|||||||