Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Nov 2012
    Posts
    22
    Member #
    34012
    Hello, I have just built a form and everything looks great, but when I preview for printing images and colors are gone :S I just got 1 image on it, and I was able to get it on with <img src=""> and now it shows. It didnt show up when I used css. But I still cant see colors there...any ideas?

    EDIT: I found a solution, I have added this line to my css:

    -webkit-print-color-adjust:exact;

    But now I got second question. I have 2 column layout and I would like to make both columns the same height, here is image attached.


  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2012
    Posts
    22
    Member #
    34012
    I really need help with this, here is my current code:

    CSS:

    #left {
    margin-top:5px;
    margin-left:1.4%;
    float:left;
    background:#FFFFFF;
    width:59.8%;
    text-align:left;
    padding:5px; }

    #right {
    margin-top:5px;
    margin-right:1.4%;
    float:right;
    background:#FFFFFF;
    width:34.8%;
    padding:1.5px5px1.5px5px;
    text-align:left; }

    HTML:

    <div id="left"> 1. SOME TEXT HERE </div><div id="right">
    <input type="radio"name="Group1"/><font size="1.5px">NO</font>
    <input type="radio"name="Group1"/><font size="1.5px">YES</font>
    <br/><div class="textToRight"><font size="1.5px">Text:</font>
    <input type="text"class="boxAlignRight22"/></div></div>
    <div style="clear:both"></div>

  4. #3
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Can you post a link to the page - it's better if we can see all the code.
    webdesigner100 likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    You don't have a height defined in your css.

    Without defining it, the divs will auto adjust based on content.

    You could create a wrapper of a specific height, then set these divs to height 100%. But it all depends on what you're trying to do and the content you're filling the divs with.

  6. #5
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    The height of the columns will be determined by the content that is in them but there are ways that you can fake it.
    The first one relies on the use of a wrapper with the background image being a horizontal bar that repeats down the Y axis, giving the illusion of the two columns. To push the box to the bottom, you'll need something inside of it that clears both columns.
    <div id="wrapper" style="background:ulr(repeating-y-image.jpg) repeat-y;">
    <div id=leftcolumn" style="float:left;">Leftcolumn content</div>
    <div id=rightcolumn" style="float:right;">Right column content</div>
    <br style="clear:both;"/>
    </div><!--End wrapper-->

    The other option is to use javascript to get the height of both columns, find the larger value and set the column heights to that value.
    webdesigner100 likes this.
    Freelance Web Developer

  7. #6
    Junior Member
    Join Date
    Nov 2012
    Posts
    22
    Member #
    34012
    Well after trying out a couple of things I still couldnt figgure out how to do it. I can post link as website is not online its on my PC, but here is some code...

    #left {
    float:left;
    background-color:#FFFFFF;
    margin-left:6.3px;
    margin-top:3px;
    width:57.2%;
    padding:2px 5px 2px 5px;
    text-align:left;
    }

    #right {
    float:right;
    background-color:#FFFFFF;
    margin-right:6.4px;
    margin-top:3px;
    width:38%;
    padding:1px 5px 1px 5px;
    text-align:left;
    }

    <--------------------------------------------------------------->

    <div id="left">
    1. Here goes some text
    </div>
    <div id="right">
    <input type="radio" />NO
    <input type="radio" />YES
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Text<br />
    <input type="text" class="inputBoxLong" />
    </div>
    <div style="clear:both"></div>

    Ok, now I have used some jquery code and it changes just first 2 divs not the others..

    <script>
    $(document).ready(function() {
    var leftHeight = $('#right').height();
    $('#left').css({'height':leftHeight});
    });
    </script>

  8. #7
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    I don't see your wrapper which should contain the background image (just a 1px horizontal bar that repeats downward). That's the element that needs to have the two columns inside of it and an element that is clear:both to push it down.

    I did find a site that should explain several ways to go about doing this:
    http://webdev-il.blogspot.com/2011/0...ns-expand.html
    Freelance Web Developer

  9. #8
    Junior Member
    Join Date
    Nov 2012
    Posts
    22
    Member #
    34012
    Well is there any way to do it with jquery as I posted 1 post above yours? It works fine and all but just for the first 2 left and right divs..

  10. #9
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    webdesigner100 likes this.
    Freelance Web Developer


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com