Jump to content
Sign in to follow this  
selectams

Help with Custom CSS, HTML Boxes Alignment

Recommended Posts

selectams    2
selectams

Hi, 

 

I would really appreciate help/advise on the following; 

 

I am looking to place two HTML boxes next to each other. 

 

I have inserted the following CSS within the Custom Code CSS section of platform pro theme

 

 

#wrap {
width:960px;
}
.left {
width:230;
background-color:#00d;
height:425 px;
float:left;
}
.right {
    width:230;
background-color:#00d;
height:425 px;
float:right;
}

 

 

and the following code on one of the pages

 

<div id="wrap">
     <div class="left"></div>
<div class="right"></div>
</div>
 
For some reason I am unable to see any boxes at all. 
 
I am new to CSS so some advise would be really helpful. 
 
Many Thanks
 
Prasanna

 

 

 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I've tested your code and I can see two blue boxes appearing. Do you have a link to the page with the code on we could look at live.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
selectams    2
selectams

Hi James, 

 

Here's the link 

 

I checked the page source and the code appears to be there but for some odd reason I am unable to see the boxes. 

 

Please note I have two themes - Iblog and Platformpro. Unfortunately, the codes are not working on both the themes. 

 

I think there is something wrong that I am doing. 

 

Please advise. 

 

Thanks James

 

Prasanna

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Prasanna,

 

It looks like on that page you've only set partial css for the box.

 

If you set like the below

 

.left {
    backgroundblue !important;
    background-color#0000DD !important;
    displayblock !important;
    floatleft;
    height224px;
    width50% !important;
}
 
You should see somethink like - http://screencast.com/t/Oga08XSZQ

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
selectams    2
selectams

Hi James, 

 

 Your suggestion works perfectly for 2 boxes. Many thanks. 

 

I am really sorry to be a pain. I am looking to have 3 boxes and based on your suggestion I tried the following; 

 

Custom CSS as below

 

.left {
    background: blue !important;
    background-color: #0000DD !important;
    display: block !important;
    float: left;
    height: 224px;
    width: 25% !important;
}
 
.right {
    background: blue !important;
    background-color: #0000DD !important;
    display: block !important;
    float: right;
    height: 224px;
    width: 25% !important;
}
 
.centre {
    background: blue !important;
    background-color: #0000DD !important;
    display: block !important;
    float: centre;
    height: 224px;
    width: 25% !important;
}
 
HTML code as below
 
 
 <div class="left"></div>
 <div class="right"></div>
 <div class="centre"></div>
 
My page here
 
Unable to see 3 boxes, only I am able to see 2 boxes. 
 
Your advice will be really appreciated. 
 
Cheers
 
Prasanna

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Prasanna

 

Unfortunately there's no such option as float center. If you're looking to do three boxes why not use the boxes section?

 

Otherwise you'll need to float them all left but with a % width so they fill the available area. (33.3% etc)

 

Like the example here - http://stackoverflow.com/questions/3639907/how-to-display-3-boxes-in-the-same-line


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
selectams    2
selectams

Hi James, 

 

All works perfectly.

 

Many Thanks. 

 

Really appreciate your help

 

Prasanna

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Prasanna,

 

Excellent glad that worked :-)

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
selectams    2
selectams

Hi James, 

 

Hope you are well. 

 

I am looking to reduce spacing between site branding and default content in platform pro. 

 

Are you able to guide me with the custom css codes please? 

 

Also since this is a new topic, should I log a new question on your forum. 

 

Cheers

 

Prasanna

Share this post


Link to post
Share on other sites
James B    436
James B

Thanks Prasanna, responded on the new thread :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • paoloimperiale
      By paoloimperiale+
      Hi, 
      I was wondering if there's a way to modify the slider container size? My client would like it skinner- not as tall. How would you suggest doing that?
      Thank you.
      (this is for the paoloimperiale.com slider on the homepage) 
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • jeomiland
      By jeomiland+
      What am I missing?
      at cassclayton.com/dev I have the main  area set as 2 column format in the content-width main area. When I drag a 2-columns section onto the page under the stuff in the main left column area I get that familiar "section added, refresh page to view..." message on the screen, but refreshing the page (cmd-r or browser refresh button) makes the newly added section disappear to I can't get to it to continue.  Have just tried several time today with no success.  Have had this sort of issue before. I don't consider the page layout to be that complex, so why is DMS not remembering the new columns section on refresh?  Is there some strange, exotic setting in my browser I need to tweak? (chrome 46.0.2490.80 Macbook pro)
      Also, I have this Alzheimer issue often when adding custom CSS code - I learned from Pagelines academy to click edit in an existing section, then click in 2 different text option boxes, which eventually causes the refresh icon in the DMS options panel to appear) but even then, sometime my css code is ignored and I have to add it again and eventually it gets updated. I know, I know - blame it on all the script that makes the interface work, but this really slows down my development time. Someone please tell me I'm missing some simple thing that makes all this refresh stuff work like a champ!
      1) what is best way to Refresh after adding something if the Refresh icon does not appear (as it hardly ever does when adding CSS code)?
      2) why does my new section disappear on refresh?
      3) what's the best way to create a 2-column content area within another column area?
      Site: cassclayton.com/dev
      Thanks
×