|
CSS - Images In Line
hey 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 Similar Tutorialshello, 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 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. 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>
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. 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! 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 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; } 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? Thanks for taking the time to read my question I have a row of pictures as nav links, and under them I want to put a row of text stating what each link is Picture Picture Picture Picture Text Text Text Text Each pic is 52px wide, so I made the containers for the text 52px wide. both have left and right margins of 10px (I made the .NavText margin 11 to compensate for the 1px border) yet they don't line up!! What am I missing? Thanks, Brad html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="description" content="Canada Carriage - A supplier of great carriages from XXXXXXX." /> <meta name="keywords" content="Horse drawn vehicle, Carriages, Carts, Horse carriages, Horse carts, Coyaltix, Manitoba, Canada, Dealer, Equine, FEI, CDE, Combined Driving Event, Pleasure driving, Competition driving, Custom made, Fine quality, Affordable prices, European manufactured, Drive Canada" /> <meta name="Revisit-After" content="7 Days" /> <meta name="Robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Canada Carriage</title> <link rel="stylesheet" type="text/css" href="LC.css" media="screen" /> </head> <body> <div class="MainCont"> <img class="HomeLogo" src="images/logo.jpg" /> <div class="NavHolder"> <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> <a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a> <a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a> <a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a> <div class="NavText">About</div> <div class="NavText">Portfolio</div> <div class="NavText">Fees</div> <div class="NavText">Contact</div> </div> </div> </body> </html> css Code: body {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
.MainCont {
width: 800px;
margin: 0px auto;
padding: 0px;
}
img.HomeLogo {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 0px;
display: block;
}
img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}
.NavHolder {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 0px;
padding: 0px;
display: block;
width: 314px;
background-color: orange;
}
.NavText {
padding: 0px;
margin: 0px 11px 0px 11px;
width: 52px;
color: #ffffff;
font-size: 12px;
float: left;
display: inline;
background-color: red;
}
Hello, At my blog test site You'll notice the Quote: << Hello World! | Gettin' Closer >> text in the middle. Just as you see it above, I'd like that all on one line, but can't seem to figure out how to do it. Driving me nuts. Anyone? The CSS code controlling that is Code:
.alignright {
text-align: center;
display: inline;
}
.alignleft {
text-align: center;
display: inline;
}
Thanks! Chris Hello, I use always use the <br /> tag and I just found out in using the clearing of divs like; Code: <div style="clear:both; margin-top:5px"></div> for next line or breaking of line. Is this a good thing to use? Hi all, How to go to next line if the width of the content is more than specified width? Thanx/Chandar i have a series of divs that look like this Code: <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div> Each of the inner divs use the float attribute but when it comes to the second outer div it doesnt automatically go onto the next line it sort of continues from where the last div left off. Why is this... my problem could best be summed up by looking at this test html : http://hatchetman82.4000webs.com/test.html it contains 2 DIVs, and in IMG inside every DIV. the image is (probably) allined as text, which means there's a small margin between the DIV content area lower border and the IMG border. this space (colored yellow) does not originale from any padding, spacing or margin attribute (or at least tinkering with those didnt help). setting the line-height on the DIVs to 100% helps a bit (shrinks the gap a little), but causes problems with, for instance, a SPAN inside one of those divs. i've also tried all sorts of values for vertical-align on the DIVs to no avail. any help in eliminating the gap would be greatly appreciated. Hey there. Is it possible to add a line break so that the following markup... html Code: Original - html Code <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl> ...looks like this? Posts: 33 Topics: 4 Basically, I want it to be like display: block, but only to the RIGHT of the text. Does that make sense? Just like adding a <br />, but with different HTML. My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly). Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so. My Html is this: <div id="newsboxleft"> <div id="newsboxright"></div></div> My CSS is this: #newsboxleft { margin: 10px auto; position: relative; top: 0px; left: -187px; width: 350px; height: 142px; background: url(../images/newsboxleft.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } #newsboxright { margin: 10px auto; position: relative; top: 0px; left: 373px; width: 350px; height: 142px; background: url(../images/newsboxright.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } I hope someone can help. Thanks. Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box. Thanks! I need to make a line diagram like my attached image. Anybody got tips on how to do this in CSS? image host Hey, i made a header in with some space to get a navigation line over. So i put it in its place with css but when i zoom in or out it won't stay in the middle like evrything else, i tried evrything, display:block, margin:0px, position:absolute |
|||||||