|
CSS - Maintaing Website Structure While Zooming In/out
When I zoom into my webpages, the structure of the website does not stay the same, all my elements start shifting and moving around... I am trying to figure out a way to position elements so when I zoom in or out they stay in the exact same position... any suggestions?
Similar TutorialsHi to all. First off, thanks for reading my question. I appreciate any help or consideration anyone can give. I am developing a website for a singer friend, using joomla and a template I purchased. I have only been building websites for 9 months now, so please forgive my ignorance. The problem is that the content, navigation etc moves left or right, almost diagonally depending on the resolution of someones screen. This is noticeable to me as well, if I zoom in and out on my page. I have no idea what is going on at all. Could someone give me some pointers? Here is the site: fernyhillscomputers.com.au/fordham/ Thanks, Chris. Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
I want to make a seperate component with style sheets associated with it so I can change the look in the future. My intended goal is something that will look like a two column table with the contents of each column being aligned to the right, and left, respectively so they nearly meet in the middle. Text: SelectDropDown Text: AnotherDropDown More Text: AnotherDropDown Kind of like that, where the colons should be matching up, and the drop downs should begin at the same place. What would the div/span structure look like? For example if I want the component to be 400 pixels wide, and the two columns meet at the center. Thanks in advance. Hello, I have 3 type of h2 headers on my web site: 1 - Post titles on a blog (Ex: <h2>New documents available for download</h2>) 2 - Content section title (Ex: <h2>Contacts</h2>) 3 - Sidebar content section title (Ex: <h2>Publicity</h2>) I am trying to build my CSS to style the 3 different headers but I am having some problems. I could use: h2.Post, h2.Content and h2.Sidebar or: h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar or even: h2 (for Post), h2.Content for content and then h2.Sidebar to change Content class so it fits Sidebar. So a section in sidebar would be: <h2 class = "Content Sidebar">Publicity</h2> Could someone help me in deciding how should I structure my classes? Thank You, Miguel I am trying to create a table where I could toggle visibility of certain rows by style="display: block" and style="display: none" It works well in Internet Explorer. In Firefox the following table structure displays rows "First Name" and "Last Name" on left side. Why? I would like it positioned exactly above "State" row, like it is in IE. How do I do it? Code: <table width="100%"> <tr align="left" id="f_name_holder" style="display: block"><td width="30%" align="right">First Name:</td><td>Mike</td></tr> <tr align="left" id="l_name_holder" style="display: block"><td width="30%" align="right">Last Name:</td><td>Rourke</td></tr> <tr align="left"><td width="30%" align="right">State:</td><td>Alabama</td></tr> <tr><td width="30%"></td><td colspan="1"><input type="submit" name="submit" value="Submit" /></td></tr> </table> Thank you. Hi, Im just starting another website and have coded the first page, ive run into a few problems on other projects later on indevelopment so would like it if someone could look over my code, let me know if there are sections that can be coded better? LINK HERE Also in FF it doesnt line up perfectly on the date, any ideas? Thanks in advance, Mike Hi, I have used the UL and LI elements to build a tree as follows: Code:
<div class="tree">
<ul>
<li>
<span>One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
<ul>
<li>
<span>Child of One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
</li>
</ul>
</li>
...
</ul>
</div>
The result of the above XHTML would be somethings as follows: Code: - One <Radio> <Button> - Child of One <Radio> Button> ... Now I want to try and get the following result through CSS: Code:
- One <Radio> <Button>
- Child of One <Radio> Button>
- Another Child <Radio> Button>
- Second Child <Radio> Button>
- Two <Radio> Button>
- Child of Two <Radio> Button>
...
That is in other words I want to have still have elements indented for every child element but all the controls of the elements are under each other at the right side of the div element. Is this possible? If so are there any example I can use? I have wrapped the controls inside a span because I felt that this would help. However I do not know how I can change the width of each 'li' element depending on its position in the three! (unless I use javascript, which I am trying to avoid). Also I do not know if CSS wise this is the best way forward. Thanks for any suggestions. Regards, Sim085 I am working on a multi-css document website for the May 1 Reboot and hit a huge snag on one of the websites. The CODY version's navigation keeps jumping around. The navigation is really similar to one of the other sites (BRIANNE) and hers is stable. If anyone can help that would be awesome! web address http://www.studio66design.com/html/hidden/may_1_reboot/ css files http://www.studio66design.com/html/hidden/may_1_reboot/css_files/cody_rules.css thanks Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Hi all, I have created a tree menu that is dynamically loaded from the directory structure on my web server. Because it takes a while to load, I was wondering if there is any way to cache the menu so that the browser doesn't have to load it again and again. My idea is to cache it twice a day maybe (to keep up to date as it is accessing the report). Does any one know a way of doing it? Regards, Sameer. Hi, I'm building a table -like structure with divs and spans. When the columns have long text, the text overflows a bit funnily, so that the text in right column continues from left column. I have example at: http://www.viewinteractive.fi/tests/div.htm The page was validated before I put the code there within the textarea. The important part is he Code:
<html>
<head>
<style type="text/css">
div.r1 {
background-color: #ccc;
width: 400px;
}
div.r2 {
background-color: #eee;
width: 400px;
}
span.s1 {
color: #700;
width: 150px;
border-right: 2px solid black;
float: left;
}
span.s2 {
color: #070;
}
div.sep {clear: both; }
</style>
</head>
<body>
<div class="r1">
<span class="s1"> Sometimes this stuff get's quite long. </span>
<span class="s2"> And it is not a problem, if both columns are long.</span>
</div>
<div class="sep"></div>
<div class="r2">
<span class="s1"> Now if... </span>
<span class="s2"> ... only right column is long, the page looks a bit funky. </span>
</div>
<div class="sep"></div>
<div class="r1">
<span class="s1"> If left is long, it looks ok in IE, but not Firefox. </span>
<span class="s2"> And right is short.</span>
</div>
</body></html>
I'd rather do this with tables, but that is not an option atm. Any helps? t.j Someone recently recommended that I redo my website in all CSS. I started, but I can't do it for the life of me, I just don't know enough. If you want to see what I have so far, the page that I doing with all CSS is located here. The css file is here. I'm sorry if this seems like a big thing to ask in the forums. Any help is appreciated. runenation.com (By know means is this a advertisement, I'm not even ready for members yet!) I want that skin to expand the whole page. The skin is only random, I will edit the pictures and stuff later. Quote: body { background-color: #B0B0B0; text-align: center; margin-top: 50px; } #topline { background-color: #29363E; height: 9px; } #logocell { background-color: #FFFFFF; width: 174px; height: 134px; } #maintable { width: 770px; text-align: left; } #menu { background-color: #29363E; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; vertical-align: top; text-align: left; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 20px; } #menu a { font-family: Arial, Helvetica, sans-serif; color: #AEB6BB; font-size: 10pt; text-decoration: none; line-height: 1.4em; } #menu a:hover { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 10pt; text-decoration: none; line-height: 1.4em; } /*================================================================================ >> Main Menu Links ================================================================================*/ td.vmenu_main_off { width: 100%; border: 0px; padding: 0px 0px 0px 0px; } td.vmenu_main_on { width: 100%; border: 0px; padding: 0px 0px 0px 0px; } div.vmenu_main_off { width: 100%; font-size: 13px; font-weight: normal; } div.vmenu_main_on { width: 100%; font-size: 13px; font-weight: bold; } /*================================================================================ >> Main Menu Links END ================================================================================*/ /*================================================================================ /* Sub Menu Links ================================================================================*/ td.vmenu_sub_off { width: 100%; border: 0px; padding: 0px 0px 0px 15px; } td.vmenu_sub_on { width: 100%; border: 0px; padding: 0px 0px 0px 15px; } div.vmenu_sub_off { width: 100%; border: 0px; padding: 0px 0px 0px 15px; font-size: 9pt; font-weight: normal; } div.vmenu_sub_on { width: 100%; border: 0px; padding: 0px 0px 0px 15px; font-size: 9pt; font-weight: bold; } /*================================================================================ /* Sub Menu Links END ================================================================================*/ #maincontent-index { background-color: #FFFFFF; width: 365px; text-align: left; vertical-align: top; padding-top: 20px; padding-left: 20px; padding-right: 15px; padding-bottom: 20px; } #maincontent-index h1 { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 16px; font-weight: bold; text-decoration: none; } #maincontent-index p { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none; color: #000000; } #maincontent-index2 { background-color: #FFFFFF; width: 560px; text-align: left; vertical-align: top; padding-top: 20px; padding-left: 20px; padding-right: 15px; padding-bottom: 20px; } #maincontent-index2 h1 { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 16px; font-weight: bold; text-decoration: none; } #maincontent-index2 p { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none; color: #000000; } #footer { background-color: #29363E; height: 20px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; color: #AEB6BB; text-decoration: none; font-size: 8pt; text-align: right; padding-right: 10px; padding-top: 4px; } #rightcontent { background-color: #FFFFFF; width: 196px; vertical-align: top; padding-top: 20px; padding-bottom: 10px; } #promo { width: 188px; border: 1px solid #9A9B9D; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #promo2 { width: 188px; border: 1px solid #9A9B9D; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #promo h1 { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #D0440F; text-decoration: none; margin-bottom: 2px; } #promo p { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000; text-decoration: none; font-weight: normal; margin-top: 0px; } Hey, I need someone to look at my website html/css and fix a few errors for me. I'm unable to fix them. I'll pay you! Its a quick fix I think and should not take too long. Kris Hi, I just registered with this forum because I cannot seem to solve a problem. I'm not a web developer or aspire to become one, I'm a photographer and I've decided to update my website using CSS (I've been reading here and there to learn about it). It's taking me a lot longer than I thought but I'm not willing to give up yet. I've uploaded to my server (where I have my current site) three pages not linked yet that will be part of the new website. http://www.barbarabadettipalumbo.com/ratesindexnew.html http://www.barbarabadettipalumbo.com/childrengallery/childrenportraitindexnew.html http://www.barbarabadettipalumbo.com/aboutindexnew.html I've placed the navigation in the footer and in the :aboutindexnew" page the footer doesn't stay at the bottom of the page as in the previous two pages but appears in the container. I tried clearing the footer and other things but cannot figure it out how to do it. I would also like to know how two reduce the space between the two columns of text and how to move the photo closer to the text. Any help or other advice will be appreciated as I've already spent way too many hours on this. Thanks for reading. Barbara Hello everyone! I'm new here. I would really appreciate it if someone could help me figure out why this page is not getting centered properly: SurfnLearn.com -- I cant seem to post url's since I am new.. currently this page is centered for viewers at 1024x768. If at a higher resolution you see it at the left. I don't get it and have been playing around with it for quite some time.. Thank you! hi there mail.diskbank.com.au:8080/rmbclient/ywam just wanted to find out the issue here associated wih my webpage on ie7. ive looked at the css and tinkled for hours but i cant explain why my website content has moved to the left by about 140px on ie7, whereas on every other browser, its OK. any help appreciated. thanks I've tested my newly built website in Chrome, Firefox, Opera, Safari and various incarnations of IE. IE 6 and earlier aren't displaying it correctly, all the others are. I'm no CSS (or even HTML) whizz, but I've had a go - I've built my site from patching together parts of various templates and examples, and don't understand enough to get to the botom of what's happening. I'm feeling properly fed up with it. I'd be eternally grateful if someone could take a look and tell me how to fix it. As I'm a new site member I can't post links, so sorry for all the odd URLS. Obviously xxx is www but I'm not allowed to post that. I'm really sorry if I'm breaking rules here, but I'm unsure how else to ask anybody for any help . If I should do something differently then please let me know. My sites he xxx.conkerphotography.co.uk This is what happens to the homepage in IE is he xxx.conkerphotography.co.uk/ie6home.png and what happens to the gallery page is he xxx.conkerphotography.co.uk/ie6gallery.png My CSS for the homepage is he xxx.conkerphotography.co.uk/style2.css and the gallery is here (pretty much the same thing): xxx.conkerphotography.co.uk/style.css Many, many thanks to any genius who can tell me how to mend this. Mark hi there I'm having a problem on my website, First off my drop downs take a longtime to load and I need some advise on how to make my drop downs load first and faster. Secondly my drop downs on the home page appear behind the flash which is very annoying and help will be appreciated. Hello, My header (please click here ) looks good on IE7 but not on FF and IE6 |
|||||||