CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Need up with CSS coding


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old March 13th, 2013, 10:37 PM
brittne03 brittne03 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2013
Posts: 1 brittne03 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 19 m 40 sec
Reputation 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.
Reply With Quote
  #2  
Old March 14th, 2013, 02:11 AM
simplypixie simplypixie is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 104 simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11
Please post the related code on here
Reply With Quote
  #3  
Old March 14th, 2013, 02:17 AM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,835 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192
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. I'm available for hire at Dynamic Site Solutions.

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).
Reply With Quote
  #4  
Old March 16th, 2013, 10:10 PM
brittne2003 brittne2003 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2013
Posts: 2 brittne2003 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 38 sec
Reputation 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);
}
Reply With Quote
  #5  
Old March 16th, 2013, 10:15 PM
brittne2003 brittne2003 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2013
Posts: 2 brittne2003 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 11 m 38 sec
Reputation 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.
Reply With Quote
  #6  
Old March 18th, 2013, 01:21 AM
simplypixie simplypixie is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2012
Posts: 104 simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level)simplypixie User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11
Still difficult to give you an absolute answer without seeing the actual HTML to see how you are applying your CSS.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Need up with CSS coding

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap