/*-------------------------------------------------------\ | Title: 2 Columns (centered) with header, logo, | | footer, inline menu, | | Created: 14.01.2004 | | Author: Edvard Wendelin | | Contact: edvard@edvard-design.nu | | Copyright: Corporate use for Consilia Solution and | | Edvard Design ONLY. For Educuational use | | only for the rest of you. | | | | Notes: This is a standard layout. A headimage and | | a logo at the top with an inline menu | | below. Two columns (in this template with | | The proportions 2:1). This is of course | | Editable. For more instructions see the | | rest of the CSS file. The pararameters are | | just the basic commands. Don't see them as | | limits, just the main structural building | | bocks. | \-------------------------------------------------------*/ /* Nothing special here. Just taking away the built in margin/padding on the body element and setting font and text-size */ H1 { font-family:Arial; font-size:28px; color:#AD0C0C; border-bottom:1px solid #AD0C0C; } /* Stor rubrik*/ a:hover {text-decoration: underline;} a {text-decoration: none; color: #333333} body {margin:0; padding:0; font-size: 11px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background: #E6EDDE; color:#333333} table { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; } /* see this as a container for all content on the page. Parameters: Width, Margin Notes: Leave the auto on the margin, It's for the centering. Without it you'll have the container to the left */ #container {width: 824px; margin: 40px ; position: relative; } /* This is where you're supposed to have your logo. Suggested in a background with no-repeat. Parameters: width, height, left/right, top Notes: width and height is the image size. left/right and top is for positioning */ /* #logo {position: absolute; width: 340px; height: 225px; left: 10px; top: -45px; z-index:1;}*/ #hallen #logo {background-image:url(../img/hallen_logo.gif); background-repeat: no-repeat;} #punkten #logo {background-image:url(../img/logo_punkten.gif); background-repeat: no-repeat;} /* This rule makes the link cover the entire logotype Parameters: None Notes: Leave it as it is. */ #logo a {width: 100%; height: 100%; display: block;} /* The header div is for the page header image. Parameters: Height Notes: Put the image as a background, not as an image in the structure. If you have a narrower head image and want the box to be smaller use margin: auto ; */ #header {border: 0px solid red; height: 81px; background-color: #008864; background-repeat: no-repeat;} #hallen #header {background-image:url(../img/hallen_logo.gif);} #punkten #header {background-image:url(../img/logo_punkten.gif);} /* This is the ul where the menu elements will be listed. Parameters: None Notes: Menus can get complex with background images and so forth. This is an inline menu in it's simplest form more or less. List-style: none for removing the dots, margin: 0 and padding: 0 for removing default values on ul If you want the menu to the right I suggest you don't try to use float: right because it will flip the order of the menu elements. Of course this can be corrected with array_reverse($asMenuText) but I don't see it as the best solution. Instead you should set the ul floating property to right and maintain li float:left; */ #menucontainer {position: absolute; left:220px; top: 52px;} #menu {margin: 0; padding: 0; list-style: none; } /* The following rule is used to make the menu div actually wrap around the li elements. Won't explain the theory in detail. Read float-theory and you'll also understand. This is important if you want the rest of the textflow to begin under the menu and if you've got backgrounds in the ul element. */ /* Hides from IE-mac \*/ #menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* End hide from IE-mac */ /* This is the menu elements wraped in a list item with a link. Parameters: float, padding Notes: This is a very simple menu so there are endless possibilites on what's possible to achieve. */ #menu li {float: left; font-family: arial; font-size:11px; font-weight: bold; } #menu li a:hover {text-decoration: underline;} /* The purpose of this div is to enclose all the text-content on the webpage. Parameters: None Notes: In many designs you have a separating line between the columns, do not try to use borders to achive the effect. use a background with repeat-y in this div instead. In this particular example wideColumn and narrowColumn is enclosed by the contentContainer. NOT the footer since it is after the contentContainer the html structure. In most cases the only properties you set on contentContainer is the background. See http://www.alistapart.com/articles/fauxcolumns/ for more info on the background issue. */ #contentContainer {width: 100%; background: url(../img/content_bg2.gif) ; background-repeat: repeat-y;} /* Hides from IE-mac \*/ #contentContainer:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* End hide from IE-mac */ /* This is the wide column where the main text is supposed to be. Parameters: width, float Notes: If you want the wide column to the right simply switch floating property with narrowColumn. IMPORTANT: If you use percentage widths never let wideColumn and narrowColumn add up to 100%. This is because browsers sometimes round up the figures wrong so that they sum up to 101%. Additional info: http://www.positioniseverything.net/round-error.html */ #wideColumn {width: 20%; float: left; } /* This set of rules are for the div generated by Lime/Lemon textblocks. In the example file these divs MUST be removed Parameters: margin, padding Notes: This div is used to put space around the text. Do NEVER EVER put a width property to these rules, only use margin and padding. Widths in % or px will only trigger the boxmodel problems. Additional info: http://tantek.com/CSS/Examples/boxmodelhack.html */ #wideColumn div.text {margin: 10px 25px; padding: 5px;} /* This is a hack needed for lemon. Take it as it is. And use it! */ #wideColumn>div.text {height: auto !important ;} /* This is the narrow column where the secondary text is supposed to be. Parameters: width, float Notes: If you want the wide column to the right simply switch floating property with narrowColumn. IMPORTANT: If you use percentage widths never let wideColumn and narrowColumn add up to 100%. This is because browsers sometimes round up the figures wrong so that they sum up to 101%. Additional info: http://www.positioniseverything.net/round-error.html */ #wideColumn #contenttop {margin: 20px 0 0 5px; border:0px solid red; height: auto; width:130px;} #wideColumn #contenttop #top {background-color: #AD0C0C; color:#FFFFFF; font-weight: bold; font-family: arial;} #wideColumn #contenttop #top #offercontainer {width:100px; margin:0px 0px 0px 5px;} #wideColumn #contenttop #middle {background-color: #E6EDDE; color: #AD0C0C; background-repeat: no-repeat; text-align: right; text-transform: uppercase; padding-right: 2px;} #wideColumn #contenttop #middle a {color: #AD0C0C;text-align: right; text-transform: uppercase; padding-right: 2px;} #wideColumn #contenttop #bottom{background-color: #AD0C0C; color:#FFFFFF; font-family: arial;} #wideColumn #contenttop #bottom #morecontainer{width:100px; margin:0px 0px 0px 5px;} #wideColumn #contentmiddle {margin: 20px 0 0 5px; border:0px solid red; height: auto; width:130px; background-color: #E6EDDE; } #wideColumn #contentmiddle #top {background-color: #AD0C0C; color:#FFFFFF; font-weight: bold; font-family: arial;} #wideColumn #contentmiddle #top #openingcontainer {width:100px; margin:0px 0px 0px 5px; z-index:5;} #wideColumn #contentmiddle #middle #link {position:relative; top:100px; width:100%; margin:0px 0px 0px 5px; z-index:5;} #wideColumn #contentmiddle #middle {background-color: #E6EDDE; width:120px;} #wideColumn #contentmiddle #middle #openingcontainer {width:120px; margin:5px 0px 5px 5px;} /*För mathis*/ #wideColumn #contentmiddle2 {position:relative; top:100px; margin: 0 0 0 0; border:0px solid red; height: auto; width:143px; background-color: #E6EDDE; } #wideColumn #contentmiddle2 #middle #link {width:100%; margin:0px 0px 0px 5px; z-index:5;} #wideColumn #contentbottom{margin: 20px 0 0 5px; border:0px solid red; height: auto; width:130px;} #wideColumn #contentbottom #top {background-color: #AD0C0C; color:#FFFFFF; font-weight: bold; font-family: arial;} #wideColumn #contentbottom #top #gascontainer {width:120px; margin:0px 0px 0px 5px;} #wideColumn #contentbottom #middle {} #narrowColumn {width: 77%; float: right; margin-top: 20px;} /* This set of rules are for the div generated by Lime/Lemon textblocks. In the example file these divs MUST be removed Parameters: margin, padding Notes: This div is used to put space around the text. Do NEVER EVER put a width property to these rules, only use margin and padding. Widths in % or px will only trigger the boxmodel problems. Additional info: http://tantek.com/CSS/Examples/boxmodelhack.html */ #narrowColumn div.text {margin-bottom:20px;} /* This is a hack needed for lemon. Take it as it is. And use it! */ #narrowColumn>div.text {height: auto !important;} /* This is the footer where you can place lots of interesting info. Parameters: none Notes: Remember the clear: both property. Just in case. It won't harm you but it might save your ass. Note that the footer is not within the enclosed div named contentContainer. See image to understand it better. */ #footer {clear: both;} #footer #left {width: 142px; height: 22px; background-image: url(../img/footer_leftbg.gif); background-repeat: repeat-x; float:left;} #footer #right {width: 682px; height: 22px; background-image: url(../img/footer_rightbg.gif); background-repeat: repeat-x; float:right; } #footer #right #address {margin:5px 0px 5px 0px; position:relative; left:10px; font-size: 10px; width: 100%; height: 18px; border:0px #000 solid; color: #FFFFFF;} /* lite classer*/ .a-menu {text-decoration: none; color: #FFFFFF; border:0px; border-right: 1px solid #FFF; text-transform: uppercase; padding: 0 5px;} .a-menu-last {text-decoration: none; color: #FFFFFF; border:0px; border-right: 0px solid #FFF; text-transform: uppercase; padding: 0 5px;} .a-menu-active {text-decoration: underline; color: #EE3333; border:0px; border-right: 1px solid #FFF; text-transform: uppercase; padding: 0 5px;} .a-menu-last-active {text-decoration: underline; color: #EE3333; border:0px; border-right: 0px solid #FFF; text-transform: uppercase; padding: 0 5px;} a.offer:hover {text-decoration: underline; color: #FFFFFF} a.offer {text-decoration: none; color: #FFFFFF} a.mail {color:#FFFFFF;} .price {float: right; color: red; font-weight: bold; font-size: 18px; clear: right; margin-right: 300px; } .price2 {float: right; color: red; font-weight: bold; font-size: 18px; clear: right; } .red {color: red; font-weight: bold;}