|
CSS - More Layout Assistance Needed :) <div>'s
Hi,
I am having some major problems making all the <div> tags place the content in the correct places. The logo (yes its poort quality on purpose, its just for testing ) needs to be centered and above the left and right vertical menus. The block of "Text" needs to be below the logo but contained between the two vertical menus. and the footer needs to be in line with the text but move up and down the page depending how much text is present. The site is: http://www.explosiveracing.net/test/header.html Could anyone be of assistance? Thanks Similar TutorialsI am having consistent alignment issues with IE7. I am uncertain as to what the issue could be. Any help, assistance or a link to some reference would be greatly appreciated. 1) . The line at the top of the screen and the tabs do not line up properly. The line transects the buttons. standardizedsupplements{dot}com 2) Image and Text are not aligned on same line: standardizedsupplements.com/tremorsure.html standardizedsupplements.com/purchase_tremorsure.html 3) Gif/Arrow to right side panel list ( <li> ) is not consistent showing up on all lists. standardizedsupplements.com/contact-us.html 4) In the FAQs, at the very top of the page, the numbers and the text overlap, when there are double digits. standardizedsupplements.com/faq.html Website: www.devthor.net/sara/index.php CSS: www.devthor.net/sara/css/fineart.css Ok, here is the problem. It is a pretty basic site so I wasn't expecting many problems (well, maybe I should have, they always seem to crop up), and everything lays out properly except my menu bar. The goal is to have the text sit on top of the image, and the white bar that appears on mouse-over to appear on top of the image (preferably within 1 px accuracy so that the brown border still remains untouched by the opacity, picky, yeah, but I like the look better). So I was going to start playing with CSS hacks to get the positioning exactly right on all the browsers when I noticed something. Firefox on OS X and Firefox on a PC displayed the menu in a different location. I believe that this has to do with the default font sizes on the respective platform. But as a side effect, it messes up my absolute positioning efforts on the menu since the different sized text takes up different amounts of space. So I then attempted to go back to relative spacing since the font size would become a mute point if the page auto adjusts, however for some reason with the <dl><dd><dt><li> menu style I use, the text I place inside the menu div does not cause the div bounding box to expand. Thus relative positioning ends up placing the menu div inside the top image div. (More accurately it places the text from the menu div inside the image box while the actual div bounding box seems to have a height of 0, and thus is invisible. Basically I am looking preferable for a fix to the relative positioning issue. If a fix cannot be found for this, maybe just a fix for the font size messing up my layout issue. I am at the end of my means for figuring it out having spent the last 2 days searching for a solution. So any help would be tremendously appreciated. Thanks in advance, Devthor P.S. Sorry for the novel length post. I just figured some background as to what I have tried might be helpful. Please look at this layout Layout Example In IE7 there is a gap between the footer and upper divs that I am not sure what is causing. The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated. Tom Ive tried to make the text float next to the image but when i try the text just sits below the div line under the image to the right. here is the URL: http://www.nevertap.com/s_media.php here is the markup: Code: <div id="center_top_content_header"> <h3>Event DVDs</h3> <div id="center_top_content"> <a href="http://www.nevertap.com/s_media_01.php"><img src="/i/cover_thmb.jpg" alt="Nevertap: Season 1" /></a> <div id="imagetext"> <p><span class="plusone bold">Nevertap Season 1 DVD, 5 hours of premium submission grappling! 19.99 Plus S&H</span></p> </div> <!-- END imagetext --> </div> <!-- END center_top_content --> </div> <!-- END center_top_content_header --> And here is the relavent CSS: Code:
div#center_window {
/* margin-top: 0px;*/
margin-left: 215px;
margin-right: 250px;
padding: 5px;
height: 100%;
/* border-left: 1px solid black; */
/* border-right: 1px solid black; */
/*border: 1px solid black; */
}
div#center_top_content_header {
width: auto;
margin: auto;
border: 1px solid black;
}
div#center_top_content {
padding: 0 10px 10px 10px;
width: auto;
margin: auto;
/*border: 1px solid black; */
}
div#imagetext {
float: right;
width: auto;
margin: auto;
padding: 0;
display: inline;
border: 1px solid black;
}
Please look at this page - http://www.tmhdesign2.com See the nav bar with the green background and white font? I want that background to have an opacity of say 70% but when I do that the font also gets that opacity which is what I don't want. Please look at this page - www.pacunionsonoma.com The issue I am trying to resolve is the positioning of the two links that read "Find a Realtor & FREE Property Evaluation". On IE7 I I have them where I want them. On FF they are too low. I outlined all relatively positioned elements and it seems in FF those links are sitting on teh very bottom of the container div while in IE they are slighly above the bottom of the containing div. ANy help? Thanks. Hello! I am currently fixing some issues with the BuufDesigns.com layout. But I am in need of assistance of some serious bugs I cannot fix in Internet Explorer and Firefox. Ironically, this website is compatible with Safari and Opera. This is a voluntary job, but you will be credited on the credit page. Not only that, but if anyone else knows how to intergrate ZenPhoto to my gallery, please PM me. Mind you, the Buufgallery and the ZenPhoto gallery default theme have very similar structure and attributes. Pretty much copying and pasting the php codes. But I can't seem to get that to function properly, hence needing a volunteer to help me on that. If you want this website released as soon as possible, someone please help me. I know there are some talented CSS designers here. But I can't seem to find a volunteer. Here are some teaser screenshots, if you want to help me with this little bug squashing project, you can see the whole development. URL Thanks! Hi, I am currently trying to postion an SWF menu on the top right corner of a DIV element, I am just starting with CSS and my brain has blanked out. I would greatly appreciate some HELP. Here is the link on the web= (ok I dont have permission to position a URL, please advise guys.) CSS body { background-color: #efefbe; } div#container { margin: 50px auto 0px auto; width: 1050px; height: 525px; } div#left { width: 525px; height: 525px; float: left; margin: 0px; } div#menu { width: 200px; height: 230px; position: absolute; top: 0; bottom: 0; left: 0; } div.content { width: 525px; height: 525px; background: white; float: left; margin: 0px; } p { font: 11px sans-serif; color: #666666; padding: 25px; } p#auto { overflow: auto; } Hey everyone. Well I am making a forum. And I need to use a margin-right for the main content(because I know of no other way to do it). They problem is, FireFox doesnt respond to the margin-right. Here is my (troubled) CSS. css Code: Original - css Code #main-content{ margin-left: 10px; width: 100%; }
#main-content{
And my XHTML. Code: <div id="main-content">Blahblahblah</div><!--Fairly simple :D--> I am using XHTML 1.0 Transitional. Please look at this layout as provided by my graphic designer: http://hometown.tmhdesign.com/default.jpg Now look at my attempt to achieve the same http://hometown.tmhdesign.com I am a bit challenged at the right column and how to lay it out. She put a fixed height gradient background in the right div and then placed yet another div on top of that one. THe issue as you can see is if the content on the left exceeds the content on the right the design breaks up (so to speak). I'm really curious to get some feedback from the experts... Please visit this page - http://www.brooksidetransmission.com Put your mouse over the "Services" link to reveal a sub menu. In FF it works fine in that you can access each of the links in the sub menu. In IE7 though when you move the mouse around the sub menu links the who sub menu disappears. Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners. Somewhere in my combining the two messed up the :hover for IE7 Any help would be appreciated. Tom Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? 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 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? 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 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. 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; } Can someone please explain why this page looks this way? It's happening in all the browsers used. http://cjenkinsweb.com/shutterstock_submit.JPG here is the way it normally looks, in terms of style. Of course you will not be logged in, so it is not the same content. http://submit.shutterstock.com/main.mhtml I would appreciate an opinion. Thanks. |
|||||||