Jump to content

website css wont cooperate lol

whiteboikyle

By whiteboikyle
in CSS Help

 Share

Recommended Posts

whiteboikyle Regular Member

whiteboikyle

Posted
Posted

Heres the website im working on

http://simpleswagg.com/profile/view/4

 

Im not very good at css.. So im just guessing and checking but i dont understand why the SecondBody and leftControl are stretching past the bodyContent and messageBody.

Not sure why.. Maybe some pointers or maybe a simple mistake.. Please let me know. Thanks

 

Heres my CSS

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}

a:link, a:visited, a:focus {
color:#000;
text-decoration:none;
}

a:hover{ 
color: #900; 
text-decoration: none; 
}

a:active{ 
color: #00f; 
text-decoration: none;
}


body, html {
height:100%;
}


body{
background-color:#37536d;
color:#000;
margin:0;
padding:0;
width:100%;
height:100%;
font-family: helvetica, arial, times;
}



#radial{
position:fixed;
left:50%;
top:50%;
margin: -750px 0 0 -750px;
height:1500px;
width:1500px;
background: -moz-radial-gradient(50% 50%, farthest-side, #6497c7, #37536d, #37536d);
background: radial-gradient(50% 50%, farthest-side, #6497c7, #37536d, #37536d);
opacity:.5;
}

#fullContain {
position: relative;
width: 950px;
height:100%;
margin: auto;
}

#logo {
width: 510px;
height:125px;
margin: auto;
background-image: url('/images/logo.png');
background-repeat: no-repeat;
}

#container{
padding-top:25px;
height: 200px;
margin: auto;
}

#lForm > form {
width:520px;
margin:auto;
}

#submit, #create {
float:left;
}

input[type=text], input[type=password]{
float:left;
width:200px;
height:25px;
padding:5px;
margin: 5px;
color: black;
border: 1px solid #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}

input[type=text]:hover, input[type=password]:hover{
    color: #3a3a3a;
    background-color: #f7f7f7;
}

input[type=text]:focus, input[type=password]:focus{
color: #000;
background-color:#eaebeb;
border:1px solid #b09b38;
}

.buttons {
padding:8px;
color:#fff;
font-size:12px;
border:1px solid black;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
text-decoration:none;
# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#bLogin {
    height:37px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
margin: 5px;
float:left;
text-shadow: 1px 1px 2px black;
padding-top:5px;
}

#bCreate{
    color:#FFF;
position: fixed;
top: 0%;
right:0%;
width:50px;
text-align:center;
margin-top:15px;
margin-right: 15px;
opacity: .85;
text-shadow: 1px 1px 2px black;
}

#bLogin:hover, input[type=submit]:hover {
cursor:pointer;
opacity:1;
background-color:#662e2e;
}

.buttons:hover {
    color:#FFF;
cursor:pointer;
opacity:1;
background-color:#662e2e;
background: -moz-linear-gradient(top, #662e2e, #5e2a2a 50%, #532323 51%, #451b1b);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #662e2e), color-stop(.5, #5e2a2a), color-stop(.5, #532323), to(#451b1b)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#662e2e, endColorstr=#451b1b);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#662e2e, endColorstr=#451b1b)";

}

.input_names{
font-size:14px;
padding:1px;
}

#username {
width:445px;
height:50px;
}

#password {
width:445px;
height:50px;;
}

#createAccount {
padding-left:5px;
padding-top:5px;
text-align:left;
height:40px;
width:445px;
}

#goBack {
    color:#FFF;
margin:auto;
text-align:center;
width:70px;
text-shadow: 1px 1px 2px black;
}

#subCreate {
    padding-top:5px;
    text-shadow: 1px 1px 2px black;
}

fieldset {
margin:auto;
    padding:10px;
    width:450px;
    border:2px solid rgba(0, 0, 0, .6);
    -moz-box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
     -webkit-box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
     box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
    margin-bottom:25px;
     -moz-border-radius:8px;
     -webkit-border-radius:8px;
     border-radius:8px;
}

