1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with layout

Discussion in 'CSS' started by Jeremy Benson, Jun 24, 2014.

0
  1. #1
    Hello,

    I've got a problem with my layout. Sure it's mathematical, or something. I'm working out a basic div layout, as a skeleton system I'm hoping to have a better suited design artist help with. I couldn't draw a stick man to save my life, lol.

    I've got a lime green navigation div that I'm trying to show under my profile pic in the top left. Not sure why it's not going in place. I'm hoping someone can give me some pointers...

    
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title> Profile</title>
<link href="mechanics/css/ffprofile.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="page">
   <div id="searchbar">
     <div id="searchbutton1"></div>
     <div id="searchbutton2"></div>
     <div id="searchbutton3"></div>
     <input id="searchfield" type="text" />
     <button id="searchbutton">Search</button>
   </div>

   <div id="profilepic"></div>

   <div id="profilewrapper">
  
     <div id="musicplayerwrapper" style="height:300px; background-color:fuchsia;">
       <div style="background-color: blue; height:300px; width:169px; float:left"></div>
       <div style="background-color: blue; height:300px; width:169px; float:right"></div>
       <div id="musicplayer" style="height:150px;">Music Player</div>
       <div id="tracklist" style="height:150px; width:632px;">Track List</div>
     </div>
  
   </div>

   <div id="feedwrapper">
     <div>Feed</div>
   </div>
  
   <div id="adwrapper">
     <div>Ad Space</div>
   </div>

   <div id="friendswrapper">
     <div>Friends</div>
   </div>
   <div id="navigation">asdas</div>
</div>
</body>
</html>
    HTML:
    #page{
   height:1252px;
   width:1332px;
}
#musicplayerwrapper{
 
 
 
}
#searchbar{
 
   height:40px;
   background-color:#CCFFFF;
}
#searchfield{
 
   padding:4px;
   margin-top:8px;
   margin-left:181px;
}
#searchbutton1{
 
   height:40px;
   width:40px;
   background-color:red;
   float:right;
 
}
#searchbutton2{
 
   height:40px;
   width:40px;
   background-color:green;
   float:right;
}
#searchbutton3{
 
   height:40px;
   width:40px;
   background-color:blue;
   float:right;
 
}
#profilewrapper{
 
   height:1200px;
   width:970px;
   margin-top:12px;
   margin-left:12px;
   background-color:green;
   float:left;
}
#profilepic{
 
   height:169px;
   width:169px;
   margin-top:12px;
   background-color:fuchsia;
   float:left;
}
#navigation{
   height:169px;
   width:169px;
   margin-top:12px;
   background-color:lime;
   float:left;
}
#feedwrapper{
   height:169px;
   width:169px;
   background-color:blue;
   float:right;
   margin-top:12px;
 
}
#adwrapper{
 
   height:169px;
   width:169px;
   background-color:maroon;
   float:right;
   margin-top:12px;
 
}
#friendswrapper{
 
   height:338px;
   width:169px;
   background-color:yellow;
   float:right;
   margin-top:12px;
 
}
    Code (CSS):
     
    Jeremy Benson, Jun 24, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, you aren't giving us enough content to say what the proper markup is, though it reeks of "DIV for nothing", "Classes for nothing", "ID's for nothing" ... and worst of all "worrying about what it looks like before you even have semantic markup of your content or a reasonable facsimile of future content"

    Though I don't see any "navigation div" or "profile pic" code anywhere in your example code.

    Your CSS is terrifying with all the widths and heights, 90% or so of those heights having no business in a layout. (like that massive 1200px of Christmas only knows what).

    I really can't make sense of what you're trying to accomplish with this, I'm just certain this isn't how you go about it as that's not how you build markup or how you build CSS... though it is very much what I expect to see when there's no content mated to a HTML 5 doctype. (not a fan)
     
    deathshadow, Jun 25, 2014 IP
  3. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #3
    ugh, I got excited about you post, but it wasn't helpful. I'm not trying to be rude, just could you help without only criticizing? If you're only going to post saying 100% what wrong without a slight sense of a fix it's a waste of time, and a bit abusive...

    I have no divs for nothing. I just lack proper understanding, all my divs are holding divs for placement reasons... The navigation code is in the css

    
#navigation{
   height:169px;
   width:169px;
   margin-top:12px;
   background-color:lime;
   float:left;
}
    Code (markup):
    and html here

    <div id="navigation">asdas</div>
    HTML:
    I have more content though :) I was working all night on it....Will post in next reply. Maybe you or someone could take a look and tell me how to fix what's wrong?
     
    Jeremy Benson, Jun 25, 2014 IP
  4. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #4
    I'm not sure what you mean by classes for nothing. What I did was made a class out of any element that was going to have the exact same style... I'm a newb teaching myself, so any help would be awesome...

    I really need help tightening this new design. It's cluttered, and can't get my nav div under my profile pic.

    I have my height set to the size of the page, and then 300 px high module divs which is what I want...they divide perectly by 1,2,3,4.... I need to keep that, but what dimensions were you saying were bad?

    
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title> Profile</title>
<link href="mechanics/css/ffprofile.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="page">
   <div id="searchbar">
     <div id="searchbutton1"></div>
     <div id="searchbutton2"></div>
     <div id="searchbutton3"></div>
     <input id="searchfield" type="text" />
     <button id="searchbutton">Search</button>
   </div>

   <div id="profilepic"></div>

   <div id="profilewrapper">
       
     <div class="modulewrapper" id="playerwrapper">
       <div id="mediaplayerdeck">
         <div id="playerdeckimage" style="background-image: url('mechanics/stock/mediaplayer/media_player_deck.jpg')">  
            
         </div>
         <div id="playertracklist"></div>    
       </div>
     </div>
    
     <div class="modulewrapper" id="basicinfowrapper">
       <div>    
         <span class="moduleheader">Basic Info</span>
       </div>
       <div id="infopic1" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
       <div id="infopic2" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
       <div id="infopic3" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
       <div id="infopic4" style="float:right; width:86px; height:120px; margin-right:43px; background-color:fuchsia;"></div>
       <div style="margin:12px;">
         <div class="basicinfolabel"><span id="stagenameoutput">Pressence</span></div>
         <div class="basicinfolabel"><span>Genre:</span><span id="genreoutput">Rap</span></div>
         <div class="basicinfolabel"><span>Latest Album:</span><span id="latestalbumoutput">Micinitus</span></div>
         <div class="basicinfolabel"><span>Website:</span><span id="websiteoutput">Home Site</span></div>
         <div class="basicinfolabel"><span>Next Show:</span><span id="nextshowoutput">Dec 15th, 2014: Rock Bottom Pub, Wyoming.</span></div>
         <div class="basicinfolabel"><span><b>Bio</b></span></div>
         <div id="biowrapper" style="">Welcome to my Famous4 profile. Hope you like the tracks here! Make sure to check out my latest album Micinitus.
         I just lit the mic on fire, so pull up a stump and lets melt some wax. Will being doing a show at the Rock Bottom pub in Wyoming. Be sure to check it out!
         I know it's gonna be a rock'n party. Hope we don't burn the place down.</div>
       </div>
     </div>
    
     <div class="modulewrapper" id="photoalbumwrapper">
       <div id="photoalbumheaderwrapper"><span id="photoalbumheader">Albums</span></div>
       <div><span  class="moduleheader">Images</span></div>
       <div id="photoalbumlist">
       <div id="albumlistheader">
         <div style="color:white; margin-left:18px; float:right;">Views</div>
         <div style="color:white;">Name</div>
       </div>
         <div class="albumpost">
           <div class="albumviewoutput">0</div>
           <div class="albumnameoutput">album</div>
         </div>
       </div>
     <div class="photoalbumimagecolum">
       <div class="albumimage"><img src="jeremy.jpg" style="height:120px; width:80px;"/></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
     </div>
     <div class="photoalbumimagecolum" style="height:130px; margin-top:2px;">
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
     </div>
   </div>
  
   <div class="modulewrapper" id="tourdateswrapper">
     <div><span id="tourdatesheader">Tour Dates</span></div>
     <div><span class="moduleheader">Tour Info</span></div>
     <div style="float:right;margin-right:20px;">
       <div style="margin-left:12px; margin-top:12px;">Rock Bottom Pub, Whyoming, Canada: Dec 15, 20014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
       <div class="tourdate">Rock Bottom Pub, Whyoming, Canada: Dec 15, 2014.</div>
     </div>
     <div style="background-color:aqua;height:120px; width:80px; margin-left:12px; margin-top:12px;">sad</div>
     <div style="margin-left:12px; margin-top:12px;"><em id="tournameoutput">The Rock Solid Tour.</em></div>
     <div style="margin-left:12px; margin-top:12px; width:340px;">Check out the rock solid tour with Flying J, and Aerobatic Kid.
     These shows are live as hell! You don't wanna miss the kick ass opening by Tom Bomb, the rapper from Detroit. He's got mad
     skills!</div>
   </div>
  
    
   </div>

   <div id="feedwrapper">
     <div>Feed</div>
   </div>
  
  
   <div id="adwrapper">
     <div>Ad Space</div>
   </div>


   <div id="friendswrapper">
     <div>Friends</div>
   </div>



</div>
   <div id="navigation">asdas</div>

</body>

</html>
    HTML:
    

#page{

   height:1300px;
   width:1332px;

}

.modulewrapper{

   height:300px;
   margin-top:20px;
   background-color:white;
}


#searchbar{
   
   height:40px;
   background-color:#CCFFFF;

}

#searchfield{
   
   padding:4px;
   margin-top:8px;
   margin-left:181px;

}

#searchbutton1{
   
   height:40px;
   width:40px;
   background-color:red;
   float:right;
   
}

#searchbutton2{
   
   height:40px;
   width:40px;
   background-color:green;
   float:right;
}

#searchbutton3{
   
   height:40px;
   width:40px;
   background-color:blue;
   float:right;
   
}


#profilewrapper{

   
   height:1200px;
   width:970px;
   margin-top:12px;
   margin-left:12px;
   float:left;
}


#profilepic{
   
   height:169px;
   width:169px;
   margin-top:12px;
   background-color:fuchsia;
   float:left;
}

#playerdeckimage{
   
   margin-left:169px;height:150px;width:632px;
   
}

#playertracklist{
   
   
   margin-left:169px; height:150px; width:632px; background-color:lime;
   
}

.basicinfolabel{
   
   margin-top:8px;   
   
}

#stagenameoutput{
   
   font-weight: bold;
   
}

#genreoutput{
   
   margin-left:4px;
}

#latestalbumoutput{

   margin-left:4px;
}

#websiteoutput{

   margin-left:4px;

}

#nextshowoutput{
   
   margin-left:4px;
   
}

#biowrapper{
   
   margin-top:8px;
}

#photoalbumwrapper{
   
   height:300px;

}

#albumlistheader{
   
   border-bottom: thin white dashed;
   
}

#photoalbumheaderwrapper{
   
   float:right;
   
}

#photoalbumheader{
   
   font-size:x-large;
   margin-right:124px;
   
}

.moduleheader{
   
   font-size:x-large;
   margin:12px;
   
}

#photoalbumlist{
   
   background-color:black;
   height:270px;
   width:200px;
   float:right;
   overflow:scroll;
   
}

.albumimage{
   
   background-color:lime;
   height:120px;
   width:80px;
   margin-left:12px;
   margin-top:12px;
   float:left;
   
}

.albumpost{

   color:white;
   
}

.albumviewoutput{

   margin-right:12px;
   float:right;
   color:white;

   
}

.albumnameoutput{
   
color:white;
   
}

.photoalbumimagecolum{
   
   height:130px;
   margin-top:2px;
   
}

#tourdateswrapper{
   
   height:300px;
   
}

#tourdatesheader{
   
   margin-right:274px;
   float:right;
   font-size:x-large;
   
   
}

.tourdate{
   
   margin-left:12px;
   margin-top:4px;
   
}

#navigation{

   height:169px;
   width:169px;
   margin-top:12px;
   background-color:lime;
   float:left;
}


#feedwrapper{

   height:169px;
   width:169px;
   background-color:blue;
   float:right;
   margin-top:12px;
   
}

#adwrapper{
   
   height:169px;
   width:169px;
   background-color:maroon;
   float:right;
   margin-top:12px;
   
}

#friendswrapper{
   
   height:338px;
   width:169px;
   background-color:yellow;
   float:right;
   margin-top:12px;
   
}
    Code (CSS):
     
    Last edited: Jun 25, 2014
    Jeremy Benson, Jun 25, 2014 IP
  5. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #5
    Jeremy,
    You have 2 problems here. The first has nothing to do with the position thing. If you don't want to hear criticism, then you need to pay someone to follow you around and tell you what you are doing is correct. Technical forums, by their nature are place where criticism abounds.

    The second problem is that styling is the last thing you do in web page development, not the first. You start with the content you just throw ir on a page without any concern of tagging, position, look and feel or even functionality. Once you have a black and white page full of content you can deal with structure and rough positioning. Then you make sure all the links work and the functions do what they are supposed to do. Then you are ready to style and deal with fine tuning the precise position; color combinations and special effects. It is unreasonable for you to expect others to understand your final vision of a page that is just a bunch of empty boxes.
     
    COBOLdinosaur, Jun 25, 2014 IP
  6. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #6
    true. I don't think I could work that way though. Just putting content on the page and then styling sounds really weird to me. I wouldn't know where to begin with that. I find it easier to work with divs, get them in place, and then fill them... I did a lot of work on this though, and changed a lot...

    I do have a question though. the search bar at the top of the page has come down about 12 px. I'm not sure why. It's above my page div and doesn't have a margin top style... Can you see why it came down on me?

    As a note about the criticism, I don't mind that, especially if it offers some kind of solution, but that was the second thread of mine he did nothing but complain in, in a matter of 2 minutes.... it's destructive criticism... it's against rules on some forums.

    <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Famous4 Profile</title>
<link href="mechanics/css/firefox/ffprofile.css" rel="stylesheet" type="text/css" />
<link href="mechanics/scripts/lib/css/perfect-scrollbar.css" type="text/css" />
<script src="mechanics/scripts/lib/jquery.js"></script>
<script type="text/javascript" src="mechanics/scripts/lib/jquery.slimscroll.js"></script>
<script type="text/javascript" src="mechanics/scripts/javascript/profilehelper.js"></script>
</head>
<body onload="set_scroll();">
   <div id="searchbar">
     <input id="searchfield" type="text" />
     <button>Search</button>
   </div>
