Latest Announcemnent
New thread

CCS help needed

Status
Not open for further replies.
L

limewire

Active Member
81
2009
0
0
Hello,

Ive been trying to intergrate my whmcs, however when i do try to implement the headers css this happens the text next the whmcs icons moves lower.

this how it becomes after i add in the link for the headers css
aaaxk.png


this is how it is supposed to be
aaa2ql.png



The css code for the header

Code: 
/* Header */
#header {
 background:url(../img/bg_header.jpg) repeat-x;
 border-bottom:1px solid #1a1a1a;
 height:63px;
 overflow:hidden;
}
#header h1 {
 background:url(../img/logo.png) no-repeat left center;
 display:block;
 float:left;
 height:63px;
 text-indent:-9999px;
 width:292px;
}
#header #social {
 float:right;
 margin-top:13px;
}
#header #social a {
 background:url(../img/icon_social.png) no-repeat 0 0;
 display:block;
 float:left;
 height:38px;
 margin-left:5px;
 width:38px;
 text-indent:-9999px;
}
#header #social a#twitter {
 background-position:-38px 0;
}
#header #social a#email {
 background-position:-76px 0;
}

I would be very greatfull for anyhelp someone can provide me.
 
11 comments
Try to add a float: right; to the element that contains the text. Or display: inline.

Anyway, if that doesnt to the deed, post the xhtml part of that thingy and the respective css, the one you pasted has no information about it.
 
