|
CSS - Centering Images
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 Similar TutorialsHi. 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, 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 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! 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;
}
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 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 Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code: Code:
<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="nested">
Text Here
</div>
</div>
</body>
</html>
So I want the nested div to have its content centered, so "Text Here" is in the center. Hi there, I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE. Any ideas? This is my code: PHP Code: #top_bar{ background-image: url('img/top_bar.jpg'); height: 54px; font-family: arial; font-size: 14px; color: #ffffff; width: 100%; } #top_bar_content{ padding: 18px 0 10px 0px; width: 870px; margin: 0 auto; position: relative; } Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help. I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions. Is there any other way? http://www.stevemedleyphotography.com/tempo/index.html What I am trying to do is make it so that the blue background is as it is already but the orange box is the full width of the window despite what resolution or window size the user has, and also is centered on the screen. -------BLUE--------- -------BLUE--------- -------BLUE--------- -----ORANGE------- -----ORANGE------- -------BLUE--------- -------BLUE--------- -------BLUE--------- Like that. I will be having some stuff within the orange div. I don't really know much CSS at all and am kinda guessing my way through it... poorly... Thanks for any help. How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center Normal: ________________________________ Text ________________________________ After: ________________________________ text ________________________________ THANKS Hi, i am new to CSS and want to know about how to center a div tag for example i have the following code Code: <div style=""> </div> if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes. Please recommend Regards ltoso Hey. I'm having issues with getting my page to center in IE7 using margin: auto; It works fine in firefox. The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php . The section where i think the problem is: CSS Code: Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }
#page {
Any help's appreciated. Hi all, this is my CSS: Code: body {
font-family:arial;
font-size:14px;
background-color:#FFFFFF;
margin: 0;
padding: 0;
}
.mainbar {
position:absolute;
height:100%;
width:600px;
display:block;
background-color:#F2F2F2;
top:0px;
bottom:0px;
z-index:0;
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
.contact {
position:absolute;
display:block;
height:40px;
width:600px;
background-color:#FFFFFF;
top:80%;
bottom:0px;
z-index:0;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
.logo {
position:absolute;
display:block;
height:200px;
width:600px;
background-color:#CCCCCC;
top:10%;
bottom:10%;
border:1px solid #000000;
z-index:2;
}
.logoborder {
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
border-left: 1px solid #000000;
}
Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated! Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!! Thanks! Jack. This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly. I have 2 problems: 1. How can I get these list items centered? 2. the second level seems to have problems displaying horizontally in IE. How can I fix it? Code: <div id="tablenavcontainer">
<div id="navcontainer">
<ul>
<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>
<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>
<ul>
<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>
<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
</ul>
</ul>
<br style="clear: both;" />
</div>
</div>
Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake. Good day to you all, I'm working on a pop up css box. My problem is that I can't make it to be centered. Here is my code : PHP Code: echo "<a onmouseover=\"this.style.cursor='pointer'\" onfocus=\"this.blur();\" onclick=\"document.getElementById('$namess').style.display = 'block' \" >\r"; echo "<span><img src=\"http://ponder.peuplies.info/V_0-1/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" /></span></a>\r"; echo "<div id=\"$namess\" align=\"center\" style='display: none; position: absolute; margin: auto; margin-left: auto; margin-right: auto; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; color:#000000; font-size: 12px; '>\r"; echo "This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.\r"; echo "<img src=\"http://test.com/Art/".$imgdir."".$img."\" width=\"50\" border=\"0\" title=\"".$img."\" alt=\"".$img."\" />"; echo "<br />\r"; echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('$namess').style.display = 'none' \" ><span style=\"text-decoration: underline; color:#000000;\">Close</span></a></div>\r"; echo "</div>\r"; Can somebody help me ? Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly. It's very basic. You have blank page. No wrappers no nothing. Then 1 div, holds, 1 ul, with 20 li. The div has specified width. How to center the ul inside the div? I need the UL to NOT have specified width since I'll be adding more items to it over time. Thanks! im trying to center this div but im not to sure on how to do it Code: <style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
|
|||||||