|
CSS - Image And Text Slightly Off Center!??
BIO
BIO CSS i would like for both the image and text to be centered on page-- they are just a little off.... am using FOX as primary browser -- but IE displays pretty much the same-- anyone got a fix for this??? its late and i have been over the coding a million times but just dont see the solution it right now thanks in advance! Similar TutorialsOkay, because of a conflict with Sothink Menu Builder I cannot use the container or wrapper tag the way I normally would on my CSS. Instead, I've done this: Code: * { margin:0; padding:0; }
body {
margin: 0 auto;
width: 1000px;
text-align: center;
background-color: #e0d7e6;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
white-space: normal;
line-height: normal;
padding: 0px;
background-image: url(../images/shared/gifs/bacgrnd.gif);
background-repeat: repeat-x;
}
#wrapper {
text-align: left;
position: relative;
z-index: 0;
}
And the HTML: Code: </head> <body><div id="wrapper"> webpage content </div></body> And it works well, except the page is off center (to the right) by a couple of pixels. It's in all browsers. Does anyone have a fix? Thanks in advance. I was having some trouble centering my layout in Firefox. It looked fine in IE6 (yes... it's a pain to work in, but it's the nature of the beast when doing internal intranet stuff) when I simply used "text-align: center;" but the layout wouldn't center until I added "text-align: -moz-center;" under that (in the body style). Is this an acceptable way of doing things? Is this a flaw in Firefox or is it more likely that I'm not doing things right? (yes I know I haven't posted code, this was more a high level question of when/if "text-align: -moz-center;" should be used). I have some text in a DIV that is updated dynamically with removeChild() and appendChild(). I've tried numerous combinations but I can't seem to get it to work correctly. CSS Code: Original - CSS Code div.chatlayer { position: absolute; top: -50px; left: 50px; border: 1px solid black; -moz-border-radius: 10px; padding: 5px; background-color: white; min-width: 100px; width: auto; text-align: center; visibility: hidden; }
div.chatlayer {
Hi, I'm a begginer in css and html, I've started a webite but the text is not where I want it to be and the Image is where I want it but only because of the text ... So I would like somone to help me with this ^^ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unknown</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" lang="fr" content="q." />
<meta name="keywords" content="s" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
</head>
<body>
<div id="menu"
<div id="leftborder"></div>
<div id="topborder"></div>
<div id="sidebar">
<span class="title">
<h1>Title</h1></a> <p>Sub
</span>
<ul id="nav">
<li><a href="#overview">→Page Principale</a></li>
<li><a href="#example">→Photos</a></li>
<li><a href="#how">→Descriptif</a></li>
<li><a href="#download">→Tarifs</a></li>
<li><a href="#support">→Nous Contacter</a></li>
</ul>
</div>
<p>Welcome to my website !!
<span class="images">
<a href="images/gg.jpg" rel="lytebox" title="Moon on the ocean"><img src="images/gg.jpg" width="500" height="400" alt="" /></a>
</span>
</div>
</body>
</html>
Here is the CSS: Code:
*{
margin: 0;
padding:0;
}
body
{
background-color: #93845E;
color: #eee;
font: 86% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
#topborder{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4.0em;
background-color: #1b1f28;
}
#leftborder{
position: fixed;
top: 0;
left: 217px;
width: 0.3em;
height: 100%;
background-color: #32322E;
}
#menu{
position:fixed;
top: 31%;
left:15px;
width: 230px;
}
* html div#menu {
top: 38px;
left:20px;
width: 230px;
position:absolute;
}
#content{ margin: 45px 20% 5em 315px; }
#content p a:hover,
#content dd a:hover { border-bottom: 1px dotted #8ad459; }
h1, h2, h3{ font-family: "Trebuchet MS",Verdana,Sans-Serif;}
h1 {
display: block;
font-size: 2.3em;
background-color: #32322E;
}
h1 a { color:#fff; border: none; }
h1 em{ font-size: 0.45em; font-style: italic;
text-transform: lowercase;
}
h2 {
font-size: 1.5em;
letter-spacing: 0.4pt;
color: #4985A9;
text-transform: uppercase;
padding-top: 0.5em;
}
h3 {
font-size: 1.0em;
letter-spacing: 0.2pt;
color: #c0dB5A;
text-transform: uppercase;
padding-top: 0.5em;
}
a{
color: #1b1f28;
text-decoration: none;
}
a img{ border: none;}
p { line-height: 1.5em; margin-bottom: 1.0em; font-size: 0.9em; align: right;}
p.lead { font-size: 1.0em; }
/* Liens
----------------------------------------------- */
#menu a{
color: #fff;
}
#menu h1 a{ font-weight: normal; }
#menu h1 a:hover{ }
#nav{ list-style: none; margin: 2em 2em 2em 0;}
#nav li{ padding: 0; margin: 0; }
#nav a{
display: block;
height: 2.0em;
padding: 0.3em 0.2em 0.2em 0.8em;
margin-bottom: 1px;
color: #eee;
background-color: #32322E;
}
#nav a:hover{
background-color: #1b1f28;
}
/* Autres */
#content ul.download li{
padding: 0.3em 0;
background-image:none;
}
#content ul{ margin-left: 4px;}
#content ul li{
list-style: none;
padding: 0 0 0 12px;
}
.section{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.first{ border-top: none; padding-top: 0; }
.title{
position:fixed;
top: 15%;
left:15px;
width: 205px;
}
.quote{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.images{
padding: 3px 3px 8px 250px;
background-color: #222;
border: 1px solid #2a2a2a;
float: center;
margin-right: 1px;
margin-bottom: 10px;
}
.section{
border-top: 4px solid #3d3d33;
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.first{ border-top: none; padding-top:
Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. How do I align an actual text input box to the center of the screen using css? OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 {
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
text-align:center;
}
.footer_header_link{
text-align:center;
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
}
You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks EDIT: no longer required All the text is at the top of the menus, how do i get them so they are in the center of the divs ? Code:
#navbar2 { float:right; position:relative; }
ul.menu2 { list-style-type:none; margin:0; padding:0; }
#navbar2 .leaf2 { width:70px; height:35px; float: left; display: inline; list-style-type:none; display:inline; text-align:center; color:#F7941D; font-weight:bold; font-size:12px; background-color:#2E2E2E; margin-left:8px; border-top-left-radius: 5px; border-top-right-radius: 5px; opacity:0.85; filter:alpha(opacity=85); }
#navbar2 li:hover, #navbar2 li.active { opacity:1; filter:none; }
#navbar2 li a { width:70px; height:35px; display:block; padding-top:3px; }
.leaf2 a { width:70px; }
Code:
<div id="navbar2">
<ul class="menu2">
<li class="leaf2<? if ($activePage=="home") {?> active<? } ?>"><a href="." title="Home">home</a></li>
<li class="leaf2<? if ($activePage=="item2") {?> active<? } ?>"><a href="2.php" title="2">item<br>2</a></li>
<li class="leaf2<? if ($activePage=="item3") {?> active<? } ?>"><a href="3.php" title="3">item<br>3</a></li>
<li class="leaf2<? if ($activePage=="item4") {?> active<? } ?>"><a href="4.php" title="4">item4</a></li>
<li class="leaf2<? if ($activePage=="item5") {?> active<? } ?>"><a href="5.php" title="5">item5</a></li>
</ul>
</div>
I am relatively new to using div tags - transitioning from table tag to organize pages. I want the checkboxes to be aligned to the left inside a container that is centered in the body. Currently it is all aligned to the left for some reason. The body tag has no text-align or any other css rule manually set. Code: <div style="display: block;text-align;left;float: center;margin-left: auto;margin-right: auto; border: .1em solid;width:400px; position: relative; clear:both;"> <div style="display: block;text-align;left;float: left;margin-left: auto;margin-right: auto; border: .1em solid; position: relative; clear:both;"> <INPUT TYPE="CHECKBOX" NAME="cartoon">cartoon<BR> <INPUT TYPE="CHECKBOX" NAME="comicstrips">comicstrips<BR> </div> </div> thanks. Firefox: all looks fine except the checkbox container does not appear to be inside the surrounding container - the outer container div appears as a line (it's border) at the top of the inside div with the checkboxes IE8: on a test page with nothing else - appears as Firefox. In my page with several other divs it appears with one container inside another fine, but the main container is not centered. I have looked at several tutorials about float etc but...wits end... thanks. I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div? Code: echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">'; echo '<h1 >1/35 Scale House</h1>'; echo '</div>'; Hi there, I'm making a weblog layout made in php all the articles are going to be stored on the center of the screen, the code I used for this is width:50%, but how do I make the css code so that the center page color will be all the way at the bottom no matter what size of a window is used? Thanks in advanced! Hi there, I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work. How can I center them vertically? Thanks! Hi folks, don't usually post in the CSS forum here, but in the php forum I have got great help so give it a go. Basically I need to know how to center two divs on a page which themselves have float:left attribute. When I set text-align:center on the body a couple of other divs aligned perfectly so I did not have to worry about different res's. But I need these two divs (leftnav and content) next to each other and acheived this by setting the float:left attribute. The CSS code is below, I hope you can help, i have tried but these two divs in one outer div (without any float set) but didn't work. Code:
body
{
font-family: "Lucida Sans";
font-size: 12px;
margin: 0px 0px 10px;
border-top: 0px none #000000;
border-right: 0px none #000000;
border-bottom: 5px none #000000;
border-left: 0px none #000000;
scrollbar-arrow-color: #D20000;
scrollbar-3dlight-color: #4F4F82;
scrollbar-darkshadow-color: #4F4F82;
scrollbar-face-color: #f4f4f0;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #d0d0d0;
scrollbar-track-color: #ffffff;
text-align: center;
display: block;
}
.leftnav {
float: left;
color: #000000;
font-size: 12px;
font-family: "Trebuchet MS";
border-top: 1px solid #000000;
border-right: 1px none #000000;
border-bottom: 1px none #000000;
border-left: 1px none #000000;
padding: 0px;
white-space: nowrap;
width: 220px;
margin: 10px 0px 0px 10px;
clear: both;
text-align: left;
}
.content {
background-color: #FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
float: left;
white-space: normal;
margin-top: 10px;
margin-left: 0px;
margin-bottom: 10px;
font-family: "Trebuchet MS";
font-size: 13px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 1000px;
margin-right: 0%;
list-style-type: none;
text-align: left;
}
Thanks very much. im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks I know there has to be an easy answer to this question but I'm at a loss! How do I center an image using CSS? Thanks! BB I'm wondering how to "vertical-align: middle" the text in the anchor tags. I haven't got that part to work. Code:
a.aMenuLinks:link
{
color: #666666;
font-family: tahoma, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-indent: 15px;
width: 100%;
height: 25px;
display: block;
}
Thanks... I have used an image file "picture.PNG" like this : <h1><img src="picture.PNG" /></h1> then the css is h1{ text-align: center; margin: 20px; padding: 10px; height: 100px; } But it will not align the image in the center ? Am i going about this the wrong way ? or is it just a syntax error ? I'm working with a php script that i purchased. In my admin_login.php page is the entry for the image and my entry from my layout.css page. I'm only seeing half my background image. I cant seem to get it centered. admin_login.php... 5.<div id="container_login"> 6. <a href="http://www.myglobalpnr.com" target="_blank" id="login_logo"><img src="<?php echo IMG_PATH; ?>login_logo.jpg" alt="Property Listing Script by ClassifiedsGeek.com" /></a> 7. <div id="main_login"> 8. <?php require $content_tpl; ?> 9. </div> <!-- main_login --> 10. </div> <!-- container_login --> 11. 12.layout.css... 13. 14./* login */ 15.#container_login{ 16. font-family: Arial, sans-serif; 17. font-size: 12px; 18. margin: 0 auto; 19. overflow: hidden; 20. position: relative; 21. max-width: 100%; 22. height: 1306px; 23.} 24.a#login_logo{ 25. position: absolute; 26. top: 0; 27. left: 404px; 28. height: 129px; 29. margin: 0 auto; 30. width: 192px; 31.} 32.#container_login #main_login{ 33. float: none; 34. margin: 200px auto 0; 35. position: relative; 36. text-align: left; 37. width: 343px; 38.} 39.#container_login h3{ 40. font-size: 1.3em; 41. font-weight: bold; 42. margin: 5px 15px; 43. text-transform: uppercase; I know there's one thing that i didn't do. Can you help me please? Thanks in advance, Scotty13 |
|||||||