fieldset > legend {
    color:#FFF;
    font-size:17px;
    text-shadow: 1px 1px 2px black;
}

#aboveContain {
width:450px;
margin:auto;
padding:5px;
}

.error {
padding:1px;
margin:auto;
font-weight:bold;
    font-style: italic;
    color:#262626;
    font-size:12px;
text-shadow: 1px 1px 6px rgba(250, 0, 0, .1);
}

#urgentMessage {
position:relative;
width:100%;
height:50px;
left:0%;
display:none;
}

#bodyContent {
margin:auto;
width:950px;
height:100%;

}

#topWrap {
width:900px;
height:75px;
margin:auto;

}

#topLogo {
height:100%;
width:300px;
text-align:center;
font-size:48px;
}


#messageBody {
background-image: url(../images/div_bg.png);
background-repeat:repeat-x;
background-color:#36526c;
margin:auto;
min-height:450px;
height:100%;
width:890px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
padding:5px;
border:1px solid rgba(0,0,0, .07);
}

#leftBody {
margin:auto;
width:75%;
float:left;
height:100%;
}

#rightBody {
margin:auto;
float:left;
width:24%;
height:100%;
}

#status {
margin:auto;
width:100%;
padding:10px;
}

.linkOrig {
margin:auto;
width:80px;
float:left;
}

#Links {
margin:auto;
padding:5px;
float:left;
height:100px;
width:475px;
background-color: #FFF;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}

#theLinks {
margin:auto;
width:450px;
height:20px;

}

#subLinks {
border-top:1px solid #e2dfdf;
margin:auto;
width:450px;
height:20px;

}

.linkSub {
display: none;
}

#yourImage {
margin:auto;
float:left;
height:125px;
width:125px;
}

#underText {
width:105px;
text-align:center;
}

#triangle {
position: absolute;
margin-left:119px;
margin-top: 20px;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent; 

        border-right:7px solid white;

}

#Friends {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color:#274357;


-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;
}

#Friends > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;


# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#Friends > p {
font-size:12px;
}

#Stalkers {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color: #274357;

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;
}


#Stalkers > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;

# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#Stalkers > p {
font-size:12px;
}

#SwaggUp {
    color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color: #274357;

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;    
    
}

#SwaggUp > h1 {
    text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;

# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);    
    
}

#secondBody {
position:relative;
margin:auto;
width:100%;
height:100%;
margin-top:120px;
}

#leftControl {
float:left;
height:100%;
width:20%;
font-size:12px;
border-right:1px solid black;
}

#rightWall {
height:100%;
width:80%;
}

 

heres the view file

 

<div id="topWrap">
    <div id="topLogo"><h1>Simple Swag</h1></div>
    <div id="topNav">
    
    </div>
</div>
<div id="bodyContent">   
    <div id="messageBody">
        <div id="leftBody">
            <div id="status">
                <div id="yourImage">
                <?php
                
                $haveImage = false;
                
                if($haveImage == true || $haveImage != ''){
                    
                    
                    
                }
                else{
                    
                    echo '<img src="'.base_url().'/images/yourImage.png" height="105px" width="105px" />';
                    
                }
                
                ?>
                    <div id="underText">
                        <?=$profile_username;?>
                    </div>
                </div>
                <div id="triangle"></div>
                <div id="Links">
                    This is the status of the user. blah blah blah here is some more words.. 
                    maybe time to repeat This is the status of the user. blah blah blah here is some more words.. 
                    maybe time to repeat 
                </div>
            </div>
            <div id="secondBody">
                <div id="leftControl">
                Send Message <br />
                Add as Froemd <br />
                Photos <br />
                Etc
                </div>
                <div id="rightWall">
                Display wall post here
                </div>
            </div>
        </div>
        
        <div id="rightBody">
        <div id="Friends">
            <h1>Currently 0 Friends</h1>
        </div>
        
        <div id="Stalkers">
            <h1>Currently 0 Stalkers</h1>
        </div>
        </div>

    </div>
