|
CSS - Adjusting Banner
Hi and thank you in advance for any advice or help.
my website: http://earlystartdc.com/ Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between. any help?? Thank you P.s - This is what my css files look like from my template/css folder . Similar TutorialsIs it possible to setup a frame to adjust? I ran into a problem with my menu being on the left side of the screen in its own frame, when it expands it needs about twice as much space otherwise another frame on the right of this frame cuts off the text and buttons from the menu, (this frame is used to display documents inside of it.) Originally I did not think it would be a problem but I just realized that some of the documents need a lot of room horizontally do to images and descriptive frames being inside of the docs, thus causing the reader to have to keep scrolling from side to side in order to read the paragraphs. Is there some way to get the frame with the menu to adjust according to the size of the menu as the user mouses through it, or a way to make the menu float over the doc viewing frame as the user mouses through it and just make the menu frame big enough to fit the menu when it is not being used, or another alternative all together? Thanks for reading. Hello, I am having a problem with the aligning of m website. Whenever I view my website in a normal size window everything looks fine and in it's place. However when I full screen my browser window everything stays to the left, and my background repeats, nothing moves with the browser window. My question is how do I have everything on my webpage automatically adjust to the browser window? Thanks! hi all ! I have some dynamic data that gets inside a cell in a table, the problem is that Im having problems to adjust the cell so the data can be seen more user friendly. The max width for the table is 1024 px. This is how it looks: Is there a way to make it look better using dynamic css,script,etc? Thanks a lot ! Hey guys, I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license. I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it). Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try. I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me. If anyone of you can help me out it would be much appreciated!!! Thanks, alex Here is the site with the code. 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> <title>LWIS.NET Celebrity Drop-Down Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" /> <meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Beginning of compulsory code below --> <link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <!-- / END --> </head> <body> <!-- Beginning of compulsory code below --> <ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> <li><a href="./">resume</a></li> <li><a href="./">about</a></li> <li class="dir">work <ul> <li class="dir">Reel <ul> <li><a href="./">Montage Reel</a></li> <li><a href="./">Director's Reel <br>(selected scenes)</a></li> </ul> </li> <li class="dir">Narrative <ul> <li><a href="./">The Liberation of the Fish</a></li> <li><a href="./">Behind the Scene</a></li> <li><a href="./">All that Remains</a></li> <li><a href="./">Jumper</a></li> <li><a href="./">Dragoste</a></li> </ul> </li> <li class="dir">Music Video <ul> <li><a href="./">MOBY music video competition</a></li> </ul> </li> <li class="dir">Commercial <ul> <li><a href="./">FIFA spec commercial</a></li> </ul> </li> </ul> </li> </ul> <!-- / END --> </body> </html> And here is the default css which I have tried playing with to no success. Code: @charset "UTF-8";
/**
* LWIS Celebrity CSS Drop-Down Menu Theme
*
* @file default.css
* @name Default
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera9+, Firefox2+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2009 Live Web Institute. All Rights Reserved.
*
*/
/*-------------------------------------------------/
* @section Base Drop-Down Styling
*/
ul.dropdown {
font: 20px/normal Helvetica, Arial, sans-serif;
letter-spacing: +2px;
text-transform: lowercaseercase;
}
ul.dropdown li {
padding: 0 10px;
background-color: transparent;
color: #000;
}
ul.dropdown li.last ul li {
float: right;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #cdcdcd;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
background-color: #cdcdcd;
font-size: 12px;
letter-spacing: normal;
}
* html ul.dropdown ul {
width: 960px;
}
ul.dropdown ul li {
font-weight: bold;
}
/* -- level mark -- */
ul.dropdown ul ul {
margin-top: 5px;
text-transform: none;
}
ul.dropdown ul ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
*/
ul.dropdown *.dir {
padding-right: 30px;
background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul *.dir {
background-image: none;
}
This is my first OSCommerce site... Where do I adjust the color and size of the title font....the BIG one at the top of each page....is it an h1 tag? I can't seem to find it in the style sheet?? Hi all, noob here. I am trying something pretty simple but just cant get it to work. For my site, I have a main content area and two right sidebars. I am trying to decrease the width of the the content area and widen the sidebars to fill the extra space created, say 50px. I have come unstuck trying to get it done though. Below is the relevant part of the css: Code: /* CONTENT layout */
#content {
float: left;
width: 100%;
padding-bottom: 2em;
}
.sidebar-double #content, .sidebar-left #content {
margin-left: -221px;
}
.sidebar-double #content, .sidebar-right #content {
margin-right: -271px;
}
.sidebar-right-double #content {
margin-right: -448px;
}
/* Add blanks left and right for the sidebars to fill */
.sidebar-double #squeeze, .sidebar-left #squeeze {
margin-left: 221px;
}
.sidebar-double #squeeze, .sidebar-right #squeeze {
margin-right: 271px;
}
.sidebar-right-double #squeeze {
margin-right: 448px;
}
/* Add whitespace to content area */
#squeeze {
padding: 1em 0 1.5em;
overflow: hidden;
}
.sidebar-double #squeeze, .sidebar-left #squeeze {
padding-left: 2em;
}
.rightbar #squeeze {
padding-right: 2em;
}
/* SIDEBAR layout */
#sidebar-wrapper .sidebar {
float: left;
z-index: 2;
position: relative;
}
#sidebar-left {
width: 221px;
}
#sidebar-right-sec {
width: 200px;
padding: 1.2em 0;
}
#sidebar-right {
width: 248px;
padding: 1.2em 0;
}
.rightbar .top-corners {
right: -8px;
top: -3px;
padding-right: 8px;
position: relative;
min-height: 12px;
}
.rightbar .bottom-corners {
right: 0;
bottom: -4px;
position: relative;
min-height: 7px;
}
I have tried changing the content or 'squeeze' margins as its called and then just widening the sidebars but it just doesnt work. If anyone can help it would be great, thanks! I have nested my content divs within a centered wrapper div. the wrapper div is controlled by an external css file. when content is added to the nested divs they grow outside of the wrapper div. is there a way to force the wrapper to grow with the content like tables do? The CSS: #wrapper { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; position: relative; width: 760px; background-color: #FFFFCC; left: auto; right: auto; height: 400px; z-index: 1; } The HTML: (attached) Hi there, I have the following in my css file: } #headerBannerWrapper { background-image: url(/GREENLOGO.jpg); background-position: bottom left; background-repeat: no-repeat; background-color: #DEF2B0; padding: 0px; margin: 0px; } #headerBannerWrapper img { padding: 0px; margin: 0px; vertical-align: bottom; However the banner doesn't get rendered in IE7. It renders OK in IE8 Any help most appreciated. The above is linked to the following class: .clearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed. hmm i cant get this to work... i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide. how can i get this 2 in a div wich get width by % and center aligned on the page? and also on a layer above other stuff I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size. At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window. I can do this with tables, but can't figure out a cross-browser way to do it in CSS. The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla. Here's my code: Styles.css: PHP Code: .banner { background-image:url(./images/banner-fill.gif); width:100%; } .nav { background-image:url(./images/nav-fill.gif); width:104px; height:100%; } .content { position:absolute; left:140px; top:140px; } Template.htm: PHP Code: <html> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%"> <div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div> <div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div> <div class="content"> <p>Page Content</p> </div> </body> </html> Hi everyone, I've been playing around with this for a while but I can't seem to get it to work. Basically, I'm trying to get this table effect in CSS layers. Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#669999">
<td width="580">Welcome</td>
<td>
<div align="right"><img src="images/bg_dblue_gradient.gif" width="200" height="25"></div>
</td>
</tr>
</table>
It's basicly a 2 column layout, with the left column being some kind of content and the right column being a gradient graphic I made, to make the banner look like it has a full gradient. The gradient graphic is 200px wide, thus one resizing of the browser the table in a whole won't shrink down past 780 pixels. I want to use a <div> tag for the graphic so I can repeat-y and have the gradient appear fluid if someone resizes the text size. Any suggestions? Cheers, Fozzy Hi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions? thanks I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis i am writing a site for fun to learn how websites work. The site i write right now will be like a school newspaper. I have one problem with the background, at the begining i couldnt make it no repeat but later i did it, now, i got something wrong with my code. PLease help me here is my code: ( i mean that the back ground color does not appear!! Code: <html>
<head>
<title>
blah blah
</title>
</head>
<body bcolor="#004d79">
<center>
<img src="/pics/banner.png">
</center>
<h4>
<b>
<center>
blah blah
</center>
</b>
</h4>
<style type="text/css">
<!--
body {background-image: url(pics/background.png); background-repeat: no-repeat;}set to background-repeat: no-repeat;background-position:center;
</style>
<center>
<b>
(C) blah blah
</b>
</center>
<center>
<div style="position:absolute;top:130px;left:375px">
<h1>
<b>
<p>
Our website is under construction!!<br>Thank you for visiting us!!
</p>
</b>
</center>
</h1>
</div>
<div style="position:absolute;top:250px;left:260px">
<b>
<p>
blah blah
</p>
</b>
</center>
</div>
</html>
Thanks alot, J. Hi, I just installed Gallery on my website, and I'm trying to integrate it with the main theme of the rest of the site. Well I'm having a problem with the banner overlapping the logo in FireFox. It renders fine in IE7 (surprisingly), but not in FF. Have a look he http://www.lightblu.com/gallery/main.php un/pass: test/test You can look at how I want it on the homepage, or anywhere else for that matter. What am I doing wrong? I tried everything with no success. Thanks guys --Waj Hi everyone, I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem. This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code. In the frist part of the css file this appears: body { font-family: Verdana, sans-serif, Arial; font-size: 80%; color: #232323; margin: 0px; padding: 0px; background: url(images/header.png) no-repeat top; } The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px. Then there's this part: #header { float: left; width: 960px; height: 156px; } Then towards the middle of the code there is this other part which also relates to the header: .top-header { float: left; width: 960px; height: 62px; padding-top: 60px; } .top-header a { color: #000000; text-decoration: none; } .top-header h1 { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; font-size: 26px; } .top-header p { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; } So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background. So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do Thanks Chas. |
|||||||