|
CSS - Stuck With Css
Hello,
i am currently makeing a website that uses CSS to handle the font colors for the menu, page titles and general text. my problem is this (i hopt this is in the right area) i have a page where the admin can chose the text colors for the different areas, when its selected its saved in a database. is there a way i can set it up so that the CSS file i have pulls the code out of the db and places it in the right place? here is an example ---Menu--- (title) <- class name = mtitle home <- class name = nav in the site.css file which has all my style code in it i need where you put the color code to pull it from the db instead. thank you Similar TutorialsHello, guys im new, i need help. i have this website. i can pm the URL. and i am having problems outting ad bars down the sides. i have three bars on the left side, the 3rd one is supposed to float to the other side. the right side has one that is being pushed down. im so lost and really out-of-my-mind lol, i usually have no problems, but wordpress is kicking my butt with this css. any and all help would be greatly appreciated. because i need the layout done by the 1st. so i have less than a week. thank you guys. hope to recieve good answers thank you. Im trying to Implement http://www.trowbridge-wiltshire.co.uk/adrian into a total css page as shown on http://www.trowbridge-wiltshire/newadrian . Unfortunately I am stuck. Please could u have a look at tell me what I am doing wrong. Code:
html, body {
margin: 0:
padding: 0;
font-size: 100%;
color: #333;
background-color: #6795E1;
text-align:justify;
font:normal 10pt "Arial", "Times New Roman"
}
p, h1, pre {
padding: 0px 10px;
text-align:justify;
}
p {
font-size: 1em;
}
h1 {
font-size: 1em;
}
img {
margin: 0;
}
#container {
position: relative;
width: 768px;
margin: 0 auto;
border:2px solid rgb(0,0,0);
}
#banner {
height: 60px;
margin: 0px 0px;
}
#leftcontent {
float: left;
width:130px;
background:#BAC4C8;
}
#leftcontent ul {
list-style: none;
margin: 0;
padding: 0;
}
#leftcontent li {
border-bottom: 1px solid #CBDEF5;
}
#leftcontent li a {
display: block;
padding: 2px 0px;
border: 1px solid black;
background: #BAC4C8;
color: #fff;
text-align:center;
text-decoration: none;
}
#leftcontent li a:hover {
border: 1px solid #1958b7;
background: #BAC4C8;
color: #fff;
}
#centercontent {
position: relative;
background:#E2EAF8;
border-left:2px solid rgb(0,0,0);
margin-left: 130px;
margin-right: 0px;
}
.panel {background:#6E7E86; border:1;color:black}
.Information {background:#E2EAF8;padding:10px;vertical-align:top}
.copyright {padding=5px;font:10pt;text-align:center;background:#CBDEF5}
I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful. My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0}
#wrapper {
border: #f09 dashed 3px;
background-color: yellow;
text-align: left;
margin: 50px auto;
padding: 0;
width: 810px;
}
#header {
border: blue dashed 1px;
background-color: pink;
padding: 0px;
margin: 5px;
}
#header p {
display: inline;
}
#intro {
border: 1px solid black;
background-color: purple;
}
#intro p{
font: bold 80% arial;
position: absolute;
left: auto;
top: 85px;
color: #fff;
padding: 15px 0 0 435px;
margin: 0 0 25px 0;
width: 350px;
line-height: 1.4em;
border: 1px red solid;
}
#nav {
background-color: #09f;
border: solid red 1px;
min-height: 30px;
}
ul {
float: right;
list-style-type: none;
margin: 10px 0;
}
li {
font: bold 12px arial;
display: inline;
padding: 0 17px 0 17px;
border-right: 1px solid white;
}
span {
position:absolute;
top: -100000px;
}
#main {
border: thin green solid;
padding: 25px 25px 0 25px;
background-color: #eee;
min-height: 1000px;
}
div.work {
float: left;
padding: 10px;
/*border: thin red solid;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
margin: 0 0 25px 0;
}
div.work img {
display: inline;
border: 4px black solid;
float: left;
}
div.work p {
margin: 0;
padding: 10px 0 0 25px;
line-height: 1.3em;
font: 100% arial;
float: left;
border: thin purple solid;
width: 400px;
}
div.work h1 {
margin: 25px 0 0 0;
padding: 10px 0 0 25px;
display: inline;
font: 125% arial;
color: #ff8529;
width: 400px;
float: left;
border: thin green solid;
}
div.work h2 {
display: inline;
margin: 0;
padding: 10px 0 0 25px;
font: 85% arial;
width: 400px;
float: left;
border: thin black solid;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link">
<html xmlns="removed link" xml:lang="en" lang="en">
<head>
<title>Page Title here</title>
<link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/>
</head>
<body>
<!--begin overall page wrapper; sets width and centering-->
<div id="wrapper">
<!--begin header-->
<div id="header">
<p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p>
<div id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</div>
</div>
<!--end header-->
<!--begin nav-->
<div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div>
<!--end nav-->
<!--begin main content area-->
<div id="main">
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
</div>
<!--end of main container-->
</div>
</body>
</html>
Hello, I am having some problems with my code. I'm not able to insert these forms properly into these divs. I would like the forms to be placed within the tab (more or less centered), however, how it is now the form is half way in and half out of the tab. When I try and move the form over it distorts the tab image. Please help me fix this problem. I'm uncertain about what is wrong and how to fix it. Thank you in advance. Code:
<head>
<style type="text/css">
body
{
color: black;
}
/*Form Formatting*/
fieldset
{
margin: 1em 0;
padding: 1em;
border: 1px solid #ccc;
background: #000000;
}
legend
{
font-weight: bold;
color: #FFFFFF;
}
label
{
display: block;
}
input [type="text"]
{
width: 200px;
}
input.radio, input.checkbox, input.submit
{
width: auto;
}
input.radio
{
float: left;
margin-right: 1em;
}
input.author:focus, input.email:focus
{
background: #E9C2A6;
}
input[type="text"]
{
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
}
.required
{
font-size: 0.75em;
color: green;
}
.author, .email, .subscribe-yes, .subscribe-no, .checkbox/*.HTML_Box, .Plain_Text*/
{
color: #FFFFFF;
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*Form Placement*/
#Display_Name
{
margin: auto 33% auto 33%;
width: 150px;
left: 100px;
}
#Details
{
margin: auto 33% auto 33%;
}
#Subscription
{
margin: auto 33% auto 33%;
width: 150px;
}
#Mailing
{
margin: auto 33% auto 33%;
width: 180px;
}
#Submit_Subscription
{
margin: auto 33% auto 33%;
}
#HTML_Box
{
float: none;
}
#PText_Box
{
float: right;
}
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*Background Tab*/
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2
{
background: transparent url(../../Working/red_tab.php.png) no-repeat bottom right
}
.cssbox
{
/* intended total box width - padding-right(next) */
width: 250px !important; /* IE Win = width - padding */
width: 320px; /* the gap on the right edge of the image (not content padding) */
padding-right: 15px; /* use to position the box */
margin: 20px auto;
}
/* set the top-right image */
.cssbox_head
{
background-position:top right;
/* pull the right image over on top of border */
margin-right:-15px;
/* right-image-gap + right-inside padding */
padding-right:40px
}
/* set the top-left image */
.cssbox_head h2
{
background-position:top left;
margin:0; /* reset main site styles*/
border:0; /* ditto */
/* padding-left = image gap + interior padding ... no padding-right */
padding:8px 0 0px 40px;
height:auto !important;
height:1%; /* IE Holly Hack */
font-family: Comic Sans MS, Arial, sans-serif;
}
/* set the lower-left corner image */
.cssbox_body
{
background-position:bottom left;
margin-right:25px; /* interior-padding right */
padding:15px 0 15px 40px; /* mirror .cssbox_head right/left */
}
</style>
</head>
<body>
<!--Tab-->
<div class="cssbox">
<div class="cssbox_head">
<h2>Mailing List</h2>
</div>
<div class="cssbox_body">
<!-- Contact Info -->
<div id="Display_Name">
<fieldset id="Details">
<legend>Contact Details</legend>
<!--Name-->
<label for="author" class="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" size="25"/>
<!-- E-mail Address-->
<label for="email" class="email">Email: <em class="required">(Required)</em></label>
<input name="email" id="email" type="text" size="25" maxlength="200"/>
<!-- E-mail Format-->
<div id="HTML_Box">
<p>
<input class="checkbox" id="HTML" name="HTML" type="checkbox"
value="HTML" />
<label>HTML</label>
</p>
</div>
<div id="PText_Box">
<p>
<input class="checkbox" id="Plain_Text" name="Plain_Text" type="checkbox"
value="Plain_Text" />
<label>Plain Text</label>
</p>
</div>
</fieldset>
</div>
<!-- Subscription Question -->
<div id="Subscription">
<fieldset id="Mailing">
<legend>Join Mailing List?</legend>
<p>
<input id="add-subscribe" class="radio" name="add" type="radio"
value="subscribe" checked="checked" />
<label for="add-subscribe" class="subscribe-yes">Subscribe</label>
</p>
<p>
<input id="add-unsubscribe" class="radio" name="add" type="radio"
value="unsubscribe" />
<label for="add-unsubscribe" class="subscribe-no">Unsubscribe</label>
</p>
<!-- Mailing List Submit Button -->
<div id="Submit_Subscription">
<input id="enter" type="submit" value="Submit" />
</div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------
I am trying to build a site, and integrate a blog with Feedburner. The site is wwhgc.craigstanley.org The Issue: When the blog is present, the left column drops below all of the right content in IE (but not in Firefox) When the blog is not present (click "tandem flights" at the top), the content is fine. Feedburner says that they do not set a width to their content. Is there any way to see the actual HTML that the Feedburner Javascript spits out? Please help me . . . too many days down the drain on this one. -Craig Terrible thread topic, but couldn't think of a better summary. First, the link: http://www.crossthebridge.net/html/ In Firefox, everything is gravy. In Internet Explorer, the right float div is fine, but the content boxes stack under the float. If I change the right content box width to 3 pixels smaller, the left content boxes slide up to the top as they're supposed to, but there is a gap between the left and right boxes. You can append "center.css" to the above link to see my CSS. I've read a ton of threads and haven't found the solution yet... and I'm at my wit's end. If you can point me in the right direction I'd be grateful. Hi all, Sorry about posting something like this but my knowledge (and the stuff in the CSS book besides me) only goes so far. I've tried to fix the problem I have but I've got stuck. Would somebody mind taking a look for me? All I want is the shadows on the left & right hand side to extend to the same height as the MainHolding div. I've tried various things but haven't been able to get it to work without screwing up the whole layout. I know the problem is because the items in the middle are floating and the height doesn't count those items - I just can't fix it. Here's links to the HTML & CSS. If anyone would prefer me pasting the code straight in here, let me know and I'll do it. Sorry about the state of the stylesheet. It's all over the shop at the moment. HTML CSS *** All working now. These's page will probably stop working soon *** It doesn't look very good in IE at the moment. That's next on my to do list. Any other general comments would also be gladly appreciated. Thanks for any help. Regards, Lee I'm setting up a website order form, and using CSS for formatting. I want to be able to put a picture icon (to view a picture of the product) beside the products details. I'm having problems because the product details keep wrapping to a new line. Here are some images illustrating the predicament: What it currently looks like Picture 1 What I want it to look like Picture 2 Structure of the DIV boxes Picture 3 The code for the boxes is he Code:
<A href="http://localhost/21072004/picture.php?id=t35064">
<SPAN class=kitTitle>t35064. Kampfpanzer Leopard </SPAN></A>
<DIV style="position: relative; WIDTH: 500px; HEIGHT: 100px">
<IMG src="hobbyhq - tamiya_com_au - Browse_files/camera.jpeg" style=\"position: absolute; margin: 0px 0px 0px 0px;\">
<DIV style="position: relative;LEFT: 45px; WIDTH: 400px; TOP: 0px; HEIGHT: 40px; BACKGROUND-COLOR: #f0f0f0">
<TABLE class=dataFile border=0>
<FORM name=module action=cart.php?action=confirm method=post>
<TBODY>
<TR class=listColor>
<TH>1:35</TH>
<TH class=listHighlight>AFV</TH>
<TH>AU$30.00</TH>
<TH align=right>QTY
<INPUT type=textField size=3 value=1 name=qty>
<INPUT type=submit size=3 value="Add to Cart" name=submit>
<INPUT type=hidden size=3 value=t35064 name=id>
</TH>
</TR>
</TBODY>
</FORM>
</TABLE>
</DIV>
I also took the liberty of putting a sample capture page on my webspace (if anyone wishes to investigate further) Sample Page Page Stylesheet I'm trying to use a "DIV within a DIV", but when I set the positioning to "absolute", the DIV warps to the top of the page! I've been stumped for days on this, and it's delayed the page's launch. If anyone can help me... it'd be very much appreciated. Hi all, I have a problem with a dynamic page on my web site which is driving me mad. I have inserted a javascript nugget on two pages which displays the contents of a shopping cart (from Mals e-commerce). This information is positioned using CSS on two different pages of my site. The structure of the pages is almost identical and they share a common CSS file, yet the cart 'nugget' only displays correctly on one of the pages. The website is www.candle-shack.co.uk. The page that displays correctly is the 'shop by product' page. In this page, the cart information is black text against the white background. The 'shop by fragrance' page displays incorrectly, with the black text hidden against a black background. Any help in resolving this issue would be greatly appreciated, as I have tried everything. Many thanks, Duncan Struggling to get my <ul> to display itself on the left side of my sidebar navigation. I just want it over maybe 40 pixels to the left. I'm not sure why the ul is aligning itself in the center. I tried floating the elements left, but the ul is stuck centered. I tried adjust margins/padding but all that does is truncate the text to another line. I set absolute position and got the list to move all the way to the left, but it broke the flow of the page and the list ran over top of the headers. Any thoughts? All the CSS structures are imbedded in the STYLE section of the index file. http://www.mgan.net/work/10-20-04/ Bonus question: Anyone know why in internet explorer when you run the mouse of my top navi-bar the footer graphic for the news section disappears? http://johnmifsud.byethost22.com/John_Mifsud_files/index.php I've been creating this site using percentages for the relevant sections of the page. However, in the footer the 'site map' image in falling out the bottom of the footer if the screen is shrunk, (both in IE and Firefox). Why??? What's wrong with the CSS? (sitemap and imgsitemap are both within the footer)And suggetions would be greatly appreciated! Thanks Miffy! #footer { position: relative; top: 0px; left: 0px; height: 2%; margin: 0px; padding: 0px; background-color: black; background-image: url('bottom menu files/bottommenu.gif'); width: 85%; border-style: none; border-width: 0px; } .sitemap { position: absolute; top: 0px; left: 0px; border-style: none; border-width: 0px; padding: 0px; margin: 0px; height: 100%; } .imgsitemap { border-style: none; border-width: 0px; padding: 0px; margin: 0px; height: 100%; } It works fine in FF but in IE the buttons stick. I can't figure out what to do. I've searched and read the sticky on resources. Please don't mind the unordered list. It will be a drop down menu I'm working on. Your help is much appreciated. -Garrick- HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <!-- Header --> <div id="header"></div> <!-- Top Navigation --> <div id="nav"> <div id="top_nav"> <div id="top_nav_home"><a href="#"></a></div> <div id="top_nav_shop"><a href="#"></a></div> <div id="top_nav_bag"><a href="#"></a></div> <div id="top_nav_account"><a href="#"></a></div> <div id="top_nav_checkout"><a href="#"></a></div> <div id="top_nav_service"><a href="#"></a></div> <div id="top_nav_email_signup"><a href="#"></a></div> </div> <!-- Product Category Navigation --> <div id="lower_nav"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div id="content"> <p>Content goes here.</p> </div> <div id="footer"></div> </div> </body> </html> CSS Code:
body {
background-color: #DBE6F2;
color: #373737;
font: normal 18px Verdana, Arial, Helvetica, sans-serif;
height: auto;
margin: 0 auto;
padding: 0;
width: 760px;
}
table, ul, li {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
a:link, a:visited {
color: #FF0000;
text-decoration: underline;
}
a:hover, a:visited:hover {
color: #FFFF00;
text-decoration: underline;
}
#header {
background: url(images/header.jpg) scroll no-repeat;
height: 89px;
margin: 0;
padding: 0;
width: 760px;
}
#nav {
background: url(images/nav.jpg) scroll no-repeat;
height: 58px;
margin: 0;
padding: 0;
width: 760px;
}
#nav a {
float: left;
}
#nav li {
display: inline;
text-align: center;
width: 13%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#top_nav_home {
background: url(images/top_nav.jpg) no-repeat scroll;
width: 80px;
height: 27px;
display: block;
float: left;
}
#top_nav_home a {
width: 80px;
height: 27px;
display: block;
}
#top_nav_home a:active {
background: url(images/top_nav.jpg) no-repeat scroll 0 -27px;
}
#top_nav_shop {
background: url(images/top_nav.jpg) no-repeat scroll -80px 0;
width: 110px;
height: 27px;
display: block;
float: left;
}
#top_nav_shop a {
width: 110px;
height: 27px;
display: block;
}
#top_nav_shop a:active{
background: url(images/top_nav.jpg) no-repeat scroll -80px -27px;
}
#top_nav_bag {
background: url(images/top_nav.jpg) no-repeat scroll -190px 0;
width: 105px;
height: 27px;
display: block;
float: left;
}
#top_nav_bag a {
width: 105px;
height: 27px;
display: block;
}
#top_nav_bag a:active {
background: url(images/top_nav.jpg) no-repeat scroll -190px -27px;
}
#top_nav_account {
background: url(images/top_nav.jpg) no-repeat scroll -295px 0;
width: 95px;
height: 27px;
display: block;
float: left;
}
#top_nav_account a {
width: 95px;
height: 27px;
display: block;
}
#top_nav_account a:active {
background: url(images/top_nav.jpg) no-repeat scroll -295px -27px;
}
#top_nav_checkout {
background: url(images/top_nav.jpg) no-repeat scroll -390px 0;
width: 90px;
height: 27px;
display: block;
float: left;
}
#top_nav_checkout a {
width: 90px;
height: 27px;
display: block;
}
#top_nav_checkout a:active {
background: url(images/top_nav.jpg) no-repeat scroll -390px -27px;
}
#top_nav_service {
background: url(images/top_nav.jpg) no-repeat scroll -480px 0;
width: 125px;
height: 27px;
display: block;
float: left;
}
#top_nav_service a {
width: 125px;
height: 27px;
display: block;
}
#top_nav_service a:active {
background: url(images/top_nav.jpg) no-repeat scroll -480px -27px;
}
#top_nav_email_signup {
background: url(images/top_nav.jpg) no-repeat scroll -605px 0;
width: 155px;
height: 27px;
display: block;
float: left;
}
#top_nav_email_signup a {
width: 155px;
height: 27px;
display: block;
}
#top_nav_email_signup a:active {
background: url(images/top_nav.jpg) no-repeat scroll -605px -27px;
}
#content {
background-color: #ffffff;
margin: 0;
padding: 0;
width: 760px;
}
#footer {
background: url(images/footer.jpg) scroll no-repeat;
height: 10px;
margin: 0;
padding: 0;
width: 760px;
}
Hey guys. At the moment i have made a 100% colored table. What i am trying to do is add a 1px colored border to the top of the table and a 2px colored border to the bottom of the table. Ive tried several different approaches but i never get the result i am looking for. Can anyone help me out with this? Here is my code: Quote: <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr bgcolor="#000033"> <td align="left"><font face="Arial, Helvetica, sans-serif" size="6"><b><font color="#FFFFFF"> <a name="top">Tiffany and Co Neckless and Braclet Set</a></font></b></font></td> </tr> James Hello DevShed, Thanks for advance for the help! It's been a long night for me. Instead of working on my Wordpress blog which is launching tomorrow, I was simply carried away with trying to solve this problem I ran into. I've been now trying to "fix" this for 5 straight hours. At my website http://insfired.com, I simply want to add borders around images which are found in posts. Now, I have some minor CSS experience, so I'm not a total n00b, but I really hope I'm doing something wrong and you can help me. I'm going to paste what I wrote on Wordpress.org to try and get help there (with no avail so far): "Ok so I purchased this "fancy" theme called "Themeology" on Themeforest. I know I should probably email the developer but he doesn't really reply to support requests. Now, NO matter what I tried, or where I tried to add the img {border: 1px....) property, images just won't get wrapped. Nothing. my site is located he http://insfired.com/ I'm seriously willing to pay upfront for any CSS expert to fix this for me. I'm not entering the css property wrong, this is what I want: Code: img {border: 1px solid #c8c8c8;
padding: 2px;
margin-bottom: 10px;
}
Actually, there is an image class that is already bordered but it's also given the float and the margin right property, whenever I edit this one I can see changes to images with this class, but any attempt to apply borders to images (img) or images within posts (.div.entry.single img) were futile. Code: #page ul#entries li img.avatar{
float: left;
border: 1px solid #c8c8c8;
padding: 2px;
margin-right: 15px;
margin-bottom: 10px;
}
The theme has several .css files, and I tried adding the above (1st) code to ALL, not a single thing moved. I tried clearing my cache and the W3 cache. Seriously, if you want money for fixing this for me I'm willing to pay. I'm insfiredmail on gmail. Help?" Seems to work just fine in IE 5.5+, however in Mozilla 1.5 the text just drops below the photo. Here is the page: http://www.sdtars.com/development/events/days.php Here is the sites CSS: http://www.sdtars.com/development/styles/layout.css Any help would be much appreciated. Thanks. I'm working on a really simple theme. You can see the progress here. this is a table-less theme. trouble that I'm having is that I cannot get the content to center. It is all floated left. Now, I'm intentionally floating the left column to the left, but that's the only thing (and changing that didn't fix the problem either). So I'm hoping one of you css gurus will have some suggestions. (link to style.css file) Thanks in Advance! Can anyone tell me why my popup menus are displaying with a 40 or 50 px wide gap between them and the top level menu on this page? The link Hover over "For Professionals" in the left hand navigation to see the problem. I am new to javascript. This is a menu created by DMAPI menu builder. I am not new to CSS. I suspect that this is a CSS problem. In Firebug I can see padding and margins but cannot find where they are being defined. I have tried to add margin: 0; and padding: 0; but they are getting overridden. Any help would be appreciated. Hi guys! Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! Here is what I'm trying to do, complete with pictures to help visualize things. Example This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides. Code: http://img708.imageshack.us/img708/2458/layoutstyle.jpg The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page. The dark blue outline shows a much higher resolution display The light blue color shows the extra artwork only revealed to higher resolutions The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move) The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements. The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness. Problems Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser". The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place. I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser). If you want a real world example of what I'm trying to achieve, please view the following website: Code: http://us.blizzard.com/diablo3/?rhtml=y unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language). Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do. P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*. |
|||||||