Related
I have a link on my menu items and id's on h2 of the text that belong to it. All I want to do is easy - when I click on certain item in the menu I want it to move down to the text that belongs to it. Easy.
I have it like side menu on the left and next to it is the text. When the resolution is under 479px the "side menu" is at the top and the text is under it. And what I want it to do is only when it is under this resolution - to jump down to the text (h2). When is it side by side it is fine and there is no need to do that of course. So my question is.. is it posiible to do so somehow only by using html and css? To make it work ("jump") only when it is under 479px? Media queries somehow?
Thanks you
<section id="budova">
<div class="materials">
<div class="container">
<h1>BUDOVA (izolace)</h1>
<div class="materials-container">
<div class="kategorie">
<h2 data-kategorie="#silsonic" class="active">Silsonic</h2>
<h2 data-kategorie="#mappysil400">Mappysil CR 400</h2>
<h2 data-kategorie="#mappysil404">Mappysil CR 404</h2>
<h2 data-kategorie="#polistik">Polistik / M under special HQ</h2>
<h2 data-kategorie="#pavisol">Pavisol</h2>
<h2 data-kategorie="#mappysilent">Mappysilent</h2>
<h2 data-kategorie="#fonosilent">Fonosilent</h2>
<h2 data-kategorie="#bugnato">Mappysil CR Bugnato</h2>
<h2 data-kategorie="#mappysil-re">Mappysil CR RE</h2>
<h2 data-kategorie="#mappypren">Mappypren AU</h2>
<h2 data-kategorie="#stopfire">Stopfire Bugnato</h2>
</div>
<div class="produkty" id="produkty">
<div id="silsonic" class="active">
<h3>Silsonic</h3>
<img src="./img/materials/budova/silsonic.jpg" alt="Silsonic">
<p>Cena od 150 kč vč. DPH</p>
<p>v 40/š 600/d 1200 mm ( ostatní rozměry v sekci ceník )</p>
<p>SILSONIC je termoizolační a akusticky absorpční materiál vyrobený z tepelně zpracovaných, recyklovaných polyesterových vláken. Panely SILSONIC se používají k tepelné a zvukové izolaci všech druhů zdiva, sádrokartonových konstrukcí, stropů a pro podstřešní izolace.</p>
</div>
.
.
.
more text
CSS
.materials-container {
display: grid;
grid-template-columns: 1fr 3fr;
margin: 3rem 0;
}
.materials h1 {
text-align: center;
padding: 6rem 0 1.5rem;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 1px;
border-bottom: 1px solid;
width: 90%;
margin: auto;
}
.kategorie {
background-color: #c4c4c4;
text-align: center;
padding: 1rem 0;
border-radius: 10px;
margin-bottom: 8rem;
}
.produkty {
display: flex;
justify-content: center;
/* align-items: center; */
margin-left: 10rem;
}
.produkty div {
display: none;
}
.produkty div.active {
display: initial;
}
.produkty h4 {
text-transform: uppercase;
margin-top: 3rem;
}
.produkty p:first-of-type,
.produkty p:nth-of-type(2) {
font-weight: 600;
}
.produkty img {
max-width: 300px;
}
.materials {
padding-bottom: 40px;
}
.materials p {
line-height: 24px;
}
.materials h1 {
margin-bottom: 5rem;
}
.materials h2 {
width: 70%;
cursor: pointer;
font-size: 1.2rem;
font-weight: 300;
padding: 0.8rem 0;
border-bottom: 1px solid transparent;
margin: 0 auto;
transition: all 0.3s;
}
.materials h2:hover {
border-bottom: 1px solid #fff;
color: #fff;
}
#media (max-width: 479px) {
.main-text p {
line-height: 2rem;
}
.main-text h1 {
padding: 4rem 0 0.5rem;
}
.photos img {
width: 60%;
margin: auto;
}
.photos {
height: 160px;
}
.nav-menu .logo {
width: 53%;
height: 52px;
}
.materials-container {
display: block;
}
.materials h2 {
font-size: 1.2rem;
}
.kategorie {
margin-bottom: 5rem;
}
#fonosilent {
width: 100%;
}
}
make an extra "link" in the html
on small screens one will be hidden (the one without jump-to-link) while the other one (with anchor-tag and jump-to) will be shown.
...
<div class="kategorie">
<h2 data-kategorie="#silsonic" class="active">Silsonic</h2>
<h2 data-kategorie="#silconic" class="active big-screen">Silsonic</h2>
...
media-queries in css:
#media (max-width: 479px) {
.big-screen {
display: none;
}
.small-screen {
display: grid/flex/whatever;
}
}
#media (min-width: 480px) {
.big-screen {
display: grid/flex/whatever;
}
.small-screen {
display: none;
}
}
I'm trying to do a static HTML & CSS webpage using flexbox but my conten doesn't fit into the window in Chrome browser. I can scroll horizontally, so I have more space horizontally than the browser window size.
This is an screenshot showing the problem. The margins are the same in the two sides of the wrapper, but the content is not fitted to 100% width of the browser window, so I can scroll horizontally, which is not what I want.
I've tried the same code in Safari and works perfectly. Is this an issue with flexbox in Chrome or what am I missing? Thanks.
This is my HTML:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS Stylesheets-->
<link rel="stylesheet" href="css/vendor/normalize.css">
<link rel="stylesheet" href="css/vendor/font-awesome.css">
<link rel="stylesheet" href="css/vendor/devicons.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Header -->
<header>
<nav>
<ul>
<li>ELEMENT 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<div class="main-wrapper">
<div class="search-bar">
<form>
<input type="text" placeholder="Search">
</form>
</div>
</div>
</main>
</body>
And this is my SCSS:
/* 2. HEADER */
nav {
width: 100%;
text-align: center;
background-color: $dark-grey;
& ul {
max-width: $width;
margin: auto;
display: flex;
}
& li {
flex: 1 1 0;
}
& a {
display: block;
color: $white-alpha;
padding: 30px 0px;
transition: color 0.3s ease;
}
& a:hover {
color: $white;
transition: color 0.3s ease;
}
& a.active {
color: $white;
}
}
/* 3. MAIN*/
main {
background-color: $light-grey;
padding: 30px 0px;
}
.main-wrapper {
max-width: $width;
margin: auto;
}
/* 3.1. SEARCH BAR */
.search-bar {
padding-bottom: 20px;
& input {
height: 45px;
width: 100%;
border-bottom: 1px solid $medium-grey;
border-radius: 2px;
text-indent: 20px;
}
}
As far as I can tell, your margins and box-model are likely the problem + you are using the & improperly.
You may also want to look into the default page margin and setting the box-model to border-box site wide.
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
For questions like these, make a CodePen or jsFiddle etc, with only the bare bones of what is needed to recreate the situation you are having trouble with. http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - even my example has more style than needed...
One more suggestion - if you are new to flex-box, it really helped me to write out the individual properties like flex-grow flex-shrink flex-basis instead of the short-hand + always explicitly set the flex-direction or any other defaults.
html { // sort out box-model
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { // reset body margin default
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
html {
background: lightblue;
}
header, main {
padding: 1rem;
}
header {
background: white;
}
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
#media (min-width: 500px) {
flex-direction: row;
}
}
li {
flex: 1 1 0;
}
a {
display: block;
padding: 1rem;
&:hover {
background: black;
color: white;
}
&.actiive {
color: red;
}
}
}
main {
background: gray;
}
.main-wrapper {
max-width: 960px;
margin: auto;
}
.search-bar {
//
input {
height: 45px;
width: 100%;
text-indent: 20px;
background: black;
color: white;
border: 1px solid black;
}
}
I've created a site via Dreamweaver, and it's supposed to be responsive. When I tested in Chrome and Firefox, it's working fine, but when I tested it in IE11, it's not working as well as expected. For some reason, IE11 is having trouble adjusting the text. The layout is sort of like this:
There's a parent div with two child divs (one for image and another for text). Depending on the row position, the image will either be on the right or left and is set to take 50% of the width.
The max width of the grid container is 1280px and each image, with the exception of the banner is 640 x 800.
I've left the fluid grid CSS mostly default (in Dreamweaver). I've made two versions of the page (index and index2) and both have the same problem.
Here's the div in index
<div class="over480">
<!-- Technology Section -->
<div class="divHomeContent" id="fhTech">
<div class="hcImg1">
<img src="images/thumbs/tech_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
<span class="spnCont">Developing the next generation products for control systems and power supply</span>
</div>
</div>
<!-- End Technology Section -->
<!-- Project Engineering Section -->
<div class="divHomeContent" id="fhPE">
<div class="hcTxt2">
Delivering world-class engineering solutions through power generation expertise.
</div>
<div class="hcImg2">
<img src="images/thumbs/pe_btn.jpg" alt="" border="0"/>
</div>
</div>
<!-- End Project Engineering Section -->
<!-- Marketing & Sales Support Section -->
<div class="divHomeContent" id="fhMkt">
<div class="hcImg1">
<img src="images/thumbs/ms_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
Enhancing Product awareness across the region and help sales win through effective customer engagement.
</div>
</div>
<!-- End Marketing & Sales Support Section -->
<!-- Supply Chain Section -->
<div class="divHomeContent" id="fhSC">
<div class="hcTxt2">
The Control Tower - ensuring delivery of products whenever and wherever customers need them.
</div>
<div class="hcImg2">
<img src="images/thumbs/sc_btn.jpg" alt="" border="0"/>
</div>
</div>
<!-- End Supply Chain Section -->
<!-- Lifecycle Services Section -->
<div class="divHomeContent" id="fhLS">
<div class="hcImg1">
<img src="images/thumbs/ls_btn.jpg" alt="" border="0"/>
</div>
<div class="hcTxt1">
Best-In-Class technical support and services that solve our customers’ toughest problems.
</div>
</div>
<!-- End Lifecycle Services Section -->
And here are the CSS codes:
/*
/*
* HTML5 ✰ Boilerplate v3.0.2
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; background-color: #e5e5e5; font-family: Arial; color: #595858; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
*/
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
/*
* 'border-collapse: collapse;' needs to be overridden in designs having tables with rounded corners and drop shadows.
*/
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
/* =============================================================================
Extra Styles
========================================================================== */
.gridContainer {
background-color: #fff;
}
footer {
color: #909090;
margin-top: 60px;
}
.divExtras .ex-ico {
/*width: 50px;
height: 50px;*/
margin-left: auto;
margin-right: auto;
}
.divExtras {
width: 100%;
color: #fff;
padding-top: 40px;
text-align: center;
}
.divExtras td {
width: 20%;
text-align: center;
padding: 10px;
}
.divC001 {
/*display: table;*/
width: inherit;
border: 0px solid black;
position: relative;
}
.divC002 {
/*display: table;*/
width: inherit;
border: 0px solid red;
position: relative;
}
.imgHome {
position: relative;
}
#divH002 {
z-index: 0;
}
/*#fhTech .hcImg1 {
position: relative;
top: -30px;
z-index: 1;
}
#fhPE .hcImg2 {
position: relative;
top: -60px;
z-index: 2;
}
#fhMkt .hcImg1 {
position: relative;
top: -90px;
z-index: 3;
}
#fhSC .hcImg2 {
position: relative;
top: -120px;
z-index: 4;
}
#fhLS .hcImg1 {
position: relative;
top: -150px;
z-index: 5;
}*/
.divExtras {
font-size: 0.9em;
}
.divHomeContent {
border: none;
clear:both;
display: flex;
overflow: hidden;
max-width: 1280px;
flex-flow: row;
}
.divHomeContent div.hcImg1 {
float: left;
width: 50%;
border: none;
max-width: 640px;
}
.divHomeContent div.hcTxt1 {
padding-left: 50px;
padding-right: 20px;
border: none;
max-width: 570px;
overflow: hidden;
flex: 1;
height: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.divHomeContent div.hcImg2 {
width: 50%;
border: none;
overflow: hidden;
max-width: 640px;
}
.divHomeContent div.hcTxt2 {
padding-left: 20px;
padding-right: 50px;
border: none;
float: left;
width: 100%;
max-width: 570px;
flex: 1;
word-wrap: break-word;
height: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.spnCont {
display: inline-block;
vertical-align: middle;
}
In Firefox and Chrome, the responsive design is working as expected: The texts vertically align, and the word wrap adjusts great, so the two child divs are side-by-side.
However in IE11, the texts remain vertically at the top and the divs whose text part is on the left don't seem to wrap their text and seem to go beyond the max width I set. As a result, the right-had div, which houses the image, goes to the bottom.
Please help :(
I can see that you're using Flexbox displays, which has been known to have issues with IE11 (and Internet Explorer in general)
I would strongly suggest, if you want all browser support - To utilize another grid system such as Bootstrap or alternatively if you wanted something more light weight, you could go for something like Toast Grid
You can check browser compatibility using a website called CanIUse - It's very handy for checking cross-browser compatibility and even provides alternative resources that you can use!
Ok, so now I found out what was happening. For some reason, my IE11 was rendering the page I was working with using IE7 compatibility. I just added this meta () and everything is now working!
I'm making a wordpress template from scratch.
I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.
I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site
the following are my 4 files:
style.css
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* MAIN STYLE */
html {
font-size: 20px;
}
body {
}
#bodywrapper {
background: gray;
font-family: arial, sans-serif;
font-size: 5em;
}
header {
height:20em;
background: #000;
color: #fff;
margin: 0 auto;
}
#nav {
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
#nav ul li a{
padding: 1em;
text-align: center;
text-decoration:none;
}
#nav ul li a div{
height: 5em;
width: auto;
padding: 1em;
background-color: black;
}
#sandwichwrapper {
margin: 2em;
border: 1em solid black;
}
#sidebar {
float: right;
width: 15em;
margin: 2em;
border: 1em solid green;
}
#main {
float: right;
width: 15em;
margin: 2em;
border: 1em solid blue;
}
#comments{
clear: both;
margin: 2em;
border: 1em solid yellow;
}
#comment-form{
}
footer {
clear: both;
margin: 0 auto;
padding: 1em;
background: #000;
color: #fff;
}
/* BUNDLED STYLES */
header, footer{
width:100%;
margin:0 auto;
padding: 5em;
overflow:auto;
}
nav #sandwich {
width: 50em;
}
/* TEXT RULES */
h1 {
size: 10em;
color: green;
}
h2 {
size: 8em;
}
h3 {
size: 6em;
}
h4 {
size: 4em;
}
h5 {
size: 2em;
}
header.php
<!doctype html>
<html>
<head>
<title>The Logic Spot</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
header("Content-type: text/css");
</head>
<body>
<div id="bodywrapper">
<header>
<h1><?php bloginfo('name')?></h1>
</header>
<div id="nav">
<?php wp_nav_menu();?>
</div>
<div id="sandwichwrapper">
index.php
<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->
<?php get_sidebar()?>
<div id="main">
<?php while(have_posts()): the_post()?>
<h2><?php the_title()?></h2>
<p>By <?php echo get_the_author_link();?></p>
<?php the_content(__('Continue Reading'))?>
<?php endwhile?>
</div>
<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>
footer.php
</div> <!-- close div#sandwichwrapper-->
<footer>
<?=date('Y')?> Copyright
</footer>
</div> <!-- close div#bodywrapper-->
</body>
</html>
Add this line in the <head> tag
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Hey you need to specify absolute path to the stylesheets, for example
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />
Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.
I have I have a div called logo. I want the logo to be on top of other areas and to overlap into the the preface top of a drupal site, the logo currently sits in the header area.
I looked up position absolute and I think that what I need to use but when I use position absolute the logo disappears, I can see it if I use position fixed, relative etc.
I thought the logo was being hidden because I was not using a z-index but even with that I cant see the logo.
What am I doing wrong?
#logo {
position: absolute;
top: 30px; /* 30 pixels from the top of the page */
left: 80px; /* 80 pixels from the left hand side */
z-index:1099;
border: 1px solid red; /* So we can see what is happening */
}
Also does anyone know of a really good free online css course?
Here is some additional information, namely the CSS and the page.tpl.php:
<?php
// $Id: page.tpl.php,v 1.1.2.5 2010/04/08 07:02:59 sociotech Exp $
?><!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" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">
<head>
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>
<?php print $setting_styles; ?>
<!--[if IE 8]>
<?php print $ie8_styles; ?>
<![endif]-->
<!--[if IE 7]>
<?php print $ie7_styles; ?>
<![endif]-->
<!--[if lte IE 6]>
<?php print $ie6_styles; ?>
<![endif]-->
<?php print $local_styles; ?>
<?php print $scripts; ?>
</head>
<body id="<?php print $body_id; ?>" class="<?php print $body_classes; ?>">
<div id="page" class="page">
<div id="page-inner" class="page-inner">
<div id="skip">
<?php print t('Skip to Main Content Area'); ?>
</div>
<!-- header-top row: width = grid_width -->
<?php print theme('grid_row', $header_top, 'header-top', 'full-width', $grid_width); ?>
<!-- header-group row: width = grid_width -->
<div id="header-group-wrapper" class="header-group-wrapper full-width">
<div id="header-group" class="header-group row <?php print $grid_width; ?>">
<div id="header-group-inner" class="header-group-inner inner clearfix">
<?php print theme('grid_block', theme('links', $secondary_links), 'secondary-menu'); ?>
<?php print theme('grid_block', $search_box, 'search-box'); ?>
<?php if ($logo || $site_name || $site_slogan): ?>
<div id="header-site-info" class="header-site-info block">
<div id="header-site-info-inner" class="header-site-info-inner inner">
<?php if ($logo): ?>
<div id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</div>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div id="site-name-wrapper" class="clearfix">
<?php if ($site_name): ?>
<span id="site-name"><?php print $site_name; ?></span>
<?php endif; ?>
<?php if ($site_slogan): ?>
<span id="slogan"><?php print $site_slogan; ?></span>
<?php endif; ?>
</div><!-- /site-name-wrapper -->
<?php endif; ?>
</div><!-- /header-site-info-inner -->
</div><!-- /header-site-info -->
<?php endif; ?>
<?php print $header; ?>
<?php print theme('grid_block', $primary_links_tree, 'primary-menu'); ?>
</div><!-- /header-group-inner -->
</div><!-- /header-group -->
</div><!-- /header-group-wrapper -->
<!-- preface-top row: width = grid_width -->
<?php print theme('grid_row', $preface_top, 'preface-top', 'full-width', $grid_width); ?>
<!-- main row: width = grid_width -->
<div id="main-wrapper" class="main-wrapper full-width<?php if ($is_front) { print ' front'; } ?>">
<div id="main" class="main row <?php print $grid_width; ?>">
<div id="main-inner" class="main-inner inner clearfix">
<?php print theme('grid_row', $sidebar_first, 'sidebar-first', 'nested', $sidebar_first_width); ?>
<!-- main group: width = grid_width - sidebar_first_width -->
<div id="main-group" class="main-group row nested <?php print $main_group_width; ?>">
<div id="main-group-inner" class="main-group-inner inner">
<?php print theme('grid_row', $preface_bottom, 'preface-bottom', 'nested'); ?>
<div id="main-content" class="main-content row nested">
<div id="main-content-inner" class="main-content-inner inner">
<!-- content group: width = grid_width - (sidebar_first_width + sidebar_last_width) -->
<div id="content-group" class="content-group row nested <?php print $content_group_width; ?>">
<div id="content-group-inner" class="content-group-inner inner">
<?php print theme('grid_block', $breadcrumb, 'breadcrumbs'); ?>
<?php if ($content_top || $help || $messages): ?>
<div id="content-top" class="content-top row nested">
<div id="content-top-inner" class="content-top-inner inner">
<?php print theme('grid_block', $help, 'content-help'); ?>
<?php print theme('grid_block', $messages, 'content-messages'); ?>
<?php print $content_top; ?>
</div><!-- /content-top-inner -->
</div><!-- /content-top -->
<?php endif; ?>
<div id="content-region" class="content-region row nested">
<div id="content-region-inner" class="content-region-inner inner">
<a name="main-content-area" id="main-content-area"></a>
<?php print theme('grid_block', $tabs, 'content-tabs'); ?>
<div id="content-inner" class="content-inner block">
<div id="content-inner-inner" class="content-inner-inner inner">
<?php if ($title): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
<?php if ($content): ?>
<div id="content-content" class="content-content">
<?php print $content; ?>
<?php print $feed_icons; ?>
</div><!-- /content-content -->
<?php endif; ?>
</div><!-- /content-inner-inner -->
</div><!-- /content-inner -->
</div><!-- /content-region-inner -->
</div><!-- /content-region -->
<?php print theme('grid_row', $content_bottom, 'content-bottom', 'nested'); ?>
</div><!-- /content-group-inner -->
</div><!-- /content-group -->
<?php print theme('grid_row', $sidebar_last, 'sidebar-last', 'nested', $sidebar_last_width); ?>
</div><!-- /main-content-inner -->
</div><!-- /main-content -->
<?php print theme('grid_row', $postscript_top, 'postscript-top', 'nested'); ?>
</div><!-- /main-group-inner -->
</div><!-- /main-group -->
</div><!-- /main-inner -->
</div><!-- /main -->
</div><!-- /main-wrapper -->
<!-- postscript-bottom row: width = grid_width -->
<?php print theme('grid_row', $postscript_bottom, 'postscript-bottom', 'full-width', $grid_width); ?>
<!-- footer row: width = grid_width -->
<?php print theme('grid_row', $footer, 'footer', 'full-width', $grid_width); ?>
<!-- footer-message row: width = grid_width -->
<div id="footer-message-wrapper" class="footer-message-wrapper full-width">
<div id="footer-message" class="footer-message row <?php print $grid_width; ?>">
<div id="footer-message-inner" class="footer-message-inner inner clearfix">
<?php print theme('grid_block', $footer_message, 'footer-message-text'); ?>
</div><!-- /footer-message-inner -->
</div><!-- /footer-message -->
</div><!-- /footer-message-wrapper -->
</div><!-- /page-inner -->
</div><!-- /page -->
<?php print $closure; ?>
</body>
</html>
CSS
/* $Id: style.css,v 1.1.2.11 2010/07/02 22:11:04 sociotech Exp $ */
/* Margin, Padding, Border Resets
-------------------------------------------------------------- */
html, body, div, span, p,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, input, textarea {
margin: 0;
padding: 0;
}
img, abbr, acronym {
border: 0;
}
/* HTML Elements
-------------------------------------------------------------- */
p {
margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
}
h1 {
color: white !important;
text-shadow: black !important;
}
ul, ol, dd {
margin-bottom: 1.5em;
margin-left: 2em; /* LTR */
}
li ul, li ol {
margin-bottom: 0;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
}
a:link,
a:visited {
}
a:hover,
a:focus,
a:active {
text-decoration: underline;
}
blockquote {
}
hr {
height: 1px;
border: 1px solid gray;
}
/* tables */
table {
border-spacing: 0;
width: 100%;
}
tr.even td,
tr.odd td {
background-color: #FFFFFF;
border: 1px solid #dbdbdb;
}
caption {
text-align: left;
}
th {
margin: 0;
padding: 0 10px 0 0;
}
th.active img {
display: inline;
}
thead th {
padding-right: 10px;
}
td {
margin: 0;
padding: 3px;
}
/* Remove grid block styles from Drupal's table ".block" class */
td.block {
border: none;
float: none;
margin: 0;
}
/* Maintain light background/dark text on dragged table rows */
tr.drag td,
tr.drag-previous td {
background: #FFFFDD;
color: #000;
}
/* Accessibility
/-------------------------------------------------------------- */
/* skip-link to main content, hide offscreen */
#skip a,
#skip a:hover,
#skip a:visited {
height: 1px;
left: 0px;
overflow: hidden;
position: absolute;
top: -500px;
width: 1px;
}
/* make skip link visible when selected */
#skip a:active,
#skip a:focus {
background-color: #fff;
color: #000;
height: auto;
padding: 5px 10px;
position: absolute;
top: 0;
width: auto;
z-index: 99;
}
#skip a:hover {
text-decoration: none;
}
/* Helper Classes
/-------------------------------------------------------------- */
.hide {
display: none;
visibility: hidden;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
/* clear floats after an element */
/* (also in ie6-fixes.css, ie7-fixes.css) */
.clearfix:after,
.clearfix .inner:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
overflow: auto;
visibility: hidden;
}
/* Grid Layout Basics (specifics in 'gridnn_x.css')
-------------------------------------------------------------- */
/* center page and full rows: override this for left-aligned page */
.page,
.row {
margin: 0 auto;
}
/* fix layout/background display on floated elements */
.row,
.nested,
.block {
overflow: hidden;
}
/* full-width row wrapper */
div.full-width {
width: 100%;
}
/* float, un-center & expand nested rows */
.nested {
float: left; /* LTR */
margin: 0;
width: 100%;
}
/* allow Superfish menus to overflow */
#sidebar-first.nested,
#sidebar-last.nested,
div.superfish {
overflow: visible;
}
/* sidebar layouts */
.sidebars-both-first .content-group {
float: right; /* LTR */
}
.sidebars-both-last .sidebar-first {
float: right; /* LTR */
}
/* Grid Mask Overlay
-------------------------------------------------------------- */
#grid-mask-overlay {
display: none;
left: 0;
opacity: 0.75;
position: absolute;
top: 0;
width: 100%;
z-index: 997;
}
#grid-mask-overlay .row {
margin: 0 auto;
}
#grid-mask-overlay .block .inner {
background-color: #e3fffc;
outline: none;
}
.grid-mask #grid-mask-overlay {
display: block;
}
.grid-mask .block {
overflow: visible;
}
.grid-mask .block .inner {
outline: #f00 dashed 1px;
}
#grid-mask-toggle {
background-color: #777;
border: 2px outset #fff;
color: #fff;
cursor: pointer;
font-variant: small-caps;
font-weight: normal;
left: 0;
-moz-border-radius: 5px;
padding: 0 5px 2px 5px;
position: absolute;
text-align: center;
top: 22px;
-webkit-border-radius: 5px;
z-index: 998;
}
#grid-mask-toggle.grid-on {
border-style: inset;
font-weight: bold;
}
/* Site Info
-------------------------------------------------------------- */
#header-site-info {
width: auto;
}
#site-name-wrapper {
float: left; /* LTR */
}
#site-name,
#slogan {
display: block;
}
#site-name a:link,
#site-name a:visited,
#site-name a:hover,
#site-name a:active {
text-decoration: none;
}
#site-name a {
outline: 0;
}
/* Regions
-------------------------------------------------------------- */
/* Header Regions
-------------------------------------------------------------- */
#header-group {
overflow: visible;
}
/* Content Regions (Main)
-------------------------------------------------------------- */
.node-bottom {
margin: 1.5em 0 0 0;
}
/* Clear floats on regions
-------------------------------------------------------------- */
#header-top-wrapper,
#header-group-wrapper,
#preface-top-wrapper,
#main-wrapper,
#preface-bottom,
#content-top,
#content-region,
#content-bottom,
#postscript-top,
#postscript-bottom-wrapper,
#footer-wrapper,
#footer-message-wrapper {
clear: both;
}
/* Drupal Core
/-------------------------------------------------------------- */
/* Lists
/-------------------------------------------------------------- */
.item-list ul li {
margin: 0;
}
.block ul,
.block ol {
margin-left: 2em; /* LTR */
padding: 0;
}
.content-inner ul,
.content-inner ol {
margin-bottom: 1.5em;
}
.content-inner li ul,
.content-inner li ol {
margin-bottom: 0;
}
.block ul.links {
margin-left: 0; /* LTR */
}
/* Menus
/-------------------------------------------------------------- */
ul.menu li,
ul.links li {
margin: 0;
padding: 0;
}
/* Primary Menu
/-------------------------------------------------------------- */
/* use ID to override overflow: hidden for .block, dropdowns should always be visible */
#primary-menu {
overflow: visible;
}
/* remove left margin from primary menu list */
#primary-menu.block ul {
margin-left: 0; /* LTR */
}
/* remove bullets, float left */
.primary-menu ul li {
float: left; /* LTR */
list-style: none;
position: relative;
}
/* style links, and unlinked parent items (via Special Menu Items module) */
.primary-menu ul li a,
.primary-menu ul li .nolink {
display: block;
padding: 0.75em 1em;
text-decoration: none;
}
/* Add cursor style for unlinked parent menu items */
.primary-menu ul li .nolink {
cursor: default;
}
/* remove outline */
.primary-menu ul li:hover,
.primary-menu ul li.sfHover,
.primary-menu ul a:focus,
.primary-menu ul a:hover,
.primary-menu ul a:active {
outline: 0;
}
/* Secondary Menu
/-------------------------------------------------------------- */
.secondary-menu-inner ul.links {
margin-left: 0; /* LTR */
}
/* Skinr styles
/-------------------------------------------------------------- */
/* Skinr selectable helper classes */
.fusion-clear {
clear: both;
}
div.fusion-right {
float: right; /* LTR */
}
div.fusion-center {
float: none;
margin-left: auto;
margin-right: auto;
}
.fusion-center-content .inner {
text-align: center;
}
.fusion-center-content .inner ul.menu {
display: inline-block;
text-align: center;
}
/* required to override drupal core */
.fusion-center-content #user-login-form {
text-align: center;
}
.fusion-right-content .inner {
text-align: right; /* LTR */
}
/* required to override drupal core */
.fusion-right-content #user-login-form {
text-align: right; /* LTR */
}
/* Large, bold callout text style */
.fusion-callout .inner {
font-weight: bold;
}
/* Extra padding on block */
.fusion-padding .inner {
padding: 30px;
}
/* Adds 1px border and padding */
.fusion-border .inner {
border-width: 1px;
border-style: solid;
padding: 10px;
}
/* Single line menu with separators */
.fusion-inline-menu .inner ul.menu {
margin-left: 0; /* LTR */
}
.fusion-inline-menu .inner ul.menu li {
border-right-style: solid;
border-right-width: 1px;
display: inline;
margin: 0;
padding: 0;
white-space: nowrap;
}
.fusion-inline-menu .inner ul.menu li a {
padding: 0 8px 0 5px; /* LTR */
}
.fusion-inline-menu .inner ul li.last {
border: none;
}
/* Hide second level (and beyond) menu items */
.fusion-inline-menu .inner ul li.expanded ul {
display: none;
}
/* Multi-column menu style with bolded top level menu items */
.fusion-multicol-menu .inner ul {
margin-left: 0; /* LTR */
text-align: left; /* LTR */
}
.fusion-multicol-menu .inner ul li {
border-right: none;
display: block;
font-weight: bold;
}
.fusion-multicol-menu .inner ul li.last {
border-right: none;
}
.fusion-multicol-menu .inner ul li.last a {
padding-right: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded,
.fusion-multicol-menu .inner ul li.leaf {
float: left; /* LTR */
list-style-image: none;
margin-left: 50px; /* LTR */
}
.fusion-multicol-menu .inner ul.menu li.first {
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded li.leaf {
float: none;
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded ul {
display: block;
margin-left: 0; /* LTR */
}
.fusion-multicol-menu .inner ul li.expanded ul li {
border: none;
margin-left: 0; /* LTR */
text-align: left; /* LTR */
}
.fusion-multicol-menu .inner ul.menu li ul.menu li {
font-weight: normal;
}
/* Split list across multiple columns */
.fusion-2-col-list .inner .item-list ul li,
.fusion-2-col-list .inner ul.menu li {
float: left; /* LTR */
width: 50%;
}
.fusion-3-col-list .inner .item-list ul li,
.fusion-3-col-list .inner ul.menu li {
float: left; /* LTR */
width: 33%;
}
.fusion-2-col-list .inner .item-list ul.pager li,
.fusion-3-col-list .inner .item-list ul.pager li {
float: none;
width: auto;
}
/* List with bottom border
Fixes a common issue when list items have bottom borders and appear to be
doubled when nested lists end and begin. This removes the extra border-bottom
*/
.fusion-list-bottom-border .inner ul li {
list-style: none;
list-style-type: none;
list-style-image: none;
}
.fusion-list-bottom-border .inner ul li,
.fusion-list-bottom-border .view-content div.views-row {
padding: 0 0 0 10px; /* LTR */
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 216.7%; /* 26px */
}
.fusion-list-bottom-border .inner ul {
margin: 0;
}
.fusion-list-bottom-border .inner ul li ul {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.fusion-list-bottom-border .inner ul li ul li.last {
border-bottom-style: solid;
border-bottom-width: 1px;
margin-bottom: -1px;
margin-top: -1px;
}
#views_slideshow_singleframe_pager_slideshow-page_2 .pager-item {
display:block;
}
#views_slideshow_singleframe_pager_slideshow-page_2 {
position:absolute;
right:0;
top:0;
}
#header-group-wrapper {
background: none;
}
#page {
background-color:#F3F3F3;
background-image:url('/sites/all/themes/fusion/fusion_core/images/runswithgradient.jpg');
background-repeat:no-repeat;
background-attachment: fixed;
width: auto;
}
#views_slideshow_singleframe_pager_slideshow-page_2 div a img {
top:0px;
height:60px;
width:80px;
padding-right:10px;
padding-bottom:19px;
}
#mycontent{
width: 720px;
}
.product-body {
-moz-border-radius: 4px 4px 4px 4px;
margin: 0 0 20px;
overflow: hidden;
padding: 20px;
background: none repeat scroll 0 0 #F7F7F7;
border: 1px solid #000000;
border-style:solid;
border-width:thin;
color:#000000;
}
#product-details {
background: none repeat scroll 0 0 #F7F7F7 !important;
border: 1px solid #000000 !important;
color: #8E8E8E;
}
#logo {
position: relative;
top: 30px; /* 30 pixels from the top of the page */
left: 80px; /* 80 pixels from the left hand side */
z-index:1099;
border: 1px solid red; /* So we can see what is happening */
}
#breadcrumbs-inner {
background: none;
border-color: transparent;
border-style: none;
}
#block-views-new_products-block_1{
height:200px;
}
/* List with no bullet and extra padding
This is a common style for menus, which removes the bullet and adds more
vertical padding for a simple list style
*/
.fusion-list-vertical-spacing .inner ul,
.fusion-list-vertical-spacing div.views-row-first {
margin-left: 0;
margin-top: 10px;
}
.fusion-list-vertical-spacing .inner ul li,
.fusion-list-vertical-spacing div.views-row {
line-height: 133.3%; /* 16px/12px */
margin-bottom: 10px;
padding: 0;
}
.fusion-list-vertical-spacing .inner ul li {
list-style: none;
list-style-image: none;
list-style-type: none;
}
.fusion-list-vertical-spacing .inner ul li ul {
margin-left: 10px; /* LTR */
}
/* Bold all links */
.fusion-bold-links .inner a {
font-weight: bold;
}
/* Float imagefield images left and add margin */
.fusion-float-imagefield-left .field-type-filefield,
.fusion-float-imagefield-left .image-insert,
.fusion-float-imagefield-left .imagecache {
float: left; /* LTR */
margin: 0 15px 15px 0; /* LTR */
}
/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-left .views-row {
clear: left; /* LTR */
}
/* Float imagefield images right and add margin */
.fusion-float-imagefield-right .field-type-filefield,
.fusion-float-imagefield-right .image-insert
.fusion-float-imagefield-right .imagecache {
float: right; /* LTR */
margin: 0 0 15px 15px; /* LTR */
}
/* Clear float on new Views item so each row drops to a new line */
.fusion-float-imagefield-right .views-row {
clear: right; /* LTR */
}
/* Superfish: all menus */
.sf-menu li {
list-style: none;
list-style-image: none;
list-style-type: none;
}
/* Superfish: vertical menus */
.superfish-vertical {
position: relative;
z-index: 9;
}
ul.sf-vertical {
background: #fafafa;
margin: 0;
width: 100%;
}
ul.sf-vertical li {
border-bottom: 1px solid #ccc;
font-weight: bold;
line-height: 200%; /* 24px */
padding: 0;
width: 100%;
}
ul.sf-vertical li a:link,
ul.sf-vertical li a:visited,
ul.sf-vertical li .nolink {
margin-left: 10px;
padding: 2px;
}
ul.sf-vertical li a:hover,
ul.sf-vertical li a.active {
text-decoration: underline;
}
ul.sf-vertical li ul {
background: #fafafa;
border-top: 1px solid #ccc;
margin-left: 0;
width: 150px;
}
ul.sf-vertical li ul li.last {
border-top: 1px solid #ccc;
margin-bottom: -1px;
margin-top: -1px;
}
ul.sf-vertical li ul {
border-top: none;
padding: 4px 0;
}
ul.sf-vertical li ul li {
border-bottom: none;
line-height: 150%; /* 24px */
More below but I can't paste that much
Thanks for the suggestion I've tried this
#header-group {
position: relative;
z-index: 9;
}
#logo {
position: abosolute;
top: 230px; /* 30 pixels from the top of the page */
left: 10px; /* 80 pixels from the left hand side */
z-index: 999;
}
but it's not working. I've taken a screen shot of the div to show the structure.
http://i.stack.imgur.com/ff4DP.png
position is always relative to the next parent with an explicitly set position
If your logo is disappearing, it's probably because your header doesn't at least have position:relative set, or something similar occurring. Using Firebug or Chrome's inspect, can you see where the logo is?
Post your HTML, and CSS for the header/body, and we'll get to the bottom of it!
This does not fully answer your question, but as an aside, one thing I've learned since looking at CSS in the past couple weeks is that z-index only works on attributes with a position tag. In other words, in your case it's meaningless since it needs something to compare to. Adding a position: relative and a z-index to whatever is holding #logo should help.