|
CSS - Centering Image Behind Overflowing Text
Hi,
I'm new to CSS and haven't been able to get this working. I have two layers, one for an image, and another for text that goes on top. The text is supposed to be centered and the image should be centered wrt the text. The problem is that sometimes a word in the text will be too long and there's overflow. When this happens, the image stays on the left and the text box gets larger. This way the image isn't right behind the center of the text. I tried using overflow: visible but this didn't change anything. Thanks for any help. Similar TutorialsThere's probably a simple, obvious solution for this, but I'm having problems managing to get this to work. Here's the isse: I have a menu that basically looks like so: Home | Guestbook | Contact Us | Help I need to place an image beneath each menu item so that is centered directly below the text, to indicate which page the user is on (not my design; I don't want to hear about it). I can not use tables for this - the menu items are pulled out of a database, and are generated in a loop; I also can't use some sort of div that requires a set width for each menu item, due to the fact that the menu items are all of variable widths. Ideas? Damnit. Differing browser box models piss me off. I guess thats what you get for being a web developer, where someone can use 6+ different programs to run your code. I just started doing design with divs instead of tables and man what a PITA. I really like the idea of "building blocks" tho (and I really hate the inflexibility of tables), so I'm trying to grind through it. Its a small project, however, so I havent really been able to test cross-browser compatibility too much. I'm running into a strange error in IE (sidenote: the page does seem to be handled correctly in Opera (though Firefox jacks the page up totally)). Anyways, I have a series of nested divs (to emulate the structure of a table). Everything looks fine until I start messing around with divs with a display of 'none'. When I insert a div (or set a current div's) with display = 'none', part of the form input text will "flow over" outside of the div. In the pictured example, "Zachary Wedgeworth" is the last entry in the selectbox. There is no code / html after that selectbox, but as you can see, "Wedgeworth" appears after it! It isnt even able to be highlighted! The second line of the form contains a div with style='display:none'. If there's no div containing anything to do with display, this "overflow" error doesnt occur. There should be no difference in inserting a non-displayed div vs. never putting the div in the code at all, but (in IE at least), there is. stupid & frustrating. Has anyone run into this problem or have any idea why this might be occuring? Its already stumped a couple fellow programmers. Hi, I am having a strange issue with my new site code . I am experimenting with a new look and decided to go with all css, no tables look. I have a div where the enteries go. I entered some random text to see how it looks. To my surprise in Mozilla 1.7.10 the text overflows from the entry div into the other one while it works fine in Internet Explorer ( the post box expands automatically to fit all the text). Second the in the commentsarea div, why is the "comments(1) floating in the middle of the entry box instead of the bottm right ? here is the code in question 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=iso-8859-1" />
<meta name="author" content="Kashif Khan" />
<style type = "text/css" media="screen">
body
{
background-color:#A2C257;
color: #333;
padding:0;
margin:0;
font: 90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
#page
{
text-align: left;
margin: 20px auto;
padding: 0px;
width: 800px;
background-color:#A2C257;
}
#header
{
height:105px;
margin-bottom: -1px;
background: url("url13.jpg") no-repeat top center;
}
.entry
{
border: 1px solid #FF4500;
background-color:white;
height:200px;
margin:15px 0px;
padding: 15px 20px 20px 20px;
}
#menuarea
{
padding:0px;
margin:0px;
font:90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
}
#menuarea #navbar
{
text-align:center;
padding-bottom:5px;
padding-top:5px;
padding-left:0px;
margin-top:0px;
margin-left:0px;
background-color:#white;
color:white;
line-height: 18px;
margin: auto;
width:100%;
}
#navbar
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin: 0px 0px;
}
#navbar a
{
color:white;
}
#navbar li
{
display:inline;
padding: 5px 0px 5px 0px;
}
#navbar li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration:none;
border-right: 1px solid #fff;
}
.center
{
text-align:center;
}
p img
{
padding: 0;
max-width: 100%;
}
a
{
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
a img
{
border:none;
}
.commentsarea
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin:0px 0px ;
}
</style>
</head>
<body>
<div id = "page">
<div id = "header">
</div>
<div id="menuarea">
<ul id="navbar">
<li><a href="">Root</a></li>
<li><a href="archive.php">Archive</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="mailme.php">Email Me</a></li>
<li><a href="http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://kashif.f2o.org/xml.gif" align="middle" border="0"/></a></li>
<li><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://feeds.feedburner.com/kashiflocalhost/root&tt=CENTRALDIRECTORY&ru=http://rss.msn.com'"><img src="http://sc.msn.com/c/rss/rss_mymsn.gif" alt="" style="border:0"/></a></li>
<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://www.bloglines.com/images/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" /></a></li>
<li ><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="91" height="17" border="0" align="middle" alt="Add to My Yahoo!"></a></li>
</ul>
</div>
<div class = "entry">
Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go. 2
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.3
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.4
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.5
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.6
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.7
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
</div>
</body>
</html>
Thanks Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know. sorry if its lame but how do i keep my text/text block/para center in a DIV? code: .box { float:left; width:400px; height: 400px; } now i want the text/para to be exactly in the middle of the box(having same top, bottom space or margin/padding). the text shall be dynamicly generated by cms... I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color. here is the css for header and the text code. Code:
#topsection {
background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
height: 90px;
}
span.htext {
font-color: #3300CC;
font-size: 30px;
text-decoration: none;
letter-spacing: 1px;
text-align: left middle;
}
anyone know how to fix this. Hello, I have a vertical menu on the left hand side of my page that I'm working on. I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment. Here's the code I'm using for the menu: Code:
#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#menu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}
#menu li {
margin-bottom: 4px; /* space between each menu item */
}
#menu li a { /* text */
font-weight: bold;
height: 25px; /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
If anyone could help me out that'd be great. Thanks! How do I create centered left-justified text? I want it to look something like this: +---------------SUPPOSE THIS IS MY PAGE---------------+ This paragraph is centered with respect to the page, but note that the text is wrapped around and left-justified within the paragraph. +-----------------------------------------------------+ Can I achieve that with CSS without using tables and manipulating cell widths and cell alignments? . my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering. placement: well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure??? Code: #navbar {
text-align:right;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
padding-right: 8px;
margin-top:-12;
height:31;
}
#navbar ul {
margin-right: -0.3em;
height:31px;
position:relative;
bottom:-2px;
}
#navbar ul li {
display: inline;
list-style-type:none;
margin-left: 0.3em;
margin-right: 0.3em;
position:relative;
vertical-align:middle;
}
#navbar ul li a {
padding-top:11px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li div {
position:relative;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
margin: 0;
}
vertical centering: i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this... ....................................... . . . texttexttexttexttext. .image texttexttexttexttext. .----- texttexttexttexttext. . . ....................................... so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc. i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this. http://www.viportals.com/ EDIT: DID IT ON MY OWN!!! THATS A FIRST!!! Code: #navbar {
text-align:center;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top:-15px;
height:31px;
line-height:31px;
margin-left:0;
margin-right:0;
}
#navbar ul li {
display: inline;
list-style-type:none;
}
#navbar ul li a {
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 4px;
padding-bottom: 4px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
vertical-align: middle;
}
now i have one QUESTION: how do i get all the buttons to align center?????????? they all stay to the right oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well. So I have 2 different background patterns that extend to infinity behind my logo. Problem is, I could not center my logo in front of these two patters. Code: so it should display it like; Layer 1: Left Pattern Right Pattern Layer 2: Logo But instead, its displayed as; Layer 1: Left Pattern Right Pattern Layer 2: Logo I spent over an hour searching this on the internet. Any help appreciated, thanks! Code: .subcontent {
min-height:50px;
width:100%;
background:#00CC66;
}
.leftcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_lpattern.jpg) repeat-x;
}
.rightcontent {
min-height:50px;
width:50%;
float:left;
background:url(images/bg_rpattern.jpg) repeat-x;
}
<div class="subcontent" style="position:relative;">
<div style="margin-left:auto; margin-right:auto; width:400px; height:50px; position:absolute;">
<img src="images/logo.jpg" alt="Insert Logo Here" name="Insert_logo" width="200px" height="50px" />
</div>
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
I have a div with background images. It is styled float:left. That is all fine. The div is sized at 50x50px. Inside this div is a smaller image. I want the image to appear centered of the div. I have tried everything I can think of w r t margins and padding but the image allways shows up in the upper left corner. Here is an example: Code: <div class='caltool' onmouseover="this.style.backgroundImage = 'url(images/litegearani.gif)';" onmouseout="this.style.backgroundImage = 'url(images/litegearstill.gif)';"> <a href="whatever.html" title="export to desktop calendar"><img style="margin: auto; height:16px; width:16px;" src="icon_export_vcal.png" width="16" height="16" border="0" /></a> </div> Here are the styles in the caltool class: Code: .caltool {
float: left;
background-image: url(../images/litegearstill.gif);
background-repeat: no-repeat;
background-position:center;
height:50px;
width: 50px;
}
How can I make the images be CENTERED over the gear background?? hello, i have this in my html: Code: <div id="link_image"> <a href="http://www.mylink.com/" target="_blank">My link with image </div> & here the css: Code:
#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}
Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered. thanks! My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? Hi all, I am having trouble getting an image to go where I want it to, which is flush up against the top of the page and horizontally centered. I originally accomplished this a few years ago on my website, but now I am trying to do a new build, and this time around the code I used last time is not working! The working image can be seen here, it is the banner logo displayed at the top of the page. It's currently perfectly set, and all I want is to have that again on a new page. However, when I simply copy/paste the old code onto that new page, it doesn't look anything like the original. Here is the original code. In retrospect I have no idea how I got it to work, since it looks messy as heck: Code: <table align="center" style="position:relative; top:-15; z-index:5" border="0" width="983" height="198"> <tr><td><img style="position:absolute; top:0;" src="http://www.thesunderedguard.com/images/banner.jpg"></td></tr> </table> All my tinkering around with the new page has not been successful at all. Any help would be much appreciated! Cheers I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
|
|||||||