|
CSS - Image - Being Pushed Out The Way
Hi,
I think I know the problem, or at least one of the problems. The arrows are actually sitting inline with the main image, not behind. As a result they are forcing the main image off to the right side. Here is the code: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controlsx">
<ul id="control-buttonsx">
<li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
<li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
<li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blankx.png"}"
alt="{g->text text="."}" id="main-image" /></p>
</div>
{/if}
Here is an image showing the problem: Im sure there is code to make them sit on top of each other, is it something to do with the overflow or position: relevant tag? Similar TutorialsHi. Simple issue really. I have an image 14px x 8 px. The box created for the image is correct, but the image is being forced off its image space because there is a gap on the left side of the image (3px). I cannot find any mention of this space in the stylesheet. Here is a link to my page: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14 Here are the two images in question: http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-left.png http://www.zombiemod.com/rm/nina2/themes/ajaxian/images/controls-right.png In summary, the entire image isnt being display properly, it is being padded one side and cropped the other side. Here is my HTML: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
Here is my CSS: Code: #slideshow-controlsx {
position: relative;
height: 14px;
margin: 0px 0 -58px;
overflow: hidden;
z-index: 100;
text-align: left;
top:200px;
}
#main-image-container > #slideshow-controlsx {
margin-bottom: -50px;
margin:0 auto;
}
#slideshow-controlsx ul {
position: relative;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none inside;
width:690px;
/* background-color: #000;*/
/* opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=40); Lower opacity for IE since the controls don't hide */
}
#slideshow-controlsx ul li {
float: left;
margin: 0;
padding: 0;
}
#slideshow-controlsx button {
width: 8px;
height: 14px;
/*margin: 0;
padding: 0;*/
/* background-color: #000;*/
padding:0px;
border: none;
text-align: center;
cursor: pointer;
}
Can anyone help me out with this please? Its driving me nuts! James My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this? Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this: Code: <div id="main-image-container">
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blank.png"}"
alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
</div>
I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes. How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns? This is the CSS: Code: /*container div*/
#container {
width: 770px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0; margin-top: 0;
padding: 0px;
text-align: left;
font-size: 11px;
}
#contentleft {
width: 180px;
background: #fff;
float: left;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
#contentcenter {
width: 454px;
padding: 0px;
float: left;
margin: 0;
}
#contentright {
width: 136px;
padding: 0px;
float: right;
margin: 0;
border-left: 1px solid #000; border-right: 1px solid #000;
}
Hi, I have been having trouble fixing the coding on my site to be able to withhold the same content size while the window is being re-sized. Before I added min-width: 800px to my main content, it was being squeezed by the sidebar to force the letters/images to the left. Now with the code implemented, the sidebar reacts differently. It is being forced to the bottom as it meets the min-width of the content. Site: Diablo 3 Kore - Please google it - [can't link yet] CSS: /* Content */ #fw-bigcontain {padding: 3px; min-width: 800px; float:right;} #fw-columnContainer {} #fw-mainColumn {margin: 0px;} #fw-paragraph {} .fw-paragraphtop {} .fw-text {} h3.fw-title {background: url(()) no-repeat scroll;color: white; font-size: 17pt; font-family: 'Clarendon Cn BT';} /* Sidebar */ #fw-sidebar h3.fw-title {background: url(() no-repeat left center; font-size: 14px; margin-bottom: -8px; height: 13px;} #fw-sidebar {min-width: 245px; float: right; background:black; padding: 7px;} #fw-sidebar li {} .hasSidebar #fw-sidebar .fw-title {font-size: 12pt; font-family: 'SonicCutThru Hv BT';} /* end sidebars */ I haven't seen any css code I implemented that I could carry over to the sidebar code that could do the same thing. Well, please help me resolve this issue. Thank you. IE CSS Problem. sidebar getting pushed to bottom... I'm working on my new blog. Moding a template from wpdesigner.com http://www.mymovetoeurope.com/ The sidebar menu that is suppose to be on the right gets slipped to the bottom, but it's only for IE 6.0, don't have 7.0 installed. I tried using absolute positioning for the right bar, but it didn't do anything. When there were a lot of content in the sidebar and I increased the container size, it did push the menu back up, but the menu started at the edge of the header. I want to have it so the first right sidebar is under the header. Can someone tell me what's wrong? Thanks. I have a header box contained within a "wrap" box in the usual IE kludge to get it to deal with padding and centering consistently. When the page loads, I can see a small (approx 50px) blue-outlined box flash up. My header is specified as 738px wide, not about 50px, but it is blue-bordered. Wrap has no border. In Firefox, the weird box then moves to the top of the screen, and things load as they should. The box disappears under the other elements. In Blogger (this is actually a Blogger template), the small box first appears about half an inch down the screen, and then the page loads from that point down, and I'm left with half an inch of background I don't want. (page is he http://acid-test.blogspot.com if you'd like to see what I mean.) The behavior seems to be the same in IE. The little box disappears, as in Firefox, but seems to set the top of the page in some strange way. Is there a command I can use in the stylesheet to force the elements to move to the top of the page? Is there any way I can find out what the weird little box is? And get rid of it? Does anyone have a clue what's going on? I sure don't. Thanks for any help you folks can give me! Hello. I have a page that has 3 main elements: a left nav menu (with float:left), a main contents section (with margin-left: 250px, and lines up beside the left nav menu), and a links section which embeds inside the content section. In IE7 and Firefox, the page displays correctly. In IE 6, the links section displays inside the content section, but the top of the links section lines up with the bottom of the left menu. What would cause this? 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; }
Hi! Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit. Basicly, this sums up the issue: (sorry for the pure-text link, it didn't allow me to put up a propper one... >.<) http://img205.imageshack.us/my.php?image=cssiebug.png So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that. Here is the code that should be of interest in this issue: Code:
<div id="bannerContent">
<!--{{{-->
<div id="logo">
<a href="<?PHP echo $home ?>" target="_self"></a>
</div>
<div id="search">
<form>
<input type="text" class="searchField" name="uSearchQuery">
<input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
</form>
</div>
<!--}}}-->
</div>
Code:
#bannerContent
/*{{{*/
{
width: 800px;
height: 158px;
}
#logo
/*{{{*/
{
background: url("../images/layout/logo.png") no-repeat;
width: 394px;
height: 56px;
position: relative;
top: 51px;
left: 24px;
float: left;
}
/*}}}*/
#search
/*{{{*/
{
width: 331px;
height: 32px;
position: relative;
top: 62px;
left: 58px;
display: inline;
float: left;
}
.searchField
{
background: url("../images/layout/search_field_bg.png") no-repeat;
width: 266px;
height: 32px;
border: none;
outline: none;
float: left;
<?PHP
if (!$agentIE && !$agentFF)
echo 'padding-left: 10px;' . "\n";
else
echo 'padding: 8px 0 0 10px;' . "\n";
?>
}
.searchSubmit
{
background: url("../images/layout/search_button.png") no-repeat;
width: 55px;
height: 32px;
margin-left: -10px;
border: none;
outline: none;
cursor: pointer;
float: left;
}
/*}}}*/
/*}}}*/
Thanks a bunch in advance! Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. Trying to delete my post but no option to delete so just removing content. Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? |
|||||||