Jump to content

Not very good at CSS need help

- - - - -
Started by Whitey, Aug 07 2011 06:11 PM

  • Please log in to reply
14 replies to this topic

#1
Whitey
Posted 07 August 2011 - 06:11 PM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
Heres the website im working on
Simple Swagg

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>

#2
WingedPanther
Posted 08 August 2011 - 03:31 AM

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others
Have you opened the site in FireFox and used the WebDeveloper addon to inspect element properties?
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#3
Whitey
Posted 08 August 2011 - 12:30 PM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
Never even heard of that.. What is that?

#4
WingedPanther
Posted 08 August 2011 - 02:45 PM

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others
Firefox is a web browser. I use the WebDeveloper plug and FireBug plugins to do debugging on JavaScript, HTML, and CSS. The combination of the two plugins is extremely useful.
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#5
Whitey
Posted 08 August 2011 - 03:20 PM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
lol @ the firefox is a web browser.. But i will look into it. Anyone else have a clue why this is happening.. I would like to know for knowledge purposes.

#6
WingedPanther
Posted 08 August 2011 - 04:48 PM

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others
I just looked at your site (now that I have a little time). You've got a mixture of pixel-based and % based heights. You also have a min-height value applied to only one element. What I did was used FireBug and selected div elements, with the Layout tab selected to the right.

On my computer, messageBody is much taller than fullContain. (354 px vs 450 px). I would suggest setting min-heights for all elements, taking padding and margins into account, for all elements or no elements. I'd also not use px units for height values unless they are headers.
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#7
Whitey
Posted 08 August 2011 - 05:43 PM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
Okay so let me get this straight.. if you use paddings and a height of 100% it adds to the height? So 100% + 10px padding? How would i go around that? Would i set a negative margin?

#8
WingedPanther
Posted 08 August 2011 - 06:11 PM

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others
Think about it like this. Suppose you have <div id="container"> that's 100 px tall. It contains <div id="content"> that's 100% tall with 5px padding on top and bottom. Then it will have a height of 90px.
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#9
Whitey
Posted 08 August 2011 - 06:16 PM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
Yes i understand that.. so im guessing the question i answered was incorrect from that statement..
Now, im still confused as why my divs are stretching further.. I went back and set all a min-height:450px;
but still stretched further..

#10
Whitey
Posted 09 August 2011 - 10:34 AM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
bump still cant figure this out

#11
WingedPanther
Posted 09 August 2011 - 12:20 PM

WingedPanther

    A spammer's worst nightmare

  • Moderators
  • 16,831 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others
The only thing that looks odd right now, is the Currently 0 Friends seems to be a bit high. Have you done a refresh of cache?
Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#12
Whitey
Posted 09 August 2011 - 01:43 PM

Whitey

    Programming Professional

  • Members
  • PipPipPipPipPip
  • 255 posts
Ive been recoding it alot and alot lol
Check it now, the text its stretching past the div.. =/
Back to JavaScript and CSS


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users



  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → JavaScript and CSS
IPB skins by Skinbox