|
CSS - Dreamweaver Editing/appearance Problem
I'm sure all of you have stumbled onto this at some point if you use Macromedia Dreamweaver.
You're working on a CSS-driven layout and it looks perfect in multiple web browsers, but in the actual Dreamweaver design edit mode the page appears garbled and elements are out of place or you can't even see them. While it's not really a problem for you to update and work with the site, it would certainly be difficult for someone not familiar with it to change content and make updates. Does anyone know of a plug-in that would resolve this problem? Or perhaps does someone know what attributes or elements most often cause the problem in Dreamweaver? Similar TutorialsHi, I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category. Do I have to amend the CSS or the javascript to make it collapsed to begin with? Any help would be appericated. Thanks Gary http://approg.msu.edu/david/wa In IE6, the top banner looks fine. In Firefox the lower 20px of the header background image is not showing up. The effect is to have a rescaleable header. My current method of achieving that is with a banner div and three individual divs inside of it. It seems to be working well, except for this Firefox appearance problem. I am posting this in the CSS help forum because the problem appears to be in the CSS. Hi everyone, I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me! Thanks, Steve Hi, I have been working on a project for a friend and all was working well in IE. I tested the site in Netscape and Opera and found that the CSS positioning i was using (DIVs) caused inconsistent layout accross the browsers. I used absolute positioning instead of relative, which seemed to solve all my problems.....not so. Now, for some reason, the pop-up menu appears behind the main content layer. I am quite new to using CSS for layout so forgive me if the answer to my problem is simple. Google (my usual saviour) proved to be of little help. Any help would be welcome, thanks. Dunc I have a rule called #MainContent. Now I want to change this rule for just one page so I duplicate it but don't add it to the global style sheet but declare the rule for this page only. However this doesnt work the div still changes based on the #MainContent rule in the global css file first of all let me give you a peak at this man it looks so great in firefox mmmm just how i want it IE is kinda :-/ right now my CSS for input boxes is textarea, select, input, submit{background-color:#aeb0b0;border-color:#9d9c9c;} which is what i want for evertyhing EXCEPT radio buttons. i want radio buttons ot have a transparent background becasue they look ugly otherwise. I can't seem to figure out how to assign a class for JUST radio buttons. (becasue their really input elements) and option i have is to setup a class and apply it to all my radio buttons, but thats really annoying and i think its something that shoudlnt be necessary. I'm hoping theres a real way to do this but i just cant figure it out Thanks for taking the time to read my question. Just wondering. Does the order of appearance of items in a CSS file impact how a page is displayed? I'm trying to make a page, and it works in IE, but not in Firefox. Thanks, Brad Hi, I'm aware that you can change the appearance of an image using CSS (filters etc), but I actually need to change the colour of an image....how?? Initially I tried adding style="filter:gray", but that didn't work. It's basically for a site that's going to be skinned, but I don't want to have to go through the laborious(sp?) process of editing all of the images. Basically, if the image is blue, I want to overlay something onto it to make it look red, or brown, or white etc. Can anyone recommend a method? Cheers Hi, I've seen things like this in CSS elsewhe Code: <style type="text/css"><!--
td[width="350"] {
background-color: #FFFFFF;
}
--></style>
The above is just an example, and it might not even be what I'm looking for. But it appears that the above would only change the background color of a table cell that is 350 pixels wide (no other table cells will be changed)? Is this how this is done? And if not, I'm trying to do something along that concept, somewhat like this: Code: <style type="text/css"><!--
table[border="2"] td .classname {
color: #FFFFFF;
font-family: verdana;
}
--></style>
If this doesn't make sense, I'll try to reexplain. But if this can be done I'd be ever so grateful. Thanks! ~Kevin Hello! Maybe this is a question with obvious "NO!" answer, but i decided to raise it one more time. Is it avaiable to change apperance of combo-box using CSS styles (or any other way), espessialy it would be great if I could change the border style. I have readed this , and come to a conclusion that it is even impossible. Any ideas? Thanks Artashes hi friends... I am designing a site http://cvtechnoforum.com/ problem is that when I am using IE then every control are at their appropriate place but for mozila (new version..I have downloaded last day),it is not showing the my banner(logo) image appropriatly. please check it in new mozila browser....even in the old mozila,it is showing correctly but for new mozila banner image width is reduced to almost its half length while image is 1400 wide. please help me.... thanks for any help in advance Need guidance on how to set up CSS. Thanks Hi all! I've been teaching myself web-design in my spare time for a while, and I've got most of the basics down (I think!). I have a problem. I was using Dreamweaver cs3 and I put a vertical spry menu into my page - All was fine. Cue update to cs5. No I know that this shouldn't have effected anything, but something has changed, and now my sub menus all appear UNDER the rest of the elements on the page. I haven't really used z-index much before. I have tinkered with it a little, but it didn't seem to change anything. I am now stumped. This problem seems to occur across all browsers. Can anyone help? Hey, im sorry if this has allrdy been covered I have created a website in dream weaver cs3, i upload it everything works bar back ground images in tables. The url is gepro.oxyhost.com all help greatly appreciated thx guys hi everyone, i designed my first site with dremaweaver 3 but had problems with browser compatability. people have been telling me i should use css now as it's better so which version of dreamweaver should i be using now? thank you Hi everyone. I am completely new to web design. I am using Dreamweaver 8 pro. I have found out that I like the background image feature to layers very much. It is very much better than tables. Unfortunately, I can't find a way to have layers be centered in reference to the browser (The way I can align tables). Is there any way to do this? Please help. Thanks, Newbie ok im messing around with the css of some text within php... Code: "<p style=\"background: #e4ebeb; border: 1px solid #555555; padding: 6px;\"><span style=\"font: bold 10px Courier New;\"><div class=\"quote_header\">Quote by * :</div> <div class=\"quote_body\">*</div></span><br/>" ); a few questions... how would i make.. Quote by * : appear blue and have the * bold? i have tried adding <strong> and <b> at either side of the * and the php code just echos out <strong> or <b> Well this isn't too much of a problem basically my form displays one way in dreamweaver and another when I preview the site any idea why its pretty annoying. heres how it looks in dreamweaver and heres it in a browser Hi, I'm trying to create a menu bar using CSS (I'm not sure if this is the best way to do it. Maybe I should be using frames for this menu bar so I'm not constantly copying and pasting code from page to page?) Anyway, my problem is that everything appears fine when I view the page in the browser using F12 (this creates a temporary file). But when I try to view index.htm by double clicking on it, the CSS style hasn't been applied to the text at all. I have spent hours on this to no avail. Can someone please please help? thanks, Jean Hi there, Wondering if you can help me ... I have a site that was coded for me and when i open up the index.html pages in code and design view in Dreamweaver - the items in the sidebar (coded with css and using the ul and li tags) don't show up .... allowing me to only edit the text in code view and not design view. When previewing it in browser it is fine. I am a visual person so would really like to be able to see the text/images and elements in design view. perhaps small code is missing? or settings in dreamweaver... i have tried everything and can;t find Please help! Thanks Code: <div id="sidebar" class='sidebar-home'>
<ul class="sidebar-list">
<li class="first">
<h5 class="sidebar-title">Recent News</h5>
<ul class="simple-list">
<li class="first"><div class="simple-list-heading">Mar 4, 2010</div>Soltoro Acquires The Lupita Mine Property and Plans To Drill at Victoria Project</li>
<li><div class="simple-list-heading">Feb 16, 2010</div>Soltoro Completes Las Bolas Mine Area Resource Drilling & Returns 12 Metres of 220 gpt Silver in Highway Zone</li>
<li class="last"><div class="simple-list-heading">Feb 12, 2010</div>Soltoro Completes $2,350,250 Financing</li>
<li class="read-more"><a href="news/" title="More News">... more news</a></li>
</ul>
</li>
<li>
<h5 class="sidebar-title">Events</h5>
<ul class="simple-list">
<li class="first"><div class="simple-list-heading">June 6-8, 2010</div>World Resource Investment Conference<br/>Vancouver, BC</li>
<li class="last"><div class="simple-list-heading">September 25-26, 2010</div>Toronto Resource Investment Conference<br/>Toronto, ON</li>
</ul>
</li>
<li>
<h5 class="sidebar-title">Archive Projects</h5>
<ul class="sidebar-gallery">
<li><a href="projects/el-rayo.html" title="El Rayo Project"><img src="images/active-projects-el-rayo.jpg" alt="El Rayo" /></a></li>
<li class="sidebar-gallery-r"><a href="projects/quila.html" title="Quila Project"><img src="images/active-projects-quila.jpg" alt="Quila" /></a></li>
<li class="sidebar-gallery-bottom"><a href="projects/victoria.html" title="Victoria Project"><img src="images/active-projects-victoria.jpg" alt="Victoria" /></a></li>
<li class="sidebar-gallery-r sidebar-gallery-bottom"><img src="images/active-projects-click-images.jpg" alt="Click Images" /></li>
</ul>
</li>
</ul>
</div>
the CSS Code:
.sidebar-list { width:100%; }
#sidebar a { color:#421400; text-decoration:none; }
#sidebar a:hover { color:#f79120; text-decoration:underline; }
h5.sidebar-title { color:#421400; font-size:25px; padding-bottom:15px; width:100%; }
.sub-caption { padding-bottom:3px !important; }
.sidebar-title-sub-caption { float:left; font-size:14px; width:100%; }
.sidebar-title-sub-caption img { padding-left:7px; }
.sidebar-list li { float:left; border-bottom:1px solid #421400; padding:20px 0 25px; width:284px; }
.sidebar-list li.first { padding-top:0; }
ul.simple-list { padding-left:20px; width:264px; }
ul.simple-list li { border-bottom:1px dotted #421400 !important; padding:18px 0px; width:100%; }
ul.simple-list li.first { padding-top:0; }
ul.simple-list li.last { padding:18px 0 0 0 !important; border-bottom:none !important; }
.simple-list-heading { float:left; font-weight:bold; width:100%; }
.simple-list li.read-more { border-bottom:none !important; font-weight:bold; text-align:right; padding:10px 0 0 0; }
.sidebar-gallery { width:100%; }
.sidebar-gallery li { display:inline; border:none; padding:0 20px 20px 0; width:132px; }
.sidebar-gallery img { border:1px solid #421400; }
.sidebar-gallery li.sidebar-gallery-r { padding-right:0; }
.sidebar-gallery li.sidebar-gallery-bottom { padding-bottom:0; }
.sidebar-gallery span { float:left; font-weight:bold; width:100%; text-align:center; }
ul.full-picture-list { padding-bottom:20px; width:100%; }
.full-picture-list li { border:none !important; padding-bottom:0 !important; }
.full-list-content { float:left; display:inline; border-bottom:1px dotted #421400; margin-left:20px; padding:10px 0 10px 0; width:264px; }
ul.photo-gallery { width:100%; }
.photo-gallery li { display:inline; border:none !important; padding:0 10px 10px 0; width:61px; }
.photo-gallery img { border:1px solid #421400; }
.photo-gallery li.last { padding-right:0; }
|
|||||||