CSS - Problem Centering Images By Orientation
I'm struggling to find the correct CSS to center a middle column between a left and right column. I need this functionality for a dynamic photo gallery (powered by JS). To put it simply, I need the shaded area to the left and right of an image to expand/contract dynamically based on whether or not the image in the middle is in landscape or portrait format. I've figured out how to hard code it based on orientation, but I need it to be dynamic instead since the JS I'm using isn't aware of the orientation of the image. Examples of what it looks like live are seen below:
Portrait Orientation www. notcrappy .com/html/portrait/studio-portraits/index.shtml Landscape Orientation www. notcrappy .com/html/wedding/favorites/index.shtml Here's is some simplified HTML that I'm currently using to present the images and with the left/right blue borders: <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-left-side"> </div> <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-middle-position"><img src="images/01.jpg"/></div> <div class="left-blank-middle-<PORTRAIT or LANDSCAPE>-right-blank-right-side"> </div> And here is the CSS I'm using to give them the correct spacing when the dimension is known. .left-blank-middle-landscape-right-blank-left-side { width: 179px; background-color: #003366; float: left; height: 400px; margin-right: 3px; margin-bottom: 10px; } .left-blank-middle-landscape-right-blank-middle-position { float: left; height: 400px; margin-bottom: 10px; width: 600px; } .left-blank-middle-landscape-right-blank-right-side { width: 179px; background-color: #003366; float: right; height: 400px; margin-left: 3px; margin-bottom: 10px; } .left-blank-middle-portrait-right-blank-left-side { width: 346px; background-color: #003366; float: left; height: 400px; margin-right: 3px; margin-bottom: 10px; } .left-blank-middle-portrait-right-blank-middle-position { float: left; height: 400px; margin-bottom: 10px; width: 266px; } .left-blank-middle-portrait-right-blank-right-side { width: 346px; background-color: #003366; float: right; height: 400px; margin-left: 3px; margin-bottom: 10px; } Can anyone give me any pointers on what I need to do to make the CSS dynamic based on the orientation of the photos? Thanks so much for your help! Similar TutorialsHello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. I've been toying with this for some time and I've been messing with it so long that I probably wouldn't see the problem if i was hit with a brick. Essentially the link posted is to an html page where I have a portion of the left side of my main page. This page will have vertically listed navigation which upon hover will slide out a panel and so on. I cannot seem to get the elements correct, the sliding out list items are correct but the other main listing is not sitting correctly, and the navigation box gets all elongated when I hover. This code and page is designed to work with IE 6x for work. Any help would be appreciated. Thanks. http://mcpherson-racing.com/dave/Slideout.htm Also I'm wondering if you see a problem with the page and the navigation that I'm attempting to make, Also if you have any design tips for this 'demo' I'd be happy to hear them.... I'm a bit lost on the 'footer' what to put there... http://mcpherson-racing.com/dave/demo2.htm The site isn't done, its about 30% so I know links are busted and not pointing to the right places. Thanks for taking the time to read my question. I am having problems centering my navigation images below the event calendar on my page (link below). I think I know why, but can't get around it. In my general css page (http://www.pierced.ca/Pierced.css) I have the line Code: img {float:left; margin:0; padding:0;} . I don't know what it does exactly, someone on this forum told me to put it on my page. Without it, my top margins on all my pages don't work. I think it is this code that is affecting my nav images. without the Code: td.centercalnav { padding: 1% 0 0 44%; } which is in (http://www.pierced.ca/PiercedEvents.css) they center to the page, not the table row. With the current code it looks kind of ok in Fire Fox, but worse in IE. What can I do to center the nav images under the calendar. Thanks again, Brad http://www.pierced.ca/pierced-events.htm Hi. I'm new here as well with cSS. Hope someone can explain this to me...darn it...cSS can be frustrating. Here is my CSS code for an external style sheet: #header { background-image: url(images/penpal-inner.jpg); height: 168px; background-repeat: no-repeat; background-position: center top; border-bottom: 20px blue solid; width: 640px;} Here is the xhmtl code: <div id="header"></div> Why won't my background image center horizontally? It stays to the left of the page. If I take out the width (640px), it will center, but than I have a problem with the bottom border. I want the border to be the same width as the image but it is the width of the entire page. So with the width (640 px) in the #header rule, I have the border the same length as the image, but not centered. Without the width, the image centers but the border is now longer than the image. how do i get the image to center on the page horizontally and still keep the bottom border the same width as the image? Help please. thanks Steve. Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code: #header{ padding-top:53px; border:#F00 solid 1px } #header_wrapper ul { text-align: center; } #header_wrapper ul li { display: inline; } I tried many code configurations but can't get it to work! a live preview is available here Hello, Thank you for reading my post This is what I try to create. A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered. I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center. The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width. What I already got : The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size. I did try and search for several hours, but couldn't find a good solution. Mainly my question would be, how I can shrink or grow an image without knowing his size. Basicly my html code is Code: <div id="navBar"> <div class="navElement" id="nav1"> <img class="navImg" src="images/home.gif" /> </div> <div class="navElement" id="navN"> <img class="navImg" src="images/notHome.gif" /> </div> </div> my latest css for unknown image size Code: #navBar { /* main page navigation container */ height: 460px; width: 70px; /* 1. this will be dynamically set */ left: 100px; top: 151px; position: absolute; visibility: visible; } .navImg { height: auto; width: auto; /* height: 60px;*/ /*width: inherit;*/ position: relative; top:0px; margin:0 auto; } #navElement1 { position: relative; width: auto; height: 70Px; top:0px; margin:0 3px; visibility: visible; } With javascript I add a onclick event handler on each navImg wich trigger the action. This works to. Please, Is someone willing to help with pointers. Thanks in Advance SC Hi I'm having some problems with CSS and was hoping that somebody on here could help me. Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering. Second none of my images are showing, I've attempted to add a background and header image but neither are showing. I'm a little confused because the same methods work fine on my wordpress site. Here is a link to the dev site; C:\Users\Keith\Documents\Site\index.html And below is the CSS code; Code: /* ------------------------------ HTML Redefine Tags ------------------------------ */ body { width: 100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; background: url (img/background.jpg) no-repeat bottom; } input, form, textarea h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } h1 { font-size: 18px; } h2 { font-size: 14px; color: #999999; } h3 { font-size: 13px; border-bottom: solid 1px #DEDEDE; padding: 4px 0; margin-bottom: 10px; } a:link, a:visited { color: #0033CC; } a:hover { text-decoration: none; } /* ------------------------------ PAGE STRUCTURE ------------------------------ */ /* #container has an absolute width (780 pixel) */ #container { width: 1024px; background: #ececec; margin: 0px auto; } #topbar { width: 1000px; height: 118px; display: block; background: url(img/header.png); float: left; position: relative } #navbar { width: auto; display: block; height: 28px; } #navbar a { heigth: 28px; line-height: 28px; padding: 0 8px; display: inline; } #main { width: auto; display: block; padding: 10px 0;} #column_left { width: 332px; height: 387px; margin-right: 1px; margin-left: 13px; background: #000; float: left; } #column_right { width: 332px; height: 387px; margin-right: 1px; background: #000; float: left; } #column_right_adsense { width: 332px; height: 387px; background: #000; float: left; } div.spacer { clear: both; height: 10px; display: block; } #footer { width: 1000px; height: 150px; display: block; margin: 0 13px; padding: 10px 13px; font-size: 11px; color: fff; background: #737373; } test link: users.tpg.com.au/tetsuo/CSS_help/index.html Hi guys, Im really new to CSS, and doing a bit of crammed-study on it. I finally found a fix that worked on css list navigation that i could use that'll work in IE but i cant seem to center each menu item to each respective rollover image (the BG gifs). Some help on this would be greatly appreciated, i cant seem to find anything to fix this. I've tried several solutions (which is probably why my css might look like a huge mess). the css file is he users.tpg.com.au/tetsuo/CSS_help/awis.html Hi, Is there anyway to specify the printed page orientation using CSS? e.g. make the printed copy landscape or portrait. thanks! i have a page that must printed as lanscape. as default users printer is configured as portrait. how can i change it (portrait to landscape) programatically. is this possible using css or other techniques? I got a problem trying to center the image called white.gif I would like it if there is some one on here that could take a look at the code. HTML Code: <html> <head> <title>Backtrack tutorials.</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> </head> <body> <center> <?php include('includes/header.php'); ?> <img src="images/box_top.gif" /> <p class="white">Test</p> <img src="images/box_bottom.gif" /> <?php include('includes/footer.php'); ?> </center> </body> </html> CSS Code: body { background-color:#000000; } img { border:0px; } .mainbox { background-color:#777777; width: 960px; border-style:none; border-width:0px; } p.white { background-image:url('../images/white.gif'); background-repeat:repeat-y; margin-top:0px; margin-bottom:0px; } Hi, centering problem I have this small box (table) which shows up when a user didn't decide yet which stylesheet he or she prefers. Everything works fine but I would like the first two lines, which are in bold, to be centered within that red box. I've done so much fun and great stuff with css but this last simple thing doesn't seem to work out. Any help? http://www.jefspalace.be/digital/index.htm stylesheets at: http://www.jefspalace.be/css/print.css http://www.jefspalace.be/css/visualstyel2.css http://www.jefspalace.be/css/visualstyle3.css http://www.jefspalace.be/css/warningtable.css IE problem have a look for yourself, i don't seem to find the problem. It used to be correct, but then, over time, I made some changes, never checking in IE and now I'm stuck. Thanks a lot Kind regards, Jef The code below is to put a flash banner from left to right above a myspace page. It works with Firefox but aligns to the left in Explorer? Really havent a clue about this so any help would be much appreciated Thanks for any insight. Heres a link to the page. Opened in i.e the problem occurs. http://www.myspace.com/electricpicnicofficial Code: <style> body { background-color:white; } .masthead { display: block; width: 750px; height: 252px; position: absolute; left: 50%; margin-left: 0px; top: 0px; background: url(http://img40.imageshack.us/img40/1126/picnick.jpg) no-repeat; } body table { margin-top: 530px; } body td table, body div table { margin-top: 0; } </style> <div style="position:absolute;top:240px;margin-left:50%;left:-484;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="504" width="968"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.electricpicnic.ie/electricpicnic09.swf" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.electricpicnic.ie/electricpicnic09.swf" height="504" width="968" wmode="transparent" /> </object> </div> I have a lblock, mblock and rblock div tags inside the content div tag. I am trying to center block tags so there will be 10px free space on each side of content div tag. You can check it at: http://www.refinethetaste.com/html/ PHP Code: #content { width:796px; margin: auto;} #lblock { width:198px; float:left; } #mblock { width:200px; float:left; margin-left:2px;} #rblock { width:375px; float:left; margin-left:1px;} I'm having a problem centering the table so that its centered in the browser. Below is the code. Code: <html> <head> <title>Untitled-3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #Table_01 { position:absolute; left:0px; top:0px; width:1196px; height:892px; } #TopAdLeft { position:absolute; left:0px; top:0px; width:140px; height:415px; } #LeftSpace { position:absolute; left:140px; top:0px; width:8px; height:840px; } #LogoSpace { position:absolute; left:148px; top:0px; width:900px; height:177px; } #index-04 { position:absolute; left:1048px; top:0px; width:148px; height:1px; } #RightSpace { position:absolute; left:1048px; top:1px; width:8px; height:839px; } #TopAdRight { position:absolute; left:1056px; top:1px; width:140px; height:415px; } #CenterMiddleSpace { position:absolute; left:148px; top:177px; width:900px; height:5px; } #CalendarSpace { position:absolute; left:148px; top:182px; width:900px; height:658px; } #LeftMiddleSpace { position:absolute; left:0px; top:416px; width:140px; height:9px; } #RightMiddleSpace { position:absolute; left:1056px; top:416px; width:140px; height:9px; } #BottomAdLeft { position:absolute; left:0px; top:425px; width:140px; height:415px; } #BottomAdRight { position:absolute; left:1056px; top:425px; width:140px; height:415px; } #BottomLeftSpace { position:absolute; left:0px; top:840px; width:148px; height:52px; } #EmailSpace { position:absolute; left:148px; top:840px; width:900px; height:52px; } #BottomRightSpace { position:absolute; left:1048px; top:840px; width:148px; height:52px; } --> </style> <!-- End ImageReady Styles --> </head> <body style="background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; "> <!-- ImageReady Slices (Untitled-3) --> <div id="Table_01"> <div id="TopAdLeft"> <img src="images/LeftTopAd.jpg" width="140" height="415" alt=""> </div> <div id="LeftSpace"> <img src="images/LeftSpace.jpg" width="8" height="840" alt=""> </div> <div id="LogoSpace"> <img src="images/logo.jpg" width="900" height="175" alt=""> </div> <div id="index-04"> <img src="images/index_04.jpg" width="148" height="1" alt=""> </div> <div id="RightSpace"> <img src="images/RightSpace.jpg" width="8" height="839" alt=""> </div> <div id="TopAdRight"> <img src="images/TopAdRight.jpg" width="140" height="415" alt=""> </div> <div id="CenterMiddleSpace"> <img src="images/CenterMiddleSpace.jpg" width="900" height="5" alt=""> </div> <div id="CalendarSpace"> <iframe name="I1" id="I1" title="Hollywood Drink Specials" src="http://www.calendarwiz.com/" align="center" frameborder="0" height="658" width="900"></iframe> </div> <div id="LeftMiddleSpace"> <img src="images/LeftMiddleSpace.jpg" width="140" height="9" alt=""> </div> <div id="RightMiddleSpace"> <img src="images/RightMiddleSpace.jpg" width="140" height="9" alt=""> </div> <div id="BottomAdLeft"> <img src="images/BottomAdLeft.jpg" width="140" height="415" alt=""> </div> <div id="BottomAdRight"> <img src="images/hob.jpg" width="140" height="415" alt=""> </div> <div id="BottomLeftSpace"> <img src="images/BottomLeftSpace.jpg" width="148" height="52" alt=""> </div> <div id="EmailSpace"> <img src="images/EmailSpace.jpg" width="900" height="52" alt=""> </div> <div id="BottomRightSpace"> <img src="images/BottomRightSpace.jpg" width="148" height="52" alt=""> </div> </div> </body> </html> I have been learning css and have got my page together but i want my page to be centered and i just cant seem to get it to move.It is stuck close to the left and I have tried to mess around with it with no joy.Can anyone help me please.Here is the css I have used:- DIV.wrap_page { PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; WIDTH: 772px; PADDING-TOP: 8px } DIV.wrap_page2 { PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; PADDING-TOP: 8px; POSITION: relative } Any help would be very appreciated many thanks,stevo! Hi, I have a problem getting this to work in IE 5. It works in IE 6+, FF, etc but not IE 5. Anyone know why? Code: #centerMe { position: relative; margin-left: auto; margin-right: auto; width: 760px; } And if there's any other IE 5 tips I should know... Hi guys, I've set the following CSS class: Code: .configureSystem{ padding : 3px; width : 760px; height : 90%; overflow : auto; } In a hope to act much like the CODE tag on this forum - I basically want to have scrollable content without invoking the browsers scrollbars. I've implemented is just with: Code: <span class="configureSystem"> HTML Code Here </span> The problem is, I want to center this content, though I'm not sure how. I tried the old fashioned (and very bad) centered table with the <span> nested inside, however the scrollbar style function doesn't work then. How can I modify that class to ensure it's centered horizontally on the page? Thanks in advance. http://www.viportals.com/ the ad under the categories is on the left. i tried position:center; and <center> which i know i shouldnt, but how do i center it??? howdy, i've been workin on a site using some good CSS for the first time. i usually get fed up but it seems to be working pretty well this time. i have one little problem http://www.bnymusic.com/lairsite/ when i check it in firefox, safari and IE on mac there's a little offset between the text area and the main image.... any clue on what is happening and how to fix it? also noticed that in IE on pc the hover over Home doesn't extend into the padded area....but it works sometimes...crazy hopefully this ls small and i will continue to convert to CSS...sadly my photo area stumped me on the CSS and i used a table....oh well. prethanks, B |