Code: 
/* Generated by Font Squirrel ([URL]http://www.fontsquirrel.com[/URL]) on May 17, 2011 */
@font-face {
    font-family:'DroidSerifBoldItalic';
    src:url('../fnt/droidserif-bolditalic-webfont.eot');
    src:local('☺'), url('../fnt/droidserif-bolditalic-webfont.woff') format('woff'), url('../fnt/droidserif-bolditalic-webfont.ttf') format('truetype'), url('../fnt/droidserif-bolditalic-webfont.svg#DroidSerifBoldItalic') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'DroidSerifItalic';
    src:url('../fnt/droidserif-italic-webfont.eot');
    src:local('☺'), url('../fnt/droidserif-italic-webfont.woff') format('woff'), url('../fnt/droidserif-italic-webfont.ttf') format('truetype'), url('../fnt/droidserif-italic-webfont.svg#DroidSerifItalic') format('svg');
    font-weight:normal;
    font-style:normal;
}
/* Eric Meyers CSS Reset 2.0 */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}
body {
 font-family:Helvetica, Arial, sans-serif;
 font-size:14px;
}
a {
 outline:none;
}
/* Containers */
.container {
 margin:0 auto;
 width:940px;
}
#plans .container {
 overflow:hidden;
}
#footer .container {
 overflow:hidden;
 width:960px;
}
/* Header */
#header {
 background:url(../img/bg_header.jpg) repeat-x;
 border-bottom:1px solid #1a1a1a;
 height:63px;
 overflow:hidden;
}
#header h1 {
 background:url(../img/logo.png) no-repeat left center;
 display:block;
 float:left;
 height:63px;
 text-indent:-9999px;
 width:292px;
}
#header #social {
 float:right;
 margin-top:13px;
}
#header #social a {
 background:url(../img/icon_social.png) no-repeat 0 0;
 display:block;
 float:left;
 height:38px;
 margin-left:5px;
 width:38px;
 text-indent:-9999px;
}
#header #social a#twitter {
 background-position:-38px 0;
}
#header #social a#email {
 background-position:-76px 0;
}
/* Masthead */
#masthead {
 background:url(../img/bg_masthead.jpg);
 border-top:1px solid #3b3b3b;
 height:386px;
}
#slider {
 position:relative;
}
#slider #slide_viewport {
 height:386px;
 overflow:hidden;
 position:relative;
 width:940px;
}
#slider #slide_container {
 height:386px;
 left:0;
 overflow:hidden;
 position:relative;
 top:0;
 width:10000px;
 
 -o-transition:all 0.3s ease;
 -moz-transition:all 0.3s ease;
 -webkit-transition:all 0.3s ease;
 transition:all 0.3s ease;
}
#slider .slide {
 float:left;
 height:386px;
 line-height:386px;
 text-align:center;
 width:940px;
}
#slider .slide img {
 vertical-align:middle;
}
#slider #slider_navigation {
 bottom:5px;
 left:0;
 overflow:hidden;
 position:absolute;
 text-align:center;
 width:100%;
}
#slider #slider_navigation a {
 background:url(../img/btn_slide.png) no-repeat -23px 0;
 display:inline-block;
 height:25px;
 width:23px;
}
#slider #slider_navigation a.active {
 background-position:0 0;
}
#slider #left_arrow {
 background:url(../img/slider_arrows.png) no-repeat 0 0;
 display:none;
 height:118px;
 left:0;
 position:absolute;
 top:90px;
 width:62px;
 
 -o-transition:all 0.3s ease;
 -moz-transition:all 0.3s ease;
 -webkit-transition:all 0.3s ease;
 transition:all 0.3s ease;
}
#slider #right_arrow {
 background:url(../img/slider_arrows.png) no-repeat -62px 0;
 display:none;
 height:118px;
 position:absolute;
 right:0;
 top:90px;
 width:62px;
 
 -o-transition:all 0.3s ease;
 -moz-transition:all 0.3s ease;
 -webkit-transition:all 0.3s ease;
 transition:all 0.3s ease;
}
/* Contact Area */
#contact_area {
 background:url(../img/bg_contact_area.jpg) repeat-x;
 border-bottom:1px solid #d3d5d9;
 height:60px;
 line-height:60px;
 text-align:center;
}
#contact_area h3 {
 color:#404040;
 font-family:'DroidSerifItalic', Georgia, serif;
 font-size:24px;
}
#contact_area h3 span {
 color:#5cafe6;
}
#contact_area #contact_us {
 background:url(../img/button_contact.png) no-repeat 0 0;
 display:inline-block;
 font-family:'DroidSerifBoldItalic', Georgia, serif;
 font-size:16px;
 height:42px;
 line-height:42px;
 margin-left:20px;
 outline:none;
 text-decoration:none;
 text-shadow:0px 1px 0px #fdf4f8;
 width:192px;
}
#contact_area #contact_us span {
 color:#866d2a;
}
#contact_area #contact_us:hover {
 background-position:0 -42px;
}
#contact_area #contact_us:active {
 background-position:0 -84px;
}
#contact_area #contact_us:active span {
 position:relative;
 top:1px;
}
/* Plans */
#plans {
 background:url(../img/bg_plans.jpg) repeat-x 0 0 #eaebee;
 border-bottom:1px solid #f2f3f5;
 border-top:1px solid #f5f5f5;
 padding:40px 0 10px 0;
}
#plans .plan {
 display:inline;
 float:left;
 margin-left:25px;
 width:235px;
}
#plans .plan ul {
 background-color:#303030;
 border:1px solid #000;
 /* Gradient background */
 background:-moz-linear-gradient(top, #1a1a1a 0%, #353535 45%, #353535 55%, #1a1a1a 100%); /* FF3.6+ */
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(45%,#353535), color-stop(55%,#353535), color-stop(100%,#1a1a1a)); /* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top, #1a1a1a 0%,#353535 45%,#353535 55%,#1a1a1a 100%); /* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top, #1a1a1a 0%,#353535 45%,#353535 55%,#1a1a1a 100%); /* Opera11.10+ */
 background:-ms-linear-gradient(top, #1a1a1a 0%,#353535 45%,#353535 55%,#1a1a1a 100%); /* IE10+ */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1A1A1A', endColorstr='#1A1A1A',GradientType=0 ); /* IE6-9 */
 background:linear-gradient(top, #1a1a1a 0%,#353535 45%,#353535 55%,#1a1a1a 100%); /* W3 */
 
 /* Border radius */
 -o-border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
}
#plans .first_plan {
 margin-left:10px;
}
#plans .plan li {
 border-bottom:1px solid #0f0f0f;
 border-top:1px solid #414141;
 color:#c7c7c7;
 display:block;
 font-family:Arial, sans-serif;
 font-size:14px;
 line-height:38px;
 text-align:center;
 text-shadow:0px 1px 0px #000;
}
#plans .plan li.bottom {
 height:8px;
 line-height:8px;
}
#plans .plan li.tall {
 height:107px;
 line-height:107px;
}
#plans .plan li img {
 vertical-align:middle;
}
#plans .plan li:first-child {
 border-top:none;
 
 -moz-box-shadow:0 1px 0 #555 inset;
 -webkit-box-shadow:0 1px 0 #555 inset;
 box-shadow:0 1px 0 #555 inset;
}
#plans .plan .choose_plan {
 background:url(../img/btn_choose_plan.png) no-repeat 0 0;
 display:block;
 height:39px;
 margin-top:5px;
 text-indent:-9999px;
 width:235px;
}
#plans .plan .choose_plan:hover {
 background-position:0 -39px;
}
#plans .plan .choose_plan:active {
 background-position:0 -78px;
}
#plans .plan_labels {
 float:left;
 margin-right:30px;
 text-align:right;
 width:145px;
}
#plans .plan_labels li {
 background:url(../img/icon_info.png) no-repeat right center;
 color:#4a4a4a;
 font-family:Arial, sans-serif;
 font-size:14px;
 height:40px;
 line-height:40px;
 padding-right:25px;
}
#plans .plan_labels li.spacer {
 background:none;
 height:109px;
 line-height:109px;
}
#plans #services {
 background:url(../img/bg_services.jpg) no-repeat;
 margin:40px auto 0px;
 overflow:hidden;
 padding:50px 0 0 0;
 width:960px;
}
#plans #services .left {
 float:left;
 margin-left:10px;
 overflow:hidden;
 padding:0 10px;
 width:570px;
}
#plans #services .right {
 float:right;
 margin-right:10px;
 width:349px;
}
#plans #services .left h3 {
 margin-left:20px;
}
#plans #services .right h3 {
 margin-left:21px;
}
#plans #services #tabs #tabs_header {
 background: #3c3c3c; /* Old browsers */
 background: -moz-linear-gradient(top, #3c3c3c 0%, #202020 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c3c3c), color-stop(100%,#202020)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #3c3c3c 0%,#202020 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #3c3c3c 0%,#202020 100%); /* Opera11.10+ */
 background: -ms-linear-gradient(top, #3c3c3c 0%,#202020 100%); /* IE10+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3C3C3C', endColorstr='#202020',GradientType=0 ); /* IE6-9 */
 background: linear-gradient(top, #3c3c3c 0%,#202020 100%); /* W3C */
 
 height:30px;
 padding-top:8px;
}
#plans #services #tabs #tabs_header ul {
 display:block;
 float:none;
 height:38px;
 margin:0;
 overflow:hidden;
 width:100%;
}
#plans #services #tabs #tabs_header ul li {
 background:none;
 display:block;
 float:left;
 font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size:12px;
 font-weight:bold;
 height:30px;
 margin:0 0 0 9px;
 padding:0;
 text-align:center;
 width:178px;
}
#plans #services #tabs #tabs_header ul li.selected {
 background:url(../img/bg_tab_selected.png) no-repeat 0 0;
}
#plans #services #tabs #tabs_header ul li a {
 color:#eaebee;
 display:block;
 height:30px;
 line-height:25px;
 text-decoration:none;
 text-shadow:0 -1px 0 #000;
 width:100%;
}
#plans #services #tabs #tabs_header ul li.selected a {
 color:#323232;
 line-height:30px;
 text-shadow:0 1px 0 #fff;
}
#plans #services #tabs .tab {
 display:none;
 padding-top:20px;
}
#plans #services #tabs .selected {
 display:block;
}
#plans #services ul {
 display:inline;
 float:left;
 margin-left:20px;
 width:170px;
}
#plans #services ul li {
 background:url(../img/bullet.png) no-repeat left center;
 color:#646464;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 margin-bottom:25px;
 padding-left:13px;
}
#plans #services h3 {
 color:#5f5f5f;
 font-family:'DroidSerifBoldItalic', 'Droid Serif', Georgia, serif;
 font-size:16px;
 font-weight:none;
 margin-bottom:25px;
 text-transform:uppercase;
}
#plans #services h4 {
 clear:both;
 color:#29bdfc;
 font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size:14px;
 line-height:18px;
 margin-bottom:10px;
}
#plans #services p {
 color:#5f5f5f;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 line-height:19px;
 margin-bottom:15px;
}
#plans #services .right .content {
 border-left:1px solid #c7c7c7;
 padding:0 10px 0 20px;
}
#plans #services .price {
 background:url(../img/bg_price.png) no-repeat;
 color:#fff;
 display:block;
 float:right;
 font-size:16px;
 height:35px;
 line-height:35px;
 margin-bottom:20px;
 text-align:center;
 text-shadow:0px -1px 0px #000;
 width:150px;
}
/* Footer */
#footer_separator {
 background:url(../img/bg_footer_separator.jpg) repeat-x;
 height:9px;
}
#footer {
 background:url(../img/bg_footer.jpg);
 padding:30px 0;
}
#footer .column {
 display:inline;
 float:left;
 margin-bottom:20px;
 margin-right:25px;
 width:300px;
}
#footer .last_column {
 margin-right:0;
}
#footer h4 {
 background:url(../img/bg_footer_header.png) repeat-x 0 center;
 color:#999;
 font-family:'DroidSerifBoldItalic', 'Droid Serif', Georgia, serif;
 font-size:16px;
 font-weight:none;
 margin-bottom:15px;
 text-shadow:0px 2px 0px #000;
 text-transform:uppercase;
}
#footer h4 span {
 background-color:#232323;
 padding-right:10px;
}
#footer p {
 color:#666;
 font-size:13px;
 line-height:19px;
 text-shadow:0px 1px 0px #000;
}
#footer .copyright {
 color:#737373;
 font-family:'DroidSerifItalic', Georgia, serif;
}
#footer .newsletter_text {
 background:url(../img/input_newsletter_text.png) no-repeat;
 border:none;
 color:#666;
 display:block;
 float:left;
 font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-weight:bold;
 height:40px;
 line-height:40px; 
 outline:none;
 padding-left:40px;
 width:193px;
}
#footer .newsletter_submit {
 background:url(../img/input_newsletter_submit.png) no-repeat 0 0;
 border:none;
 cursor:pointer;
 display:block;
 float:right;
 font-size:0;
 height:40px;
 line-height:0;
 outline:none;
 text-indent:-9999px;
 width:66px;
}
#footer .form_field {
 margin-top:10px;
 overflow:hidden;
}
#footer .newsletter_submit:hover {
 background-position:0 -40px;
}
#footer .newsletter_submit:active {
 background-position:0 -80px;
}
/* Helpers */
.divider { 
 background-color:#333333; 
 border-top:1px solid #171717;
 clear:both;
 height:1px;
 margin-bottom:20px;
}
/* Modal box */
input, textarea {
 color: #737373;
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 13px;
 font-weight: bold;
}
#modal_box {
 background: url(../img/modal_box.png); 
 height: 278px;
 left:0;
 padding: 0 40px;
 position:absolute;
 top:-278px;
 width: 438px; 
 
 -o-transition:all 0.3s ease;
 -moz-transition:all 0.3s ease;
 -webkit-transition:all 0.3s ease;
 transition:all 0.3s ease;
}
#modal_headline {
    height: 49px;
    line-height: 60px;
    margin-bottom: 15px;
}
#modal_headline h2 { 
 color: #FFF;
 font-family: "Helvetica Neue", Helvetica, Arial; 
 font-size: 18px;
 text-shadow: 0 1px 0 #3086d5; 
}
#modal_box .name { 
 background: url(../img/name_input.png); 
    border: 0 none;
    height: 31px;
 line-height: 31px;
    margin-right: 25px;
    padding: 2px 15px 2px 35px;
    width: 154px;
}
#modal_box .email { 
 background: url(../img/email_input.png); 
    border: 0 none;
    height: 31px;
 line-height: 31px;
    padding: 2px 15px 2px 35px;
    width: 154px;
}
#modal_box .message { 
 background: url(../img/message_input.png); 
    border: 0 none;
    height: 93px;
    margin-bottom: 5px;
    margin-top: 13px;
    padding: 10px 2px 2px 35px;
    width: 401px;
}
#modal_box .submit {
 background: url(../img/send_email_btn.png) no-repeat  top right; 
 border: medium none;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    outline: medium none;
    text-indent: -9999px;
    width: 120px;
}
#modal_box .submit:hover {
 background-position: 0 -30px; 
 border: none; 
 outline:none; 
}
#modal_box .submit:active { 
 background-position: 0 -60px; 
 border: none; 
 outline:none; 
}
#modal_box .error { 
 color: #CF5757;
    display: inline;
    font-family: Georgia;
    font-size: 11px;
    font-style: italic;
    margin-left: 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#modal_box .close_button {
 background:url(../img/close_button.png) no-repeat 0 0;
 display:block;
 height:23px;
 position:absolute;
 right:20px;
 top:18px;
 width:23px;
}
#modal_box .close_button:hover {
 background-position:0 -23px;
}
#modal_box .close_button:active {
 background-position:0 -46px;
}
 
Nop, that's not the css that styles it.
For example, the blue color on the first text is #006acd, you cant find it on that css file.

Without the css and xhtml code, I cant really help you.
 
I think the issue is about the elements' display. You cant place to elements side by side without defining their float or making the display inline.

Though, the guy doesnt know what css of html he's using, so there's not much we cant do about it.
 
Status
Not open for further replies.
Back
Top