<div id="page">
   <div id="leftcolumn">
     <div id="profilepicture">
   
     </div>
     <div id="navigation">
      <?php
         //Navigation for when on own profile.
      if($onOwnProfile)
         {
     
           echo '<div id="messagesnav">Messages&nbsp;<span>(<em>';
               //Add message count here.
               $numberformater->format_number($viewedUser->return_message_count());
           
           echo '</em>)</span></div>
             <div id="commentsnav">Comments&nbsp;<span>(<em>';
               //place comment totatl here.
               $numberformater->format_number($viewedUser->return_comments_analytic());
           echo '</em>)</span></div>
           <div id="friendsnav">Friends&nbsp;<span>(<em>';
            //Place friends total here.
            $numberformater->format_number($viewedUser->return_friends_analytic());
         echo '</em>)</span></div>
             <div  id="groupswrapper">
             <div id="groupsheader">Groups</div>
               <div id="groupslistwrapper">';
               //Add groups here.
         echo '</div>
         </div>
           <div id="pageswrapper">
         <div id="pagesheader">Pages</div>
         <div id="pageslistwrapper">';
           //Add pages here.
       echo' </div>
       </div>
         <div id="blurbswrapper">
         <div id="blurbsheader">Blurbs</div>
           <div id="blurbslistwrapper">';
           //Place blurbs here.
       echo'</div>
       </div>
     </div>';
 
      }else{

      }
   
     ?>
   
     </div>
   </div>

   <div id="rightcolumn">
     <div id="feed" style="">Feed</div>
     <div id="adspace" style=""></div>
     <div id="topfriends" style=""></div>
   </div>
   <div id="profilewrapper">
<div id="mediaplayerwrapper">
            <div id="basicinfo">
                <span class="moduleheader">Basic Info</span><br />
                <span id="usernamelabel"><b id="usernameoutput"><?php $viewedUser->echo_username(); ?></b></span>
                <div class="basicinfolabel">
                    <span>Genre:</span><span class="basicinfooutput" id="genreoutput"><?php $viewedUser->echo_music_genre(); ?></span>
                </div>
                <div class="basicinfolabel" >
                    <span>Country:</span><span class="basicinfooutput" id="countryoutput"><?php $viewedUser->echo_country(); ?></span>
                </div>
                <div class="basicinfolabel">
                    <span>City:</span><span class="basicinfooutput"><?php $viewedUser->echo_city(); ?></span>
                </div>
                <div class="basicinfolabel">
                    <span>Website:</span><span  class="basicinfooutput" id="websiteoutput"><a href="<?php $viewedUser->echo_website_url(); ?>" target="_blank"><?php $viewedUser->echo_website_name(); ?></a></span>
                </div>
                <div class="basicinfolabel">
                    <span>Next Show</span><br />
                    <span id="nextshowoutput"><?php $viewedUser->echo_next_musicshow() ?></span>
                </div>
                <div id="biolabel">
                    <span>Bio</span>
                </div>
                <div id="biooutput"><?php $viewedUser->echo_bio(); ?></div>
            </div>
            <div id="mediaplayer">
                <div id="mediaplayerdeck">
                        <div style="font-size:x-large;">Music</div>
                        <div style="height:60px; margin-top:10px; background-color:black; border-bottom:thick darkblue solid; border-top:thick darkblue solid;">
                            <input id="mediaplayerscrub" style="position:absolute;margin-top:12px;" type="range" value="0" max="" />
                        </div>
                        <div id="totalplaystrip" style="margin-top:9px;"><span>Total Plays</span><span id="totalplaysoutput"><?php $numberformater->format_number($viewedUser->return_total_audioplays()); ?></span></div>
                </div>
                <div id="mediaplayertracklist">
                    <div id="trackinformation">
                        <em id="tracktitleoutput"></em>
                    </div>
                    <div id="tracklistwrapper">
                        <div id="tracklist">
                            <div id="trackwrapper">
                            <div id="trackplaysoutput">
                                <span>Plays:</span><span id="playsoutput"></span>
                            </div>
                            <div id="trackartistinfo">                        
                                <span>Cool Flow Down The Great River Bonny</span><br />
                                <span>Pressence Ft. Rusty.</span>
                            </div>
                            </div>                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div  class="modulewrapper" id="videoswrapper">
            <div id="videolistwrapper">
                <div id="videolistheader">Videos</div>
                <div id="videosearch"><input id="videosearchinput" type="text"/><button id="videosearchbutton">search</button></div>
                <div id="videoplayerlistwrapper">
                    <div id="videolist">
                                                                    
                    
                    </div>
                </div>
            </div>
            <span class="moduleheader">Videos</span><br />
            <div id="videoplayerwrapper">
                <video id="videoplayercontrols" controls>
                    <video ></video>
                </video>
            </div>
        </div>
    
        <div  class="modulewrapper" id="photoswrapper">
            <div id="albumlistwrapper">
                <div id="albumlistheader">Albums</div>
                <div id="albumsearch"><input id="albumsearchinput" type="text"/><button id="albumsearchbutton">search</button></div>
                <div id="albumlistbody">
                    <div id="albumlist">
                    
                    </div>
                </div>
            </div>
            <div id="photoalbumsheader">Photos</div>
            <div id="imagesrow1">
                <div class="albumimage" id="albumimage1"></div>
                <div class="albumimage" id="albumimage2"></div>
                <div class="albumimage" id="albumimage3"></div>
                <div class="albumimage" id="albumimage4"></div>
                <div class="albumimage" id="albumimage5"></div>
                <div class="albumimage" id="albumimage6"></div>
            </div>
            <div id="imagesrow2">
                <div class="albumimage" id="albumimage7"></div>
                <div class="albumimage" id="albumimage8"></div>
                <div class="albumimage" id="albumimage9"></div>
                <div class="albumimage" id="albumimage10"></div>
                <div class="albumimage" id="albumimage11"></div>
                <div class="albumimage" id="albumimage12"></div>
            </div>
        </div>

        <div class="modulewrapper" id="tourdateswrapper">
            <div id="tourdatesheader">Tour Dates</div>
            <div class="moduleheader">Tour Info</div>
            <div id="tourdateslistwrapper">
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(1); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(2); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(3); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(4); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(5); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(6); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(7); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(8); ?></div>
                <div class="tourdate"><?php $viewedUser->echo_show_byindex(9); ?></div>
            
            </div>
            <div id="tourimage"></div>
            <div id="tournameoutputwrapper"><em id="tournameoutput"><?php $viewedUser->echo_tour_name(); ?></em></div>
            <div id="tourinfooutput"><?php $viewedUser->echo_tour_info(); ?></div>
        </div>
</div>
</div>

</html>
    HTML:
    #leftcolumn{

    height:1360px;
    width:169px;
    margin-left:12px;
    margin-bottom:12px;
    float:left;

}
#profilepicture{
    height:169px;
    background-color:aqua;
}
#feed{

    height:169px;
    background-color:aqua

}
#adspace{

    height:169px;
    margin-top:12px;
    background-color:green;

}
#topfriends{

    height:338px;
    margin-top:12px;
    background-color:yellow;

}
#navigation{

    margin-top:12px;
}
#rightcolumn{

    float:right;
    width:169px;
    height:1360px;
    margin-right:12px;
   
}
#searchbar{

    height:40px;
    background-color:azure;
    margin-bottom:12px;

}
#searchfield{

    margin-top:8px;
    margin-left:193px;
    margin-right:8px;
    padding:4px;

}
#addusernav {
    border-top:thin darkblue solid;
    border-bottom:thin darkblue solid;

}
#messageusernav{
    border-bottom:thin darkblue solid;

}
#messagesnav{

    border-bottom:thin darkblue solid;

}
#commentusernav{

    border-bottom:thin darkblue solid;

}
#commentsnav{
    border-bottom:thin darkblue solid;
}
#profilewrapper{

    height:1360px;
    width:946px;
    margin-left:12px;
    float:left;

}
#usernamelabel{

    margin-left:4px;
}
#friendsnav{

    border-bottom:thin darkblue solid;
}
#groupswrapper{

    margin-top:12px;
}
#groupsheader{

    border-bottom:thin darkblue solid;
}
#pageswrapper{
    margin-top:12px;
}
#pagesheader{

    border-bottom:thin darkblue solid;

}
#blurbswrapper{

    margin-top:12px;

}
#blurbsheader{

    border-bottom:thin darkblue solid;

}
.navcountoutput{
    margin-left:4px;
}
.basicinfolabel{

    margin:4px;

}
.basicinfooutput{

    margin-left:8px;


}
.modulewrapper{

    height:300px;
    border:thin black solid;
    background-color: #F5F5F5;
    margin-top:12px;

}
.moduleheader{
    font-size:x-large;
    margin-left:4px;
    margin-bottom:12px;
    height:30px;
}
/* Music Profile Extended */
/* Music Profile Extended */
/* Music Profile Extended */
/* Media Player Starts Here */
#mediaplayerwrapper{
    height:300px;
}
#totalplaysoutput{

    margin-left:4px;

}
#trackwrapper{
    height:40px; background-color:purple;
}
#trackplaysoutput{
    float:right;
    margin-top:8px;
    margin-right:12px;
}
#basicinfo{
    height:300px;
    width:437px;
    background-color: #F5F5F5;
    border:thin black solid;
    float:left;
}
#usernameoutputwrapper{

    margin-top:12px;
}
#basicinfolabel{
    margin-top:8px;
}
#biolabel{
    margin-top:12px;
    margin-left:4px;

}
#biooutput{

    margin:4px;
}
#mediaplayer{

    height:300px;
    width:493px;
    border:thin black solid;
    background-color: #F5F5F5;
    float:right;
}
#mediaplayerdeck{

