I rechecked message #35 and my styles are in a bit of a mess, if you view the comment this snippet of code I just want to know where the main content styles begin so I can arrange everything.
<style type="text/css">
body {
margin:0;
padding:0;
font:100%/1.2 arial, helvetica, sans-serif;
background:#b7b7b7;
}
h1 {
margin:0;
padding:.5em;
font-size:1.65em;
text-align:center;
}
p {
margin: 0;
}
.left {
float: left;
}
.right {
float:right;
}
/*=== Begin Layout ===*/
#wrap {
width:700px;
margin:auto;
}
#head {
position: relative;
overflow: hidden;
height:190px;
width: 700px;
background: #66CC00;
}
#head h1 {
margin-bottom: 200px;
}
#head p {
margin: 0;
padding: 20px 10px 10px;
font: bold 1.4em / 1 arial;
}
p#center {
text-align: center;
font: bold 1.6em / 1.6 arial;
color: #FFF;
}
/* Does the main content begin here ??? */
#inner {
overflow:hidden;/*IE7 haslayout and contain floats*/
padding:30px 0 0;
background:#b7b7b7;
}
* html #inner { /*IE6 haslayout*/
height:1%;
overflow:visible;
}
.floatwrap {/*wrap around each pair of floats*/
float:left;
width:100%;
margin-bottom:30px;
background:#b7b7b7
}
.floatwrap a {
width:250px;
height:250px;
background:#CC9900;
text-align:center;
}
#inner .left {/*class for all #inner > left floats*/
float:left;
}
#inner h1 {
margin: -45px -50px 60px 222px;
}
#inner .right {/*class for all #inner > right floats*/
float:right;
}
#inner p {
margin:0;
padding:60px;
font-size:1em;
background:yellow;
}
#inner p img {
display:block;
width:255px;
height:255px;
background:orange;
text-align:center;
}
#inner .content {
width:295px;
background: #b7b7b7;
}
#inner .content p { /*resets from #inner p*/
margin:.5em .5em 2em;
padding:0;
background:none;
}
#foot {
height:100px;
overflow:hidden;/*margin clearance*/
background:#66CC00;
font-weight:bold;
text-align:center;
}
</style>
/* [B]Does the main content begin here ??? [/B]*/
#inner {
overflow:hidden;/*IE7 haslayout and contain floats*/
padding:30px 0 0;
background:#b7b7b7;
}
Yes, that is where it begins.
I did the changes but the page is still somewhat broken, post #39 has the link to view the update.
Here is the main problem. You keep copying and pasting bits into the page and everytime you do that you break the page.
On that link you just gave you are missing this opening div tag below in red.
[B] <div id="inner">[/B]
<h1>Tutorial</h1>
[COLOR=Red]<div class="floatwrap">[/COLOR]
<p class="left">
<a href="tutorials/ramen/paperpile.jpg" class="highslide left" onclick="return hs.expand(this)">
<img src="tutorials/ramen/paperpile.jpg" alt="Highslide JS" title="Click to enlarge" height="250" width="250">
</a>
</p>
<div class="content right">
<p>Ramen is an OpenSource Compositor which you can download here. In this tutorial I'm going to show you the fundamentals
of Ramen by how to move around in the Interface, there will be follow up Ramen Tutorials as well as Autodesk Composite tutorials.</p>
</div>
</div>
You don’t need these float classes on the #inner anymore either. I told you that back in post #35. And what is with the negative margins on the h1, all you need to do is give it text-align:right and add some side padding if you want the text on the right. It does not need a -45px top margin either, you did that because your page was FUMBLED UP!
[COLOR=Red] #inner .left {/*class for all #inner > left floats*/
float:left;
}[/COLOR]
#inner h1 {
[COLOR=Red]margin: -45px -50px 60px 222px;[/COLOR]
}
[COLOR=Red] #inner .right {/*class for all #inner > right floats*/
float:right;[/COLOR]
}
I successfully manually changed it Don’t worry I’m trying to understand it more, when I can I’m trying. This CSS stuff seems a little un-logical to me, it’s like trying to ride a bike backwards in a maze best how I can describe it. The HTML although I’m not perfect at it makes more sense.
I would like to place the #inner h1 someone else, as I want the H1 tag to be not where it is currently, can I place it within the #head or the .p class=right ? I want it above the graphic but position it from the top.
I would like to place the #inner h1 someone else, as I want the H1 tag to be not where it is currently, can I place it within the #head or the .p class=right ? I want it above the graphic but position it from the top.
Yes you can move it back to the head div. We will have to move the hidden text around a little bit so the h1 is not laying on top of the other text with images off.
The h1 will need to have position:relative; set on it so we can layer it above the AP span (head BG image).
Keep in mind though that your h1 should be describing the content and leading into any sub-headings on each page. That means the h1 will be changing from page to page.
Personally I don’t think it belongs up in your header div, it serves it purpose well where it is right now.
Which is why I said that it needs to be visible to the user.
Personally I don’t think it belongs up in your header div, it serves it purpose well where it is right now.
Honestly I don’t know what you are wanting to do at this point. You say you want to position it from the top of the header but then you give it 200px top padding to push it out of the header.
You are still not reading or understanding my posts, I suspect it is the later. That is because you will not commit yourself to learning basic CSS. I will help you one more time and then I will have to leave you with it. It has gotten to the point that you are unable to make any changes on your own.
I have already said that you don’t need a negative right margin to position your h1 to the right. At this point it will probably be best to absolute position the h1 to the bottom of the head div. That will auto stack it above the span’s BG image and shrinkwrap the h1 box. That will also keep it from laying on top of the hidden text if images are turned off.
I was reviewing what you had changed. Sorry I don’t quite understand CSS, I over look when you have to make the changes in the HTML for it to reflect. What threw me off the most but I know it is important is when you added the background text for the background images. I know that CSS is styling each HTML tag but what throws me out of the loop is the positioning of the elements and things like overflow, the rest I somewhat understand.
I know that CSS is styling each HTML tag but what throws me out of the loop is the positioning of the elements and things like overflow, the rest I somewhat understand.
The page is pretty basic but yes there are some techniques being used that may be above your current skill level. It just takes time to learn this stuff and no one learns it overnight.
As far as the positioning goes I will try to explain some of it to you. First we have position:relative; (RP) and overflow:hidden; set on the #head div. The RP is just to establish a containing block for the absolute positioned (AP) children, that is the <span> which has the head BG image applied to it and the h1. AP elements position themselves from the the nearest ancestor whose position property has one of the values absolute, fixed, or relative.
#head {
[COLOR=Blue]position:relative; /*containing block for AP children*/
overflow:hidden; /*uncollapse margins*/[/COLOR]
width: 700px;
height:190px;
background:#66CC00;
}
Next we have some auto stacking levels taking place with the AP’d span and h1 due to the order of the html. The <span> with the BG image layers over the hidden text since it is a positioned element that comes lower in the source order. The same principle is happening wit the h1, it is auto stacking above the span. By allowing them to auto stack I did not need to set z-index on them.
<div id="wrap">
<div id="head">
<p class="left">The Creative Sheep <br><small>Animator / Digital Artist</small></p>
<p class="right">Learning to Basics <br><small>3D & Graphic Design Tutorials</small></p>
<p class="cntr">Tutorials</p>
[B]<span> </span>
<h1>Learning the Basics of Ramen</h1>[/B]
</div>
Just start with the basic stuff first in the CSS Reference, if you don’t learn the basics you will get in over your head if you try to jump into advanced methods without having basic knowledge.
I know you were struggling with the Box Properties also. Margin, Padding and Borders must all be taken into account when you set dimensions. That is why you had floats dropping half way through this thread.
Sorry I don’t quite understand CSS, I over look when you have to make the changes in the HTML for it to reflect.
You will need to understand how the HTML elements match up to the CSS Selectors that are styling them. You should be able to look at the css and then find each corresponding element in the html.
One step at a time and you will begin to understand these things as you put them into practice on your own.
