|
CSS - Trouble Positioning A Menu And Content Box.
I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.
Can anyone help make suggestions as to the best way of achieving this? Here is some of my css code which is also viewable on the website which is located at: 8< snip >8 Code:
#container
{
margin: 1em 4em 1em 4em;
/* width: 750px; dynamic width */
text-align: left;
background: #FFFFCC;
border: 2px solid black;
}
#menu
{
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
font-family: Verdana;
font-size: 12px;
width: 150px;
display: inline;
}
#content
{
float: right;
width: 20em;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
/* margin-left: 170px; */
padding-top: 5px;
padding-left: 20px;
padding-bottom: 20px;
border-left: 2px solid black;
height: 100%;
}
Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox. BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work. Similar TutorialsHello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help! I'm trying to adjust the location of the "main menu" on this page he http://www.jeditemplearchives.com/hasbrodb/welcome.php Currently, it is set in reference to the side of the browser in this CSS code: Code: .menuContainer
{
position: absolute;
top:113px;
right:210px;
margin: 10px;
margin-top: 50px;
}
I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links: Code: #header ul.headerLinks
{
list-style-type: none;
margin: 0px;
padding: 10px;
position: absolute;
right: 0px;
top: 95px;
white-space: nowrap;
}
Thanks for any suggestions anyone comes up with! Hey guys, Here's my problem: http://www.3rdcoastpc.com/moonstoys/ Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design. Here's my css: http://www.3rdcoastpc.com/moonstoys/main.css and the HTML: http://www.3rdcoastpc.com/moonstoys/index.html Thanks in advance! Dustin I'm having trouble with creating a nav bar in css. The code I'm using is this for the html: Code: <div id="wrap"> <div id="nav"><a id="home" href="#" title="home"><span>home</span></a> </div> </div> <div id="bottom"></div> </div> and this for the css: Code: @charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x; } #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; } #wrap { background-color: #FFFFFF; border-color: #660000; border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; } #nav { height:50px; } #home { display: block; width: 226px; height: 50px; background: url("home.gif") no-repeat 0 0; } #home:hover { background-position: 0 -50px; } #home span { display: none; }
The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you. In the header section design, I have three parts. Menu; upper left, gallery; lower left and Logo right. So in my stylesheet, I created three parts. The problem I am having is logo is not centered as in the design (check the attachment). I could not figure why not. Looking for suggestions. http://www.refinethetaste.com/AT/ Im having issues positioning a div that contains a background image. The idea is to have the image positioned in the lower right hand corner of the screen. I get it there, but then the problem is that the image floats to the height of the div it contains. i need it to just be in the bottom right hand corner. how can I do this? here is the page, im so embarrased to have to ask this but i swear, the CSS people could not have made this more confusing if they tried. http://www.doublethinkdesigns.com/main.php I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div. In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning. I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape? Code:
<div id='container'>
<div id='first'></div>
<div id='second'>All of the images are loaded here.</div>
<div id='third'></div>
</div>
Code: #img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
display: block;
border: 3px solid #B8860B;
width: 100px;
height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
margin-left: 10px;
}
#img1 {
margin-top: 60px;
}
#img2 {
margin-top: 10px;
}
#img3 {
margin-top: 10px;
}
#img4 {
margin-top: 10px;
}
#img5 {
margin-top: 10px;
}
#img6 {
margin-top: -590px;
margin-left: 125px;
}
#img7 {
margin-top: -136px;
margin-left: 240px;
}
#img8 {
margin-top: -76px;
margin-left: 355px;
}
#img9 {
margin-top: 10px;
margin-left: 380px;
}
#img10 {
margin-top: 10px;
margin-left: 355px;
}
#img11 {
margin-top: -87px;
margin-left: 240px;
}
#img12 {
margin-top: -125px;
margin-left: 125px;
}
#img13 {
margin-top: 30px;
margin-left: 305px;
}
#img14 {
margin-top: 10px;
margin-left: 365px;
}
I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am. I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header. I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end. I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window. I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning. My HTML is: Code: <body> <div id="header"> <div id="header_ads"> <?php display_banner() ?> </div> <h1 id="heading"><span class="invisible">This is the heading</span></h1> </div> </body> My CSS is: Code: * {margin:0;padding:0;}
body {width:100%}
.invisible {visibility:hidden;}
/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}
#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}
#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}
The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized... I would greatly appreciate any help! I've been working on getting a nice look to fit the body of my content in, but I'm having a little difficulty. Based on some tutorials and things I have read, it seems many people do this technique by applying background images to various tags. I know it has a set width. However, the height may vary depending on how long the body copy is, which is where the problem arises. I have it broken into three images (top, bottom, left_right) It seems to display properly in IE7. However, in Firefox, the top and bottom images do not connect with the left_right image. I've tried setting margins and padding for top/bottom to 0 as I thought that may be the issue, but it didn't fix it. Can view files at: http://www.russellholloway.com/beta/test.html http://www.russellholloway.com/beta/main.css I'm pretty new to working with CSS, so if there are any other errors that may arise from the way I have coded this, please let me know. I intend to position the whole content-wrapper div in a floating layout for the site. Essentially there will be menus / such to the left, logo / stuff above, and this body content area will be in the remaining space. CSS copied below: css Code: Original - css Code .content-wrapper { padding: 0; margin: 0px; position:relative; } .content-wrapper .footer { width: 710px; background:url(content_bottom.jpg) no-repeat bottom; padding: 0; margin: 0px; position:relative; min-height: 34px; } .content-wrapper .heading { margin: 0; background-image: url(content_top.jpg); background-repeat: no-repeat; width: 710px; padding: 0px; height: 35px; position:relative; } .content-wrapper .heading h3 { position: relative; top: 20px; left: 20px; } .body { background-image: url(content_lr.jpg); background-repeat: repeat-y; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; width: 670px; position:relative; margin: 0px; }
.content-wrapper {
Hey there, im not good with CSS, just know some basics so looking for some help here... I see on some sites, in their source code, the menu appears at the near bottom of the source code page, but when the page is viewed in the browser.. the menu is rendered as been placed before all the other contents. how is this possible? I thought the browser reads line by line and renders accordingly... actually.. what I want to do is place the source code of something at the top of the page, but when rendered, I want it to appear near the bottom.. is this possible? Thanks in advance and sorry if the question confused you or sound stupid Hi, I had a little problem with this design earlier, and a kind soul on the forum helped me by showing me a template to use (instead of all the absolute positioning i was using), but i've got one little issue, and it's all that's stopping my site from going live. You'll see it quite clearly, my "content" gets pushed under my "menu" - fnb4wd.com.au/4x4wh/help/category1_1.htm is the URL. Any advice would be greatly appreciated. Thanks in advance. Hi all, I'm not a n00b with CSS, but I'm no expert, either. I am making a test page at http://www.bartlett-family.net/test/ In IE, it looks pretty much like I WANT it to. In Mozilla and Opera, it looks all messed up( you'll see for yourself). Basically, I would like the globe logo, the GFS image text, and the footer bar vertically lined up and centered (pretty much like it is right now in IE). However, I am obviously doing something wrong because it is not right in other, proper browsers. I've been playing with it for a while and just can't figure it out. Any help would be most appreciated. TIA! Chris Hi there im fairly noob to css and I cant figure out how to do this, or if its at all possible? please take a look at: http://www.freelayouts.us/css/page2.html this page display just fine, and the html code flows like this: - header - left column - right column - content - footer but what i want to do is make the source code flow like this: - header - content - left column - right column - footer BUT still display just like the above page.. is this possible? here is what happens when I reposition the source code: http://www.freelayouts.us/css/page1.html is there anything I can do to the CSS that will make it appear like the first example but the source code flows like my 2nd example? hope i didnt confuse you... thanks in advance Ok, I have three problems with this test page. 1. How do I force the logo to be always to the extreme left (just over left container) whilst ensuring the menu options stay on the right side? 2. How do I force the menu options to vertically align to the bottom? (So that their baseline matches the baseline of the logo) 3. In FF the right side image is correctly displayed in the right-side container, but in IE the images somehow ends up directly below the left side image! Any idea where I'm going completely wrong? If anyone has sometime to have a look here a a link containing the test page content in a zipped file...zipped test page For reference, I'm testing this with the following browsers... IE 6.0 FF 2.0 Thank you in advance. PS. I can create a page with this (and more complex) layout easily using the html "table" tag (it's what I've been doing for at least a few years), but we don't do things like that any more so I thought I'd better get with the scene and master this div thing once and for all! Using "table" tags for layout is so last century! Hi, I not very good at CSS and I need to create a page that shows divs in other order that are in the script: in my page i want to be something like this: Code:
<body id="body" >
<div id="bodyHolder" >
<div id="mainHolder" >
<div id="mainColumn">Here will be the main content</div>
<div id="leftColumn" > Left Column</div>
</div>
<div id="topLogoHolder">Site Logo</div>
<div id="topMenuHolder" > Top Menu</div >
</div>
<div id="footerHolder"> Footer</div>
</div>
but I want to show: Site Logo, Top Menu, Left Column, Main Column, Footer My problem is with Footer. I can't get to position at the bottom of page (not at the window) because the Main Column is not fixed. The CSS code is : Code:
body {margin:auto; background:url('../imgs/bg.body.jpg') repeat-x; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #FFFFFF;}
#bodyHolder {margin:auto; width:1006px; text-align:left;}
#mainHolder {width:1006px; text-align:left; display:block; float:left; clear:both; background-color:#FFFFFF; margin:0px; padding:15px 0px 15px 0px; position:absolute; top:150px;}
#mainColumn {text-align:left; display:block; float:right; margin-right:10px; width:810px;}
#leftColumn {text-align:left; display:block; float:left; width:180px; }
#topLogoHolder {width:1000px; text-align:left; display:inline; margin-left:6px; float:left; clear:both; height:112px; position:absolute; top:0px;}
#topMenuHolder { text-align:left; display:block; margin:0px 0px 0px 6px; padding:0px; background:url('../imgs/bg.top_menu.jpg') no-repeat; width:1000px; height:38px;position:absolute; top:112px;}
#footerHolder {margin:auto; background:url('../imgs/bg.footer.jpg') repeat-x; height:234px; font-family:Arial, Helvetica, sans-serif; padding:0px;width:100%; display: block; position: absolute; bottom:0px; height:100%; clear:both;}
I really don't what to try (google gives me no clue... all my attempts failed ) I'll appreciate any help! Thanks a lot in advance When this design was originally built-out, there were no set requirements on how the CMS behind the design would function. As the project has progressed, some of those requirements have started to trickle down and a some of them are getting pretty ridiculous. This is loosely the code I'm working with. Code: <div id="primaryContent"> <div class="primaryModule"> Content </div> <div class="primaryModule"> Content </div> <div class="tertiaryModule"> Side Content </div> <div class="tertiaryModule"> Side Content </div> </div> <!-- end primaryContent --> And the accompanying CSS Code: .threeColumn #primaryContent,
#primaryContent.threeColumn {
float:left;
margin-left:6px;
padding:7px 10px 20px 22px;
width:732px;
}
#primaryContent .primaryModule,
.primaryModule.primaryContent {
margin:0 300px 2em 0;
position:relative;
width:514px;
}
#primaryContent .tertiaryModule,
.threeColumn .tertiaryModule {
float:right;
margin:0 0 2em 531px;
padding:0 11px 0 12px;
position:relative;
width:178px;
}
I have attached a picture of what the desired display is. The vertical gray bar is a background image of a div higher up in the code. Originally, the XHTML and CSS were very well thought out, but as the requirements came through for the CMS, the XHTML had to go out the window. Now, everything in #primaryContent is handled by the CMS. Each module can have it's own class or ID to have styles applied to it, but no additional divs can be put in to sort the side content from the main content. Furthermore, the order of the divs can shift every time the user refreshes the page - there's no telling in what order div.primaryModule or div.tertiaryModule may come in. Awesome! I was able to get this displaying correctly in IE6 and IE7 using the following styles: Code: #primaryContent .primaryModule,
.primaryModule.primaryContent{
position:relative;
float:left;
clear:left;
width:514px;
margin:0 0 2em;
}
#primaryContent .tertiaryModule,
.threeColumn .tertiaryModule{
width:178px;
padding:0 11px 0 12px;
clear:right;
float:right;
position:relative;
margin:0 0 2em;
}
But I keep running into clearing and floating issues in FF3. The only way I can get the layout functioning correctly in FF3 is if I know that the .primaryModule divs come before the .tertiaryModule divs (or vice versa). Any thoughts? Thanks for your help. Hello, I'm relatively new to using CSS as the foundation of a site, as i've only ever built sites for family/work etc using tables. I have used it previously for styling and so on, but not as intensively as i now am. It's great, but a couple of issues are giving me a headache - the fun of web design, hey?... I'm experiencing two problems, and have spent a lot of time describing them (with examples and images) on the following page - fnb4wd.com.au/4x4wh/help/help.htm - not wanting to clutter up the forum with my explanations and too many images. The first is to do with the 100% height trick - my "wrapper" div is not expanding with my "content" div - but i do not believe faux columns are possible for my design (if someone proves me wrong, great!) as i don't have two full height columns, but one content column and a vertical menu div... The second issues is with a Horizontal menu i am using as main navigation. In both FireFox & Chrome, the menu shifts down so the text links are unreadable unless hovered over. In IE, it's positioned as i want (with Comp View Settings turned on for IE8). So, if anyone could shed come light on my problems, i'd love to hear some ideas. The full explanation, complete with working examples and images (as well as my code) can be seen at fnb4wd.com.au/4x4wh/help/help.htm. Thanks in advance, Azerus85 Hi, I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it. Here is the link: http://www.greatstreetsstlouis.net/...d=32&Itemid=204 I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you. Here is the code: Code: .extmenu .modulebdr div div div #mainlevel {
font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
background: url(../images/bullet_arrow_right.gif) left center no-repeat;
padding-left:9px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
padding-left:9px;
}
.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
color:#666666;
margin-left:14px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active {
padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active {
margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current {
margin-left:10px;
}
.extmenu .modulebdr div div div ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current {
margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel {
margin-left:7px;
}
Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers. When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane. If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here.. If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone.. Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help: Home page style sheet: mainline.divsharp.com/wp-content/themes/mainline/style.css Interior page style sheet: mainline.divsharp.com/wp-content/themes/mainline/interior.css In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this: Code:
<li id="popout_hov">
<div id="popout">code for menu pane</div>
</li>
#popout_hov #popout {
visibility: none;
}
#popout_hov:hover #popout {
visibility: visible;
}
Thanks. |
|||||||