Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 5 1 2 3 ... LastLast
Results 1 to 10 of 45
Like Tree2Likes

Thread: earn big bucks... well, 30 lol

  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    earn big bucks... well, 30 lol

    some of you might have seen my previous posts about a demo page im designing. well, the code on that got so messy that im starting from scratch on it, its probably all basic stuff for you but im still having problems with positioning.

    so heres how it goes. ill post the html and css but just to explain what i have done so far

    first part of the body...
    open and close a div called top-banner. this is just a banner with 100% width and 100px high. i have made it own div because while i want the banner to be 100% width i want the main content to be narrower.

    so then open a div called wrapper which holds the main content. in the css i add this to wrapper margin: 0 auto; width: 1072px; position: relative; top: -100px;.... top -100 is just to bring the content into the banner.

    so then i open a div called navbar and do a un-ordered list for the buttons, everything worked great closed that div off and opened the next which was for two more buttons to sit below the navbar at either end, another un-ordered list closed it and worked perfectly, positioned where i wanted it to be and all.

    now heres where im having the problem. the next part is the footer, ive played around with it a few different ways but i cant seem to get it to just sit at the bottom.

    the html is pretty straight forward, i opened a div called footer, within that div i opened another called footer-left and put in a list for image button links. ( i specified footer-left because i wanted to have the image buttons to sit to the left edge of the wrapper, and in footer-right i wanted to have normal text links like support contact etc...

    but it goes haywire from there on. so, ill post the html and the css (i have removed all the css for footer and only left the css for the individual image links.

    so if someone can do the css for me and explain it to me aswell i can pay 30 to your paypal straight away. i know if i keep at it i might get it to display right but the code will just be a mess and ill only want to start from scratch again. honestly thought i could do this lol

    and the arrangement of the divs for the second part, the footer isnt right as i had tried a few different things

    would be great if someone could do this in the next hour or so




    Ronald and Mlsiem, im gonna wrap this sh1t haha

    Code:
    <!doctype html>
    <html>
    <head>
    <title> Fused-ma </title>
    <link rel="stylesheet" href="../css/her.css">
    
    </head>
    
    <body>
    <div class="top-banner">
    </div>
    	<div class="wrapper">
    			<div class="navbar">
    				<ul>
    				    <li id="left"><a href="#"> BIO </a></li>
    				    <li><a href="#"> MEDIA </a></li>
    				    <li><a href="#"> CUSTOM </a></li>
    				    <li><a href="#"> BOOKINGS </a></li>
    				    <li><a href="#"> BLOG </a></li>
    				    <li id="right"><a href="#"> CAM </a></li>
    				</ul>
    			</div>
    	
    
    			<div class="user">
    				<ul>
    				    <li class="members"><a href="#"> members area </a></li>
    				    <li class="register"><a href="#"> register </a></li>
    				</li>
    			</div>
    	
    	
    			<div class="footer">
    				<div class="footer-left">
    					<ul>
    		                     	    <li class="facebook"><a href="#">  </a></li>
    		                    	    <li class="tumblr"><a href="#">  </a></li>
    		                     	    <li class="instagram"><a href="#">  </a></li>
    		                     	    <li class="twitter"><a href="#">  </a></li>
    			       	       </ul>
    		       	        </div>
    			</div>
    	
    	
    <div class="bottom-banner">
    </div>
    	
    </body>
    </html>
    Ronald Roe likes this.

  2.  

  3. #2
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    Code:
    /*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    /* browser reset */
    
    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, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    /* background image and body */
    
    html {
     background: url('../pics/her.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    }
    
    body {
    margin: 0 auto;
    width:100%;
    text-align: center;
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    /* banner is the background for the navbar design for navbar is not specified in here because this will be extended width */
    
    .top-banner {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100px;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(40,40,40)),to(rgb(90,90,90)));
    background:-moz-linear-gradient(top,rgb(40,40,40),rgb(90,90,90));
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    /* wrapper holds content for top of this page */
    
    .wrapper {
    margin: 0 auto;
    width: 1072px;
    position: relative;
    top: -100px;
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    /* here is where style and size of navbar is specified */
    
    /* anchor text decoration */
    
    a {
    font-size: 15px;
    text-decoration: none;
    font-family: arial;
    color: rgb(90,90,235);
    text-shadow: 0px 0px 1px grey;
    font-weight: 500;
    text-transform: uppercase;
    }
    
    
    /* sets the boxes to fill */
    .navbar a {
    display: block;
    width: 100%;
    height: 100%;
    }
    
    
    .navbar li {
    position: relative;
    top: 5px;
    margin: -2px;
    display: inline-block;
    height: 40px;
    border-left: 1px solid rgb(230,230,230);
    border-top: 1px solid rgb(230,230,230);
    border-right: 1px solid rgb(30,30,30);
    border-bottom: 1px solid rgb(30,30,30);
    box-shadow: 0px 0px 5px rgb(255,185,255);
    width: 175px;
    line-height: 40px;
    text-align:center;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(160,160,160)),to(rgb(223,223,223)));
    background:-moz-linear-gradient(top,rgb(160,160,160),rgb(223,223,223));
    }
    
    /* hover... */
    
    .navbar a:hover {
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(100,100,100,1)),to(rgba(50,50,50,1)));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(100,100,100,1) 0%,rgba(50,50,50, 1) 100%);
    color: rgb(230,230,230)
    }
    
    /* left and right end borders */
    #left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }
    
    #right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    /* this is where the design and position of the register and members buttons are specified */
    
    .user a {
    display: block;
    width: 100%;
    height: 100%;
    }
    
    .user a {
    color: white;
    }
    
    .user li {
    margin-top:20px;
    display: inline-block;
    height: 30px;
    border-left: 1px solid rgb(230,230,230);
    border-top: 1px solid rgb(230,230,230);
    border-right: 1px solid rgb(30,30,30);
    border-bottom: 1px solid rgb(30,30,30);
    box-shadow: 0px 0px 2px rgb(255,185,255);
    border-radius: 15px;
    width: 175px;
    line-height: 30px;
    text-align:center;
    color: white;
    
    }
    
    .user a:hover {
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgb(223,223,223)),to(rgb(160,160,160)));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(223,223,223,1) 0%,rgba(160,160,160, 1) 100%);
    color: rgb(90,90,235);
    -webkit-border-radius: 15px;  
    -moz-border-radius: 15px;  
    border-radius: 15px;
    }
    
    .members {
    float: left;
    }
    
    .register {
    float: right;
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    /* this is the background banner for the bottom of the page */
    
    .bottom-banner {
    position: absolute;
    margin: 0 auto;
    bottom: 0px;
    width: 100%;
    height:125px;
    line-height: 125px;
    border-top: 1px solid black;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(90,90,90)),to(rgb(40,40,40)));
    background:-moz-linear-gradient(top,rgb(90,90,90),rgb(40,40,40));
    }
    
    /*ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
    
    
    
    
    
    
    /* facebook button */
    
    .facebook a {
    position: relative;
    border-right: 1px solid black;
    border-bottom: 2px solid black;
    border-left: 1px solid rgb(230,230,230);
    border-top: 1px solid rgb(230,230,230);
    box-shadow: 0px 0px 5px rgb(230,230,230);
    border-radius: 14px;
    background: url("../pics/facebook.jpg");
    width:100px;
    height:100px;
    display:inline-block;
    }
    
    .facebook a:hover{
    background: url("../pics/facebook1.jpg");
    }
    
    
    
    
    
    /* tumblr button */
    
    .tumblr a {
    position: relative;
    border-right: 1px solid black;
    border-bottom: 2px solid black;
    border-left: 1px solid rgb(230,230,230);
    border-top: 1px solid rgb(230,230,230);
    box-shadow: 0px 0px 5px rgb(230,230,230);
    border-radius: 14px;
    background: url("../pics/tumblr.jpg");
    width:100px;
    height:100px;
    display: inline-block;
    }
    
    .tumblr a:hover {
    background: url("../pics/tumblr1.jpg");
    }
    
    
    
    
    
    /* instagram button */
    
    .instagram a {
    position: relative;
    border-right: 1px solid black;
    border-bottom: 2px solid black;
    border-left: 1px solid rgb(230,230,230);
    border-top: 1px solid rgb(230,230,230);
    box-shadow: 0px 0px 5px rgb(230,230,230);
    border-radius: 14px;
    background: url("../pics/instagram.jpg");
    width:100px;
    height:100px;
    display: inline-block;
    }
    
    
    
    
    
    /* twitter button */
    
    .twitter a {
    position: relative;
    border-right: 1px solid black;
    border-bottom: 2px solid black;
    border-left: 1px solid rgb(230,230,230);
    border-top: 1px solid rgb(230,230,230);
    box-shadow: 0px 0px 5px rgb(230,230,230);
    border-radius: 14px;
    background: url("../pics/twitter.jpg");
    width:100px;
    height:100px;
    display: inline-block;
    }
    
    .twitter a:hover {
    background: url("../pics/twitter1.jpg");
    }

  4. #3
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    what i wanted to do was have all the content in the wrapper, and just specify the footer stuff to the bottom, but when i couldnt manage that i tried closing off the wrapper div after the user div and opened a new one for the footer so thats why the divs for the second part might seem a bit haywire

  5. #4
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    p.s. i havent hosted the page, wanted to get it done and then host it. all the code is there but if its really necessary i can put it up somewhere on coleio.com

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    That's about $40USD, I'll take you up on this if you can wait for Saturday.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    noooooooo i need it within the next three hours if at all possible

    logged back on to wdf to see my thread has 4 replies. epic fail realising three are mine haha.

  8. #7
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    i only need the footer part done. if someone can do it so that the footer, navbar and user divs are all in the wrapper, and the footer-left owrks and is positioned on the left bottom of the page i can add the footer-right myself once i see it done and explained on the footer left.

    so all someone needs to do is the footer left part. oh and have a background wrap at the bottom that is the full width of the screen.

    thats it

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Apologies, then. No time to do it right now.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    something really weird just happenned. i got a second wind and went back at it. the main and obvious problem about specifying bottom 0px was i didnt set a height in the wrapper or body. so i did that then i added this to the css

    .footer {
    margin: 0 auto;
    width: 1072px;
    height: 125px;
    position: absolute;
    bottom: 0px;
    z-index: 2;
    }

    .footer-left ul li {
    display: inline-block;
    float: left;
    }

    this managed to move the image links to the bottom of the page. brilliant, but there was of course one problem. even though i have width set to the same as the wrapper, and margin to 0 auto, when i float left it goes to the very edge of the screen and not the specified wrapper?????????? can anyone explain this?

    and of course theres another one haha. so trying to de-bug this problem i noticed that i didnt close off the wrapper div, you can see it in the code above. so i did this and instead of it correcting the problem the image buttons repositioned to above the navbar? yup, on the top of the page, only about the bottom 10px are visible. so i tried to undo this by un-closing the wrapper div but they havent moved?????????

    HEED HELP PLEASE

  11. #10
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    this is f**ked up. i set the position to top 0px just to see what happens and it moved them down????? why would top 0 be lower than bottom 0?

    can anyone spot this mistake???


Page 1 of 5 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com