Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

help with css

Featured Replies

Hey,

 

Heres the website files: (just over 200kb)

http://www.megaupload.com/?d=S8X5BOQ0

Images/css/html so you can view exactly.

 

or Il provide css/html page and an explanation here.

 

Here is current homepage of site.

http://img812.imageshack.us/img812/4092/picb.png

 

That is homepage,

 

for all the other pages what I would like is to keep top menu, and keep the bottom section so it will look like this.

 

You can see where it had said 'your green business needs our green hosting' Id like that to carry on as far as the right hand side and get rid of the black box and also 'benefits of going green' area.

 

Id like it that I could write my text in a body or something so that it goes full length from left to right and all the way down.

 

http://img696.imageshack.us/img696/328/exmple.png

 

 

 

 

 

 

Heres the CSS

/* Handcoded by http://psdcssxhtml.com */


/* reset */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,th,td{
   margin:0;
   padding:0;
}

fieldset,img{
   border:0;
}

html{
   height:100%;
   margin-bottom:1px;
}

body{
   position:relative;
}

:focus{
   outline:hidden;
}

/* links */
a{
   color:#282828;
   text-decoration:none;
}

a:hover{
   text-decoration:underline;
}

/* header elements */
h1, h2, h3, h4, h5, h6{
   font-family:Arial, Helvetica, sans-serif;
   font-weight:bold;
   color:#282828;
   line-height:100%;
}

h1{
   font-size:28px;
}

h2{
   font-size:23px;
}

h3{
   font-size:18px;
}

h4{
   font-size:15px;
}

h5{
   font-size:14px;
}

h6{
   font-size:11px;
}

/* page setup */
body{
   background:#FFF url(../images/page_bg.png) 50% 0 repeat-x;
   font-family:Arial, Helvetica, sans-serif;
   line-height:140%;
   color:#282828;
   font-size:13px;
}

/* wrapper setup */
div.rapidxwpr{
   margin:auto;
   width:900px;
}

/* header */
div#header{
   position:relative;
   height:73px;
   margin:0px 0px 15px 0px;
}

/* logo */
span#logo, img#logo{
   position:absolute;
   top:0px;
   left:0px;
   width:135px;
   height:52px;
   border:0;
}

/* main body setup */
div#middle{
   width:auto;
   margin:0px 0px 0px 0px;
   clear:both;
   border:#C6C6C6 1px solid;
   padding:20px;
}

/* right column */
div#right{
   width:277px;
   padding:0px 0px 0px 18px;
   float:right;
}
/* right column2 */
div#right2{
   width:277px;
   padding:0px 0px 0px 18px;
   float:right;
}
* html div#right{
   padding:0px 0px 0px 15px;
}

/* content column */
div#main{
   width:auto;
   margin:0px 0px 0px 0px;
   padding:0px 0px 0px 0px;
}

div#mainmiddle{
   margin:0px 0px 0px 0px;
}

div#content{
   width:auto;
}

/* footer */
div#footer{
   width:auto;
   padding:5px 0px 20px 0px;
   clear:both;
   color:#fff;
}

/* clearing & floating */
.clearingfix:after{
   content:".";
   display:block;
   line-height:0px;
   clear:both;
   visibility:hidden;
}

.clearingfix{
   display:block;
}

.floatbox{
   overflow:hidden;
}

/* alignments */
.alignleft{
   float:left;
   margin:0 20px 0 0;
}

.alignright{
   float:right;
   margin:0 0 0 20px;
}

/* topmenu */
div#topmenu{
   position:absolute;
   top:46px;
   right:0px;
   height:27px;
}

div#topmenu ul{
   padding:0px;
   margin:0px;
   list-style:none;
   float:left;
   font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

div#topmenu li{
   float:left;
   display:block;
   margin:0 0 0 6px;
}

div#topmenu li a{
   float:left;
   display:block;
   position:relative;
   background:transparent url(../images/menu-r.png) 100% 0 no-repeat;
   height:27px;
   padding:0 5px 0 0;
   overflow:hidden;
   color:#202020;
   text-decoration:none;
   text-transform:uppercase;
   font-size:13px;
   font-weight:bold;
   line-height:27px;
}

div#topmenu li a span{
   display:block;
   background:url(../images/menu-l.png) 0 0 no-repeat;
   padding:0 10px 0 15px;
}

div#topmenu li a.active, div#topmenu li a:hover{
   background:url(../images/menu-r.png) 100% -28px no-repeat;
   text-decoration:none;
}

div#topmenu li a.active span, div#topmenu li a:hover span{
   background:url(../images/menu-l.png) 0 -28px no-repeat;
}

/* main image */
div.main-image{
   margin:0 0 20px 0;
}