height:150px;
}
#trackinformation{

    height:20px;
    background-color:darkgray;
}
#mediaplayertracklist{
    height:150px;
}
#trackartistinfo{

    border-bottom:thin black solid;

}
#tracklistwrapper{

    height:130px;
    overflow:hidden;
}
#tracklist{

    height:130px;
}
#mediaplayerscrub{
}
/* Tour Dates Start Here  */
#tourdatesheader{

    font-size:x-large;
    float:right;
    margin-right:4px;

}
#tourimage{

    height:120px;
    width:90px;
    margin-left:4px;
    background-color:aquamarine;
}
#tournameoutputwrapper{

    margin-top:8px;
    margin-left:4px;
    margin-bottom:8px;
}
#tourinfooutput{

    width:360px;
    margin-left:4px;
}
#tourdateslistwrapper{

    float:right;
}
.tourdate{

    margin-top:4px;
    font-size:14px;
}
/* Video Module */
#videolistwrapper{
    height:299px;
    width:212px;
    float:right;
    background-color: #F5F5F5;
    border:thin black solid;

}
#videolistheader{

    height:30px;
    font-size:x-large;
    background-color:darkgray;
    border:thin black solid;

}
#videosearch{

    height:28px;
}
#videosearchinput{
    margin-left:3px;
    padding:2px;
}
#videosearchbutton{

    margin-left:8px;
    padding:2px;
}
#videoplayerwrapper{

    height:212px;
    width:345px;
    margin-top:12px;
    margin-left:100px;
}
#videoplayercontrols{

    height:212px;
    width:345px;
}
#videolistingwrapper{

    border-bottom:thin black solid;
    margin-top:2px;
}
#videolist{
height:242px;
}
#videoplayeroutput{

    margin-right:2px;
}
/* Photos Module  */
#albumlistwrapper{
    height:299px;
    width:212px;
    float:right;
    background-color: #F5F5F5;
    border:thin black solid;

}
#albumlistheader{

    height:30px;
    font-size:x-large;
    background-color:darkgray;
    border:thin black solid;

}
#albumsearch{

    height:28px;
}
#albumsearchinput{

    margin-left:3px;
    padding:2px;
}
#albumsearchbutton{

    margin-left:8px;
    padding:2px;
}
#photoalbumsheader{

    height:30px;
    margin-left:4px;
    font-size:x-large;

}
#albumlistbody{
    height:242px;
}
#albumlist{

    height:242px;

}
#imagesrow1{

    width:720px;
    height:135px;
}
#imagesrow2{

    height:135px;
    width:720px;

}
.albumimage{

    height:120px;
    width:90px;
    margin-top:8px;
    margin-left:25px;
    background-color:lime;
    float:left;
}
    Code (CSS):
     
    Last edited: Jun 30, 2014
    Jeremy Benson, Jun 30, 2014 IP
  7. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #7
    The 12px can be coming from anywhere. Without a link to a real page where I can do diagnostics all I can do is guess that it has something to do with the onload function you are running on the body.

    All you have there is a collection of meaningless tags for a structure that may or may not be valid, and where there is nothing to style; along with some generation code. As long as you insist on working backwards about all I can offer is that you bring it back at the point where a page exists instead of just a collection of tags that you think might be the structure for some undefined content.

    What you are doing is like building a house starting with the roof instead of the foundation.

    Cd&
     
    COBOLdinosaur, Jun 30, 2014 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    ... and that's a LOT of your problem. You have your head in the "presentation" way of thinking, and that's not what HTML is for or how sites should be developed for one simple reason -- there's more to a website than what it happens to look like styled in front of you!

    Not everyone even HAS CSS, or will see your screen layout. Not everyone has screens big enough for your layout to fit, or have screens small enough that a fixed width is anything but a crappy little stripe.

    Mobile, 4K displays, screen readers, braille readers, search engines, people intentionally blocking images becuase they're on metered connections, people intentionally blocking javascript out of distrust -- a well written properly built website has to account for ALL of that! It's why you start out with content or a reasonable facsimile of future content, mark it up semantically (which means no DIV or SPAN at this point), THEN create your layoutS (yes, plural) with CSS adding DIV or SPAN when, and only when needed.

    Shoe-horning content into fixed size containers is just the road to failure. That's why off the shelf templates are one giant scam used to prey on the ignorance of people who don't know any better, why dicking around drawing goofy pictures in Photoshop or Illustrator is a completely back-assward approach to development, and why a bunch of empty DIV is also "gibberish" to real developers. DIV don't mean anything, and should only be added AFTER content.

    It's called progressive enhancement. You write the content (or a facsimile of future content, lorem ipsum good as any) as if HTML doesn't even exist in a logical order so if HTML fails or doesn't apply default styling, the page is still useful. You then mark it up semantically with tags saying what the content IS (headings, paragraphs, lists, forms) so that "user agents" (browsers, printers, search engines) know what things are and can best customize the default appearance to the capabilities of the device it's being shown on. Then and only then do you start adding DIV and your CSS to create your layoutS -- yes, plural -- said layoutS should be three things:

    1) ELASTIC - auto-adjusting to font size preferences by using % or EM font sizes and EM widths on any 'fixed' containers

    2) SEMI-FLUID -- the entire layout adjusting to fill as much screen width as possible, up to a certain max-width so that long lines of text aren't hard to read.

    3) RESPONSIVE -- adding / removing columns and adjusting other layout elements so the page can best fit the available space.

    ... which is why px fonts are inaccessible trash, why fixed px width layouts and elements are inaccessible trash, and why not using semantic markup is a bunch of pointless gibberish.

    From there you could then further enhance the page with scripting, but keep in mind the unwritten rule of JavaScript: "If you can't make a fully functional page without JavaScript FIRST, you likely have no business adding scripting to it."

    Progressive enhancement means you get the most important thing a page can have -- graceful degradation. As fancy bits of tech that may or may not exist on the visitors machine fail, the page remains useable and functional. It's good for users, good for search, and anyone telling you otherwise is packing you so full of sand you could change your name to Sahara!

    Mind you there are a LOT of sleazy scam artists out there who will argue every one of those points, just look at the idiotic halfwit garbage vomited up at template whorehouses like ThemeForest and TemplateMonster for examples of that in action -- laundry lists of how not to build a website held up by ignorant fools as examples of great design!

    Well, it means you've missed one of the biggest advantages of CSS selectors -- if every element sharing the same tagName inside a parent container is getting the same style, NONE of them need classes!

    Let's use your code from the first post as an example:
           <div style="margin:12px;">

				 <div class="basicinfolabel"><span id="stagenameoutput">Pressence</span></div>

				 <div class="basicinfolabel"><span>Genre:</span><span id="genreoutput">Rap</span></div>

				 <div class="basicinfolabel"><span>Latest Album:</span><span id="latestalbumoutput">Micinitus</span></div>

				 <div class="basicinfolabel"><span>Website:</span><span id="websiteoutput">Home Site</span></div>

				 <div class="basicinfolabel"><span>Next Show:</span><span id="nextshowoutput">Dec 15th, 2014: Rock Bottom Pub, Wyoming.</span></div>

				 <div class="basicinfolabel"><span><b>Bio</b></span></div>

				 <div id="biowrapper" style="">Welcome to my Famous4 profile. Hope you like the tracks here! Make sure to check out my latest album Micinitus.

				 I just lit the mic on fire, so pull up a stump and lets melt some wax. Will being doing a show at the Rock Bottom pub in Wyoming. Be sure to check it out!

				 I know it's gonna be a rock'n party. Hope we don't burn the place down.</div>

			 </div>

		 </div>
    Code (markup):
    First, try NOT to use the STYLE attribute, even during development. As a tag it should be made obsolete and removed from browser support entirely, as an attribute it should be deprecated, the ONLY time it should be used is when a value like WIDTH is being used to convey meaning (like on a bar graph). Other than that, Nancy Reagan it!

    All those 'basicInfolabel' likely have no legitimate reason to even exist in your code. You put ID's or classes on what's DIFFERENT inside a container, not on elements that are the same!

    Though it LOOKS like you have elements that should semantically be headings... and paragraphs... maybe a definition list...

    I'm guessing slightly as again, I'm not 100% what's what for your data here, but:
     
