|
CSS - Image And Nav Not Showing Up Properly In The Div
I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div.
The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky Similar TutorialsI am working on this website babeside dot be Everything is going as I want it in all browsers, except IE. When opening the website in IE, and selecting a babe, the babe-part is shown waaaaay underneath all the other parts of the site. Can anyone help me how to fix this? Hey Everyone, I was wondering if anyone could take a quick look at my Style Sheet and let me know I can do to improve and why it isn't working in all browser's... It works great in most browser's but then there is explorer, and it doesn't seem to work fine in there... Here it is and I would really appreciate it if someone could look at it for me, thanks... Nick Hi, my site is not showing properly in IE, but looks great in Firefox, I know it is the floats, but why I don't know since I cleared them both This is my doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> here is the code I am using in the php page <? include ("header.txt"); ?> <div id="page"> <div id="headerimg"> </div> <div id="topbar"> </div> <div id="content"> <table summary="main content" width="90%"><tr><td> <p align="justify"><span>Welcome to Call Me Farms, your first choice in breeding for Australian Cattle dogs, Border Collies, and Rat Terriers. Located in Parrish, Florida, Call Me Farms takes pride in bringing you the very best there is to offer in these breeds.</span></p> <p align="justify"><span>Here at Call Me Farms we breed for Ability, Beauty, Brawn. My dogs are tested-OFA Hips, Elbows, Prcd and we have a lot of proven finished Champions that are my best buds. My dogs are in all kinds of venues-agility-herding-flyball-protection-conformation and just being a good dog and your best friend. We have produced five generations of Champions and over 34 home bred Champions. I say it's a good start.</span></p> <p align="justify"><span>Here in our site you will find all the information you will need about our breeds, from confirmation through companionship. There are all the latest updates on how well my dogs are doing in competitions, as well as when the puppies are available. Photos of my dogs abound so you can see how beautiful and well bred they are. There is also a page on my foundation dogs, which started it all.</span></p> <div id="currentevents"> </div> <div style="height: 350px; width: 500px; overflow: auto"> <!--UPDATES BEGIN HERE--> <? include ("update.txt"); ?> <!--UPDATES END HERE--> </div> <div id="publications"> </div> <div align="center"> <p align="justify">These are just some of the publications our dogs have appeared in. They have also appeared in numerous calendars, greeting cards, note cards, stationary, and more!</p> <br /> <br /> <img src="images/books.jpg" alt="Publications" width="500" height="100" /><br /> <br /> <br /> <br /> <? include ("footer.txt"); ?> <br /> </div> </td></tr></table> </div> <div id="sidebar"> <div align="center"> <? include ("menu.txt"); ?> <br /> <br /> <table summary="Recommend Us" class="textbox1" width="200" align="center"> <tr> <td valign="top" class="textboxheader"> <div align="center"> Recommend Us </div> </td> </tr> <tr> <td> <div align="center"> <br /> <form method="post" action="cgi-bin/recommend.cgi"> <small>Friends Name:</small><br /> <input type="text" name="recipient_name" size="15" class="input" /><br /> <small>Friends Email Address:</small><br /> <input type="text" name="recipient_email" size="15" class="input" /><br /> <small>Your Name:</small><br /> <input type="text" name="sender_name" size="15" class="input" /><br /> <small>Your Email Address:</small><br /> <input type="text" name="sender_email" size="15" class="input" /><br /> <br /> <input size="1" type="submit" class="button" value="Submit" /> </form> </div> </td> </tr> </table> <br /> <br /> <small>last updated<br /> <script type="text/javascript" language="JavaScript" src="java/update.js"> </script> </small> <br /> <br /> <!--HIDDEN LINKS REQUIRED FOR COUNTER--> <a href="(URL address blocked: See forum rules)"></a><a href="(URL address blocked: See forum rules)"></a> <!--END HIDDEN LINKS FOR COUNTER--> <a href="(URL address blocked: See forum rules)"><img border="0" src="(URL address blocked: See forum rules)=1308498&c=3925807" alt="Website Visitor Counter" /></a><br /> <small>visitors</small> </div> </div> <div class="clear"> </div> <div id="footer"> </div> </div> </body> </html> and here is the css /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; } #sidebar { float : left; width : 250px; height : auto; padding : 0; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 250px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } at this point I am totally clueless as to what is the problem here, any help would be most appreciated....thanks!! Hello Can u hlp me please? have look at www.verexelto.sk/test/test1.php - this is good version of the page but without any text in the footer. after i try tu put any content into footer (f.e. some text) the page wil not do this properly (the way i want it :-) ) have look at www.verexelto.sk/test/test.php (scroll down) What should i have to do , what am i doing wrong? Thank you I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us. The link is The problem link Thanks im trying to get the menu tabs to line up properly, if you notice they are slightly floating higher than they should and was stuck in trying to figure out how to fix this. here is my css code i used: Code:
a:hover#index, a:hover#search, a:hover#ucp, a:hover#members {
background: url("./images/home-button.gif") 0 0 no-repeat;
background: url("./images/design-and-engineering-button.gif") 0 0 no-repeat;
background: url("./images/how-to-rebuild-button.gif") 0 0 no-repeat;
background:url("./images/installation-button.gif") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#articles {
width: 77px;
height: 28px;
float: left;
}
a#index {
background: url("./images/home-gray.gif") 0 0 no-repeat;
}
a#design {
background: url("./images/design-and-engineering-gray.gif") 0 0 no-repeat;
}
a#howto {
background: url("./images/how-to-rebuild-gray.gif") 0 0 no-repeat;
}
a#articles {
background:url("./images/installation-gray.gif") 0 0 no-repeat;
}
Hi, I'm having an issue with the image not laying out properly. Please go here http://sixtwentyfour.com/ See how "November's Issue" is overlapping my paragraph background? I want it contained within the paragraphs, not outside. Could someone please point out what I'm doing incorrectly or otherwise lead me in the right direction? Thanks. Hello all - I am currently having a problem with a background image not being repeated properly. There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y. The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper. Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help! The CSS code: Code:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
div#topbg
{
width: 100%;
height: 145px;
background : url(../images/top-bg.gif) repeat-x top left;
}
div#leftbg
{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background : url(../images/left-bg.gif) repeat-y;
}
div#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 758px;
height: 100%;
margin: 0px;
padding: 0px;
background: url(../images/bg.jpg) no-repeat top left;
}
div#container
{
padding: 145px 0px 0px 125px;
}
div#content
{
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}
The HTML code: Code: <body> <div id="topbg"></div> <div id="leftbg"></div> <div id="wrapper"> <div id="container"> <div id="text">content</div> </div> </div> I have edited this page down to be bare-bones for ease... The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made. When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education. http://www.centerpointpilates.com/welcome2.html code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding">
<h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content">
<div id="navigation">
<ul>
<li><a href="/welcome.html">WELCOME</a></li>
<li><a href="/studio.html">STUDIO</a></li>
<li><a href="/getting-started.html">GETTING STARTED</a></li>
<li><a href="/classes.html">CLASSES</a></li>
<li><a href="/schedule.html">CLASS SCHEDULE</a></li>
<li><a href="/workshops.html">WORKSHOPS</a></li>
<li><a href="/pricing.html">PRICING</a></li>
<li><a href="/instructors.html">TEACHERS</a></li>
<li><a href="/contact-us.html">CONTACT US</a></li>
</ul>
</div>
<!--end navigation-->
<div id="text">
<h2>Welcome</h2>
<p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each
individual on a program of exercising the body and mind. Our certified teachers
provide exceptional guidance in private, group, and class settings. The
studio is equipped with classic and contemporary exercise apparatus and
boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>
</div>
<!--end text-->
</div>
<!--end content-->
</body>
</html>
style sheet code: Code:
/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
list-style: none;
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Removes list-style from lists */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
text-align: left;
}
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
/* normalizes links */
a:link {
text-decoration: none;
color: #6b9d98;
}
a:hover {
color: red;
}
a:visited {
text-decoration: none;
color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
background-color: #F6EEC2;
text-align: center;
}
body {
font-family: Arial, sans-serif, Geneva, sans-serif;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: relative;
}
bodyBold {
font-family: Arial, sans-serif, Geneva, sans-serif;
font-weight: 700;
color: #6B9D98;
width: 770px;
margin: 0 auto;
margin-left: 10px;
text-align: left;
position: absolute;
}
/*html#orchid {
background-image: url(/images/orchidYellowOverlay2.jpg);
background-repeat: no-repeat;
background-position: top left;
}*/
#branding {
background: url(images/logo.gif) top left no-repeat;
text-indent: -9999px;
height: 70px;
margin: 0 0 30px 0;
}
div#content {
position: relative;
width: 100%;
}
div#navigation {
position: absolute;
left: 0;
width: 13%;
padding-top: 1em;
}
div#navigation li {
font-weight: bold;
font-size: .9em;
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: center;
margin: 0 0 20px 0;
}
div#text {
position: absolute;
left: 17%;
width: 80%;
border-left: 1px solid #6B9D98;
padding-left: 10px;
}
div#site_info{
text-align: center;
margin-top: 10px;
font-family: Arial, sans-serif, Geneva, sans-serif;
font-size: .9em;
font-style: italic;
color: #6B9D98;
padding-bottom: 3px;
}
h2 {
font-size: 1.35em;
}
indentBox {
border: 1px solid #6B9D98;
width: 115px;
padding-bottom: 3px;
padding-top: 3px;
text-align: left;
margin: 0 0 0 0;
}
Hello, im trying to do some 3column layout with css menu, but in the middle column i have <div class="attachment_pdf"><a href="/xxx/xxx.pdf">XYZ (PDF, 2 MB )</a></div and in this div there is a background image of pdf icon. Everything works in Firefox, Mozzilas but in same cases on IE they are not shown. If i have 10 icons, 3 of them are not shown. After i go with mouseover on the link, i can see them, or if i scroll the window some of them are showing... have somebody met this problem? Or where can be problem? I know, that maybe you have to see the css, and its rather complicated. Thanx. I have an image in div that is on z-index layer. I did this to avoid cutting it up in smaller images. I finally got it to position correctly in my layout, now it won't show in FF. here is a link to the page in progress: http://www.rustbug.com/the19thhole/index.html Any suggestions? The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why? JOhn Hi everyone, I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code. Code: #logo{
background-image: url('logo.png');
background-repeat: no-repeat;
}
#logo .text{
letter-spacing: -0.1em;
font-weight: bold;
font-size: 21px;
text-align: left;
color: #FFFFFF;
}
That does not work, however, this does. Code: <img src="logo.png" alt="Logo" /> Any suggestions? I'm using the "hacked" version IE6 since I have IE7 installed. I designed a web page with a really strange problem. I've created a "div popup" that shows an image and some text when you click on a link but the image doesn't appear in IE6 until you right click and choose "show picture". And even then, the combo box in the background still shines through. Any suggestions? wwwDOTstoneycreekrentalsDOTcomSLASHequipmentDOTasp (Then search for dozers) Here's the CSS I'm using: Code:
div#popup {
background-color: black;
color:white;
display:none;
font-size:small;
margin-left: auto;
margin-right: auto;
padding:5px;
position:absolute;
text-align:center;
width:736px;
z-index:1;
}
And my javascript: Code:
<script type="text/javascript">
function popupDiv(str){
var popup = document.getElementById('popup');
popup.style.display='block';
popup.style.top=27+'px';
popup.style.zIndex=1002;
popup.innerHTML = str + '<br /><a href="javascript:void(0)" onClick="document.getElementById(\'popup\').style.display=\'none\'">Close</a>';
}
</script>
For some reason no matter how I structure the code, I cannot get a background image to show up and I'm not sure why. Here is my current code:
Code: background: #cccccc url(/dir/bg.png) repeat-y; I've checked multiple sites just to verify that my code is correct, and it is. I've also tried the code another way: Code: background-color: #cccccc; background-image: url(/dir/bg.png); background-repeat: repeat-y; The image is uploaded to the correct directory as well. Any ideas? I am having trouble with my CSS mouse over links. XHTML and CSS3 both validate. However the large image for the mouse over isn't showing. I have check everything I can think of and still am totally unable to figure it out. It has been years since I have built a web page and am trying again so this site has not been published as of yet but is still accessible to look at. Below is the link to my site and the external CSS style sheet. I also have CSS code on the XHTML page as well. Could someone please take a look and see what I am over looking? Thank You Selena I made a mistake.. I'm not a student. simplyselena.com and external style is simplyselena.com/css/styles.css Sorry the above is the only way I could put url in not allowed to post url's as I am a new user account. I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela |
|||||||