|
CSS - Adjusting Website
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! 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. 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 . 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 ! 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! 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?? 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;
}
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) runenation.com (By know means is this a advertisement, I'm not even ready for members yet!) I want that skin to expand the whole page. The skin is only random, I will edit the pictures and stuff later. Quote: body { background-color: #B0B0B0; text-align: center; margin-top: 50px; } #topline { background-color: #29363E; height: 9px; } #logocell { background-color: #FFFFFF; width: 174px; height: 134px; } #maintable { width: 770px; text-align: left; } #menu { background-color: #29363E; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FFFFFF; vertical-align: top; text-align: left; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 20px; } #menu a { font-family: Arial, Helvetica, sans-serif; color: #AEB6BB; font-size: 10pt; text-decoration: none; line-height: 1.4em; } #menu a:hover { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 10pt; text-decoration: none; line-height: 1.4em; } /*================================================================================ >> Main Menu Links ================================================================================*/ td.vmenu_main_off { width: 100%; border: 0px; padding: 0px 0px 0px 0px; } td.vmenu_main_on { width: 100%; border: 0px; padding: 0px 0px 0px 0px; } div.vmenu_main_off { width: 100%; font-size: 13px; font-weight: normal; } div.vmenu_main_on { width: 100%; font-size: 13px; font-weight: bold; } /*================================================================================ >> Main Menu Links END ================================================================================*/ /*================================================================================ /* Sub Menu Links ================================================================================*/ td.vmenu_sub_off { width: 100%; border: 0px; padding: 0px 0px 0px 15px; } td.vmenu_sub_on { width: 100%; border: 0px; padding: 0px 0px 0px 15px; } div.vmenu_sub_off { width: 100%; border: 0px; padding: 0px 0px 0px 15px; font-size: 9pt; font-weight: normal; } div.vmenu_sub_on { width: 100%; border: 0px; padding: 0px 0px 0px 15px; font-size: 9pt; font-weight: bold; } /*================================================================================ /* Sub Menu Links END ================================================================================*/ #maincontent-index { background-color: #FFFFFF; width: 365px; text-align: left; vertical-align: top; padding-top: 20px; padding-left: 20px; padding-right: 15px; padding-bottom: 20px; } #maincontent-index h1 { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 16px; font-weight: bold; text-decoration: none; } #maincontent-index p { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none; color: #000000; } #maincontent-index2 { background-color: #FFFFFF; width: 560px; text-align: left; vertical-align: top; padding-top: 20px; padding-left: 20px; padding-right: 15px; padding-bottom: 20px; } #maincontent-index2 h1 { font-family: Arial, Helvetica, sans-serif; color: #797B00; font-size: 16px; font-weight: bold; text-decoration: none; } #maincontent-index2 p { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; text-decoration: none; color: #000000; } #footer { background-color: #29363E; height: 20px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; color: #AEB6BB; text-decoration: none; font-size: 8pt; text-align: right; padding-right: 10px; padding-top: 4px; } #rightcontent { background-color: #FFFFFF; width: 196px; vertical-align: top; padding-top: 20px; padding-bottom: 10px; } #promo { width: 188px; border: 1px solid #9A9B9D; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #promo2 { width: 188px; border: 1px solid #9A9B9D; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #promo h1 { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; color: #D0440F; text-decoration: none; margin-bottom: 2px; } #promo p { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000; text-decoration: none; font-weight: normal; margin-top: 0px; } Someone recently recommended that I redo my website in all CSS. I started, but I can't do it for the life of me, I just don't know enough. If you want to see what I have so far, the page that I doing with all CSS is located here. The css file is here. I'm sorry if this seems like a big thing to ask in the forums. Any help is appreciated. Hi, I just registered with this forum because I cannot seem to solve a problem. I'm not a web developer or aspire to become one, I'm a photographer and I've decided to update my website using CSS (I've been reading here and there to learn about it). It's taking me a lot longer than I thought but I'm not willing to give up yet. I've uploaded to my server (where I have my current site) three pages not linked yet that will be part of the new website. http://www.barbarabadettipalumbo.com/ratesindexnew.html http://www.barbarabadettipalumbo.com/childrengallery/childrenportraitindexnew.html http://www.barbarabadettipalumbo.com/aboutindexnew.html I've placed the navigation in the footer and in the :aboutindexnew" page the footer doesn't stay at the bottom of the page as in the previous two pages but appears in the container. I tried clearing the footer and other things but cannot figure it out how to do it. I would also like to know how two reduce the space between the two columns of text and how to move the photo closer to the text. Any help or other advice will be appreciated as I've already spent way too many hours on this. Thanks for reading. Barbara Hey, I need someone to look at my website html/css and fix a few errors for me. I'm unable to fix them. I'll pay you! Its a quick fix I think and should not take too long. Kris Hello everyone! I'm new here. I would really appreciate it if someone could help me figure out why this page is not getting centered properly: SurfnLearn.com -- I cant seem to post url's since I am new.. currently this page is centered for viewers at 1024x768. If at a higher resolution you see it at the left. I don't get it and have been playing around with it for quite some time.. Thank you! hi there mail.diskbank.com.au:8080/rmbclient/ywam just wanted to find out the issue here associated wih my webpage on ie7. ive looked at the css and tinkled for hours but i cant explain why my website content has moved to the left by about 140px on ie7, whereas on every other browser, its OK. any help appreciated. thanks On my website lakelandedc.com how can i fix the menu so that when you hover off of the menu the sub section stays where it is and doesnt snap back? or how can i make it better? hi there I'm having a problem on my website, First off my drop downs take a longtime to load and I need some advise on how to make my drop downs load first and faster. Secondly my drop downs on the home page appear behind the flash which is very annoying and help will be appreciated. I've tested my newly built website in Chrome, Firefox, Opera, Safari and various incarnations of IE. IE 6 and earlier aren't displaying it correctly, all the others are. I'm no CSS (or even HTML) whizz, but I've had a go - I've built my site from patching together parts of various templates and examples, and don't understand enough to get to the botom of what's happening. I'm feeling properly fed up with it. I'd be eternally grateful if someone could take a look and tell me how to fix it. As I'm a new site member I can't post links, so sorry for all the odd URLS. Obviously xxx is www but I'm not allowed to post that. I'm really sorry if I'm breaking rules here, but I'm unsure how else to ask anybody for any help . If I should do something differently then please let me know. My sites he xxx.conkerphotography.co.uk This is what happens to the homepage in IE is he xxx.conkerphotography.co.uk/ie6home.png and what happens to the gallery page is he xxx.conkerphotography.co.uk/ie6gallery.png My CSS for the homepage is he xxx.conkerphotography.co.uk/style2.css and the gallery is here (pretty much the same thing): xxx.conkerphotography.co.uk/style.css Many, many thanks to any genius who can tell me how to mend this. Mark Hi, I am creating a website for an assignment in University. It is complete but while testing it on browsers, I noticed my text runs into my menu, to the left when i minimize the browser page. Just wondering if there's something I can put in CSS to hold everything in place? It seems fine otherwise Edit: Must use Firefox! At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out. Thanks for any help, Chris HTML CODE: http://www.bottomtimedesign.com CSS CODE: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
text-align: center;
}
/*defines web page dimensions and centers page */
#pagedimensions {
background-color: #DCDBC9;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
width: 1024px;
height: 768px;
text-align: left;
}
#mask {
position: absolute;
left: 575px;
top: -45px;
}
#sign {
margin-left: 50px;
float: left;
margin-right: 50px;
}
#snorkel {
position: absolute;
top: 390px;
left: -39px;
}
#header {
float: right;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 10px;
}
#content {
margin-left: 50px;
margin-right: 155px;
position: static;
margin-top: 300px;
}
hey i need some help. the website and the css is good and works normally...however when i edited the website file through Dreamweaver MX, it got distorted!!!...the only thing I changed was the "page properties title name" and that was it and after that the right side of the frame shifted below the menu which was on the left side!!!! i even went back to change the title name back but it wouldn't go back to its original left right style. what do i do? Hi guys, so my css website is centered in safari and mozilla, but not IE can anybody help me please? I have tried and tried all sorts of trouble shooting but just cant see where I've gone wrong If anyone can highlight what I need to change and tell me how to change it would be brilliant! thanks in advance HERE IS MY CSS FILE Code: @charset "utf-8";
/* CSS Document */
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container
{
margin: 0 auto; width:850px;
background-image:url(../images/bg.jpg);
background-repeat:repeat-x;
}
#header
{
height:73px;
width:850px;
margin:auto;
}
#logo
{
margin-left:30px;
margin-top:15px;
position:absolute;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
}
#toplinks
{
margin-left:245px;
position:absolute;
width:590px;
color:#33ff99;
}
#toplinks ul
{
list-style-type:none;
margin-top:55px;
}
#toplinks li
{
display:inline;
}
#toplinks a
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#ff33ff;
text-decoration:none;
padding-left:12px;
padding-right:12px;
}
#toplinks a:hover
{
background-image:url(../images/linksbg.jpg);
background-repeat:no-repeat;
background-position:center;
color:#000000;
text-decoration:none;
padding-left:12px;
padding-right:12px;
padding-top:10px;
}
#bodypart
{
width:814px;
margin:auto;
padding-top:15px;
}
#bodypart2
{
width:850px;
margin:auto;
padding-top:40px;
}
gallery img{
border:none;
margin: 0px 4px 4px 0px
}
#footer
{
width:850px;
margin:auto;
height:60px;
line-height:20px;
}
.footerlinks
{
color:#9933ff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
.blackboldtext
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
|
|||||||