5 replies [Last post]
szkolahtml
szkolahtml's picture
Offline
newbie
.UnitedKingdom > London
Last seen: 7 years 43 weeks ago
.UnitedKingdom > London
Joined: 2012-12-29
Posts: 3
Points: 6

Hi,

I have a BIG question in HOW TO Topic. Thing is if you will go to http://szkolahtml.pl/fantasy There is TOP BAR where you have email address, there is MENU BAR where you have the navigation you have SLIDER where i keep my slider etc etc and my CENTER class. Everything except CENTER class has width 100% to adapt to SCREEN RESOLUTION size, to position it i use ABSOLUTE position, now it`s not quite what i`m looking for because when you will re-size the window you will see that DIV under the slider will stay in the same place. Can i place 100% width DIV inside CENTER and it will still re-size to Browser Window size ? or not ? Is there any other way to not use BACKGROUND image for this ? I need the height of each div dynamically to re-size when there is more content to display so i don`t want to use BACKGROUND image. I don`t know if i have made myself clear so i will add image of what i want to achieve.

//mod edit: You used a "." instead of "/" between ".pl" and "fantasy", which breaks the link. Fixed. ~gt

AttachmentSize
Untitled-13.png48.86 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

One step at a time

First step: Get rid of all instances of position, z-index, width, top, left, and height, and maybe some other things that I have failed to recall. To use absolute positioning is to hear the sirens call that will bring you violently onto the rocks and shoals of web development.

Step, the second: Give the class .slide {overflow: hidden;}.

There are other things that will be needed for specific elements, but let's do the above first.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

szkolahtml
szkolahtml's picture
Offline
newbie
.UnitedKingdom > London
Last seen: 7 years 43 weeks ago
.UnitedKingdom > London
Joined: 2012-12-29
Posts: 3
Points: 6

OK i have done everything you

OK i have done everything you have asked for if you can go back to the website and tell me if this is what you wanted me to change ? Because after refreshing the website i think i have messed up something Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You missed a couple of things

Here are the changes I made. Rather than chance something being left out, this is the whole css thingy. Compare line by line, or run the diff utility if you're on a modern platform.

@charset "UTF-8";
/* CSS Document */
 
body, html {
    margin: 0;
}
 
@font-face {
    font-family:Museo;
    src:url(../fonts/Museo100-Regular.otf);
    font-weight:100;
}
 
@font-face {
    font-family:Museo;
    src:url(../fonts/Museo300-Regular.otf);
    font-weight:300;
}
 
@font-face {
    font-family:Museo;
    src:url(../fonts/Museo500-Regular.otf);
    font-weight:500;
}
 
@font-face {
    font-family:Museo;
    src:url(../fonts/Museo700-Regular.otf);
    font-weight:700;
}
 
@font-face {
    font-family:Museo;
    src:url(../fonts/Museo900-Regular.otf);
    font-weight:900;
}
 
.center
{
    margin:0 auto;
    width:980px;
}
 
.topbar
{
    background:#0e151e;
    border-bottom:1px solid #374049;
}
 
.header {
    overflow: hidden;
    background:#1b222a;
}
 
.sliderbar
{
    background:#fff;
    overflow:hidden;
    border-bottom:1px solid #fff;
}
 
.content
{
    background:#0f161e;
}
 
.footer-one
{
    background:#f7f7f7;
}
 
.menu {
    text-align:right;
    padding:5px;
    list-style-type:none;
}
 
.menu li {
    display: inline-block;
}
 
.menu a:link, .menu a:visited
{
    margin-left:10px;
    width:auto;
    height:auto;
    text-align:center;
    padding:10px 10px 10px 10px;
    font-family:Museo, Helvetica, Arial, sans-serif;
    font-weight:300;
    text-decoration:none;
    color:#78797c;
    text-transform:uppercase;
}
 