</div>

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

That is one of the sneaky things of working with percentages.

You gave #secondBody a height of 100% and on top of that you ad a margin-top of120px making it 100%height+120px

Now i see why you did gave that #secondBody a margin-top, but if you first made a simple template using the properties float and clear. There would not have a been a need to set such a margin. You simple give the header a height of 120px. Also keep in mind when working with percentages, any padding border or margin you add comes on top of that percentage.

 

Now to make this more clear

 

#secondBody {
    background-color: #000000;
    height: 100%;
    margin: 120px auto auto; /* this is being added on top of the 100% */
    position: relative;
    width: 100%;
}

 

I am not a real van of these kinds of ultra fluid layouts  to be honest (in pure form that is) they are often inconsistent across browser sizes and harm the original design. at most i would set percentages for the min-height of the wrapper container.

 

If your interested in learning about floats and clears (i would :P)  have a look here: http://css.maxdesign.com.au/floatutorial/

 

there are even some basic 2 and 3 column templates there that are much more efficient

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Look i don't want to be rude, but If you know what floats are you should use them. The fact that your design above didn't use them, shows me that you don't use and/or know the potential of them. Furthermore if you know what floats are you should certainly know what clears are. Sounds a bit cryptic?

 

No, The tutorial i linked,  teaches you exactly that! So instead of me copy pasting a great resources , i recommend you go there yourself and read it. It takes some time to understand why floats and clears are like brother and sister. And as you mentioned yourself you still had something to learn. ones you know how floats and clears work properly it will make your css coding life much easier.

 

IF you need help with floats and clears in your own code, I am happy to help with that

 

Link to comment
Share on other sites
whiteboikyle Regular Member

whiteboikyle

Posted
  • Author
Posted

Okay so i been messing with it a little bit.. But i still dont understand why i have a div inside a div stretching futher then the "FullContain" div..

 

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}

a:link, a:visited, a:focus {
color:#000;
text-decoration:none;
}

a:hover{ 
color: #900; 
text-decoration: none; 
}

a:active{ 
color: #00f; 
text-decoration: none;
}


body, html {
height:100%;
}


body{
background-color:#37536d;
color:#000;
margin:0;
padding:0;
width:100%;
height:100%;
font-family: helvetica, arial, times;
}



#radial{
position:fixed;
left:50%;
top:50%;
margin: -750px 0 0 -750px;
height:1500px;
width:1500px;
background: -moz-radial-gradient(50% 50%, farthest-side, #6497c7, #37536d, #37536d);
background: radial-gradient(50% 50%, farthest-side, #6497c7, #37536d, #37536d);
opacity:.5;
}

#fullContain {
clear:left;
position: relative;
width: 950px;
height:100%;
margin: auto;
border:1px solid black;
}

#logo {
width: 510px;
height:125px;
margin: auto;
background-image: url('http://64.19.142.13/simpleswagg.com/images/logo.png');
background-repeat: no-repeat;
}

#container{
padding-top:25px;
height: 200px;
margin: auto;
}

#lForm > form {
width:520px;
margin:auto;
}

#submit, #create {
float:left;
}

input[type=text], input[type=password]{
float:left;
width:200px;
height:25px;
padding:5px;
margin: 5px;
color: black;
border: 1px solid #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}

input[type=text]:hover, input[type=password]:hover{
    color: #3a3a3a;
    background-color: #f7f7f7;
}

input[type=text]:focus, input[type=password]:focus{
color: #000;
background-color:#eaebeb;
border:1px solid #b09b38;
}

.buttons {
padding:8px;
color:#fff;
font-size:12px;
border:1px solid black;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
text-decoration:none;
# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#bLogin {
    height:37px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
margin: 5px;
float:left;
text-shadow: 1px 1px 2px black;
padding-top:5px;
}

#bCreate{
    color:#FFF;
position: fixed;
top: 0%;
right:0%;
width:50px;
text-align:center;
margin-top:15px;
margin-right: 15px;
opacity: .85;
text-shadow: 1px 1px 2px black;
}

