|
CSS - A Newbie Div Structure
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. Similar TutorialsI 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 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 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 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? 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 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 Hello, i am creating a website in dreamweaver and have created a custom css navigation bar online. can anyone help me get the navigation bar on to my dreamweaver website? i have the css files and everything for the navigation bar i just can't work out how to insert it into my design. please help as i have a deadline looming :/ thanks for your time sam marriott So I'm taking the jump from Tables to Div layouts for non-record elements like I'm "supposed" to. Just for starters, I'm finding it much more complicated than tables would have ever been, and there are a number of cross-browser problems that would have never happened, but I won't get into a rant about it here. So, instead, a simple question. I have some nested Divs I'm setting up like I would a nested table. But I'm finding that some DIVs are actually "poking out" of the original DIV. I didn't even know this was possible w/o some sort of positioning. Can anyone tell me what I'm doing wrong he http://www.poweredpages.com/cityrecovery/index.php I'm trying to keep that red bar inside the top DIV, which contains a gray background (and a red border to help you see where the outermost DIV lies). Thanks, Jeremy Hi, I want to display some products on a web page. Anyone know how I can display the products (image & text) in a nice looking box? Thanks CF I'm a design student trying to make an online portfolio and honestly I don't know much about CSS and I've hit a bit of a snag. I've been goofing around in Dreamweaver trying to get the CSS containers to do what I want but I just can't seem to get it. URL Basically, I'd like a two columns both aligned at the bottom of the browser. The right column would be centered and the left column would be aligned to the left of it. The left column would be a menu column and would be fixed and shouldn't scroll. Here's the CSS code: Please don't laugh Code: .container { height: 80%; width: 700px; margin-left: auto; margin-right: auto; background-color:#06F; padding: 10px; position: relative; overflow: visible; bottom: 0pc; } .menu { height: 80%; width: 300px; padding-top: 25px; padding-right: 25px; position: fixed; left: auto; bottom: 0px; background-color: #F00; }
Sorry for being such a newbie, the code is nothing like what I wanted. If someone could please lend me a hand, I would gladly appreciate it HELP !! The header to my website is designed in css with <div> tags and some times the whole background does not load....any thoughts? Also I am considering the possibility that my header should not call to my stlye.css file, but that the header should be a table with the table having it own style...any thoughts on this would be really appreciated thank you sean (URL address blocked: See forum rules) is my site Hey folks, I have a question. I'm trying to get a site 100% CSS compliant through W3C. But I'm facing a few problems. Of course I had the site looking just the way I like it (but then had to change stuff to make it compliant and thats when the fun begins!). I was wondering if you could have a look and see why this panel isn't floating to the right like I have told it to! three60design.com/sky_site/home.htm This is my first full CSS website and want it to be just perfect for going for jobs and would REALLY REALLY appreciate any help..... Gerry Hello! My first post...but definitely not my last. I'm working on a new site and used a CSS template designed by someone else. My problem is I can't figure out how to change any of the width parameters without screwing up how the page looks. If anyone could help me with resizing the width that would be greatly appreciated. The web site is located at www.easyplateau.com. Thanks! daniel Hello, I'm new to the world of CSS. Hopefully that won't be TOO obvious to anyone looking at my code... Anyway, it hasn't taken long for me to find frustrations with IE. I'm having issues with elements on two pages of the site I'm working on: the index page (wiayouthmountainland.org ) and the apply page (wiayouthmountainland.org/apply.php ) On the index page there is some white text in the center of the page. It is where it should be in FF but is way over to the right in IE. On the apply page there are some textboxes on the right side of the page. Again, the placement is correct in FF, but they are too low in IE. I don't know if the same thing is causing the problems. I don't really know what it is I'm looking for. If someone wouldn't mind taking a look to see if they can figure out what is messing me up, I'd really appreciate it! Here is a link to the css: wiayouthmountainland.org/WIA.css . Thanks in advance! Jules Hey, i created this page using tables www.epcgaming.com/rev and obviously its very messy code, and doesnt load well. I had suggestions that i should do it in css, i read some tutorials, but i still do not see how i can make that layout using css and not tables, you guys got any tips to get me off inthe right direction? |
|||||||