|
CSS - Trouble With Placing And Repeating An Image In Css
I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.
Code: <div id=left> ........ content ...</div> <div id="image">this is where i want the image</div> <div id="content">content here</div> Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code Code:
#left {
position: absolute;
left: 0px;
width: 215px;
background-color: #efefef;
border: 1px dotted #ccc;
}
#image1 {
background-image: url("http://mydomain.com/image.jpg")
background-repeat: repeat-y;
width: 15px;
margin-left: 215px;
}
#center {
margin-left: 260px;
margin-right: 0px;
overflow: hidden;
}
The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page Cheers Similar TutorialsI'm trying to get a background image/color to repeat down the left hand column of a site, he http:// www. lisaannschleipfer .com, but can't seem to get it working in either FF or IE. You'll notice that in the left hand column, the tannish color does not repeat all the way down the column. I'm fairly certain I've narrowed it down to the bit of CSS code he Code: div#wrapper {
margin: auto;
width:800px;
background: #d1c8ab url(../images/wrapper_bg.jpg);
background-repeat: repeat-y;
}
I've tried looking around the forum for some solutions, and have found a few possibilities (height: auto, overflow: auto, etc), but nothing that I have tried to insert into the stylesheet has seemed to work. Does anyone have any suggestions or solutions? I'd appreciate it! Here's the entire stylesheet, for reference: Code: html {
height: 100%;
margin-bottom: 0px;
}
form {
margin: 0;
padding: 0;
}
img,table {
border:none;
}
table td {
vertical-align:top;
}
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #666666;
background: #0d789c url(../images/bg.jpg) top center repeat-x;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
color: #0d789c;
}
a:hover {
text-decoration: underline;
font-weight: normal;
color: #0d789c;
}
input.button {
cursor: pointer;
vertical-align: bottom;
border: 0px;
background:none;
}
p {
margin-top: 0;
margin-bottom: 5px;
text-align:justify;
}
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#header {
margin:0 auto;
width:940px;
}
.left_bg {
background: transparent url(../images/left_bg.jpg) top right no-repeat;
width:70px;
}
.middle_bg {
background: transparent url(../images/.jpg) top right no-repeat;
width:800px;
}
.right_bg {
background: transparent url(../images/right_bg.jpg) top left no-repeat;
width:70px;
}
.top_bg {
background: transparent url(../images/top_bg.jpg) top center no-repeat;
width:800px;
height:45px;
}
.rightside {
background: transparent url(../images/rightside_bg.jpg) top center no-repeat;
width:185px;
height:173px;
}
.header_bg {
background: transparent url(../images/header_bg.jpg) top center no-repeat;
width:615px;
height:173px;
}
#page_bg {
padding: 0;
margin:0px auto;
}
#top {
width:800px;
margin:0 auto;
padding:0;
}
div.center {
padding:0;
}
div#wrapper {
margin: auto;
width:800px;
background: #d1c8ab url(../images/wrapper_bg.jpg);
background-repeat: repeat-y;
}
#logo {
padding:47px 50px 0 50px;
height:100px;
text-align:left;
margin:0 auto;
}
#logo a, #logo a:link, #logo a:hover {
font-weight: normal;
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
padding:0px;
margin:0;
line-height:1.4em;
letter-spacing:2px;
color:#fefefe;
text-decoration:none;
}
div.newsflash {
height:150px;
padding:10px;
overflow: hidden;
color:#fff;
text-align:left;
}
div#tabarea {
margin: 0;
width:615px;
height:26px;
text-align:left;
}
#footer {
width:800px;
margin:0 auto;
}
.validation {
float:right;
padding:8px 20px 0 0;
}
#footer .footer {
background: transparent url(../images/footer.jpg) top center no-repeat;
height:28px;
width:800px;
}
#pathway {
padding: 0px 10px 8px;
width: auto;
margin-right: 250px;
text-align: left;
}
#search {
float: right;
width:320px;
margin-top: -20px;
margin-right: 20px;
height: 40px;
overflow: hidden;
text-align:right;
}
#area {
padding: 0;
width:100%;
/* color:#d1c8ab; */
}
#whitebox {
margin: 0;
width: auto;
}
#whitebox div {
text-align: left;
}
#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
/* horizontal pill menu */
.pill {
margin:0px 0 0 1px;
text-align:left;
}
td.pill_m {
padding: 0;
margin: 0 10px;
width: auto;
text-align:center;
}
#pillmenu {
white-space: nowrap;
height: 26px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
margin: 0px 1px 0 0;
padding: 0;
background: transparent;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 2px 10px 0 10px;
color: #fff;
text-decoration: none;
background: transparent;
}
#pillmenu a:hover {
text-decoration: underline;
}
#pillmenu a#active_menu-nav {
color: #fff;
background: url(../images/active_arrow.gif) top center no-repeat;
}
#pillmenu a#active_menu-nav:hover {
color: #fff;
}
#leftcolumn {
margin: 0;
text-align:left;
width: 221px;
float:left;
background: #d1c8ab url(../images/leftcol_bg.jpg) top left no-repeat;
}
div#maincolumnfull {
padding:2px 10px;
float:left;
width: 760px;
}
div#maincolumn {
padding:20px 10px;
float:left;
width: 559px;
background: #ffffff url(../images/maincol_bg.jpg) top left no-repeat;
}
div.nopad {
padding: 0;
text-align:left;
}
td.middle_pad {
width: 20px;
}
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}
span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}
/* headers */
div.componentheading {
padding-left: 0px;
}
h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}
h2, .contentheading {
padding: 0;
font-family: Tahoma, Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
vertical-align: bottom;
color: #8cb6cf;
text-align: left;
width: 100%;
}
table.contentpaneopen h3 {
margin-top: 25px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Tahoma,Helvetica,Arial,sans-serif;
color:#71a7c8;
font-size: 1.4em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}
/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}
.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}
.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;
}
a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}
/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }
/** overlib **/
.ol-foreground {
background-color: #f6f6f6;
}
.ol-background {
background-color: #666;
}
.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}
.ol-closefont {}
/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}
a.mainlevel:hover {
}
/* spacers */
span.article_separator {
display: block;
height: 20px;
}
.article_column {
padding-right: 5px;
}
.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}
td.buttonheading {
}
.clr {
clear: both;
}
div#maindivider {
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}
table.blog span.article_separator {
display: block;
height: 20px;
}
/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
}
table.contenttoc td {
padding: 0 5px;
}
/* content tables */
td.sectiontableheader {
background:transparent url(../images/sectiontableheader_bg.gif) top left repeat-x;
color: #fff;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 6px;
}
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}
tr.sectiontableentry1 {
background:#f3f3f3;
}
tr.sectiontableentry2 {
background:#fefefe;
}
/* content styles */
table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
}
table.contentpaneopen li {
margin-bottom: 5px;
}
table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}
table.contentpaneopen h3 {
margin-top: 25px;
}
table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.highlight {
background-color: #fffebb;
}
/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}
div.moduletable {
margin-bottom: 25px;
}
div.module_menu, div.module {
margin: 0 0 0 2px;
padding: 0;
margin-bottom: 15px;
}
div.module_menu div div div div ,div.module div div div div {
background: none;
padding: 0;
}
div.module_menu div, div.module div {
}
div.module_menu div div, div.module div div {
padding:0 0 10px 0;
}
div.module_menu div div div, div.module div div div {
padding: 0px;
width: auto;
}
div.module_menu ul li a:link, div.module_menu ul li a:visited,
div.module ul li a:link, div.module ul li a:visited {
font-weight: normal;
background:transparent url(../images/blue/bullet2.jpg) top left no-repeat;
line-height:24px;
}
#leftcolumn div.module table ,#rightcolumn div.module table {
width: auto;
}
#leftcolumn h3, #rightcolumn h3 {
height:36px;
color:#fff;
font-weight: bold;
font-family: Tahoma, Helvetica,Arial,sans-serif;
font-size: 12px;
line-height:26px;
margin: -2px 0 0 ;
position:absolude;
padding:0px 0 2px 22px;
text-align: left;
width:198px;
background:transparent url(../images/h3_bg.gif) top left no-repeat;
}
#leftcolumn .moduletable_menu, #leftcolumn .moduletable, #leftcolumn .moduletable_text, #leftcolumn .c {
margin:0 0 20px 0;
padding: 0px;
text-align:left;
}
#leftcolumn ul.menu, #rightcolumn ul.menu {
margin:0;
padding:0px 0 0 10px;
list-style:none;
margin: 0px 0;
width:194px;
}
#leftcolumn ul.menu li, #rightcolumn ul.menu li {
margin:0;
padding:0;
}
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
display:block;
line-height:20px;
border-bottom:1px dotted #c3b586;
padding:2px 0px 0 12px;
height:20px;
text-decoration:none;
text-align:left;
color:#666666;
}
#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color:#0d789c;
}
/* ****** left col current menu ****** */
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
display:block;
line-height:20px;
border-bottom:1px dotted #0d789c;
padding:2px 0px 0 12px;
text-decoration:none;
color:#0d789c;
}
#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
color:#666666;
}
/* ****** left col sub menu ****** */
#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
margin:0;
padding:0 0 0 0px;
list-style:none;
}
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link,
#rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link {
background: transparent url(../images/menu_sub_link_bg.gif) left no-repeat;
text-decoration:none;
color:#666666;
padding:2px 25px;
}
#leftcolumn ul.menu li.active ul li#current a, #leftcolumn ul.menu li.active ul li#current a a:link {
background: transparent url(../images/current_link.jpg) left no-repeat;
text-decoration:none;
color:#666666;
padding:2px 25px;
}
#leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover {
s/menu_sub_link_bg.gif) left no-repeat;
color:#666666;
}
/* forms */
#leftcolumn .moduletable ul, #rightcolumn .moduletable ul {
margin:6px 0;
padding:0;
list-style:none;
}
#leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li {
margin:0;
padding:0 2px;
}
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}
div.search input {
width: 69px;
vertical-align:bottom;
background-color: #ffffff;
margin: 15px 0 10px 0;
}
form#form-login fieldset {
margin:0px 20px 0 20px;
padding:20px 0 0 0;
border:none;
text-align:left;
}
form#form-login ul {
text-align:left;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
form#form-login ul li{
text-align:left;
margin:0;
padding:0 0 0 20px;
}
#leftcolumn div.module h3 {
top:-500px;
left:-500px;
padding-left:0;
position:absolute;
}
/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }
div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #666; text-align: center; }
/* Parameter Table */
table.paramlist {
margin-top: 5px;
}
table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}
table.paramlist td.paramlist_value {
}
div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}
/* Banners module */
/* Default skyscraper style */
.bannergroup {
}
.banneritem {
}
/* Text advert style */
.banneritem_text {
padding: 4px;
font-size: 11px;
}
.bannerfooter_text {
padding: 4px;
font-size: 11px;
background-color: #F7F7F7;
text-align: right;
}
/* System Messages */
/* see system general.css */
.pagination span { padding: 2px; }
.pagination a { padding: 2px; }
/* Polls */
.pollstableborder td {
text-align: left;
}
/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 0 15px;
}
legend {
margin: 0;
padding: 0 10px;
}
td.key {
border-bottom:1px solid #eee;
color: #666;
}
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}
.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}
.tool-text {
font-size: 100%;
margin: 0;
}
/* System Standard Messages */
#system-message dd.message ul { background: #C3D2E5 url(../../images/notice-info.png) 4px center no-repeat;}
/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;}
/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}
/* ****************************************************************************** */
/* blue */
input,button {
background:transparent;
vertical-align:bottom;
}
input[type="checkbox"], input[type="radio"]{
background: transparent;
border: none;
}
/* -------------------------- */
a.sgfooter:link, a.sgfooter:visited {
color : #fff;
font-family: Arial,sans-serif;
text-decoration:none;
}
a.sgfooter:hover {
color: #fff;
font-family: Arial,sans-serif;
text-decoration:none;
}
#sgf {
font-size: 11px;
text-align:left;
color: #fff;
padding:4px 0 0 10px ;
font-family: Arial,sans-serif;
width:500px;
float:left;
}
.sgf {
text-align:right;
font-size: 11px;
font-family: Arial,sans-serif;
color: #666;
text-decoration:none;
}
.sgf1 {
font-size: 11px;
font-family: Arial,sans-serif;
color: #666666;
text-align:left;
}
a.sglink:link, a.sglink:visited {
color : #666666;
font-size : 11px;
font-family: Arial,sans-serif;
text-decoration:none;
}
a.sglink:hover {
color : #666666;
font-family: Arial,sans-serif;
text-decoration:none;
}
I have a page that I am generating that I would like to have the images (in a box) placed in 3 columns. I generate the code via a simple php script but it only creates a single column. I have a #pagePane selector around a #bodyPane selector and have a number of selectors of the form #appDivXY where X and Y are the column and row I want to put them in. #pagePane { width : 800px; position : relative; table-layout : fixed; text-align : center; margin-left : auto; margin-right : auto; } #bodyPane { width : 800px; position : inherit; margin : 5% auto; } and a series like the following: #apDiv00 { position : absolute; width : 250px; height : 250px; top : 100px; left : 25px; border : thin; border-color : #000000; border-style : solid; } #apDiv10 { position : absolute; width : 250px; height : 250px; top : 100px; left : 275px; border : thin; border-color : #000000; border-style : solid; } I have validated the code and only get some minor warnings about colors. The full page can be generated at mandp dot lamster dot org slash french40sx.php I am sure (or I hope anyway) that I am doing something trivialy wrong but I have no idea what it could be. I have been playing with this for hours. Thanks for any help. Hal How does one go about placing an image in a paragraph in CSS? I cannot seem to complete this. doug I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially. Here are some sites that fit well on a small screen. What can I do to fix this? http://www.beakable.com/ http://www.gazelletouch.com/ http://www.gummisig.com/ My web site: http://markallen.us Please take a look at my site: http://unoriginalblog.com I want to fill the space below my navigation sidebar with a repeating image div that would grow with the content. How would I achieve this? At the moment the div works like this: Code: <div id="page"> <div id="header"> header img... </div> <div id="content"> main blog bit. </div> <div id="sidebar"> navigation bar </div> <div id="footer"> footer... </div> </div> and the css: (only the relevent bits...wordpress divides ids/classes by layout/font/etc etc) Code:
#page {
margin: 0px auto 0px;
padding: 0;
width: 760px;
}
#header {
padding: 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
#content{
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 490px;
}
#sidebar{
margin: 5px 10px 10px 10px;
padding: 10px 0 10px 10px;
margin-left: 565px;
width: 170px;
}
#footer {
padding: 0px;
margin: 0 auto 0px;
/* for some reason, it has to be 761px so that the whole page is aligned in ie.. firefox works both ways, 760 or 761 */
width: 761px;
height: 100px;
clear: both;
}
perhaps... i can set the bg of the #page as a repeating bg image and the sidebar bg white?... but then how can I make sure that the repeating image blends nicely? is there another way to make it so that I don't have to use bg images in #page? Thanks for the help Hi. I would like to repeat a small slice the entire length of a <div> column, however when I try to do so, the final results show just a white column where the image should be. Does anyone know how to fix this? The image is transparent so that you can still see the background behind it. Ok.. I couldn't find anything on this so figured i'd see if ya knew if either of these were possible using CSS (or any other mean): a) Can you set a background image to repeat a certain number of times? or b) Can you set a background image to repeat only if it will fit the entire image in the space that remains... (for example, I have a small image that I would like to just repeat 4 or 5 times, but dont want it to be cut off if it can only fit like 4 and a half of the images) Thanks. I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images. What is the best way to do this (sans javascript)? Any help is much appreciated. i have a background image and its all fine untill you have too much information on the page and then it repeats itself. i know the reason it does that is because the image has a certain height and that height has been reached. i was wondering is there a way around that? my background fades in to black and i just want the black to continue. here is an example of my problem. http://www.bleanphotos.co.uk/image.php?id=3 thanks for reading Here is what I have as a test my CSS page has Code:
body {
margin: 4px 0px;
padding: 0px;
background-color: #000000;
}
.header {
background-image: url(images/back.gif);
background-repeat: repeat-x;
height:197px
width:100%;
margin-top :0px;
}
and my header page that I want to include in all of my pages looks like this for now Code: <div class="header">
<img src="images/logos.gif" width="750" height="197">
</div>
I want the logos.gif image to sit in the upper left and the back.gif image to repeat behind it so it looks seamless. I thought this would be a super easy task but right now, with the above code all I get is the logos.gif and no back.gif image. My path to image is correct. I even commented out the logos.gif just so I had a blank canvas and nothing. Thanks for any help on this. I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated. 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>
<style type="text/css">
body
{ text-align: center;
min-width: 1044px;
margin: 0px;
padding: 0px;
font-family: arial;
}
#wrapper
{ position: relative;
text-align: left;
width: 1044px;
height: 100%;
margin: 0px auto;
}
#top-header-block
{ width: 1010px;
height: 170px;
background-color: cyan;
}
#top-header-block img
{ height: auto;
width: auto;
}
#logo
{ float: left;
}
/*------------------------------------------*/
#inner-div
{ height: auto;
width: auto;
position: absolute;
left: 567px;
top: 41px;
}
#inner-div img
{ float: left;
}
#inner-div p
{ float: left;
margin-top: 3px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------Alternative to above-------------*/
#img-B
{ float: left;
margin-left: 315px;
margin-top: 40px;
}
#top-header-block p
{ float: left;
margin-top: 43px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------------------------------------*/
</style>
</head>
<body>
<div id="wrapper">
<div id="top-header-block">
<a href="#">
<img id="logo" src=""
alt="" width="248" height="65"/></a>
<div id="inner-div">
<a href="#">
<img src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
</div>
<!-------------Alternative to above-------------------------------->
<a href="#">
<img id="img-B" src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
<!----------------------------------------------------------------------->
</div>
</div>
</body>
</html>
I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage. How do I do this please? Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html CSS: http [colon] // lovelago.googlepages [dot] com/main.css Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need. Thanks to anybody! note to admin: I'm not a spammer, thanks. Hi, Is there a relatively simple way to place an image over the main background of a site, on the right of the main design? For example, see how the Keller Williams logo is on the right, over the background he http://www.groundedgroup.com/client...Interface3.html Ideally, I want to make it happen he http://www.groundedgroup.com/clients/NWR/ It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas? Thanks. OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page. The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it. My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot. edit: apparently I can't post images but here is a link to the image http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif here is my css pertaining to the section Code:
.result_image { float: left; display: block; }
.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }
.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}
I would like the text to stay 80px from the left of the box always.....regardless of what size the image is. I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect. I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin. The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined... but here it is for reference Code: <div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> <div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
(URL address blocked: See forum rules)/erwinsample/ Thanks for any help you can give me. Hi there, I'm trying to position a background image (starting 756 pixels from the left) which is repeating horizontally - but of course am running into problems because as soon as you repeat-x an image repeats the whole screen, not taking into account background positions. Does anyone have any ideas how I can possibly avoid this?! The only thing I can think of is to create a huge image to factor in for all screen solutions, and just not repeat it at all. I'd prefer not to do it this way as firstly it's not very clean, and secondly it will result in a large file size. Here is a link to the background image to show you what I'm talking about: http://joshsphotos.com/images/bg.jpg I've also put in the CSS that would show what I'm trying to achieve. Code:
body {
background-image: url(../images/bg_repeat.jpg);
background-position: 756px 0px;
background-repeat: repeat-x;
}
Any help would be most appreciated. I have a page setup like this.... <table height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td> <td valign="top"></td> <td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td> </tr> </table> and: .lt_bar { width: 27px; background-image: url("images/lt_shd.jpg"); background-repeat: repeat-y; float: left } .rt_bar { width: 27px; background-image: url("images/rt_shd.jpg"); background-repeat: repeat-y; float: right; } In IE all is fine, in FireFox the right side shows, the left side does not. any clues... I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
ajarnforumDOTnet/erwinsample/ Thanks for any help you can give me. Hello all - I am currently having a problem with a background image not being repeated properly. There are two images that need to be repeated, div#topbg and div#leftbg. Topbg is being repeated-x correctly, but I am having problem with Leftbg being repeated-y. The Leftbg will repeat vertically but stops repeating until it reaches the end of the background image of div#wrapper. Could someone provide a solution to this? I need it to repeat all the way down the page! Here is the code for those that know of a simple solution. For those that need to look a bit more into it I have included a zip file as attachment to show just exactly what is wrong.. Please help! The CSS code: Code:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
font : 12px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
div#topbg
{
width: 100%;
height: 145px;
background : url(../images/top-bg.gif) repeat-x top left;
}
div#leftbg
{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
background : url(../images/left-bg.gif) repeat-y;
}
div#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 758px;
height: 100%;
margin: 0px;
padding: 0px;
background: url(../images/bg.jpg) no-repeat top left;
}
div#container
{
padding: 145px 0px 0px 125px;
}
div#content
{
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}
The HTML code: Code: <body> <div id="topbg"></div> <div id="leftbg"></div> <div id="wrapper"> <div id="container"> <div id="text">content</div> </div> </div> Hi I have created a webpage using CSS image pop-outs. The three different images are hosted on imageshack. However, the three text links I have for the three different images only direct to the first image - the other two will load the incorrect image, a copy of the first. Here's the website: westside dot org/give Here's the code: <img src="(url)"> <img src="(url)"> <style type="text/css"> <!-- .fontz { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; } .a { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; } .a { font-size: 14px; } .a strong { font-size: 16px; } --> </style> <span class="a"><strong><font size="5"><br> <font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Why We Give</span></a> </font> </font></strong><font size="5"> </font></span><font size="5"> <div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;"> <span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL um rules)"> <br> </font> </strong> </span> <div class="a" style="text-align: right;"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></font></strong></div> </div> <span class="a"><strong><br> <br> <font size="5"> <font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">How to Give</span></a> </font> </font></strong><font size="5"> </font></span><font size="5"> <div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;"> <span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(URL rules)"> <br> </font> </strong> </span> <div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div> </div> <span class="a"><strong><br> <br> <font size="5"> <font face="Bookman Old Style, Book Antiqua, Garamond"><a onmouseover="this.style.cursor="pointer" " onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'block' "><span style="text-decoration: underline;">Other Ways to Give</span></a> </font> </font></strong><font size="5"> </font></span><font size="5"> <div id="PopUp" style="display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(160,184,169); text-align: justify; font-size: 12px; width: 900px;"> <span class="a"><strong><font face="Bookman Old Style, Book Antiqua, Garamond"><img src="(m rules)"> <br> </font> </strong> </span> <div class="a" style="text-align: right;"><font face="Bookman Old Style, Book Antiqua, Garamond"><strong><a onmouseover="this.style.cursor="pointer" " style="font-size: 12px;" onfocus="this.blur();" onclick="document.getElementById('PopUp').style.display = 'none' "><span style="text-decoration: underline;">Close</span></a></strong></font></div> </div> <span class="a"><strong><br> </strong></span><br> </font></font></font></font><p></p></font></font> Thanks! |
|||||||