<div class="info">

	<h2>Pressence</h2>
	
	<dl>
		<dt>Genre:</dt> <dd>Rap</dd>
		<dt>Latest Album:</dt> <dd>Micinitus</dd>
		<dt>Website:</dt> <dd>Home Site</dd>
		<dt>Next Show:</dt> <dd>Dec 15th, 2014: Rock Bottom Pub, Wyoming.</dd>
	</dl>
	
	<div>
		<h3>BIO</h3>
		<p>
			Welcome to my Famous4 profile. Hope you like the tracks here! Make sure to check out my latest album Micinitus.
		</p><p>
			I just lit the mic on fire, so pull up a stump and lets melt some wax. Will being doing a show at the Rock Bottom pub in Wyoming. Be sure to check it out!
		</p><p>
			I know it's gonna be a rock'n party. Hope we don't burn the place down.
		</p>
	</div>
	
<!-- .info --></div>
    Code (markup):
    Semantic markup -- saying what things ARE, NOT what they look like. There are MORE than enough hooks in that to style it pretty much any way you want... and it has logical document structure... well, assuming your logo/site title is a H1 and there's no heading candidate before that in the data. Remember, h1 is the heading under which all content of the page is subsections, h2 indicate the start of a subsection of the h1, H3 are the start of subsections of the H2 preceeding them, and so forth -- while HR (horizontal rule) doesn't mean "draw a line on the screen", it means a change in topic where a numbered heading is unwanted/unwarranted.

    Which is why skipping over heading numbers is gibberish.

    The use of a DL there is stretching the meaning of "definition list", "term" and "definition" slightly, but it's become acceptable practice and is one of the cleanest ways to style such data. (though technically a table might be more accurate meaning-wise!)

    SPAN and DIV have no semantic meaning, they are "semantically neutral", they simply imply that styling may be applied -- which is why they should only be used to group elements as needed!

    This:
         <div class="photoalbumimagecolum">
       <div class="albumimage"><img src="jeremy.jpg" style="height:120px; width:80px;"/></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
     </div>
     <div class="photoalbumimagecolum" style="height:130px; margin-top:2px;">
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
       <div class="albumimage"></div>
