|
CSS - Simple? Question - Pages With Pictures In Them Make The Page Jump A Bit Sideways
When I switch between pages with images on them, everything is fine.
When I switch between pages without images on them, everything is fine. But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit. Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this. I'm using a centered fixed width css style so I have no idea how this could be happening. I'll just add the css if needed: (Any random advice or advice on how to make buttons without photoshop would be awesome too!) Code: body {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
td {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
a {
text-decoration: underline;
font-family: Verdana;
font-size: 14px;
}
a:link {
color:#2828FF;
}
a:visited {
color:#2828FF;
}
a:hover {
color:#AFAFFF;
}
a:active {
color:#AFAFFF;
}
img {
border: none;
}
#wrapper {
width: 950px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 100%;
font-size: 27px;
font-style: italic;
background-image: url("images/bgwinterowl.gif")
}
#links {
width: 100%;
padding: 15px;
}
#body1 {
border: 4 double;
border-color: red;
background: #FFFFF0;
width: 100%;
text-align: left;
padding: 15px;
}
#body2 {
background: #FFFFF0;
text-align: left;
padding: 15px 15px 15px 100px;
width: 500px;
}
Similar TutorialsI am using tabs to switch between screens. So the tabs could be information, telephone, notes etc. So its the same customer just different aspects of their information. This has worked well however I now want to add a sideways tab system. This means I want to use similar tabs but rotate it 90 degrees. So its on its side. I was wondering if anyone had come across tabs that where on thier side before and a link to a tutorial would be great! thanks. I am looking for a way to have my menu on the right hand side of my pages and have the text rotated clockwise to it reads sideways also. Is there a method in css to do this so it works in all browsers ? Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do: I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc. It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images? I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help. hi, I have a problem with my website. On one of my computer my website proportions look right, but on my other computer it looks proportioned different. On my Computer everything is ok,but on my friends computer the web pages are not good. the css styles are ok but some images are bigger and some are small.how to solve this problem thanks mrjameer Hi; I know this is a newbie issue, but I've studied the documentation & tutorials I have, without finding an answer... I'm building a new website, and just starting with CSS & XHTML. I've got a few examples of simple menus for the top of the page; for the basic "About", "Contact Us", "Home", etc. But the way these examples work is to define the style of the menu in CSS, then populate the menu in each page. I understand one of the conceptual benefits of CSS is to provide consistent styles across the website, without coding the style in each page. Since I want the menu to be the same on each page, I would like to specify the menu items and links in just one place, and include that in each page, so when the menu changes as I develop it, I only change it in a single place. I have a similar issue with my top level banner -- I define a background & box in CSS, but then insert my logo, title & tagline in the body of each HTML page. Again, I'd rather do it in one place. Is there a good, accepted, elegant way to do this, with CSS or some other mechanism? Thanks, Paul Hi, Take a look at this page: http://nazgulled.home.sapo.pt/table.html This is easly done with tables as you can see, now, I want reproduce the same effect with divs but I don't know how. My exact problem is, how can I center more than 1 div tag in the same "line". And for any div tag I use the float option, I can't align the text to anywhere, how can I do this too? I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me. The book gives an example: Code: <HTML>
<HEAD>
<TITLE>StarBuxx Coffee</TITLE>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<H1>StarBuxx Coffee Beverages</H1>
<H2>House Blend, $1.49</H2>
<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
<H2>Mocha Cafe Latte, $2.35</H2>
<P>Expresso, steamed milk and chocolate syrup.</P>
<H2>Cappuccino, $1.89</H2>
<P>A mixture of espresso, steamed milk and foam</P>
<H2>Chai Tea, $1.85</H2>
<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
</BODY>
</HTML>
In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated? Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y. Gray is a color. Grey is a *colour* http://www.invalidheart.org/test/ works in IE fine, but in FF the background and the footer stay up at the top, when it should be scrolling down with the rest of the content. any ideas? Thanks in advance. This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer. I have this page - vitalmodels (DOT) com/V3/ The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions? Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing. Again, I REALLY appreciate any help I get here... thanks again. -Ryan This is the code if you need it - PHP Code: #index_left_column { padding: 0px; float: left; height: auto; width: 194px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; left: 16px; background-image: url(images/index/left_column_bg.jpg) and PHP Code: <div id="index_left_column"> <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p> <?php include("inc/m_female.php"); ?> <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_male.php"); ?> <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_photographer.php"); ?> <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p> </div> Hello Guys, I have the following problem with my .css: #pagerank { margin: 20px 0 20px 0; padding: 8px; width: 225px; float: left; background-color: #F6F8F9; border: solid #eee 0px; background-repeat:no-repeat; background-image:url(top3.jpg); I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg); kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it? Best Reagrds, Brill I loaned my CSS book to remote colleague si I can't look at it. I have a simple td.BLUEBG {background-color: #0000BC; color: #FFFF00; font-weight: bold} now I want to put <a href=""">xxx</a> stuff in those TD's and I want them to be yellow too. I tried td.BLUEBG A:link {color: #FFFF00; text-decoration: none} and now some of those links turn yellow and some don't. Here is a snippet of my generated code: <tr> <td class=BLUEBG>Controls</td> <td class=BLUEBG>Last edit</td> <td class=BLUEBG>Approved by</td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Manufacturer">Manufacturer</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Description">Description</a></td> <td class=BLUEBG><a href="xxxxxxxx.php?sortby=Code">Code</a></td> <td class=BLUEBG>Comments</td><td class=BLUEBG><a href="xxxxxxxxx.php?sortby=Submitter">Submitter</a></td> </tr> Sorry for the confusing title, I didn't know how I could describe it better. Anyways, here is the 'problem' I am currently using for my website Cufon. Which works great. However with Internet Explorer 8 it becomes really slow. Therefor I decided to use: PHP Code: <![if !(IE 8)]> <script type="text/javascript" src="js/myriad-pro.cufonfonts.js"></script> <script type="text/javascript"> Cufon.replace('.example1') ('.example2') ('.example3') ('.example4') ('.example5'); </script> <![endif]> This works great, however not for everything. Some parts of the scripts, which calls Cufon in the script itself, it doesn't work and Cufon will still be displayed in IE8 (with all negative results from it). Several included scripts / parts have the following code in it: PHP Code: <?php echo "<script language=\"javascript\" type=\"text/javascript\">"; echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; echo "</script>"; ?> Now is it possible to make a same statement as with <![if !(IE 8)]> within the PHP script(s)? So if it's any browser other than IE8 it will load the Cufon, but if it's IE8 it will not load Cufon? Hopefully someone understands what I mean here, cause it's kinda hard to explain for me... //update If I use: PHP Code: <?php echo "<![if !(IE 8)]>"; echo "<script language=\"javascript\" type=\"text/javascript\">"; echo "$(document).ready(function() { Cufon.replace('.orderpart1') ('.orderpart2') ('.orderpart3'); });"; echo "</script>"; echo "<![endif]>"; ?> My script / order form stops working completely... :S Update! It's working now!! Thanks! Hi, I see something like this, span.small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> my question is why they put the word span. Why not do .small { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } <span class="small"> Im trying to position 3 divs like in this image the html will look like this: Code: <div id="container"> <div id="rightGrey></div> <div id="blueContent"></div> <div id="leftGrey></div> </div> how will the css look like ? Hi... I was just wondering.. when u have something like: margin:5px 10px which side does the 5px and 10px apply to? thanks in advance Hi people! Just a n00bish pondering I have... Which would be the more efficient code Code: #logo, #logo a {
left: 45px;
top: 30px;
width: 190px;
height: 100px;
}
or Code: #logo {
left: 45px;
top: 30px;
width: 190px;
height: 100px;
}
#logo a {
height: 100px;
}
I only need to specify height for '#logo a' but the first code appears less cluttered to me. Which code would be more kind on the server? Thanks in advance!... Hi, I have the following code: <h1>Some text <span class='special'>special text</span></h1> And my CSS: Code:
.special {
font-size: 10pt;
}
h1 .special {
font-size: 20pt;
}
The problem is, the SPECIAL text within the H1 tag above still remains as 10pt I want it to be 20pt only within the h1 tag. Is there a way I can do this? (Worst case: I would need to add a new style and update all my HTML code to use this new style..but I'm hoping there's a quick CSS fix) Many thanks! I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! |
|||||||