|
CSS - Aligning Multiple Images On One Line
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>
Similar TutorialsHi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images- Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size. -Images displayed correctly- This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right. Code:
/* Set the style for image(s) displayed */
img.left
{
margin-left: 10em;
}
img.center
{
margin-left: 3em;
img.right
{
margin-left: 3em;
}
Hope that makes sense, Gerbill Hi! I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped. I've set up a test page so you can see what is happening. the site is at test .sylvaindelisle .com Thanks for taking the time to take a look. After putting a js slideshow at the top of the page I am having trouble getting anything to right of it. Every defaults to the next line. Any tips? Thank you! tinassweetshop.com I am having problems with vertical aligning both texts and images. Can someone show me a working example or tell me where I messed up the codes below? http://efetuncel.win.aplus.net/ryt/new/ Code:
#rcontent{
float:right;
width:490px;
padding:0px;
}
#rcontent .category{
float:left;
width:240px;
height:120px;
margin:30px 0px 0px 5px;
background: url(images/bg_home_category.gif)
}
#rcontent .category img{
float:left;
vertical-align:middle;
}
<div id="rcontent">
<div class="category">
<img src="images/home_categories_gb.gif" alt="" />
</div>
<div class="category">
</div>
<div class="category">
</div>
<div class="category">
</div>
</div>
Hello, I am trying to get two images aligned inside a table cell as a top and bottom background element. I know with CSS you can't have two background elements, so I was playing with relative and absolute positioning. Unfortunately, I was unsuccessful, as the positioning wouldn't refer to the diameter of the cell. I have an image demonstrating what I am looking for. The shaded area represents the two images (a bottom and top quote) that I want to align to the top and bottom. I can't simply make this a single image since the information on the left will be different heights. I also noted the table layout in the lower example if there are any questions in that regard. http://www.forma3.com/stuff/css_question.png Thanks so much! The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> Hi Guys, I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image. Here's what I have so far. img.top {vertical-align:text-top;} <a href="http://company.com/graphics/thumb.jpg"> <img class="top" src="http://company.com/graphics/thumb.jpg"> </a> <a href="company.com">sample text</a> <a href="company.com">second line</a> Any ideas? I've tried like every switch for the vertical-align property... Normally when I want to vertically align some text to the middle of a div I use line-height: 40px; and vertical-align: middle; However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this? I thought something like the following would work but it doesn't. <div style="line-height: 60px; vertical-align: middle;"> <span style="line-height: normal;">line1<br />line 2</span></div> http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
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 Hi, i need to delvelop something like "SomeName X". Currently i am doing with DIV(1 DIV for 'SomeName' and 1 DIV for 'X' and finally float-left to another DIV). Since these names(like "Somename1 X",'Somename2 X"...) are populated in the div container, when it reaches the right end of the container, "X" alone getting wrapped to the next line. But it has to be along with 'SomeName' always. As other forums says, I tried with table but it didn't work since the final div container is fixed and i get multiple names with variant length. I tried clear:both, float left - it too didn't work. I have seen like the one in facebook - compose page. I would like to know how to implement this. Any help appreciated. Thanks in advance. 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 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. hey guys i have cell in a table with an image and some text, i want to keep some space between the image and the text. but when i use padding-left: 10px. only the first line gets offsetted by 10px i want all the lines to do so. can you help? my current code is something like this. i have a left-padding:10px in product_display class in a CSS sheet. Code: <td width="274" height="108" valign="top" bgcolor="#F2EDD7"> <img src="prodimages/CS 016.JPG" width="102" height="102" align="left"> <br> <strong><a href="getproduct.php?pid=67" class="product_display">Wall Mount Coil Candle Holder</a></strong><br> </td> I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: 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>
Hi, I have 12 thumbnails, and I want a horizontal scrollbar in the div for the thumbnails Here's the HTML: Code: <table bordercolor="333333" border="1" cellpadding="8"> <th valign="center"> <p class="productText"> MEET THE PHERMONES</p> </th> <tr><td height="75" id="productImages"> <a href="#"><img src="images/products/thumbs/prod1T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod2T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod3T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a> <a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a> </td> </tr> <tr> <td height="138"><p class="productText">THIS IS A TEXT BOX. WHEN THE USER CLICKS ON ONE <br /> OF THE ABOVE IMAGES, THIS BOX SHOULD BE FILLED WITH CONTENT SPECIFIC TO THE IMAGE: <br /> IE A DESCRIPTION OF THE IMAGE. </p> <p> </p> </td> </tr> </table> Here's the CSS: Code: #productImages{
float:right;
margin-right: 21px;
postion:absolute;
height:78px !important;
width:300px;
overflow: scroll;
}
Here's the site: http://www.caillouette.com/alpha-dream3/alpha-maschio.html# Basically I need a horizontal scroller, and not a verticle. Why are my images stacking vertically instead of horizontally? thanks |
|||||||