#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    1
    Rep Power
    0

    Need up with CSS coding


    It's been awhile since I have done web design and I am creating a portfolio for a friend, I managed to create a basic design, however, I am trying to push the content to the left towards the menu that is on the left.

    If you need a visual, I can provide it.

    If you need to take a look at the coding, please reply and I will PM it to you too.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Please post the related code on here
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, brittne03.

    As you (may have) found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    An annotated screenshot can be helpful in answering questions. However, there is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.

    You're building a public website, right, so why do you want to keep the code private? (If you have any database usernames and passwords in your code, you should replace them with "****".) Besides, new members have an initial probation period where they aren't allowed to send PMs (until they have made 10 posts).

    When posting code, please place it between [code][/code] tags.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    Code:
    /* Resets
    --------------------------------------------------------------------------------*/
    
    ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    	margin: 0;
    	padding: 0;
    }
    
    ul {
    	list-style: none;
    }
    
    fieldset {
    	border: 0;
    }
    
    a img {
    	border: 0;
    }
    
    .clear {
    	clear: both;
    }
    
    /* General Styling and Structure
    --------------------------------------------------------------------------------*/
    
    body {
    	background-color: #666666;
    	background: #424242 center repeat-y;
    	font-family: "Georgia", arial, sans-serif;
    	font-size: 12px;
    	color: #aaa;
    	line-height: 1.5em;
    	margin: 0;
    	padding: 0;
    }
    
    p {
    	line-height: 1.5;
    	color: #000000;
    	font-size: 14px;
    	padding: .5em 0;
    }
    
    h1 {
    	color: #000000;
    	font-size: 30px;
    	font-style: italic;
    	padding: .5em 0 .2em 0;
    }
    
    h2 {
    	font-size: 24px;
    	font-weight: normal;
    	font-family: "Georgia", arial, sans-serif;
    	color: #ffffff;
    	line-height: 1.5;
    	padding: .5em 0 .2em 0;
    }
    
    blockquote {
    	font-style:italic;
    	border-left:4px solid #000000;
    	margin:10px 0 10px 0;
    	padding-left:20px;
    	line-height:1.5;
    	color:#888;
    }
    
    #wrapper {
    	width: 960px;
    	margin: 0 auto;
    }
    
    #container {
    	width: 960px;
    }
    
    #content {
    	width: 717px;
    	min-height: 500px;
    	_height: 500px;
    	padding: 10px 0 15px 0;
    
    }
    
    a {
    	color: #000000;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #000000;
    }
    
    #leftcolumn {
    	float: left;
    	width: 204px;
    	padding: 104px 0 0 0px;
    	position:absolute;
    	left:40px;
    }
    
    #rightcolumn {
    	float: left;
    	width: 717px;
    	padding: 0px 0 0 0px;
    	
    	
    }
    
    #header {
    	width: 717px;
    	border-bottom: 1px #000000 dotted;
    }
    
    #logo {
    	font-size: 30px;
    	font-style: italic;
    	margin: 24px 0;
    }
    
    #logo,
    #logo a {
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    #banner {
    	padding: 20px 0;
    	border-bottom: 1px #000000 dotted;
    }
    
    #banner.noborder {
    	border-top: 1px dotted #000000;
    	border-bottom: none;
    	padding-bottom: 0;
    }
    
    /* Navigation
    --------------------------------------------------------------------------------*/
    
    #leftcolumn ul {
    	float: right;
    	position: relative;
    	right: 10px;
    }
    
    #leftcolumn ul li {
    	position: relative;
    	margin: 5px 0 0 0;
    	padding-right: 160px;
    }
    
    #leftcolumn ul li a {
    	position: relative;
    	color: #ffffff;
    	width: 100px;
    	min-height: 33px;
    	display: block;
    	font-family:'Journal';
    	font-size: 20px;
    	font-style: italic;
    	text-align: right;
    	text-decoration: none;
    	padding: 8px 17px 0 0;
    }
    
    #leftcolumn ul li#active a,
    #leftcolumn ul li a:hover {
    	background: #000000 no-repeat;
    	_background: none;
    	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='files/theme/navbg.png', sizingMethod='crop');
    }
    
    /* Navigation Drop-Down Menu Customization
    --------------------------------------------------------------------------------*/
    
    #wsite-menus .wsite-menu li a {
    	background: #333333;
    	border-top: 1px solid #4b4b4b;
    	border-right: 1px solid #4b4b4b;
    	border-bottom: 0 solid #4b4b4b;
    	border-left: none;
    	padding: 5px 0 5px 10px;
    	color: #cccccc;
    }
    
    #wsite-menus .wsite-menu li a:hover {
    	background: #4f4e4e;
    	color: #fff;
    }
    
    /* Header Area
    -------------------------------------------------------------*/
    
    #header {
    	width: 100%;
    	height: 90px;
    }
    
    #header,
    #header table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    #header td {
    	vertical-align: middle;
    	text-align: left;
    }
    
    #logo {
    	padding: 15px 0;
    	line-height: 110%;
    }
    
    #header-right {
    	padding: 0 0 0 0px;
    }
    
    #header-right table {
    	width: 1px;
    }
    
    #header-right table,
    #header-right .search,
    #header-right .wsite-search {
    	clear: right;
    	float: right;
    }
    
    #header-right td {
    	padding: 0;
    }
    
    /* TOP RIGHT: Phone Number
    --------------------------------------------------------------------------------*/
    
    #header-right .phone-number .wsite-text {
    	font-family: arial;
    	color: #fff;
    	font-size: 14px;
    	font-weight: bold;
    	text-decoration: none;
    	display: block;
    	white-space: nowrap;
    	margin: 5px 0 5px 10px;
    }
    
    /* TOP RIGHT: Content Area
    --------------------------------------------------------------------------------*/
    
    #header-right .wsite-social {
    	margin: 5px 0 5px 10px;
    	vertical-align: middle;
    }
    
    
    .wsite-social-item {
    	width: 20px;
    	height: 20px;
    	margin: 0 0 0 3px;
    	background-image:url(social-darkorange.png);
    }
    
    .wsite-social-facebook {background-position:0 0;}
    	.wsite-social-facebook:hover {background-position:0 -20px;}
    	.wsite-social-facebook:active {background-position:0 -40px;}
    .wsite-social-pinterest {background-position:-20px 0;}
    	.wsite-social-pinterest:hover {background-position:-20px -20px;}
    	.wsite-social-pinterest:active {background-position:-20px -40px;}
    .wsite-social-twitter {background-position:-40px 0;}
    	.wsite-social-twitter:hover {background-position:-40px -20px;}
    	.wsite-social-twitter:active {background-position:-40px -40px;}
    .wsite-social-linkedin {background-position:-60px 0;}
    	.wsite-social-linkedin:hover {background-position:-60px -20px;}
    	.wsite-social-linkedin:active {background-position:-60px -40px;}
    .wsite-social-mail {background-position:-80px 0;}
    	.wsite-social-mail:hover {background-position:-80px -20px;}
    	.wsite-social-mail:active {background-position:-80px -40px;}
    .wsite-social-rss {background-position:-100px 0;}
    	.wsite-social-rss:hover {background-position:-100px -20px;}
    	.wsite-social-rss:active {background-position:-100px -40px;}
    .wsite-social-flickr {background-position:-120px 0;}
    	.wsite-social-flickr:hover {background-position:-120px -20px;}
    	.wsite-social-flickr:active {background-position:-120px -40px;}
    .wsite-social-plus {background-position:-140px 0;}
    	.wsite-social-plus:hover {background-position:-140px -20px;}
    	.wsite-social-plus:active {background-position:-140px -40px;}
    .wsite-social-vimeo {background-position:-160px 0;}
    	.wsite-social-vimeo:hover {background-position:-160px -20px;}
    	.wsite-social-vimeo:active {background-position:-160px -40px;}
    .wsite-social-yahoo {background-position:-180px 0;}
    	.wsite-social-yahoo:hover {background-position:-180px -20px;}
    	.wsite-social-yahoo:active {background-position:-180px -40px;}
    .wsite-social-youtube {background-position:-200px 0;}
    	.wsite-social-youtube:hover {background-position:-200px -20px;}
    	.wsite-social-youtube:active {background-position:-200px -40px;}
    
    /* TOP RIGHT: Search Box
    --------------------------------------------------------------------------------*/
    
    #header-right .wsite-search {
    	margin: 5px 0 5px 10px;
    	vertical-align: middle;
    }
    
    #header-right .wsite-search .wsite-search-input {
    	float: left;
    	width: 146px;
    	height: 21px;
    	border: none;
    	padding: 6px 7px 10px 7px;
    	color: #fff;
    	font-size: 14px;
    	background: url(input-bg.jpg) no-repeat;
    }
    
    #header-right .wsite-search .wsite-search-button {
    	position: relative;
    	float: left;
    	width: 33px;
    	height: 27px;
    	border: none;
    	margin: 0;
    	padding: 0;
    	background: url(submit-bg.png) no-repeat;
    }
    
    #header-right .wsite-search-button span {
    	position: relative;
    	display: none;
    }
    
    /* Footer
    --------------------------------------------------------------------------------*/
    
    #footer {
    	width: 717px;
    	color: #fff;
    	font-size: 14px;
    	text-align: right;
    	padding: 20px 0 20px 0;
    	border-top: 1px dotted #666666;
    }
    
    #footer p, #footer .form-radio-container {color:#888;}
    #footer .wsite-form-label {color:#aaa;}
    
    #footer a {
    	color: #555;
    	text-decoration: none;
    }
    #footer a:hover {
    	color: #eee;
    }
    
    #footer .weebly-footer a {
    	color: #fff;
    }
    .wsite-footer {  /* make sure enough space between element footer and attribution */
    	margin-bottom: 15px;
    }
    
    #footer h2 {
    	font-size:18px;
    	color:#aaa;
    	border-bottom:1px solid #777;
    	padding-bottom:.3em;
    }
    
    /* Footer Form Customization
    --------------------------------------------------------------------------------*/
    
    .wsite-form-container {
    	margin-top:0px !important;
    	text-align:left !important;
    }
    
    .wsite-footer .wsite-form-label {
    	font-size: 1em !important;
    	padding: 5px 0 2px 0 !important;
    }
    
    .wsite-footer .wsite-form-field {
    	width:330px !important;
    }
    
    .wsite-footer .form-radio-container {
    	font-size:1em !important;
    }
    
    .wsite-footer .wsite-form-input {
    	font-size: 1em !important;
    	width: 100% !important;
    }
    
    .wsite-footer .form-select {
    	width: 100% !important;
    }
    
    /* PAGE TYPE: tall-header
    --------------------------------------------------------------------------------*/
    
    .tall-header-page .wsite-header {  /* the user-editable image */
    	width: 717px;
    	height: 252px;
    	background: url(banner-tall.jpg);
    }
    
    /* PAGE TYPE: short-header
    --------------------------------------------------------------------------------*/
    
    .short-header-page .wsite-header {  /* the user-editable image */
    	width: 717px;
    	height: 152px;
    	background: url(banner-short.jpg);
    }
    
    /* PAGE TYPE: landing
    --------------------------------------------------------------------------------*/
    
    #banner-left {
    	float: left;
    	width: 387px;
    }
    
    #banner-left .wsite-header {  /* the user-editable image */
    	width: 387px;
    	height: 282px;
    	background: url(banner-landing.jpg);
    }
    
    .landing-banner-outer {
    	display: table;
    	#position: relative;
    	overflow: hidden;
    }
    
    .landing-banner-mid {
    	#position: absolute;
    	#top: 50%;
    	display: table-cell;
    	vertical-align: middle;
    }
    
    .landing-banner-inner {
    	#position: relative;
    	#top: -50%;
    }
    
    #bannerright {
    	float: left;
    	width: 295px;
    	height: 282px;
    	padding: 0 0 0 35px;
    }
    
    #bannerright h2 {
    	color: #fff;
    	font-size: 28px;
    	padding: 0;
    	line-height: 1;
    }
    
    #bannerright p {
    	color: #fff;
    	font-size: 16px;
    	padding: 20px 0;
    	line-height: 140%;
    }
    
    #bannerright .wsite-button {
    	margin: 0px;
    }
    
    /* PAGE TYPE: no-header
    --------------------------------------------------------------------------------*/
    
    .no-header-page #banner {
    	padding: 20px 0 5px 0;
    	border-bottom: none;
    }
    
    /* PAGE TYPE: splash
    --------------------------------------------------------------------------------*/
    
    .splash-page {
    	background: url(bodysplash-bg.jpg);
    }
    
    .splash-page .wsite-header {
    	width: 558px;
    	height: 150px;
    	background: url(banner-splash.jpg);
    }
    
    .splash-page #container {
    	width: 100%;
    	height: 100%;
    	background: url(splash-containerbg.jpg) top repeat-x;
    }
    
    .splash-page #content {
    	width: 570px;
    	padding: 5px 18px 18px 0;
    }
    
    .splash-page #header {
    	width: 558px;
    	height: 67px;
    	border: none;
    	padding: 5px 0 41px 0;
    }
    
    .splash-page #banner {
    	width: 558px;
    }
    
    .splash-page #wrapper {
    	width: 558px;
    }
    
    .splash-page #footer {
    	width: 558px;
    }
    
    /* Form Customization
    --------------------------------------------------------------------------------*/
    
    .wsite-form-label {
    	display: inline-block;
    	color: #fff;
    	font-size: 13px;
    	font-weight: bold;
    	padding: 10px 0 3px 0;
    	margin-top:5px;
    }
    
    .form-radio-container {
    	color: #fff;
    	font-size: 13px;
    }
    
    .wsite-form-input, .wsite-search-element-input  {
    	background: #030303;
    	color: #fff;
    	border: 1px solid #2C2C2C;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    	font-size:12px;
    }
    
    .wsite-search-element-submit {
    	background: url(search-dark.png) left;
    }
    
    .form-select {
    	width: 380px;
    	color: #fff;
    	background: #030303;
    	border: 1px solid #2C2C2C;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    }
    
    /* Buttons
    --------------------------------------------------------------------------------*/
    
    
    /* small */
    
    .wsite-button {
    	font-family:'Journal';
    	color: #fff !important;
    	height: 34px;
    	display: inline-block;
    	font-size: 14px;
    	border: none;
    	font-weight: none;
    	text-decoration: none;
    	text-transform: uppercase;
    	padding: 0 20px 0 0;
    	background: url(button_small_grey.png) no-repeat 100% -105px;
    	text-shadow:0 -1px 0 rgba(0,0,0,0.7);
    }
    
    .wsite-button:hover {
    	background-position: 100% -140px;
    }
    
    .wsite-button:active {
    	background-position: 100% -175px;
    }
    
    .wsite-button-inner {
    	font-family:'Journal';
    	color: #fff !important;
    	height: 34px;
    	line-height: 34px;
    	display: block;
    	font-size: 14px;
    	font-weight: bold;
    	border: none;
    	text-decoration: none;
    	padding: 0 10px 0 20px;
    	background: url(button_small_grey.png) no-repeat 0 0;
    }
    
    .wsite-button:hover .wsite-button-inner {
    	background-position: 0 -35px;
    }
    
    .wsite-button:active .wsite-button-inner {
    	background-position: 0 -70px;
    }
    
    /* large */
    
    .wsite-button-large {
    	font-family:'Angelina';
    	color: #fff !important;
    	height: 41px;
    	background: url(button_large_grey.png) no-repeat 100% -126px;
    	padding: 0 20px 0 0;
    }
    
    .wsite-button-large:hover {
    	background-position: 100% -168px;
    }
    
    .wsite-button-large:active {
    	background-position: 100% -210px;
    }
    
    .wsite-button-large .wsite-button-inner {
    	color: #fff !important;
    	height: 41px;
    	line-height: 41px;
    	padding: 0 10px 0 20px;
    	background: url(button_large_grey.png) no-repeat 0 0;
    }
    
    .wsite-button-large:hover .wsite-button-inner {
    	background-position: 0 -42px;
    }
    
    .wsite-button-large:active .wsite-button-inner {
    	background-position: 0 -84px;
    }
    
    /* highlight */
    
    /*
    Making the highlighted versions of the buttons is easy because we just need
    to switch out the background images. This works because the different button
    states (normal, :hover, :active) have their sprite coordinates in the same places.
    */
    
    .wsite-button-large.wsite-button-highlight {
    	color: #fff !important;
    	background-image: url(button_large_orange.png);
    }
    
    .wsite-button-large.wsite-button-highlight .wsite-button-inner {
    	color: #fff !important;
    	background-image: url(button_large_orange.png);
    }
    
    .wsite-button-highlight {
    	color: #fff !important;
    	background-image: url(button_small_orange.png);
    }
    
    .wsite-button-highlight .wsite-button-inner {
    	color: #fff !important;
    	background-image: url(button_small_orange.png);
    }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    The above post is the code for the website.

    I managed to scoot the content over to the left, but now the two columns are squishing into one another.

    Here are visuals:

    When the page is being viewed normally with the full screen, it looks fine: i46.tinypic.com/11tyex3.png

    However, when you minimize the page, it squishes together: i49.tinypic.com/1fk9lh.png

    I posted on another alternative username because the other was acting up. This is my username from now on.

    So if anyone could help, please do, thanks.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Still difficult to give you an absolute answer without seeing the actual HTML to see how you are applying your CSS.

IMN logo majestic logo threadwatch logo seochat tools logo