/* welcome */
div.welcome{
   background:url(../images/green-hosting.jpg) 100% 0 no-repeat;
   padding:0 220px 10px 0;
   margin:0 0 10px 0;
}

/* welcome2 */
div.welcome{
   padding:0 320px 10px 0;
   margin:0 0 10px 0;
}
div.welcome h1, div.welcome h2{
   font-weight:normal;
   text-transform:uppercase;
   margin:0;
}

div.welcome h1 span, div.welcome h2 span{
   color:#3d821c;
}

/* benefits box */
div.benefits{
   background:url(../images/benefits-top.jpg) 0 0 no-repeat;
   padding:15px 0 0 0;
}

div.benefits-bg{
   background:url(../images/benefits-bg.jpg) 0 100% no-repeat;
   padding:0 13px 15px 13px;
}

div.benefits h3{
   text-transform:uppercase;
   font-weight:normal;
   margin:0 0 20px 0;
}

div.benefits ul{
   list-style:none;
   margin:5px 10px;
}

div.benefits ul li{
   background:url(../images/icon-leaf.png) 7px 50% no-repeat;
   padding:10px 0 8px 33px;
   border-bottom:#d4d3d3 1px solid;
}

div.benefits ul li a{
   font-size:17px;
   color:#282828;
}

/* signup */
a.signup{
   background:url(../images/signup-bg.png) 0 0 no-repeat;
   color:#FFF;
   width:55px;
   display:block;
   padding:0px 10px;
   line-height:16px;
   height:18px;
   margin:10px 0 0 0;
   float:right;
}

/* features box */
div.box{
   background:url(../images/box-top.jpg) 0 0 no-repeat;
   padding:10px 0 0 0;
}

div.box-bg{
   background:url(../images/box-bg.jpg) 0 100% no-repeat;
   padding:0 10px 10px 10px;
}

/* features */
ul.features{
   list-style:none;
}

ul.features li{
   float:left;
   width:240px;
   margin:10px 15px;
   height:60px;
}

* html ul.features li{
   margin:10px 10px;
}

ul.features li img.features-icon{
   float:left;
   width:50px;
}

ul.features li div.details{
   float:right;
   width:180px;
}

ul.features li div.details h4{
   margin:0;
}

/* footermenu */
ul.footermenu{
   list-style:none;
   margin:0 0 0 10px;
}

ul.footermenu li{
   float:left;
   margin:0 0 0 15px;
}

ul.footermenu a{
   font-size:12px;
   color:#747474;
   text-transform:uppercase;
}

/* credits */
div.credits{
   float:right;
   margin:0 25px 0 0;
}

