|
CSS - Getting Rid Of Display On Images
Similar TutorialsI use css to code my web layout and I also can view all images on Dreamweaver. However, when I view my web layout on Browsers( Firefox, IE), nothing appears. My code for HTML is: Code: <html> <head> <title>Hung</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="/template/style.css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="whitebody"> </div> <div id="footer"></div> </div> </body> </html> And MY CSS CODE is: Code: body{
color:#FFF;
margin: 0px;
padding:0px;
}
#container{
background-position:center;
}
#header{
background:url(/template/images/header.gif);
background-repeat: no-repeat;
width: 800px;
height: 80px;
}
#menu{
background-image:url(/template/images/menu.gif);
background-repeat:no-repeat;
width: 800px;
height: 55px;
}
#whitebody{
background-image:url(/template/images/backgroundbdoy.gif);
background-repeat:no-repeat;
width: 800px;
height: 441px;
}
#footer{
background-image:url(/template/images/footer.gif);
background-repeat:no-repeat;
width: 800px;
height: 24px;
}
If the paths of images are wrong, I can not view on Dreamweaver but I can. What wrong have I done ? please let me know and possibly give me a solution as you can. Thank you very much. I really need help here. I'm using some php script to generate the pictures and titles as seen below: img30.imageshack.us/i/capture1ar.jpg/ (can't post images or urls =/) I styled it using CSS and the CSS portion turned out something like these: PHP Code: div.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;} div.related-posts li{width:150px; float:left; margin-right:15px; padding:0;} div.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;} div.related-posts a{display:inline-block; border:none; text-decoration:none;} div.related-posts li{font-size:12px;} This is somewhat how the thing is displayed: PHP Code: <li> <//a href="article link" rel="bookmark"> <img src="image" alt="Example post 3" /> </a> <li> <//a href="article link" rel="bookmark"> <img src="image" alt="Example post 3" /> </a> Weirdly though, only if the first image has a title that is two lines long, the image placement gets screwed up. If the first and last image does have two lines, everything seems right! This is killing me!!! HELP. =/ I ain't a CSS coder or php genius, in fact i do not have much knowledge in this field and more likely a copy-paste-edit kind of person. So the css and and php code is copied and edited from someone else. Any ideas to make sure everything is inline? hello, I want the right arrow to be displayed on the same line as the slide show. Any suggestions as to how to do so? below is the CSS and the HTML. 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> <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script> <link type="text/css" href="scrollable.css" rel="stylesheet" /> <script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // initialize scrollable $("div.scrollable").scrollable(); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .leftbutton {width: 30px; float:left; margin-top:30px;} .rightbutton {display:inline;} </style> </head> <body> <!-- "previous page" action --> <a class="prevPage browse left leftbutton"><img src="left.png" /></a> <!-- root element for scrollable --> <div class="scrollable inline"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /> <!-- 5-10 --> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" /> <!-- 10-15 --> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" /> </div> </div> <!-- "next page" action --> <a class="nextPage browse right rightbutton"><img src="right.png" /></a> </body> </html>
Here is the CSS: Code: /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position:relative; overflow:hidden; width: 680px; height:120px; /* custom decorations */ border:1px solid #ccc; background:url(/img/global/gradient/h300.png) repeat-x;} /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; } /* single scrollable item */ .scrollable img { float:left; margin:20px 5px 20px 21px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:100px; height:75px; -moz-border-radius:4px; -webkit-border-radius:4px; } /* active item */ .scrollable .active { border:2px solid #000; z-index:9999; position:relative; }
I am working on a drupal site and I having problems getting some images in a block to display inline. I am able to effect some of the aspects of the images (they are list items in a ul) but I can't get them to display inline. Here is the html from the source: <div id="block-views-recent_images" class="block block-views"> <div class="blockinner"> <h2 class="title"> recent images </h2> <div class="content"> <div class='view view-recent-images'><div class='view-content view-content-recent-images'><div class="item-list"><ul><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/204"><img src="(xxxxxx) image_0.jpg" alt="" title="" /></a></div></div> </li><li><div class='view-item view-item-recent-images'><div class='view-field view-data-node-data-field-user-images-field-user-images-fid'><a href="/image-upload/admin/05-sep-2007/201"><img src="(xxxxxxx) image.jpg" alt="shack" title="some image" /></a></div></div> </li></ul></div></div><div class='more-link'><a href="/recent_images">more</a></div></div> And here is the css that I have attempted so far: #block-views-recent_images { background: #EBE9ED; } #block-views-recent_images li{ list-style-image: none; list-style-type: none; padding: 0; margin: 0; display: inline; } I am new to CSS so I know I may have taken a completely wrong approach. Thanks for any suggestions on how to get the images to display inline. Thanks Hey, I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great! I have five buttons that do not show up on firefox, and the images are called into play through CSS using background. You will find the code below: This is the CSS: Code:
.borderBelowNav
{
position: absolute;
top: 0;
left: 80px;
width: 937px;
height: 141px;
z-index: 2;
}
img.borderBelowNav
{
display: block;
margin-left: auto;
margin-right: auto;
}
.divNav
{
position: absolute;
top: 55px;
left: 175px;
width: 785px;
height: 61px;
z-index: 3;
}
ul#mainNav,
ul#mainNav li
{
margin: 0;
padding: 0;
}
ul#mainNav li
{
display: inline;
}
ul#mainNav li a
{
width: 138px;
height: 69px;
}
ul#mainNav li#quienesSomos a
{
width: 138px;
background: url(../images/quienesSection.gif)
no-repeat 0 0;
top: 0;
left: 0;
}
ul#mainNav li#quienesSomos a:hover
{
background-position: 0 -72.9px;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a
{
width: 138px;
background: url(../images/campamentosSection.gif) no-repeat 12px 0;
top: 0;
left: 0;
}
ul#mainNav li#campamentos a:hover
{
background-position: 12px -71.2px;
top: 0;
left: 0;
}
ul#mainNav li#noticias a
{
width: 150px;
background: url(../images/noticiasSection.gif) no-repeat 14px 0;
top: 0;
left: 0;
}
ul#mainNav li#noticias a:hover
{
background-position: 14px -72.5px;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a
{
width: 150px;
background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#aplicacion a:hover
{
background-position: 0px -76.1px;
top: 0;
left: 0;
}
ul#mainNav li#contactos a
{
width: 150px;
background: url(../images/contactosSection.gif) no-repeat 0px 0;
top: 0;
left: 0;
}
ul#mainNav li#contactos a:hover
{
background-position: 0px -72.2px;
top: 0;
left: 0;
}
This is the HTML: Code: <img class="background" src="images/treesInFog.jpg" alt="" /> <img class="innerBackground" src="images/bgroundmain02.jpg" alt="" /> <!--This div is for the black border behind the nav--> <div class="borderBelowNav"> <img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" /> </div> <div class="divNav"> <ul id="mainNav"> <li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li> <li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li> <li id="noticias"><a href="#" title="Noticias"> </a></li> <li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li> <li id="contactos"><a href="#" title="Contactos"> </a></li> </ul> </div> PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? I'm trying to get the 2 tabs of this mini calendar to be right next to each other. I've changed the names of all the divs surrounding the images and still can't get it to take out that padding. I've also tried img { margin:0px; padding:0px; } and it still doesn't work. Any ideas? Hi, I can't believe I'm posting this but I can't seem to get this to work. I cannot load a background image through a simple div tag. It works if I switch the id selector to the BODY tag in my code and displays the image but does not work if I use the selector with the DIV tag. I have no idea why. Please help My HTML file Quote: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <LINK REL=StyleSheet HREF="styles.css" TYPE="text/css"> </head> <div id="header"> Div Tag here </div> <body> The content of the document...... </body> </html> My CSS file Quote: #header { background-image: url(navtext.png); background-image: no-repeat; } Use any image you have to test. i can only find the script to show background images in a css style sheet..but how would I go about for example showing an image not as background? i have style switcher, but I'm wanting to use buttons aswell for example blue.gif and red.gif using 2 different styles. how would I show the image in css?, which I can also put a link on maybe in the html or css? HElP! thanks hey guys.. I was thinking about changing my site from being mostly table based for the layout to css based but for some reason theres a small gap between images in IE... no gap in FF though.. I made two example pages 1 without using images, and just a colored background, and one with images... the height and width for the backgrounds and for the images are both the same. small gap at the bottom of each of the divs after the image ends. www.wmbclan.com/test.php just some background colors.. without any gap between the colors. www.wmbclan.com/test2.php anyone know how to fix this? if i want style changes for text links, but not image links, how would it work? a:hover { mystyle } img a:hover { otherstyle } a img:hover { otherstyle } ..neither of these work Hi, I'm creating a website for a new local buisness (Hat Hire Shop). I'm having some trouble with IE and getting images to overlap two <div>'s. If you look at this page using Firefox: http://209.123.229.141/hatz/index.html User: hatz Pword: hatz Then you can see the correct layout. If you view it in IE, then you will see that the images are in the top <div> only and will not overlap. CSS He http://209.123.229.141/hatz/css/ (Images used are only examples found on the Internet. Client will be providing images of their actual hats.) I have a series of DIVs on a page , each contains some links and an image. The DIVs seem to expand to accommodate the text but not the images. An example can be seen he http://193.82.99.145/ICISTest2/ How can i get the DIVs to expand to fit the images? HTML: <div class ="boxes"> <div class="boxheader">Are you looking for information?</div> <img src="./images/box_information.gif"> <ul id="navlist"> <li><a href=".\FindInformation\faq.htm">Search for services that can help</a><br> <li><a href=".\FindInformation\sports.htm">Sporting opportunities in Sussex</a><br> <li><a href="http://193.82.99.145/ICISforms/Enquiry/index.htm">Ask us for information</a><br> <li><a href=".\FindInformation\events.htm">Events and activities in your area</a><br> <li><a href=".\FindInformation\newsletter.htm">ICIS newsletter</a><br> <li><a href=".\FindInformation\noticeboard.htm">News items</a></ul> </div> <div class ="boxes"> <div class="boxheader">Are you looking after someone?</div> <img src="./images/box_caring.gif"> <ul id="navlist"> <li><a href=".\ForCarers\index.htm">Help for carers</a><br> <li><a href=".\ForCarers\carerscard.htm">Emergency Alert Card Scheme for carers</a><br> <li><a href=".\ForCarers\wellspring.htm">Newsletter for children with special needs</a><br> <li><a href=".\ForCarers\carersonline.htm">West Sussex carers website</a><br></ul> </div> <div class ="boxes"> <div class="boxheader">How do we help other organisations?</div> <img src="./images/box_organisations.gif"> <ul id="navlist"> <li><a href=".\ForOrganisations\roomhire.htm">Hire of ICIS rooms and equipment</a><br> <li><a href=".\ForOrganisations\index.htm">Other resources for organisations</a><br></ul> </div> </td><td valign="top"> <!-- HOTSPOT BOX --> <div class ="boxes2"> <a href="./FindInformation/newsletter.htm">Summer newsletter now available!</a><br> <a href="http://www.carersweek.org">National Carers Week</a><br> 13-19 June 2005<br> <a href="./AboutSite/whatsnew.htm">What's new on this site</a> </div> <!-- END HOTSPOT BOX --> <div class ="boxes"> <div class="boxheader">About ICIS</div> <ul id="navlist"> <img src="./images/box_about.gif"> <li><a href=".\AboutICIS\contact.htm">Our contact details</a><br> <li><a href=".\AboutICIS\index.htm">What we do</a><br> <li><a href=".\AboutICIS\volunteering.htm">Volunteering at ICIS</a><br> <li><a href=".\AboutICIS\jobs.htm">Jobs at ICIS</a><br> <li><a href=".\AboutICIS\feedback.htm">Tell us what you think of our service</a><br> <li><a href=".\AboutICIS\donations.htm">Make a donation</a><br> </div></ul> <div class ="boxes"> <img src="./images/box_sports.gif" class="floatimgright"> <b><a href=".\FindInformation\sports.htm">Sussex Disability Sports Database</b></a> </div> <div class ="boxes"> <img src="./images/box_carerscard.gif"> <b><a href=".\ForCarers\carerscard.htm">Carers Emergency Alert Card Scheme</b> </a> </div> <div class ="boxes"> <img src="./images/box_news.gif"> <b><a href=".\FindInformation\newsletter.htm">ICIS newsletter</b></a> </div> <div class ="boxes"> <img src="./images/box_news.gif"> <b><a href=".\ForCarers\wellspring.htm">Wellspring Newsletter</b></a> </div> <div class ="boxes"> <img src="./images/box_question.gif"> <b><a href=".\AboutSite\guide.htm">Do you need help using this website?</b></a> </div> CSS: .boxheader {padding: 2px; background: #ffffff; color: #000000; font-weight:bold; font-size:medium; border-top: 0px solid #cccccc; border-bottom: 0px solid #cccccc; height: 10px; text-align: left; } .boxes {height: auto; text-align: left; background: #ffffff; padding: 5px; border: 1px solid #663399; margin: 10px; margin-top: 0px; line-height: 1.5em;} .boxes a {color: #660099; font-weight:bold; text-decoration: none; } .boxes a.active {color: #660099; font-weight:normal; text-decoration: NONE; } .boxes a:hover {color: #666666; font-weight:bold;text-decoration: none; } .boxes a:visited {color: #660099;font-weight:normal;text-decoration: none; } .boxes img{float: right; overflow: auto; height:100%;} .images {padding: 5px; } /* Hotspot Box on home page */ .boxes2 {text-align: left; background: #ffffff; padding: 5px; border: 2px solid #99cc00; margin: 10px; margin-top: 0px; line-height: 1.5em;} .boxes2 a {color: #99cc00; font-weight:bold; text-decoration: none; } .boxes2 a.active {color: #339900; font-weight:normal; text-decoration: NONE; } .boxes2 a:hover {color: #666666; font-weight:bold;text-decoration: none; } Thanks for your help Hi CSS masters, I am building a site for a friend who's starting a concrete business. I just finished making all the BG images, and am now starting the coding process, all CSS based. Well, I'm highly mediocre at CSS design, and could use some help. The build site is here. As you'll be able to see, the entire BG is actually made up of 4 images. The top image repeats along x, the bottom left along why. The other two are to remain static and unrepeated. In IE, the problems are as follows: 1. On top, there is a small white area, and I don't know why. I can't seem to find why it's padded. The two images should but right up against each other to create a seamless piece visually. 2. The part that is currently in the middle should be on the left. Why is it not? 3. The tan portion of the left part should repeat downward along y. It doesn't. Why? In FF, the problems are as follows: 1. The body is not centered. 2. Everything else is fine regarding BG placement (damned IE), but the bottom part of the left image is still not repeating. Help is, as always very much appreciated! Thanks, folks, Chris |
|||||||