|
CSS - Getting Images To Display In Line
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; }
Similar Tutorialshey guys i have a question.. i wan't to make a picture gallery for my cus(tattoo) im doing an admin so he can upload his pics. now on the gallery page i will use php to echo the pictures. now when you use an echo usally it showws all the pics on on line.. how can i make it so i can have like 4per line? pic pic pic pic pic pic pic pic I have a number of icons. - back button - print button - next button I want to display them all on the same line. I want the back button to be placed on the far left while the other two on the far right. I have experimented quite abit with trying to get this to work, and have managed to sort of get it right by using left padding. However, I know this is a rubbish way of doing it as depending on the screen size will depend on where the right hand icons appear. I did think I would just use tables, but figured someone here maybe able to help me out. I want to display two tables on one line keeping the width of the table. In the past whenever I've wanted two things on the same line I've always floated one left and the other right. I've tried doing this here but the tables have a width of 45% and when they get floated its as if thats ignored. Heres a picture to better explain the situation. http://i52.tinypic.com/2ry1vur.jpg Thanks in advance for all your help. Hey guys im updating a site that i originally didnt code, and for some reason any link will have a carrage return or something after it so that the next thing will start on a new line, so if were to put a link in the middle of a paragragh the next word would start on a new line??? what should i be looking for in the css to rectify this. i tried removing all the 'display : block' but that didnt work... thanks Hi there, I'm having a tough time getting these two images to align side by side...the line keeps breaking and thus forcing the image to the next line, as show here (not to mention it's messing with my footer): http://www.groundedgroup.com/client...A_Index_v2.html Here's the respective css: CSS Stuff Here's what it's supposed to look like: http://www.groundedgroup.com/client...EA_Show_v2.html Both of the images add up to a total width of 956px, however, the div containing it is set to 947px width. If I change it to 956px, it works, but it pushes out the sides, resulting in the left and right vertical borders not lining up with the rest of header, footer, etc. Ideally, I want these images to hover over this area and thus not spread out the design. Got any ideas? BTW, I checked my css and xhtml before posting and it validates. Thanks for your help. Hoping someone can help me out as I'm still pretty new to the whole web design thing. I'm using CSS to create a container wrapper. As you can see from the code I have a bottom, top and center image. When I was using JPEG images everything lined up correctly, however I needed to switch to PNG image files (to take advantage of transparency) and now the top and bottom sections of the wrapper are offset. Here is a live link: storrepictures.weebly.com/projects.html -Please find an image of the resulting problem he http://i.imgur.com/YnTS8.png -This is how it looks when I use JPEGs instead of PNGs: http://i.imgur.com/2WMFN.png Here is my CSS wrapper code: Code: #wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) top center no-repeat;
}
#wrappertbtm{
background: url(containerbtm.png) bottom center no-repeat;
padding-bottom: 65px;
}
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrappertop">
<div id="wrapper">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
<div id="wrappertbtm">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello, I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped. I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre. I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this: Code: [ ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
[ ]
---- variable empty space depending on browser width
I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great. Code: #header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
#imgleft {
float: left;
text-align: right;
width: 30%
}
#imgright {
float:right;
text-align: left;
width: 30%
}
<div id="header">
<div id="imgleft">
<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
<img src="l_about.gif" alt="About">
</div>
<div id="imgright">
<img src="l_blog.gif" alt="Blog">
<img src="l_contact.gif" alt="Contact">
</div>
<div id="title">
<img src="title.gif" height="84" width="400" alt="Title">
</div>
</div>
source: bluewebpages.com/photography/album3/1 i need help setting the thumbnails which have a block display to line up on the same line. i'm using a program called photostack, which is a light-weight photoblog system. when it spits out the code, how would i center the main div containg all thumbnails? i've tried text-align, negative margins(which worked except that the main photo would display ontop of them because the negative margins involved abs positioning) mainly if someone could point me in the right direction on getting block elements on the same line then i'd be set. i can resolve the later issue. thanks, amory EDIT FIXED - need a float: left; I recently relaunched our web site and, trying to stay with the times, use CSS as much as possible for layout purposes. The one place I still use a table for layout is in the top navigation bar, which includes a search form. I would like to eliminate the table and use CSS for styling the top navigation bar, but am not sure how. I want the pages to hold up in IE 5.0+, Mozilla, Netscape 6+, Firefox and Safari and to be tolerable in Mac IE 5.x - a tall order but manageable I think. Can this be done? Am I stuck with a layout table here? Any help is appreciated. You can see an example web page at: http://www.cambridgema.gov/~CDD/ The HTML is in the attached file. Hello, I've been having trouble with a simple design I have been creating. I was wanting the footer text to display in a straight line, but it's displaying horizontally. Could you please look at my HTML and CSS coding and see if I had made an error: Code: www.wendyhenrichs.com/huy Thanks! I 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 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 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? 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! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! |
|||||||