</div>
    Code (markup):
    is another example of classes for nothing. You've got a perfectly good DIV around them with the class "photoalbumimagecolumn", so why do the child DIV need classes?

    .photoalbumimagecolumn div {}

    would be the same in your CSS as:

    .albumimage

    So there's no reason for that .albumimage class to even be in the markup. Though you probably shouldn't have DIV inside them and instead just style a bunch of IMG tags directly (though that hinges on what you're doing for style) and I'm not convinced those should be separate parent DIV either since inline-block or float stacks should be able to auto-format those. It's what a dearly departed friend of mine used to compare to George Carlin's comedy skit about abortion where "Not every ejaculation deserves a name" -- not every element needs a class on it!

    I have the feeling that if I was writing that...

    <div class="photoAlbum">
	<img src="images/jeremy.jpg" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
	<img src="images/test.png" alt="describe this image!" height="120" width="80" />
<!-- .photoAlbum --></div>
    Code (markup):
    Would quite possibly be what I'd have for markup for that entire block of 14 images. Unless you get REALLY complex with your formatting and appearance, there's damned little you can do to a DIV you can't do to a IMG... or a Anchor... or a paragraph... or a list...

    Which is why semanic markup should be your first step, not something you shoe-horn in later like trying to squeeze a fat woman's size 14 into a size 6 shoe.

    In teaching yourself, you've dived straight for what it looks like, neglecting all the stepping stones you should have in place LONG before you even THINK about that. NOT really your fault, a lot of the industry operates that way and a lot of the web-rot tutorials think that way because to be frank, (when am I ever anything but) most people STILL haven't extracted their craniums from 1997's rectum.

    The end result being buggy, broken, slow loading painful to use sites -- and making it very difficult for people just starting out to learn how to do anything properly, if at all.

    ... and stop declaring heights on major content areas! Elements will automatically enlarge and contract height-wise to fit whatever you put in them; you fix the height and you're either tying your hands when you add/remove content later, or making yourself have to dive into the style just to change things around -- much less that if the content enlarges due to elastic design, a fixed height (particularly in pixels) just results in a broken layout! Let 'flow' do it's job and auto-size things. Micro-managing things like height is just ASKING for a broken page on all but the most specific of static elements. (like a site logo and... uhm... well, there's... uhm... there's your site logo.)

    No offense, but I find that limp, soft, wussy "oh that's destructive criticizm" crap to be more offensive than your average Andrew Dice Clay album. The "forums" that forbid it usually run by people more interested in "don't offend anyone" than they are "making things better"; usually because they're trying to sell books filled with halfwit broken bullshit by the trinity of herpaderp; Yank, Meyer and Irish. You see those names, do yourself a HUGE favor and ignore ANYTHING they have to say about... well, ANYTHING.

    Criticism by it's very nature should be destructive, so you can strip things down to the bone and then build them up stronger. Anything else is a bunch of lame "Wah, I don't want to hear this" bull that to be frank, (when am I anything but) means the people involved should go back to singing kumbaya around the drum circle as the world burns around them. Slapping the rose coloured glasses on people's heads, patting them on the back and leading them down the garden path to failure is NOT a sound battle plan -- no matter how many thin skinned limp-wristed wussies at places like Sitepoint might try to tell you otherwise.

    Though in the case of both the posts I've made to your threads I said what's wrong -- you either don't know enough to understand it, or just don't want to hear it.

    Sorry, pet peeve. I have zero tolerance for the whole "if you can't say anything nice" crowd, as that type of status quo FTMFW idiocy is why things usually go down the toilet... I really wonder what the hell is wrong with people nowadays.

    I really do think it is why so many things are going to hell in a handbasket; though that could just be a mix of being a New England Yankee, a period of military service including OCS and instructor training, and learning to do business in the late '80's and early '90's. You know, places where people actually have a pair instead of having to borrow Hillary's.

    I would actually say it's more like trying to hang wallpaper before an architect was hired.
     
    deathshadow, Jun 30, 2014 IP
  9. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #9
    Thanks for all the info. I've saved the text so I can read it again. I skimmed through, so I know there's plenty to learn from there. I actually spent some time learning about css selectors, and found there's a lot I didn't know...some of what you mentioned. Some you mentioned...I didn't know about selecting child elements, and selecting -nth-child(not sure if that's exactly right.)

    The only thing I'm not sure if I'd bother with is people with weak browser capabilities...most people will be on computers for my target..it's a kind of a media happy site... I don't know why anyone would bother tailoring to a few thousand people with text only browsers anyway..
     
    Jeremy Benson, Jul 1, 2014 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    You mean like Google?

    You're looking at this backward. You don't do extra for limited capability UAs, you make a working html document, then add the bells and whistles. There is no 'extra' work to support a text-only UA if you even half-assedly code your page with good sense. To do that does at least requires that you actually learn to write well structured, semantic html; but you were going to do that anyway, right?

    cheers,

    gary
     
    kk5st, Jul 1, 2014 IP
  11. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #11
    Not likely :p, but I'm trying, lol.
     
    Jeremy Benson, Jul 2, 2014 IP
  12. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #12
    If you do not support text only browsing, then you will limit your Search engine traffic. Search engine indexing is done by crawlers that are "blind". They cannot see the layout, the graphics, or the special effects. They work very much like the screen readers used by the visually impaired. If the markup is broken, non-semantic, or invalid the crawler may not fully index the page, and may even abandon it. If you are doing stuff with javascript and CSS that is fine, but the crawlers will not "see" because for the most part; they can't process JS or CSS. So if you want new people to find the site through search engines, you better think about building a "blind" friendly page first and then add the eye candy, "cool" presentation, and special effects. Plus it does not matter what your target audience is; they will only return if you have the content they want. They are not going to make regular visits just because the site looks good.
     
    COBOLdinosaur, Jul 2, 2014 IP