|
CSS - Need Css Help For Fluid Logo
I am a total newbie to CSS + DIV.
I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header." I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser. Here is my CSS, so far for this portion: #header { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 10px; background: url(images/CATScreenMiddle.png); width: 100%; height: 265px; font-family: verdana, arial, helvetica, sans-serif; font-size: 25px; Thanks for any help, in advance. Similar TutorialsLink he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? I have problem whereby i want a container div with the width at 100% and a inside div that which is the same width but minus 10px on both sides. How can you get the inside div to be of fluid width to the container div with the 10px either side. Thanks. I am useing bon rouge's 3 columns 100%: http://bonrouge.com/3c-hf-fluid.php In IE, at some resolutions (1280x1024) the footer has a small 1pxish margin at the bottom. Any idea how to fix this? I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions? http://midnighttweaker.50megs.com/test.htm Hi guys, need some help for my layout. What I am trying to do is set a div to: When screen width is <1024 x 768 width should be fluid When screen width is >1024 x 768 width should stay at within 1024 (viz. 970) to avoid the long hard-to-read paragraphs. Any ideas? Preferbably no javascript as I want it to change as the browser resizes without refreshing, like when the width is set to 100%. I need to create a layout that is 100% width. 2 columns. The right column is 300px and and left column (content) takes up the rest. I need content to be first in the code because of float clearing. Thanks for any help! Hi all, I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big. What happens in those cases is that the middle column tends to just write itself on top of the right column. 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>Three columns</title>
<style type="text/css">
body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
* html .clearfix { height: 1px; }
.clearfix { display: block; }
#base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
#main_block { margin: auto; text-align: left; }
#content { padding: 10px; padding-top: 2em; clear: both; }
#container_1, #container_2 { margin: 0; padding: 0; }
.three_column #middle_content_template { margin: 0 210px; }
#left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
#right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
#left_content, #middle_content_template, #right_content_template { padding: 10px; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="content">
<div id="container_1">
<div id="container_2" class="three_column">
<div class="clearfix">
<div id="left_content">
<p>Left box o' content.</p>
</div>
<div id="right_content_template">
<p>Right box o' content.</p>
</div>
<div id="middle_content_template">
<table>
<tr>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right. Additionally, I'd like the gray box to expand with it. Is this possible? Hello! I'm here after much googling, and I am bashing my head against the wall, so any help is appreciated: Footer and header, fixed size, attached to top and bottom of screen. I want the center div to be a fluid height to sit between the header and footer, and if the content extends beyond that, I want it to scroll within the div, not the page. Here, I'm linking to a picture to explain more clearly: portlandworkshop-dot-com-slash-projects-slash-divs-dot-jpg (it won't let me direct link.. durrr) Nothing I do seems to fix this conundrum... Can ANYONE point me in the right direction? Hello I'm kinda new to css. (PHP programmer by day) and would like some help making something like this. stevenbarre dot com / sample.jpg I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars. The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over. I've done some googleing but haven't been able to find much on 100% height designs. Your help is much appreciated as well as links. It's been a while since Ive had to produce a layout so I'm a bit rusty and at the moment stuck. I think it should be pretty obvious what I am trying to do from the code, but will briefly explain. ------------------------ |banner | ------------------------ |menu| content | | | | | | | | | | ------------------------ Within the content div, which is fluid and needs to have a min-width of 800px, will be a series of divs (each a 'widget') which either take an entire row to them selves or share a row with another div of same height and a portion of 99% width (leave 1% free to fix ie7 bug). Needs to work in ie6/7 and ff2/3. The issues: Making the content div fluid Ensuring even spacing between widget rows, In FF after a float has been cleared the margin is lost on either the bottom of the floating divs or the top of the cleared div Any help or suggestions would be great. This style of layout is critical for the site and I could do it using tables very easily, however, due to how messy that can become, especially when modifying I would rather a css approach. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner">title </div> <div id="menu">menu </div> <div id="content"> <div id="messageofday">Message of the Day</div> <div id="weather">Weather</div> <div id="timetable">Timetable</div> <div id="dailybulletin">Daily Bulletin</div> <div id="calendar">Calendar</div> <div id="links">Links</div> </div> </body> </html> Code: /* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* CSS Document */
div
{
border:1px solid red;
}
#banner
{
height:130px;
}
#menu
{
float:left;
width:200px;
}
#content
{
float:left;
min-width:800px;
}
#content div
{
margin:15px 2%;
border:1px solid #999999;
}
#messageofday
{
float:left;
width:75%;
height:50px;
}
#weather
{
float:left;
width:16%;
height:50px;
}
#timetable
{
height:100px;
width:95%;
clear:both;
}
#dailybulletin
{
float:left;
width:55%;
height:120px;
}
#calendar
{
float:left;
width:36%;
height:120px;
}
#links
{
height:100px;
clear:both;
width:95%;
}
Please look at www clean and creative dot com in any browser on a PC or MAC and you'll see the logo.png show up ... BUT once you jump on a pc and view the site in Internet Explorer, the logo just disappears? Its weird because none of the styling is messed up, just a missing logo.png? Can anyone help me out on this? Hello, What's wrong with my logo? I have created the logo with no white background but seems like it has , thus my css behind this? default.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/comersus.css" type="text/css" rel="stylesheet" /> <title>Untitled Document</title> </head> <body> <div id="header_top"> <!--begin of header_top--> <img class="bck_green" src="images/bck_green.jpg" alt=""/> <img class="bck_dark" src="images/bck_dark.jpg" alt=""/> <img class="um_logo" src="images/um_logo.jpg" alt=""/> </div> </body> </html> css Code: #header_top {
width:721px;
height:116px;
}
.um_logo {
position:absolute;
float:left;
z-index:1;
background:url(../images/um_logo.jpg);
width:93;
height:90;
}
.bck_green {
float:left;
background:url(../images/bck_green.jpg) repeat-x;
width:337px;
height:116px;
}
.bck_dark{
float:right;
background:url(../images/bck_dark.jpg) repeat-x;
width:383px;
height:116px;
}
-sorry this is photoshop related , link is not accessible anymore Hi, I need some help inserting a Logo before my site Header. i'm do not know much about CSS as my former designer put this together and am now left in the lurch inserting my company logo. this is the current masthead code #masthead { padding:0; margin:12px 0 24px 0; height: 30px; position: relative; display:block; clear:both } #masthead h2, #branding h2 { float:left; text-transform:capitalize; margin:0; padding:0 } #masthead h2 a, #branding h2 a { color:#fff } #masthead .description, #branding .description { float:left; color:#999; margin: 10px 12px; padding-left:12px; border-left: 1px solid #999; font-size:11px } would appreciate anyone if you could help me with the code to insert a logo before the Title. Thanks! Hello All, I am developing my first website and have a problem with the logo and would appreciate some guidance. My logo consists of the website name in large text contained within an anchor tab to take the viewer back to the home page and then joined to the text on its right is a jpeg image which goes accross the rest of the web page. The trouble is if the browser size is reduced the image is placed below the website name. Can someone tell me how I join or fix the jpeg image to the text? Thanks in advance Alano Hello everyone! I'm a little new to HTML/CSS, I'm in a summer course which is "Intro to Web Design." I've been running into problems lately with my final project design for a site. My TA's aren't exactly helpful at all, I emailed them with this problem and I got no response at all. This is an online course for my school, because I'm three hours away from campus for the summer. So the main problem I have is that there are these two gray spaces, one above the navbar, and one below the navbar. As you can see, the one above is all the way across. The one below is on the outside but it looks like the main content is just pushed up but the outside image (used on repeat-y) isn't. The site is here (hosted on the class server): Code: http://2007.ispace.ci.fsu.edu/~ojs10/cgs2821/final/home.html What I want for a solution is to have the image and the main content flush against the navbar. If you guys have any other suggestions I greatly appreciate it! Other things: Everything is valid for HTML5 and CSS3. I shrank the CSS by using those optimizers also. This problem occurs in every browser. Hello. I created my own rounded corners fluid site from scratch using CSS and images in the same way you would do it with a table, using the 3x3 format (topleft, topcenter, topright, midleft, midcenter, midright, botleft, botcenter, botright). The problem: The top section works great, but its the middle right section that doesnt justify properly. What you see: For the left and right middle, I have a background repeat on the y-axis. The left background is fine, as well as the middle, but a div inside the middle center is pushing right background to an area below (as shown in this image). http://clients.activemd.net/images/css-problem-screen1.jpg You will notice theres only whitespace on the right, and the background I'm trying to repeat is below it on the right. Heres my CSS: Code: /* CSS Document */ body { margin: 20px auto; /* Had to add margin-top 20px to topleft and top right corners to compensate. */ font-family: Verdana, Geneva, sans-serif; } #main { margin: 20px auto; width: 100%; height: 100%; z-index: 0; } .clear { clear: both; } h1 { margin: 0px 0px 0px 50px; } ul { margin: 0px; padding: 0px; } /* Top Layout */ #top { height: 146px; margin: 0px; padding: 0px; } #top_left { margin-top: 20px; background: url(../images/top-left-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; left: 0px; } #top_right { margin-top: 20px; background: url(../images/top-right-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; right: 0px; } #top_center { margin: 0px 30px; } #top_center_bg { background: url(../images/top-mid-bg.png) repeat-x; width: 100%; height: 30px; } #top_center_bar { background: url(../images/top-mid-bar-bg.png) repeat-x; width: 100%; height: 90px; } /* Middle Layout */ #middle { min-height: 500px; margin: 0px; padding: 0px; } #middle_left { background: url(../images/middle-left-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; left: 0px; } #middle_right { background: url(../images/middle-right-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; right: 0px; } #middle_center { min-height: 100px; } /* Bottom Layout */ #bottom { background: #eee; min-height: 100px; } /* Left box Layout */ #left_box { width: 156px; position: absolute; left: 0px; min-height: 90px; z-index: 100; margin: 0px; padding: 0px; } #left_box_top { background: url(../images/left-box-top.png) no-repeat; width: 156px; height: 30px; position: relative; top: 0px; margin: 0px; padding: 0px; } #left_box_mid { background: url(../images/left-box-mid.png) repeat-y; position: relative; right: 0px; height: 100%; margin: 0px; padding: 0px; } #left_box_bottom { background: url(../images/left-box-bottom.png) no-repeat; width: 156px; height: 30px; position: relative; bottom: 0px; } #left_box_content { color: #FFF; margin-left: 20px; margin-right: 5px; font-size: 0.8em; } #left_box_content a { color: #FFF; } /* Content Area Styling */ #report { height: 100%; min-height: 400px; border: 1px solid #999; margin-left: 160px; margin-right: 30px; } #report_data { float: left; width: 775px; height: 100%; max-height: 400px; overflow: scroll; border: 1px dotted #ccc; margin: 10px; min-height: 100px; } /* Login Info box */ #login_info { background: url(../images/login-bar-bg.png) repeat-x; position: absolute; top: 79px; left: 40px; border: 1px solid #FFF; min-width: 250px; height: 44px; line-height: 44px; color: #FFF; }
and here's the HTML of the site. Code: <body> <div id="main"> <div id="top"> <div id="top_left"></div> <div id="top_center"> <div id="top_center_bg"> <div id="login_info">Logged in as: ricktest <a href="http://clients.activemd.net?action=logout">Log Out</a></div> <div id="top_nav"> <ul class="tabContainer"> <li> <a href="#" class="blue"> <span class="left"></span> <span class="mid">Inquiries</span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Engage <span class="left"></span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Manage <span class="left"></span> <span class="right"></span> </a> </li> </ul> </div> <div id="sub_nav"><a href="javascript:getdata('#middle_center', 'main/index.php');">Home</a> | <a href="javascript:getdata('#middle_center', 'forms/index.php');">Forms</a> </div> </div> <div class="clear"></div><div id="top_center_bar"></div></div> <div id="top_right"></div> </div> <div class="clear"></div> <div id="middle"><!--Here begins the first layer of dynamic content --> <div id="middle_left"></div> <div id="middle_center"></div> <div id="middle_right"></div> </div><!--Here ends the first layer of dynamic content --> <div class="clear"></div> <div id="bottom"> <div id="bottom_left"></div> <div id="bottom_center">Bottom</div> <div id="bottom_right"></div> </div> </div> </body>
The site is dynamic PHP, so I cant just throw a link in here. I hope this is enough information. If anyone can help me with this, I would appreciate it. Thanks. Rick A random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc? Hey, I'm creating a 2-column fluid layout and find myself with a problem regarding word wrapping (at least I think that's the problem). For some reason I can't seem to get my content text to behave properly, namely the text gets hidden behind the right column as I decrease the browser-window. The columns are set to 70% (left column) and 30%(right column), with the combined width varying from 760px to 960px. The text I am having problems with is located in the left column, 150px from the far left side. I want this text to stretch from that position up until the right column begins. This have proven quite difficult. The main problem is, I suppose, that the necessery width of the div element that the text is placed within changes as the overall width change. I have tried experimented with specifying the width in percentages, however the correct value for that changes aswell.. So I'm stuck. Hope I made myself clear enough, kind of difficult to explain it to be honest. Does anyone have any idea how I can fix this (without abandoning my overall fluid layout)? Any pointers would be greatly appreciated. Cheers. This code produces what i want in IE. I'd like to know how to achieve the same result in firefox. The important parts of this layout is the fixed height for the footer and the testdiv completely filling the top td regardless of what else is in it. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
<style>
body
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
width: 100%;
height: 100%;
background: gray;
}
.top
{
background: aqua;
}
.bottom
{
background: yellow;
height: 50px;
}
.testdiv
{
background: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</HEAD>
<BODY>
<table cellspacing=0 cellpadding=0>
<tr>
<td class='top'>
other stuff
<div class='testdiv'>test div</div>
other stuff
</td>
</tr>
<tr>
<td class='bottom'>
bottom bit
</td>
</td>
</table>
</BODY>
</HTML>
|
|||||||