|
CSS - Help Needed For 5.1 Reboot Structure Problem
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 Similar TutorialsOk, I finally constructed the basic layout. But, I've encountered yet another problem. There seems to be a space for some odd reason between one of my images in the content div and one of the images in my news div. I want them to sit flush. Here's an image to show what my problem is: http://www.octavewebdesign.com/csshelp/spaceproblem.gif Here is the actual website: http://www.octavewebdesign.com/chilesxc/index.html The css can be found he http://www.octavewebdesign.com/chilesxc/style.css Any tips would be great. Please view in FF, as IE seems to mess it up... which is another problem for another day. Thanks. -Justin (but, if anyone has any solutions for the IE problem then that would be great to add it. For some reason IE makes the margins larger than they're supposed to be. The margin is set to 39 px, but it acts like a 50px margin for some weird reason. This causes the menu div to drop down below the content div.) 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. 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 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. 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 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? 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 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, 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 I got a question. Can I anyhow create two equally tall div elements which like tables do, would lenghten together when I add content more than default 100% to another of these two elements, and using just pure CSS? I have a website that haves a div element named "body" which contains another div called "right", so the main element is separated in two parts. I've set the height of the both elements to 100% and they are positioned relative. Now, when I add content more than the default 100% to another div, the text will overflow the whole body element. And when manipulating the body div source code by replacing the property height:100%; to min-height:100%; the problem with the height is solved but the right aligned div gets shorter a quite. I have asked for help from another sources also, and some people gave good advices for me to consider using the faux columns method. Well, it would be one solution, as also if I replaced the body element by a table - but I sure want to be aware if there's a solution for this using just plain CSS. Thanks in advance. Here's also the source code: Quote: body,html { margin:0; padding:0; background:#C73F17; height:100%; } #body { margin:auto; height:100%; width:90%; border-left:solid #000 1px; border-right:solid #FFB00F 1px; background:#FFFFCC; } #header { height:70px; border-bottom:solid #000 2px; text-align:center; background:#1c1c1c; } #footer { height:25px; border-top:solid #1c1c1c 1px; background:#000; } #right { float:right; width:150px; height:100%; border-right:solid #FFF 1px; background:#1c1c1c; } #nav { height:20px; border-bottom:solid #000 2px; background:#282828; } Well... I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this: </style> blah blah blah that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason Hi All, I'm Ashley; a new member on this forum. I look forward to helping people out, as well as hopefully getting some of my own questions answered too! I've been designing a website, that I must (must) have up by saturday; I've done all the php back-end development for this site, and it's working great. I'm struggling however with the front-end design. I'd like to add here, not for sympathy for just to clear this up, that I have a visual impairment, so this is the part I struggle with most; Being totally blind, I have to rely on people with site to tell me exactly what's going on when web designing. Basically, I have an html template that looks like this: Code: <html> <head> <title>Test Page</title> </head> <body> <div id="wrap"> <div id="header"> <h1>This is the top header.</h1> </div> <div id="nav"> <ul> <li>This is main item one, with a list nested inside <ul> <li>This is sub item 1.</li> <li>This list should drop down when main item 1 is hovered over</li> </ul> </li> </ul> </div> <div id="content"> <h1>Content</h1> <p>All the main content for the page is placed here. </p> <p>Second Paragraph</p> <p>Third Paragraph</p> <p>Fourth Paragraph</p> </div> <div id="leftnav"> <p>This is the left section. It will hold the controls for changing the text size and sharing the page, as well as site statistics</p> </div> <div id="rightnav"> <p>This is the right navigation section. It contains the fields for a user to login if they aren't currently, and also contains some basic info</p> </div> <div id="footer"> <p>This is the footer.</p> <p>It should be posissioned on the bottom of the page</p> </div> </div> </body> </html> This is what I want to happen; the wrap div is the container for everything on the page, and fills the browser screen. The header div goes along the top of the page, and is the width of the entire screen. The nav div goes underneath the header, with the main nav items posissioned in a horizontal line. When, for example, "item1" is hovered over, a list drops down with sub items. The content div should fill a large area of the page underneath the navigation bar, and holds the page content. It should be the width of the entire screen. 'leftnav' and 'rightnav' should be Underneath the content area, posissioned to the left and the right respectively. They should each fill about half the width of the screen, and should not overlap. The footer should then be posissioned along the bottom and fill the entire width. I'm just not sure how to go about this; i've tried, but everything overlapped, pushed each other out the way, and generally didn't work. If somebody could give me an example that will achieve what i'm trying to achieve (I can add colours etc), It would really be very much appreciated. I've looked through the w3 CSS guides, and am slowly working through them, though am finding it slightly harder without the visual representation of how it works. Thanks for any and all help. Hi Folks, Trying to get the following CSS code for page navigation to work on my site ((See example at bottom centre of this page add.ie/index.php?page=new&cid=6). You can see it working properly here on Yahoo. (h)ttp://uk.search.yahoo.com/search?p=news&ei=UTF-8&rd=r1&fr=yfp-t-501&pstart=1&b=11) #pg {clear:both;color:#3666d4;height:2em;margin:2em 0 2em 250px;} #pg a,#pg strong{border:1px solid #ccdbe4;display:block;color:#3666d4;float:left;margin:0 2px 0 0;padding:1px 8px;text-align:center;text-decoration:none;} #pg a:hover{background:#3666d4;border-color:#2b55af;color:#fff;} #pg strong{border:0;color:#000;font-size:107%;font-weight:bold;padding:2px 6px;} All is working fine, but for some reason when i click on a page number (See example at bottom centre of this page ((See example at bottom centre of this page (add.ie/index.php?page=new&cid=6), that page number jumps up like the picture i have attached. I can't seem to get the <strong> tag to force the text that is NOT a link to show like Yahoo within the other page numbers. Any ideas please? Thanks, S http://www.firstinsurancefunding.net Look at the top right button in both browsers. In FF2.0, this shows up WAY to the right. In IE6.x it's fine. I don't have IE7 on my computer to compare it. Can someone provide a fix, or tell me what info you need? extremely new to css here...just want a basic template for my first site what im trying to get is.... http://www.samsenterprisesauto.com/template.jpg what im getting is... http://www.samsenterprisesauto.com/ie6.jpg and http://www.samsenterprisesauto.com/firefx.jpg ie "looks" pretty good but i cant get rid of the small space between the logo and the lefthand navigation bar my html looks as follows... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel=stylesheet href="testy.css">
</head>
<body>
<div id="Header">
<div id="Logo">
<img src="logo.jpg">
</div>
<div class="padder">
<h1>#Header</h1>
</div>
<div id="TopBar">
<div class="padder">
#Topbar
</div>
</div>
</div>
<div id="Main">
<div id="Left">
<div class="padder">
<h1>#Left</h1>
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </div>
</div>
<div id="Middle">
<div class="padder">
<h1>#Middle</h1>
<p>x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xAll boxes are positioned statically. The #Left and #Right are floated boxes.x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x</p>
</div>
</div>
</div>
<div class="spacer"> #spacer</div>
</body>
</html>
my .css is as follows: Code: body {
margin:0;
padding:0;
background: #fff;
}
#Header {
padding:0 0 0 0;
height: 120px;
background: url(headbg.jpg) repeat-x;
}
#Header #TopBar {
top: 100px;
margin: 0 0 0 150px;
padding:0 0 0 0;
height: 20px;
}
#Logo {
float: left;
}
#Main {
margin: 0;
padding: 0;
}
#Main #Left {
float: left;
width: 150px;
margin: 0;
background: url(sidebg.jpg) repeat-y;
}
#Main #Middle {
margin:0 0 0 150px;
border: 0px;
background: #fff;
}
.padder {
margin: 0;
padding: 10px 20px 0 10px;
border: 0;
}
.spacer {
clear: both;
height: 0px;
font-size: 0px;
border: 0;
margin:0;
padding:0;
visibility: hidden;
}
not exactly sure where that space is comming from....when i add borders to the different sections, the space is in the logo block but im not sure why since neither the headder or the logo block have any kind of padding specified.... any help would be appreciated Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin Hello, can someone please take a look at this site: http:// www . jamandcheese . be/dump/index.html As you can see, I'm having some trouble. 1. I can't get the navigation to work properly. It needs to be vertically centered and the sliding doors hover effect isn't quite right. Don't know how to solve this one! 2. under the white box (i'll add a slideshow later) there are two buttons. The bottom text overlaps the text above. How can i solve this? And how can i get the hover effect to work? When you hover over, text needs to become white with dark text-shadow. 3. the 2 lists at the bottom are floating left. They need to be centered like the screenshot below. When i give both ul a margin, they jump underneath each other. Please help! Hey all, I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work. So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds. What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has. I just can't get it to work. Can anyone help me? Thanks a lot. Regards. Hello, I building a page with a form. Tables would be super easy, but my client expects web 2.0 Here's the page: http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I'm currently using <span class="form">, or <span> but look totally different on different computers (i.e. Firefox on PC or MAC) Here's my CSS: Code: .last_name
{
margin-right:230px;
}
.first_name
{
margin-right:220px;
}
Can anyone tell me the best approach? Basically I need each field's text to line up below and to the left. The form is a lot longer and has varied width fields throughout. Any help or ideas are appreciated. thanks -S |
|||||||