#bLogin:hover, input[type=submit]:hover {
cursor:pointer;
opacity:1;
background-color:#662e2e;
}

.buttons:hover {
    color:#FFF;
cursor:pointer;
opacity:1;
background-color:#662e2e;
background: -moz-linear-gradient(top, #662e2e, #5e2a2a 50%, #532323 51%, #451b1b);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #662e2e), color-stop(.5, #5e2a2a), color-stop(.5, #532323), to(#451b1b)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#662e2e, endColorstr=#451b1b);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#662e2e, endColorstr=#451b1b)";

}

.input_names{
font-size:14px;
padding:1px;
}

#username {
width:445px;
height:50px;
}

#password {
width:445px;
height:50px;;
}

#createAccount {
padding-left:5px;
padding-top:5px;
text-align:left;
height:40px;
width:445px;
}

#goBack {
    color:#FFF;
margin:auto;
text-align:center;
width:70px;
text-shadow: 1px 1px 2px black;
}

#subCreate {
    padding-top:5px;
    text-shadow: 1px 1px 2px black;
}

fieldset {
margin:auto;
    padding:10px;
    width:450px;
    border:2px solid rgba(0, 0, 0, .6);
    -moz-box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
     -webkit-box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
     box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
    margin-bottom:25px;
     -moz-border-radius:8px;
     -webkit-border-radius:8px;
     border-radius:8px;
}

fieldset > legend {
    color:#FFF;
    font-size:17px;
    text-shadow: 1px 1px 2px black;
}

#aboveContain {
width:450px;
margin:auto;
padding:5px;
}

.error {
padding:1px;
margin:auto;
font-weight:bold;
    font-style: italic;
    color:#262626;
    font-size:12px;
text-shadow: 1px 1px 6px rgba(250, 0, 0, .1);
}

#urgentMessage {
position:relative;
width:100%;
height:50px;
left:0%;
display:none;
}

#bodyContent {
clear:left;
margin:auto;
width:950px;
height:100%;

}

#topWrap {
clear:left;
width:900px;
height:75px;
margin:auto;

}

#topLogo {
clear:left;
height:100%;
width:300px;
text-align:center;
font-size:48px;
}


#messageBody {
background-image: url(./images/div_bg.png);
background-repeat:repeat-x;
background-color:#36526c;
margin:auto;
min-height:450px;
clear:left;
height:100%;
width:890px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
padding:5px;
border:1px solid rgba(0,0,0, .07);
}

#leftBody {
margin:auto;
width:75%;
float:left;
height:100%;
}

#rightBody {
margin:auto;
float:left;
width:24%;
height:100%;
}

#status {
margin:auto;
width:100%;
padding:10px;
}

.linkOrig {
margin:auto;
width:80px;
float:left;
}

#Links {
margin:auto;
padding:5px;
float:left;
height:100px;
width:475px;
background-color: #FFF;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}

#theLinks {
margin:auto;
width:450px;
height:20px;

}

#subLinks {
border-top:1px solid #e2dfdf;
margin:auto;
width:450px;
height:20px;

}

.linkSub {
display: none;
}

#yourImage {
margin:auto;
float:left;
height:125px;
width:125px;
}

#underText {
width:105px;
text-align:center;
}

#triangle {
position: absolute;
margin-left:119px;
margin-top: 20px;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent; 

        border-right:7px solid white;

}

#Friends {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color:#274357;


-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;
}

#Friends > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;


# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#Friends > p {
font-size:12px;
}

#Stalkers {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color: #274357;

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;
}


#Stalkers > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;

# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#Stalkers > p {
font-size:12px;
}

#SwaggUp {
    color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color: #274357;

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;    
    
}

#SwaggUp > h1 {
    text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;

# /* BACKGROUND GRADIENTS */  
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e)); 
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);    
    
}

#secondBody {
clear:left;
position:relative;
margin:auto;
width:100%;
height:100%;
}

#leftControl {
float:left;
height: 100%;
width:20%;
border-right:1px solid black;
font-size:12px;
padding-right:5px;
}

#leftControl > p {
padding:5px;
background-color:#fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

#misc {
margin:auto;
}

#rightWall {
float:left;
height:100%;
width: 75%;
padding:10px;
}

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

a percentage is a way of expressing a number as a fraction of 100.

 

In order to get that, a fixed value is needed which represents that 100 (for instance a FIXED height), which can be divided in those fractions we call a percentage of (i.e. a fixed height)

 

if you apply a min-height (so this is not fixed but variable value) to a container and set the inner elements to 100% height. your asking the browser to interpret 100% of a variable value. Although some browsers (like firefox) than just take the the height of window. IE does certainly not do that and relies on the height of the element itself. Now say we gave  html and body a height of 100% Than We create a reference point for anything inside it.

 

Run the code below as is (not on your phone). if you don't get it, read this again and again until you do. The original question of this topic has everything to do with this. I can't explain it any better than this.

 

Also I recommend highly that you run this in IE, and comment the pointed line out and run it again. When you do: body, html are no longer reference points. and you know what happens than.

<html>
<head>
<style type="text/css">
body,html{height:100%; margin:0;padding:0;} /* comment this line out and see what happens*/
#notfixed{min-height:300px;background:green;}
.inner-a{height:100%; background:red;}
#fixed{height:300px;background:orange;}
.inner-b{height:100%; background:blue;}
</style>
</head>
<body>
    <div id="notfixed">
        <div class="inner-a">
            this div uses 100% height. BEcause min-height is not a fixed but a variable value,
            that is not used as a reference. INstead the Height of Html,body is used which is as heigh as the
            window size is.
        </div>
    </div>
    <div id="fixed">
        <div class="inner-b">
            this div uses 100% height. Because a height is set to the container, that is used as a reference making 
            it as heigh as the container. in this case 300px
        </div>
    </div>
</body>
</html>

 

 

 

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

just to let you know, i am not going to reply any more after this. I just don't see the point of it. You have been given the answer multiple times I invested around 1 hour in this topic, and you just not seem to get it.

 

if you can solve the next puzzle you know why your website is overlapping if not, i leave it up to you.

 

say I have a window height of 800px

inside the <body> i have a header of 75 pixels in height  (just like yours)

and a element below that with a height of 100% (just like yours)

 

How much pixels are the container and the header combined?

 

Link to comment
Share on other sites
whiteboikyle Regular Member

whiteboikyle

Posted
  • Author
Posted

just to let you know, i am not going to reply any more after this. I just don't see the point of it. You have been given the answer multiple times I invested around 1 hour in this topic, and you just not seem to get it.

 

if you can solve the next puzzle you know why your website is overlapping if not, i leave it up to you.

 

say I have a window height of 800px

inside the <body> i have a header of 75 pixels in height  (just like yours)

and a element below that with a height of 100% (just like yours)

 

How much pixels are the container and the header combined?

 

 

To me your making no sense.. the answer would be 800px.. because the point of 100% is to stretch it 100%... lol so it would set the height at 725px;

 

put for some reason the answer i think you want is 875px which makes no sense to me.

 

can you just give me the answer so i can see what the hell your talking about.. Im a visual person, thus seeing the correct code in play will teach me.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

If you have a room where only 1 elephant fits in. So in that sense 1 elephant is 100% which has the same dimensions of the room (containing the elephant).

Now if i would put a lepricon on top of the elephant IT WONT FIT. no shit!?

 

look at the image attached. than look at the first reply of this topic.... :'(

 

 

[attachment deleted by admin]

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Okay i understand the concept now.. lol funny showing.. So your saying you always have to know the pixels.. or can i do a height:100% and do a margin-bottom:-75px; ?!?!

Do you even read what other post or are you just trolling?

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.