|
CSS - Background Image (w/lines) In A "liquid" Design?
Okay, I'm sort of learning as I go here. I had thought I would use a locker as the background, but then I decided to try learning how to do a liquid design (and positioning, oooo) and that kind of screwed me up because now I don't know how to do the locker sides (gap between door and frame like at top).
In a fixed width, I'd put a bg graphic that spanned #container, but in a flexible width design...I'm confused. Do I have to do some stretchy hijinks (layered divs w/bg images) like I did w/the top? That would be very confusing, if so... This is the first of many questions to come, I'm sure. The horribly pedestrian design is at http://www.describe.org/projects/describe/ Similar TutorialsI would appreciate any advise as to whether this degrades properly as the browser is narrowed. I didn't post this in the "critique" forum because my only concern (right now) is related to CSS. There is a separate style sheet for handhelds, so if you have one I would appreciate a look from there also. Most links are still inactive. Liquid design TIA, Rob Hi there, I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code: <img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code: .thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}
<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>
Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts I'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks Hi, I have tried my hand at creating a box to set a fake image map over a background image, without luck. (But, I'm a total dork using css. Absolute beginner.) I have been trying the instructions he http://www.position-relative.com/tutorials/tute1_css_bg_image.php However, my background image is set into the body css spec, though I have only tag styles + the body's background image set using css. The rest of my page is tables, so I am wondering if I need to set the background image [for my whole page] using the .box1 spec shown on the tutorial at the link above? And if not, I don't know where / how to use the "#box-link {" noted in this tutorial. Or, if there is a different way to set the links on my css body spec'd background image... ? My background image css spec: Code: body {background-image:url("images/Header.jpg");
background-repeat:no-repeat;
background-position:top;
}
http://www.pocketfives.com/badges/triple-crown/ Don't we all just love IE7? The heading 'About the badge', in div about-badge should have some css assigned to it(background on the h2 etc..) but IE7 isn't rendering it. According to Firebug Lite it's assigned correctly. The page renders normal in all other modern browsers. The area of the page in question passes xhtml validation as well. Ideas? Greetings, and thank you for your help. I have a css which spec's a background image in the styles.css: #mainmenu { clear:both; padding-bottom:5px; margin-top:22px; margin-left:18px; margin-right:24px; background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position:right top; text-align:left; } I am working in drupal. The image mainmenubg.jpg serves as the background for the site. My question is, is there any method (script or whatever) to have different images serve as the background so that as the user clicks thru the site, a different background appears. I realize that if I do this in static html, it would be fairly easy but this is one of the inflexibilities of drupal. Any help would be appreciated. Thanks! Pradhan Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why. The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check. If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please. The link is: http://www.gladiatorszone.co.uk/main_new1.shtml I think it might be a position element wrong or a float? Hi there, I've been reading up on creating CSS designs with "vertical rythym" but the tutorials i have read seem to conflict in their message and so im struggling to understand how to do it. Tutorial One The tutorial above, uses a line-height of 18 px no matter what size of text is used. In the tutorial, a heading has had its font-size property set to 20 px but only has an 18 px line height. Tutorial two Meanwhile, the tutorial above uses different line-height settings according to the size of the text being used. In the tutorial, a heading has had its font-size set to 24px and so the line-height has been set to 36px to accomodate this fact. I'd just like to understand vertical rythym a bit better but im struggling to understand it because tutorials around the web are giving different explanations of its use. (a) Can anyone help me understand this concept better? (b) Which tutorial is more correct in its explanation (if any)? Cheers what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! hey, i have 2 CSS problems. number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE. Code: #main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }
Code: <div id='main' align='center'> number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page? thanks. (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you Hi, not sure if it is possible but i thought it may be possible in CSS... I was wondering: * I have a shopping cart (using JS) * A CSS based Navigation which is "View Shopping Cart" * An form button called "Add to cart" ** I want the CSS based Nav, to be hidden, until the user clicks on the form button, then it is visible, so that the user can click on it... Anyone know how this is done??? Cheers Jackson I purchased a WordPress theme from Orgnanic Themes(who are no longer providing assistance) a few weeks ago and wanted to make a few minor changes(literally, all I did was replace images(header, slider prev/next buttons, background, footer, and the logo). In doing so, I went astray somewhere and messed up. I'm more of a designer than a developer so I'm at a complete loss now. How do I fix it?? Any help or advice would be greatly appreciated. Original theme- www . organicthemes . com/themes/block-theme/ My version- www . whskytngfxtrt . com W3 Validation Errors- jigsaw . w3 . org/css-validator/validator?uri=http%3A%2F%2Fwww . whskytngfxtrt . com&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en#css (For whatever reason I was unable to insert my css in the forum, however it can be seen at the bottom of the W3 Validation.) Again, any and all help would be greatly appreciated. I have a map on an html page. If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.) You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS. I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything. I thought it was a problem with the z-index, but nothing happens when I change the numbers. What am I doing wrong? Gayle CSS code: PHP Code: #imap { display: block; width: 801px; height: 677px; background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; position: relative; /*margin : 0 auto 2em auto; */ margin: 0 0; background-image: url(Images/RiverBasinMap_DENR.jpg); } #imap a { color: #000; font-family: arial, sans-serif; font-size: 1.2em; font-weight: bold; text-transform: uppercase; } a#title, a#title:visited { display: block; width: 801px; height: 0; padding-top : 260px; position : absolute; left: 0; top: 0; cursor: default; text-decoration: none; } * html a#title { height: 677px; height: 0; } #imap a#title:hover { background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; overflow: visible; color: #c00; z-index: 10; } /*BROAD*/ a#broad { display:block; width:141px; height:159px; /*padding-top : 120px;*/ overflow:hidden; position: absolute; left: 285px; top: 295px; overflow: hidden; } * html a#broad { height: 159px; height: 0; } a#broad:hover { background: transparent url(images/Broad_Over.gif) no-repeat 0 0; overflow: visible; z-index: 21; } /*SAVANNAH*/ a#savannah { display: block; width: 181px; height: 313px; /*<!-- padding-top : 120px;-->*/ overflow: hidden; position: absolute; left: 226px; top: 318px; overflow: hidden; } * html a#savannah { height: 313px; height: 0; } a#savannah:hover { background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; overflow: visible; z-index: 20; } HTML code: PHP Code: <body> <dl id="imap" name="imap"> <dt><a id="map" href="#nogo">Test Map</a></dt> <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd> <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd> </dl> </body> I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here. I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help. I have read about everything I could and still cannot find my answer. Is there a way to get rid of the box around my image using CSS? Here is what I have: <input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" > Thank you for your help. |
|||||||