div.credits a{
   font-size:12px;
   color:#747474;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Heres the html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Green Website Hosting Company</title>
 <meta name="robots" content="index, follow" />
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta name="author" content="RapidxHTML" />
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <!--[if lte IE 7]><link href="css/iehacks.css" rel="stylesheet" type="text/css" /><![endif]-->
 <script type="text/javascript" src="js/jquery.js"></script>
 <!--[if IE 6]>
 <script type="text/javascript" src="js/ie6pngfix.js"></script>
 <script type="text/javascript">
   DD_belatedPNG.fix('img, ul, ol, li, div, p, a, h1, h2, h3, h4, h5, h6');
 </script>
 <![endif]-->
</head>

<body>

<!-- wrapper -->
<div class="rapidxwpr floatholder">

 <!-- header -->
 <div id="header">

   <!-- logo -->
   <a href="index.html"><img id="logo" class="correct-png" src="images/logo.png" alt="Home" title="Home" /></a>
   <!-- / logo -->

   <!-- topmenu -->
   <div id="topmenu">
     <ul>
     <li><a href="" class="active"><span>Home</span></a></li>
     <li><a href=""><span>Services</span></a></li>
     <li><a href=""><span>Company</span></a></li>
     <li><a href=""><span>About us</span></a></li>
     <li><a href=""><span>Contact</span></a></li>
     </ul>
   </div>
   <!-- / topmenu -->

 </div>
 <!-- / header -->

 <!-- main body -->
 <div id="middle">

   <!-- main image -->
   <div class="main-image">
     <img src="images/main-image.jpg" alt="Image" />
   </div>
   <!-- / main image -->

   <div id="main" class="clearingfix">
     <div id="mainmiddle" class="floatbox">

       <!-- right column -->
       <div id="right" class="clearingfix">

         <!-- benefits box -->
         <div class="benefits">
           <div class="benefits-bg clearingfix">
             <h3>BENEFITS OF GOING GREEN</h3>
             <ul>
               <li><a href="">Stats Tracker</a></li>
               <li><a href="">10GB to 120GB Storage</a></li>
               <li><a href="">1TB to 3TB Bandwidth</a></li>
               <li><a href="">PHP5, MySQL</a></li>
               <li><a href="">Satisfaction Guaranteed</a></li>
               <li><a href="">2GB Dedicated RAM</a></li>
             </ul>
             <a href="" class="signup">sign up</a>
           </div>
         </div>
         <!-- / benefits box -->

       </div>
       <!-- / right column -->

       <!-- content column -->
       <div id="content" class="clearingfix">
         <div class="floatbox">

           <!-- welcome -->
           <div class="welcome">
             <h1>YOUR <span>GREEN</span> BUSINESS</h1>
             <h2>NEEDS OUR <span>GREEN</span> HOSTING</h2>
             <p><a href="http://studio7designs.com">Green Hosting</a> is your best choice when you need environmentally consious <a href="http://arbutusphotography.com">business</a> and hosting services. We love to work with businesses with a concience. Your intro text will go here, giving a brief overview.</p>
           </div>
           <!-- / welcome -->

           <!-- features -->
           <div class="box">
             <div class="box-bg">
               <ul class="features clearingfix">
                 <li>
                   <img src="images/icon01.png" alt="Image" class="features-icon" />
                   <div class="details">
                     <h4>Everything You Need</h4>
                   <a href="http://ecoki.com">Green </a>Hosting is your best choice when you need hosting. </div>
                 </li>
                 <li>
                   <img src="images/icon02.png" alt="Image" class="features-icon"  />
                   <div class="details">
                     <h4>Green Hosting</h4>
                     Green Hosting is your best choice when you need hosting.
                   </div>
                 </li>
                 <li>
                   <img src="images/icon03.png" alt="Image" class="features-icon"  />
                   <div class="details">
                     <h4>Using The Sun</h4>
                     Green Hosting is your best choice when you need hosting.
                   </div>
                 </li>
                 <li>
                   <img src="images/icon04.png" alt="Image" class="features-icon"  />
                   <div class="details">
                     <h4>Reseller Plans</h4>
                     Green Hosting is your best choice when you need hosting.
                   </div>
                 </li>
               </ul>
             </div>
           </div>
           <!-- / features -->

         </div>
       </div>
       <!-- / content column -->

     </div>
   </div>

 </div>
 <!-- / main body -->

</div>
<!-- / wrapper -->

<!-- footer -->
<div class="rapidxwpr floatholder">
 <div id="footer" class="clearingfix">

   <!-- footermenu -->
   <ul class="footermenu">
     <li><a href="">Home</a></li>
     <li><a href="">Services</a></li>
     <li><a href="">About us</a></li>
     <li><a href="">Contact</a></li>
   </ul>
   <!-- / footermenu -->

   <!-- credits -->
   <div class="credits">
     <a href="http://studio7designs.com/branding">Designed by STUDIO7DESIGNS</a>
   </div>
   <!-- / credits -->

 </div>
</div>				
<!-- / footer -->

</body>
</html>

Like this?

http://www.wickham43.com/forumposts/hunty101031.html

CSS http://www.wickham43.com/forumposts/huntystyle101031.css

 

I haven't got your images so It only shows the structure of the div extending full width.

 

I've added background colors temporarily which you will need to delete.

 

You also need to edit the url of logo.png as I already had a different logo.png on my server.

  • Author

Hey, thanks for the reply, Id like the text to run into the pink aswell though?

 

So its full left to right.

 

I uploaded a zip file of all files and images if this helps.

http://www.megaupload.com/?d=S8X5BOQ0

 

But yeah, Id like the text to run from left to right, so 1 block if you get me?

Like this?

http://www.wickham43.com/forumposts/hunty101104/index2.html

CSS file http://www.wickham43.com/forumposts/hunty101104/css/style.css

 

I deleted the benefits box from index2.html and edited the style.css file where you have two styles for div.welcome. I deleted the second style. If you want the tree image green-hosting.jpg to show on the right, add the background image and edit the right padding to 230px (the width of the image) like this:-

div.welcome{
   background:url(../images/green-hosting.jpg) 100% 0 no-repeat;
   padding:0 230px 10px 0; 
   margin:0 0 10px 0;
}

  • Author

just be able to have the text go the full lenght of the site,

The 1st line stops at "consious business and"

 

 

Id like the text to be able to go as far as the line on right, not stop 3/4 way?

The text does go as far as the right border in my example. Have another look at the link in my last post.

  • Author

Hey,

 

yeah i just checked in IE and Firefox and it worked perfect.

 

I didnt see it as I use Chrome it doesnt work in that. thats why I didnt see it :)

 

Would there be any reason Chrome shows it as different?

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.