Search the Community

I have spacing problem any idea how to solve that? Each cell is a UL container .ul {width:32.3%;display:inline-block;float:left;min-width:318px;height:auto;border:0;padding:5px 5px;margin-bottom:5px;font-size:95%;letter-spacing:1px;color:rgba(30,30,30,0.95);background:rgba(187,187,187,0.1);} I had to use min-height:560px;.... Any other suggestions plz?

I have been strugling with the same problem for a few days now and I am about to give up. I have a website from a template and I am trying to insert vertical banners into the site (http://www.befreebies.com) and the only way I could figure out how to do that was with the code listed below, but when I resize the browser window the vertical banners float on the page, usually exactly over something I don't want to cover. I have googled and fiddled for days and I don't want to sound lazy... but is there anyone who can tell me if there a way to do this with CSS that that tells it to change its size and position on the page if I resize the screen? Thanks in advance. <DIV ID="Banner" style="visibility:hidden;position:absolute;top:250px; left:1245px"> <script type="text/javascript"><!-- google_ad_client = (((my banner goes here))) </div> Thanks.

I'm using wordpress 3.4.2, I'm trying to create a nav bar using css3 but it isn't working and I don't know where I went wrong. What I mean by it itsn't working is that the nav bar is not showing up, the links are there but there is no css3 style for the nav bar. this is my style.css /* Theme Name: Voluptuous Decadents Theme URI: //www.voluptuous_decadents.co.za Description: An awesome theme for voluptuous decadents Author: Nicole Version: 1.0 */[/size][/font][/color] body{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; background: #b6b6b6; color: #000000 } a:link, a:visited{ text-decoration: none; color: #000000; } a:hover{ color: #5f5f5f; } h1{ font-size: 54px; } h3{ font-size: 24px; } #wrapper{ margin: 0 auto; width: 750px; text-align: left; background: #fff; padding: 20px; } #header{ width: 750px; height: 100px; } #blog{ float: left; width: 520px; padding: 0 10px 10px 10px; } .sidebar{ float: left; width: 200px; margin: 0 0 0 10px; font-size: 14px; list-style: none; } #footer{ clear: both; text-align: center; height: 50px; background: #ccc; padding: 10px; } table#wp-calendar{ width: 100%; } /* JS disabled styles */ .no-js nav li:hover ul { display:block; } /* base nav styles */ nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; } nav ul { padding:0; margin:0; } nav li { position:relative; float:left; list-style-type:none; } nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; } nav li a:focus { outline:none; text-decoration:underline; } nav li:first-child a { border-left:none; } nav li.last a { border-right:none; } nav a span { display:block; float:right; margin-left:5px; } nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; } nav ul ul li { float:none; } nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; } nav ul ul a:hover { background-color:#555; } /* CSS3 */ .borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#222)); } .boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); } .cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); } .borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; } .boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.; -moz-box-shadow:2px 2px 2px rgba(0,0,0,.; -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.; box-shadow:2px 2px 2px rgba(0,0,0,.; } .rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); } .rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); } .borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; } .csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); } /* fallbacks */ .no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../fallback/navBG.gif) repeat-x 0 0; } .no-borderradius nav ul, .no-js nav ul { background:url(../fallback/navRight.gif) no-repeat 100% 0; } .no-borderradius nav ul ul, .no-js nav ul ul { background:none; } .no-borderradius nav li, .no-js nav li { height:44px; } .no-cssgradients nav li:hover, .no-js nav li:hover { background:url(../fallback/navOverBG.gif) repeat-x 0 0; } .no-borderradius nav li li, .no-js nav li li { height:auto; width:98%; left:-2px; } .no-borderradius nav li:first-child, .no-js nav li:first-child { background:url(../fallback/navLeft.gif) no-repeat 0 0; } .no-borderradius nav li:first-child:hover, .no-js nav li:first-child:hover { background:url(../fallback/navOverLeft.gif) no-repeat 0 0; } .no-borderradius nav li li:first-child, .no-js nav li li:first-child { background:none; } .no-rgba nav ul ul, .no-js nav ul ul { left:1px; padding-left:2px; background:url(../fallback/subnavBG.png) no-repeat 100% 100%; } .no-rgba nav ul ul a, .no-js nav ul ul a { left:3px; } .no-rgba nav ul ul a:hover { background:url(../fallback/subOverBG.png) repeat 0 0; } .no-csstransforms ul a span { height:7px; width:12px; margin-top:8px; text-indent:-5000px; overflow:hidden; background:url(../fallback/indicator.png) no-repeat 0 0; } .no-borderradius ul ul li.last { margin-bottom:10px; } .no-cssgradients.boxshadow nav { box-shadow:none; }

Hi, I have added background image blueGradient.png to tr. It is not showing as expected. attached image. I want to show background image properly and need help in this. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>background Image</title> </head> <body> <table width="100%" border="1"> <tr style=" background-color:#00FFFF; background-image:url(blueGradient.png); background-repeat:repeat;"> <td colspan="2" align="center">Title</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html> -Thanks Zohaib.

Hello All, I have an upload script that I use to upload a photo to a folder and then save the file path to a database. Then I query the database to get the photo and put it where I want on my webpage. The question is what kind of technique should I best practice for outputting the images. More of less, I need them to all be the same shape in the similar containers, for example 400px by 300px, but need the container to take into consideration that the photos may be different aspect ratios or vertical as opposed to horizontal. Any suggestions??

Hello: The data is being generated from the data bases the main container is a "UL" tag, how I fix that error when one container having less data that following ones would layout to the bottom left? .tbl {width:31.5%;min-width:200px;height:auto;min-height:670px;display:inline-block;float:left;border:0;padding:5px 10px;font-size:95%;letter-spacing:1px;color:rgba(30,30,30,0.95);} .tbl {margin-bottom:10px;background:rgba(187,187,187,0.1);} that s the css for the UL tag. Thx...

Hello! I am using CSS to nest a menu on this page: http://pirantin.com/index.php It's not displaying correctly in ...wait for it... da da daaaa! Internet explorer! Yes, our old friend Microsoft is acting up again. Can anyone here suggest a way of getting around it. I think it WAS working, but I don't know what happened. :o/ Thanks, Neil

Hello: how to fix overflow:hidden for chrome and opera...?

Hello All, So I have a two column layout. The left column is 700px and the right 300px. In order to get them right next to each other I floated one left and the other right. The problem with that is the container that they are both in loses its 100% height. Is there another way to get them next to each other without floating them or do I have to use max and min height?? thanks guys!

Hi! (I am hoping I have placed this post in the right forum) I am having some issues with the Nivo slider. I have multiple sliders on the website (one that you can see just visiting the site and then a couple of others that are viewed when clients login). Anyway, the issue that I am having is trying to get the second slider (the one featured on the main site) to see the custom CSS that I wrote for it -- specifically in regards to the nivo-controlNav selector. Here is what i've tried: (the second slider ID is #mainSlider) #mainSlider .nivo-controlNav { position:relative; left:122px; top:12px; } I've also tried adding a z-index to this of 9999. I've also added custom css to the javascript: <script> $(document).ready(function() { $('nivo-controlNav).css('position','relative'); $('nivo-controlNav).css('left','122px'); $('nivo-controlNav).css('top','12px'); $('#mainSlider').nivoSlider({ effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 7000, // How long each slide will show directionNav: true, // Next & Prev navigation directionNavHide:true, //Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav }); }); </script> and so on. That didn't work either. Then, I went into the javascript file and tried to add a new class -- .nivo-controlNav2. However, I don't think I went about it the right way as it messed up the controlNav css for the other slider. I tried loading a custom theme in the <head> and then added this to the slider wrapper: <div class="slider-wrapper2 theme-mytheme"> After that, I made sure that my css had .mytheme listed first and then .nivo-controlNav listed after it. At this point, i'm frustrated. I've done everything that *I* know how to do and have scoured the internet for answers. Here is the site: http://diocesan.com/testsite Help! and thank you in advance for any help, suggestions or advice you can give.

Hi all, I'm trying to get the text "Borrow:", "+ Interest:" and "= You repay*:" to stay fixed while the values that displayed via javascript in the span tags change. The values in the span tags can have different lengths which means at the moment the text doesn't stay fixed. Anyone know how I can get the text to stay fixed while the values change? I've tried setting it to "absolute" but when the page is zoomed in on the text doesn't stay inline with the rest of the page. HTML: <div id="sliderToolResults_Borrow">Borrow: <span id="resultRequested" class="sliderResultBorrow"></span> </div> <div id="sliderToolResults_Interest"> + Interest: <span id="resultInterest" class="sliderResultInterest"></span> </div> <div id="sliderToolResults_Repay"> = You repay*: <span id="resultTotal" class="sliderResult"></span> </div> CSS: #sliderToolResults_Borrow { position:relative; left: 50px; top: -30px; font-style:italic; float: left; } #sliderToolResults_Interest { position:relative; left: 70px; top: -30px; font-weight: 100; float: left; } #sliderToolResults_Repay { position:relative; left: 140px; top: -30px; font-weight: 100; float: left; } #sliderrepay { position: absolute; } #sliderBorrowResult { color: #ff9900; position:relative; left: 45px; bottom: -5px; } #sliderInterestResult { color: #ff9900; position:relative; left: 45px; bottom: -5px; } #sliderRepayResult { color: #ff9900; position:relative; left: 450px; bottom: -5px; } Any ideas? Any help would as always be appreciated. Cheers, CaptainChainsaw

hello, im looking to add some automation to my css... what im looking for, eventually, is for it to automatically detect when theres a th tag, and select the tds thereafter... however, for some reason, its not even detecting the tables with th's... what am i doing wrong? <!DOCTYPE html> <html> <head> <style type="text/css"> table~th{ background:red; } </style> </head> <body> <table> <tr> <th>test</th> </tr> <tr> <td>test2</td> <tr> </table> </body> </html>

i wanna start designin an index.html page and this is the first time im doing it , i want to cut the page elements into a bunch of div tags then filling them with whatever i want later , i just want to know what im doing wrong and what right and how to make the code work for any screen size ! any comment about the code will be helpful cuz i want to move on and fill everything and i dont want to make some big mistake now ! index_off.html index_off.css

Hello Everyone, This is Trisha, and I would like to know about the UI and UX of our website, you can visit our website from here: https://themeselection.com If you want to rate our website then you can do it from here: https://www.csswinner.com/details/themeselection/16567 Thanks!

Using the h1, h2, and h3 with the following info in css (a,b and c) (titlte1, title2 and title3). I am not sure if I have done it correct in css, need help to find out what I an doing wrong, or did I missing something. html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { margin: 0; font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; } h1, .h1 { font-size: 2.5rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.75rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } h1 .aa{ /* use to make text glow in dashboard.php */ background-image: url("move.gif"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase; font-size: 80px; margin: 5px 0; } h2 .bb { /* use to make text glow in dashboard.php */ background-image: url("move.gif"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase; font-size: 40px; margin: 10px 0; } h3 .cc { /* use to make text glow in dashboard.php */ background-image: url("move.gif"); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase;y font-size: 40px; margin: 10px 0; } .title { font-family: 'Comic Neue', cursive; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: -1vh; letter-spacing: 1px; line-height:2 } .title1 { /* use to make text glow in dashboard.php */ font-family: 'Coming Soon', cursive; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 20vh; letter-spacing: 1px; line-height:2 } .title2 { /* use to make text glow in dashboard.php */ font-family: 'Allerta Stencil'; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 1vh; letter-spacing: 1px; line-height:2 } .title3 { /* use to make text glow in dashboard.php */ font-family: 'Kanit', sans-serif; text-align: center; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 10vh; letter-spacing: 1px; line-height:2 } <div class="row"> <div class="col-12 col-sm-6 col-md-5"> <div class="info-box"> <div class="info-box-content"> <h1 class="cc" "title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1> </div> </div> </div> <div class="col-12 col-sm-6 col-md-5"> <div class="info-box mb-3"> <div class="info-box-content"> <h2 class="cc" "title2">AAAAAAAAAAAA</h2> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="info-box mb-3"> <div class="ms-3"> <h2 class="bb" "title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2> </div> </div> </div> ReplyReport It should look like the 2 screenshots