.logo
{
    padding:4px;
    float:left;
    color:#fff;
    font-size:36px;
    font-family:Museo, Helvetica, Arial, sans-serif;
    font-weight:700;
}
 
.menu a:hover, #current
{
    color:#fff;
    background:#0f1720;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 10px #000000;
    border-bottom:1px solid #30363d;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px; /* future proofing */
    -khtml-border-radius:3px; /* for old Konqueror browsers */
}
 
 
 
.topinfo {
    padding:7px;
    text-align:right;
    font-family:Museo, Helvetica, Arial, sans-serif;
    font-weight:100;
    color:#78797c;
}
 
 
.slider {}
 
.slider .slide 
{ 
    display:none;
    text-align:center; 
    color:#fff; 
    font-size:24pt; 
}
 
.slider .caption
{
    width:auto;
    height:auto;
    padding:25px;
    position:relative;
}
 
.slider img
{
    float:left;
    width:100%;
}
 
.caption h2
{
    text-align:left;
    color:#fff;
    font-family:Museo, Helvetica, Arial, sans-serif;
    font-weight:100;
    font-size:18px;
}
 
.caption p
{
    text-align:left;
    color:#78797c;
    font-family:Museo, Helvetica, Arial, sans-serif;
    font-weight:100;
    font-size:14px;
    width:250px;
    word-wrap:break-word;
}
 
.caption a:link, .caption a:visited
{
    margin-left:10px;
    width:auto;
    height:auto;
    display:inline;
    float:left;
    text-align:center;
    padding:10px 10px 10px 10px;
    font-family:Museo, Helvetica, Arial, sans-serif;
    font-weight:300;
    text-decoration:none;
    color:#fff;
    background:#4e5761;
    text-transform:uppercase;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px; /* future proofing */
    -khtml-border-radius:3px; /* for old Konqueror browsers */
    font-size:14px;
}
 
.caption a:hover
{
    color:#fff;
    background:#0d1116;
    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 10px #000000;
    border-bottom:1px solid #30363d;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px; /* future proofing */
    -khtml-border-radius:3px; /* for old Konqueror browsers */
}
 
.news
{
    background:#7e7d7d;
    width:980px;
    height:auto;
}

I think that's pretty much what you want. I didn't alter any of your structure.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

szkolahtml
szkolahtml's picture
Offline
newbie
.UnitedKingdom > London
Last seen: 7 years 43 weeks ago
.UnitedKingdom > London
Joined: 2012-12-29
Posts: 3
Points: 6

U have done it Gary, dunno

U have done it Gary, dunno how but you have done it. Can you please explain me what i was doing wrong to prevent me doing it again ? Smile I would like to read more about things like that if you have any resources Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 4 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Not easy to express

I don't know of any good "philosophy" of web page coding. Not even my own. The whole issue hinges on one's fully understanding the specifications for both html and css. For coders, it's not about the technical issues of how to make things work (the specs are written for UA vendors, not the users), but how they affect the document.

HTML is about describing the structure of the document. The current recommendation is html4.01; much of html5 is in draft stage, and is/will be useful once finished. See http://www.w3.org/TR/REC-html40/. Make this your bedtime reading, and bookmark it for ready access as you code.

CSS is orthogonal to html. It is a declarative style language. Its purpose is to be the rules for each selector's presentation. The current recommendation is css2.1 and certain modules of css3. CSS2.1 is basic. See http://www.w3.org/TR/CSS2/. Make this your bedtime reading, and bookmark it for ready access as you code.

Rule of thumb for where you went wrong: Never, and by never I mean not ever, do you use the position property as your major layout tool.

For a good introductory tutorial, see htmldog.com. There are html and css tutorials that interleave, each building on the other. For some practical demos, see my site, linked in my sig. Ignore the references to obsolete versions of Internet Explorer. I really, really need to update those pages to reflect that no coder, wishing to remain sane, will ever again attempt to support those sorry browsers.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.