|
CSS - Css Code To Position Text Above Image
Assume the following image (created in photoshop) represents a text and image layout on a web page. What would the CSS code look like to accomplish the layout. I would like to control the distance between the image and the text. The text (PREV, TITLE, NEXT) may change, but the positioning should be maintained.
Similar TutorialsHello. So I have this situation (on the right): h t t p : / / img339.imageshack.us/img339/6958/1stb.png and when I change my browser resolution, I get this (on the right): h t t p : / / img35.imageshack.us/img35/3892/2ndhw.png Is it possible to do that the image wouldn't change the place on a screen even you when change the resolution of the browser? And yes, the image must be behind the text. Thanks in advance for any suggestions and tips. I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image. My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it. Please help. Code: <style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }
div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}
.icon-32-delete { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module { background-image: url(stdimages/icon-48/module.png); }
</style>
</head><body>
<div class="toolbar_list">
<ul>
<li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
<li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
<li><a href="#" class="icon-32-new new" title="New">New</a></li>
</ul>
<div class="toolbarheader icon-48-module">Title</div>
</div>
I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's I have a really wierd problem. I want to work with div's inside div's, so i will be able to make content scrollable. But i have this problem. (It is really hard to explain this without showing screenshots so i try to bend the forum-rules a bit ) scalesmusic DOT dk SLASH problem DOT jpg As you can see, theres an empty line before my headline. The stylesheet for this page is as follows. body { background-color: black; background-image: none); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; margin: 10px; scrollbar-3dlight-color: #ff6600; scrollbar-base-color: black;} div { -moz-border-radius: 9px; padding: 5px; border-style: solid; border-width: 1px; border-color: white; background-color: #222222;} div div{-moz-border-radius: 4px; padding: 0px; border-style: solid; border-width: 1px; border-color: white; background-color: #222222;} p { font-family:courier new; font-size:14; color: white; text-indent: 10px;} a { font-family:courier new; font-size:16; color: #ff6600; text-decoration: none;} a:hover{font-family:courier new; font-size:16; color: #ff6600; text-decoration: underline;} h1 { font-family:courier new; font-size:32; color: #ff6600;} h2 { font-family:courier new; font-size:18; color: #ff6600;} h3 { font-family:courier new; font-size:16; color: white;} h4 { font-family:courier new; font-size:10; color: white; text-decoration: underline;} img { hspace:20; border-color: #ff6600;} .boxVisible {display: block;} .boxHidden {display: none;} I've made a testpage too, to locate the problem. scalesmusic DOT dk SLASH tester DOT jpg Here's no problems!?! The stylesheet looks as follows: div { -moz-border-radius: 9px; padding: 20px; border-style: solid; border-width: 1px; border-color: blue; background-color: white;} div div { -moz-border-radius: 9px; padding: 5px; padding-top: 0px; border-style: solid; border-width: 1px; border-color: black; background-color: #666666;} div div div{ -moz-border-radius: 9px; padding: 10px; border-style: solid; border-width: 1px; border-color: red; background-color: #888888;} p { font-family:courier new; font-size:14;} h { font-family:courier new; font-size:24;} Why this empty line?!? I have no idea what i am doing wrong! PS: I really don't like to bend the forum-rules, but i can't explain this problem in words alone! I am rotating text using the following (from Jonathan Snook's blog): -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); ...but my positioning does not seem to hold. I'd like the text to run along the left hand side of the window, so while this works when the text is NOT rotated: position: absolute; left: 0; top: 0; width: 100%; height: 73px; ...when I add the rotation code in, the text is centered in the window. I figured that swapping the width and height would be the answer, since the box is rotated 90 degrees, but it results in unrotated text moved off screen. I'm using the latest version of Safari for my testing, figuring I'd start by getting it to work there before moving to other browsers. Any ideas? I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning. Is there anyway I can position the new div relative to the input rather relative to containers around it? Hey everyone. When I have text in a span and a tag (maybe any inline element for that matter), it would seem the vertical positioning is different from IE than other browsers. The site I'm having trouble with is here... http://jobs4ecps.ca/ It's only a "soft launch" so far, so please go easy on me about other blemishes The problem area I can use as an example is the top black bar. The text is higher in IE than other browsers. Any ideas on how to level it out? Thanks! i have a div tag absolutely positioned and inside that tag i ONLY have an image. so if place it in some code like this: Code: <tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr> and following that right away, if i have another table row with whatever in it: Code: <tr><td>asdf</td></tr> then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'. if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there. any ideas? thanks Hi all. I have a script that draws a calendar. I would like to be able to position the day number in the upper right of each table cell using CSS. Note, each cell will also have an embedded table or just text showing events for that day, so I don't mind if the day number overlaps that table. Ive tried doing something like this: PHP Code: td.dayNumJK { font-size: 12px; font-weight: bold; position: absolute; top: 1px; right: 1px; } But it seems to ignore the style. I've tried all the possible position attribute values (static, absolute, relative, fixed) but it doesnt seem to work. Maybe this is not possible with CSS? Any ideas how I can accomplish this? Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you If you look at that page in IE6 you'll see the image with the woman is misaligned. It looks fine in FF and IE7. I'm not sure what I need to do to get it to align in IE6. This isn't my site design and frankly the CSS is a mess (too many css includes, etc), so I'm actually pretty lost as to how to fix this. Does it have something to do with the #leftcontent being absolute positioned? Hi, I have 2 divs. The first one is set to a specific width and height. The second one varies in size. The problem is that I need the second div to sit on top the first, and the page to position itself according to the first div. Here's an example:http://www.caillouette.com/testSite/index2.php The blank image will be white, but it's dark grey for demonstration purposes. here's the CSS: Code: .big_image{
z-index:9;
position:absolute;
left:0px;
top:0px;
margin: 5px 0x 0px 27px;
}
.big_image_blank{
z-index:0;
position:relative;
width:262px;
height:262px;
background-image: url(images/Uploads/Listings/blank.jpg);
margin: 5px 0x 0px 27px;
}
Hey I got a table which displays the profile (data/info) of a user. The first column says: first name, last name, email, etc. the second column shows the actual data: stefan, blabla, blabla@hotm... etc. Then i have a third column where the 8 cells are rowspanned into one big cell. In this celll i want to show a picture that can be max: 250x250 pixels. The image might be smaller but not bigger. My problem is that some users have smaller pictures and some users have the maximum allowed dimensions. So if you browse through all the profiles by clicking the next button, the other elements on the page shift lower or higher depending on the size of the uploaded image. What i wanted to do is make a basic picture of 250x250 and put that in the cell for every member. And then display the real picture above the standard pic. I just dont know how to let the images overlap with eachother. Or is there a better way for this? I probably shouldnt use a table for this at all. But how do i make a table with the tabular data. And put the image next to the table? It automatically shifts to the next line for me... hope you can give me some tips. (my eventual goal is to make every user profile look exactly the same with the only difference being the data of the member-profile.) thanks in advance. Hi I have just read this Quote: Using CSS to position text and graphics absolutly, relatively and overlapping elements such as text and images. Includes the best way of overlapping text Can some one tell me therefore if it is possible to explicitly specify the position to place an animated gif on top of an existing image with an image map; almost as a marker. Thanks for your help Rob www . myspace . com / newsoundproduction I cant get the background image to sit at the bottom of the page... already tried millions of things and im still getting the same error... Code:
<style>
body {
background-color:FFFFFF;
background-image: url('http://copydential.net/gus/newwall5.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom center;
}
table, tr, td {background:transparent; border:0px;}
table table table {background:transparent;}
table table table td {
background-color:FFFFFF;
filter:alpha(opacity=90); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
}
table table table table td {filter:none;}
table table table {
border-width:3px;
border-color:FFFFFF;
border-style:solid;
}
table table table table {border:0px;}
input {background-color:transparent !important;}
td, span, div, input, a, table td div div font,
body div table tbody tr td font {font-family:Verdana !important;}
td, span, div, input, table td div div font,
body div table tbody tr td font {color:000000 !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10, .btext {color:000000 !important;}
a {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000 !important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
.r{;}
.navbar {visibility:visible;} .navbar font {visibility:hidden;}
a.text, table div font a {display:none;}
table div div {visibility:hidden;}
table table div div {visibility:visible;}
a img {filter:alpha(opacity=100); -moz-opacity:0.6; opacity:0.6; -khtml-opacity:0.6;}
a:hover img {filter:none; -moz-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;}
img {border:0px;}
table table table {width:300px;}
table table td.text table, table table td.text table td {width:100%;}
</style>
<style>
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url("http://copydential.net/gus/newcontact.jpg");
background-attachment:scroll; background-position:center center;background-repeat:no-repeat;
background-color:transparent;}
.contactTable table, table.contactTable td {
padding:0px !important;border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style>
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
</style>
Greetings! I am trying to position a transparent gif at the bottom of a page, repeating on the x axis, so that text scrolls behind it. I have the gif fixed at the bottom of the page, but the text is still over top of it. I think I will need to create an element, position it at the bottom of the page, use the transparent gif for the background, and give it a z-index higher than zero, right? If so, I can't get it it to work! What I am currently doing: Code:
body{
background:transparent url('/flames.gif') center bottom fixed repeat-x;
}
Hi, I am trying to position a image after the text link. If the link is in a single line then it works good, but when it goes to next link then the image disappears. This is the code: Code: <style>
.master {
font-family: arial;
font-size: 12px;
width: 200px;
}
.master a{
font-weight: bold;
color: #999;
text-decoration: none;
background: url(1px.gif) no-repeat fixed right bottom;
padding: 0px 15px 0px 0px;
}
.master a:hover {
text-decoration: underline
}
</style>
<div class="master">
<a href="#">Link Title: Cascading Style Sheets (CSS) forum</a><br/>
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the "learning CSS" page. For background information on style sheets, see the Web style sheets page.
</div>
Please advice. Thanks in advance. Take a look at this site: http://clients.ekcetera.com/thunderhook/thunderhook/# The image that displays: Welcome to the Wilderness is giving me trouble. It's 85 px tall and I can't get it to bump up right underneath the navigation. It's like there's something there blocking it from doing so. If you highlight the images and the navigation, you can see this little block of space off on the right side that gets highlighted. I can't seem to find where that is being created. Here's the CSS: Code: body {
background-color: #C2B59B;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 980px;
margin-right: auto;
margin-left: auto;
}
.logo {
position: absolute;
}
.whitebackground {
background-color: #FFF;
width: 900px;
margin-right: auto;
margin-left: auto;
height: 1000px;
padding-top: 30px;
}
.mininav {
text-align: right;
width: 835px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 25px;
color: #036;
}
.header {
background-image: url(images/header.jpg);
width: 835px;
margin-right: auto;
margin-left: auto;
padding-top: 155px;
background-repeat: no-repeat;
}
.mainnav {
background-image: url(images/transparent.png);
background-repeat: repeat;
height: 25px;
width: 835px;
margin-bottom: 0px;
padding-bottom: 0px;
}
/* Dropdown Menu Styling */
.dropdown {
float: left;
position: relative;
left: 123px;
top: -16px;
}
.dropdown dt {
cursor:pointer;
padding-right: 15px;
padding-left: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 25px;
}
.dropdown dt:hover {
background-color: #C2B59B;
}
.dropdown dd {
overflow:hidden;
width:200px;
display:none;
z-index:200;
opacity:.6;
background-color: #DED8C9;
position: absolute;
left: -40px;
}
.dropdown ul {
list-style-position: outside;
margin-left: -40px;
font-size: 13px;
}
.dropdown li {
display: inline;
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
color:#333;
text-decoration:none;
width:200px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
}
.dropdown a:hover {
color:#000;
font-weight: bold;
background-color: #C2B59B;
}
.dropdown .underline {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
.welcomewilderness {
text-align: center;
margin: 0px;
padding: 0px;
height: 85px;
}
.welcomewilderness img {
vertical-align: top;
}
HELP! hey, i have this code below at the top of my page...the image that is there a a background image i would like to more to the right a bit so that some of the orange background is shown on the left!! can anyone advise how i do this please?? thanks Code:
#TitleBar {
margin:0px 0px 10px 0px;
padding:28px 0px 5px 10px;
padding-left:10px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color: #ffffff;
border-bottom: 1px #ff9900 solid;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#ff9900;
background-image:url(../images/webmedia72.gif);
background-position: left;
background-repeat: no-repeat;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* "be nice to Opera 5" */
body>#TitleBar {height:14px;}
thanks RF I want to be able to position an image at the very top of a cell/div/container/whatever and one at the very bottom. It's too bad there is no float:top and float:bottom. Something like this [HTML] <div style="background-color: red"> <img src="images/top.jpg" style="?" /> <img src="iamges/bottom.jpg" style="?" /> </div> [/HTML] |
|||||||