|
CSS - Aligning Linking Images With Mouseover Properties Inside A Table
http://www.kafadrian.com/juggernaut/index.html
is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
Similar TutorialsThe image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> On this page: http://www.artquestbeauty.com/css/facials.html, the images appear just the way I want them to. On this page: http://www.artquestbeauty.com/css/skintreatments.html the image of the girl in the orange dress is pushed way down in the div, though I inserted it right next to the "Back Facial" heading. I have a lot of "sandbag" divs that wrap the text around the background image and around the leftimage div. I was thinking this was the problem, but since it works fine on other pages, I'm back to square one. Can anyone see what I'm missing? THe HTML: 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <link href="wrap.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> </head> <body> <div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu"> <li><a href="../Library/index.html">Home</a> </li> <li><a href="../Library/about.html">About</a></li> <li><a href="../Library/contact">Contact Us</a></li> <li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a> <ul> <li><a href="#">Condition-Specific Treatments</a></li> <li><a href="../Library/facials">Facials</a></li> <li><a href="#">Home Care</a></li> <li><a href="#">Lash and Brow Tinting</a></li> <li><a href="#">Lash Extensions</a></li> <li><a href="#">Makeup Application</a></li> <li><a href="#">Permanent Makeup</a></li> <li><a href="#">Skin Growth Removal</a></li> <li><a href="#">Tattoos</a></li> <li><a href="#">Tattoo Removal</a></li> <li><a href="#">Waxing</a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">FAQs</a></li> </ul></div><!-- #EndLibraryItem --><div id="foot"><ul> <li>Patsy Keim </li> <li>1395 Sattler Road Suite #2</li> <li> Canyon Lake Professional Building </li> <li>Canyon Lake, TX 78132 </li> <li>830 964-4315<br /> <a href="contact.html">Contact Us</a> </li> </ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>. <!--end of foot div--></div> <div id="top"></div> <div id="intro"> <!--sandbag divs--> <div id="sb1"><span></span></div> <div id="sbr1"></div> <div id="sb2permanentmakeup"><span></span></div> <div id="sbr2"></div> <div id="sbr3"></div> <div id="sbr4"></div> <div id="sbr5"></div> <div id="sbr6"></div> <div id="sbr7"></div> <div id="sbr8"></div> <div id="sbr9"></div> <div id="sbr10"></div> <!--end sandbag divs--> <h1>Permanent Cosmetics</h1> <p>See also <a href="faq.html">FAQs</a>.</p> <p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p> <p>Call 830 964-4315 today for your free consultation!</p> <h3>A Brief History of Permanent Cosmetics</h3> <p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p> <h3><br /> Safety and Comfort Concerns</h3> <p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p> <h3>Some Permanent Cosmetic Options</h3> <p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p> <p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p> <p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p> <p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p> <h2>Call today for your free skin analysis and consultation.</h2> </div> <div id="leftimagepermanentmakeup"></div> <!--end of text div--> </div> </body> </html> Here's the css: Code: @charset "utf-8"; /* CSS Document */ html { text-align: center; } body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: center; margin: 0px; padding: 0px; } #content { position:relative; min-height:852px; z-index:1; background-image: url(images/bgdouble.jpg); background-position: right top; border: thin solid #E8D7B9; text-align: center; margin: auto; width: 1000px; background-repeat: repeat-y; } #text { top: 212px; border: medium none #069; position: absolute; height: 103px; width: 630px; text-align: justify; } #top { position:relative; width:1000px; height:215px; z-index:2; background-image: url(images/top.png); background-repeat: no-repeat; top: 30px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #leftimage { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/PerfectSkin1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; } #leftimageabout { position:absolute; width:250px; height:400px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-color: #FFF; text-align: left; list-style-image: url(images/flowerbullet.png); } #leftimagefacials { position:absolute; width:250px; height:700px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/facial.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagehomecare { position:absolute; width:250px; height:212px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/skincondition1.jpg); background-repeat: no-repeat; background-position: left top; background-color: #FFF; text-align: left; } #leftimagemakeup { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/clientphotos/makeup1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimageskintreatments { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/SkinProblem1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagestattoos { position:absolute; width:250px; height:270px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/tattoo1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagefaq { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/enzymepeel.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagelashandbrow { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/eyelashes1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #leftimagepermanentmakeup { position:absolute; width:250px; height:300px; z-index:2; left: -20px; top: 342px; border: thin double #E8D7B9; background-image: url(../Images/permanentcosmetics1.jpg); background-repeat: no-repeat; background-position: left center; background-color: #FFF; text-align: left; } #intro { position:relative; width:auto; z-index:3; top: -30px; margin-top: 0px; margin-right: auto; margin-left: auto; left: 6px; padding-left: 5px; text-align: justify; list-style-position: outside; list-style-type: disc; } h1 { font-size: 24px; font-weight: bold; color: #CAA560; font-style: oblique; letter-spacing: 0.2em; text-align: center; } h2 { font-size: 16px; color: #791B1B; font-style: italic; letter-spacing: .1em; padding-left: 24px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left top; height: 23px; } #foot { position:absolute; width:1000px; height:35px; z-index:2; bottom: -55px; padding-bottom: 0px; } #foot ul li { display: inline; list-style-type: disc; padding-left: 25px; background-image: url(images/star.png); background-repeat: no-repeat; background-position: left; } #middle { position:absolute; width:383px; height:316px; z-index:3; top: 315px; left: 249px; } #underimage { position:absolute; width:630px; height:115px; z-index:2; top: 630px; } #sb1{ width: 1px; height: 130px; float: left; clear: left; margin: 0px; padding: 0px; } #sb2 { width: 225px; height: 400px; float: left; clear: left; margin: 0px; padding: 0px; } #sbr1{ width: 375px; height: 130px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr2 { width: 375px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr3 { width: 375px; height: 20px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr4 { width: 400px; height: 120px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr5 { width: 325px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr6 { width: 375px; height: 80px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr7 { width: 475px; height: 180px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr8 { width: 365px; height: 85px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr9 { width: 350px; height: 115px; float: right; clear: right; margin: 0px; padding: 0px; } #sbr10 { width: 375px; height: 2455px; float: right; clear: right; margin: 0px; padding: 0px; } #sb2homecare { width: 225px; height: 230px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2facials { width: 225px; height: 700px; float: left; clear: left; margin: 0px; padding: 0px; list-style-image: url(images/flowerbullet.png); } #sb2makeup { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2skintreatments { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; }#sb2tattoos { width: 225px; height: 275px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2faq { width: 225px; height: 315px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2lashandbrow { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } #sb2permanentmakeup { width: 225px; height: 320px; float: left; clear: left; margin: 0px; padding: 0px; ; } .align-right { float:right; margin: 0 0 15px 15px; } .align-left { float:left; margin: 0 15px 15px 0; }
Here is another question. Is there an easy way to excluded images from displaying the link properties I've specified in the stylesheet? Basically on hover the links get a background color and underline. But I also have images that are link that I don't want to do that too. Here is the site. You can see what's happening on the images towards the bottom. Let me know if posting the code would be easier. Thanks. Have some (for me) a mysterious problem when mousing over an image inside a div. I use javascript to change the class of a div when either onMouseOver or onClick of the div. If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine. If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine. Why is that? Is there a way to make it work as I want? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="div, bug, onmouseover, onclick, image, ">
<meta name="Title" content="DIV onmouseover bug">
<meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire">
<title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title>
<style type="text/css">
body { margin:0; padding:0; }
.esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; }
.elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; }
</style>
</head>
<body>
<div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;">
<div style="display:block; margin:2px;">
MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br>
<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br>
</div>
</div>
<div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;">
<div style="display:block; margin:2px;">
Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br>
The only difference between the two divs a First DIV uses onMouseOver and second uses onClick<br><br>
I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br>
<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br>
Tested in: FF, IE, OP NE<br><br>
I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do.
</div>
</div>
</body>
</html>
Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly I am new to CSS and just experimenting with a site. I have however hit a but of a brick wall. Now the following div tags work fine in Firefox but in IE they don't align right. This is the syle info Code: div#info {
float: left;
width: 210px;
margin-top: 0px;
border-right: 1px dashed blue;
font-family: Arial;
min-height: 350px;
}
.infobox {
width: 220px;
height: 280px;
background: transparent url(images/userinfo.jpg) no-repeat top left;
text-align: left;
padding-left: 10px;
}
.userbox {
padding-top: 40px;
padding-left: 55px;
font-size: 20px;
}
.questionbox {
padding-top: 60px;
padding-left: 55px;
font-size: 20px;
}
.scorebox {
padding-top: 60px;
padding-left: 55px;
font-size: 20px;
}
Now the following code works fine in both firefox and ie. It aligns everything up. Code: <div id="info"> <div class="infobox"> <div class="userbox"> Username </div> <div class="questionbox"> Question 1 <div class="scorebox"> 3 out of 5 </div> </div> </div> However i am trying to insert some javascript into the "questionbox" tag like this Code: <div id="info"> <div class="infobox"> <div class="userbox"> Username </div> <div class="questionbox"> <form name="questionnumber"> <input type="text" name="question" size="5" readonly="true" value=""></input> <script language="JavaScript" type="text/javascript">test()</script> </form> </div> <div class="scorebox"> 3 out of 5 </div> </div> </div> Then all the alignment stays the same in firefox. However in IE the text box is moved down slightly and therefore doesn't align. Any ideas Hi all, I am attempting something new (to me at least). I have added two new images that will be backgrounds in my center content area. The first is this one . Everywhere that WAS white, I want to be this. Then, on TOP of that, and encapsulating the text itself, I want this one . Now, I thought I had this right, but it all isn't working. In FF, the first image isn't showing up at all. In IE, it shows up but is overlapping the tan area on the left by a pixel or two. In addition, all of this is way down south! I think the float: left is screwing things up, but I couldn't get anything right so I left it alone. Any help would, as always be greatly appreciated! Chris PS. URL is http://www.bartlett-family.net/BBCON/index3.html & CSS is at http://www.bartlett-family.net/BBCON/main3.css I am having two problems with my tables right now: Within the style sheet, I have the following: table { border: thin #0000CC; } If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue. This is not working... Why not? D Hi Below there are three tables. first one is separated but the second one is inside the third one. Although I have set padding and border-collapse to collapse and padding to 0px but they don't appear the same size on the screen. table 3 is bigger than table 1. is there any property that I can set to 0 so table 3 appears the same size as table 1? PHP Code: <STYLE> table{ border-collapse:collapse; } td{ padding:0px; } </STYLE> <TABLE STYLE='background-color:red;width:800px;border:1px solid black;'> <TR> <TD> </TD> </TR> </TABLE> <TABLE STYLE='background-color:red;width:800px;border:1px solid black;'> <TR> <TD> <TABLE STYLE='background-color:red;width:800px'> <TR> <TD> </TD> </TR> </TABLE> </TD> </TR> </TABLE> I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the HTML: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. On my site, I'm putting the main site navigation underneath the main pic. And I have 10 images(every single one is same height), and the images include: Left Beginning Spacer 4 Link Images 4 Mouse Over'd Images(same as previous 4, only colored diff for when the mouse is over) Right Ending Spacer But, when I go to do them all, the linked images get bigger that the spacer image, so it doesn't line up(I even defined the width and height in the img src tag). The linked images seem to even have a border around them. And finally, to boast the last spacer isn't even on the same line as the rest of the images. >.< Could someone help me out here please? I'm not sure there is something in CSS that can help me achieve what I want, but here's the link: http://s125392025.websitehome.co.uk/layout2.html Please help. Hello I know nothing about web pages but I have a class assignment to create a clothing website displaying the different types of clothing when you click on the gender button. My question is how can I add the different images after selecting the button. For example I have a menu button for accessories and want to display several pics of the accessories also showing that the quantity of the item. Please help if you can. Thanks Sup /css/. Here is the temporary build of my page. The links are dead on purpose: http://www.mindwallpictures.com/files/temp/mediachef If you click on "services" you'll see a drop down list appear. I have mouseovers on these links which make an image appear toward the top of the page. "web&graphic, film&video, etc..." However, the links for 'portfolio', 'about us' and 'contact us' should also have this same mouseover effect. But they do not work. I believe this is a problem with my css and not the javascript, because when I swap out a mouseover command of one of the non-working links for one of the working links, the image will appear. It seems to not want to toggle those particular divs. Here is the javascript code: Code:
<script language="Javascript" type="">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
The related css: Code: #webgraphic {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/webgraphic.gif);}
#filmvideo {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/filmvideo.gif);}
#musicaudio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/musicaudio.gif);}
#photography {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/photography.gif);}
#portfolio {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/portfolio.gif);}
#about {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/about.gif);}
#contact {position:absolute; top:25px; left:179px; width:58px; height:382px; visibility:hidden; background:url(images/contact.gif);}
and the xhtml: Code:
<div class="sidemenu">
<div id="links">
<div><a href="/">home</a></div>
<a href="javascript:animatedcollapse.toggle('services')">services</a></div>
<div id="services">
<a href="#" onmouseover="toggleDiv('webgraphic',1)" onmouseout="toggleDiv('webgraphic',0)">web & graphic</a><br />
<a href="#" onmouseover="toggleDiv('filmvideo',1)" onmouseout="toggleDiv('filmvideo',0)">film & video</a><br />
<a href="#" onmouseover="toggleDiv('musicaudio',1)" onmouseout="toggleDiv('musicaudio',0)">music & audio</a><br />
<a href="#" onmouseover="toggleDiv('photography',1)" onmouseout="toggleDiv('photography',0)">photography</a>
</div>
<div id="links">
<div><a href="#" onmouseover="toggleDiv('portfolio',1)" onmouseout="toggleDiv('portfolio',0)">portfolio</a></div>
<div><a href="#" onmouseover="toggleDiv('about',1)" onmouseout="toggleDiv('about',0)">about us</a></div>
<div><a href="#" onmouseover="toggleDiv('contact',1)" onmouseout="toggleDiv('contact',0)">contact us</a></div>
</div>
</div>
It acts as if it's a problem with syntax, but I don't see any errors and my code is validated. Any help would be greatly appreciated. Thanks. Have a look at this menu: http://elliottback.com/wp/wp-conten...e-x/googlex.htm Is it possible to achieve that effect using a navbar (marked up as a list), and using CSS rather than javascript? Please provide examples / links. I'm trying to use the CSS hover state that I found on CSS Ninja, but for some reason when I hover over the images, they keep bumping upward. I've gone line by line trying to figure out which one it is, and I think it's the position:absolute line under a.feature01 .overlay01 .caption01; however, I can't get it to stop doing it even if I change the position to relative, fixed, etc. I ran it through the CSS validator as well and got no errors. Here is the CSS code Code: a.feature01
{
display: block;
position: relative;
}
a.feature01:hover .overlay01
{
position: absolute;
width: 185px;
height: 130px;
}
a.feature01 .overlay01 .caption01
{
position: absolute;
height: 30px;
line-height: 30px;
width: 100%;
text-indent: -9999em;
color: #000;
font-size: 11px;
bottom: 0;
overflow: hidden;
}
a.feature01:hover .caption01
{
text-indent: 10px;
background: rgb(255,255,255);
/* for browsers that know rgba */
background: rgba(255, 255, 255, 0.75);
}
Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images- Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size. -Images displayed correctly- This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right. Code:
/* Set the style for image(s) displayed */
img.left
{
margin-left: 10em;
}
img.center
{
margin-left: 3em;
img.right
{
margin-left: 3em;
}
Hope that makes sense, Gerbill Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... Hi! I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped. I've set up a test page so you can see what is happening. the site is at test .sylvaindelisle .com Thanks for taking the time to take a look. After putting a js slideshow at the top of the page I am having trouble getting anything to right of it. Every defaults to the next line. Any tips? Thank you! tinassweetshop.com Hello, I am trying to get two images aligned inside a table cell as a top and bottom background element. I know with CSS you can't have two background elements, so I was playing with relative and absolute positioning. Unfortunately, I was unsuccessful, as the positioning wouldn't refer to the diameter of the cell. I have an image demonstrating what I am looking for. The shaded area represents the two images (a bottom and top quote) that I want to align to the top and bottom. I can't simply make this a single image since the information on the left will be different heights. I also noted the table layout in the lower example if there are any questions in that regard. http://www.forma3.com/stuff/css_question.png Thanks so much! |
|||||||