Search the Community
Showing results for tags 'inline'.
Found 14 results
-
https://www.w3schools.com/w3css/w3css_input.asp Hi, I'm using w3css and have a problem with a select field. Ive got a form (obviously) with a big TABLE - rows/columns. in one of the TD fields Ive got a bit of text, and then a SELECT field. The options within the select field are January, Feb, mar etc.. December Now - The select field is appearing BELOW the text i want - even thougfh the width of the TD field can obviously contain both the text & select fields in one line. i'm trying [CODE]<select class="w3-select" style='display: inline-block; float: left;' name="MYNAME" onchange="this.form.submit()">[/CODE] However i cant get the select field to be the same line as the proceeding text . any advice ? EDIT: the SELECT field fills the whole width of the TD field. So i can see that the words & select could easily fit on 1 line
-
horizontal icon bar In this example I have a doubt. As far as i know <a> tags are inline elements. And we can only add left/right paddings to inline elements, and not top and bottom. But here it act as block level element as can be seen from this line of code which works : .icon-bar a{ padding: 12px 0; } So When I inspect the <a> tags, I found that it shows its computed value of display as block. So how does <a> tag has become block level without explicitly changing its display property?
-
What are actually the rules for php inline coding? are there rules or can you just use all attribute that can have a value in combination with php?
-
Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: http://www.jasonwangart2.blogspot.ca/ Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype> -
Does anyone know how I can get the Text Image to be in the same line as the search bar? Right now the Image sits on top of the Search Bar. This is what I have for the code so far... <!DOCTYPE html><html><script> (function() { var cx = '015893638143991805514:c78o5hkpg04'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();</script><body><div style="background-color:white; color:white; margin:15px 0px 0px 0px; padding:0px"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/357638_orig.jpg" border="0" width="220" /><gcse:search></gcse:search></div> </body></html> -
I post regularly on forums and blogs that allow HTML in the post but of course there is no access to CSS and anything "fancy" (inline CSS type things) is stripped. Things like border widths, coloring, object with, _blank are allowed and so on. Sometimes I forget the sytax or even wording of formatting I have used in the past and try to look it up. So many sites that I have used in the past now say, "not used for HTML 5" and then do not give any reference to the old command. Is this to say that documents using HTML4 will not be recognized? Most recently I was doing a post on a closed WordPress blog. I wanted buffering around a photo using the traditional table method, line widths and colors, and cell background coloring. Everything I researched gave me how to do with CSS. I'm not going to tear apart a WordPress site that regularly switches themes and each post and some pages have custom elements just to hard code the CSS. To top it off, this is a multisite which, if you are not familiar with WordPress, means one base set of web instructions and database form the foundation for many "web sites" (in my case) each of a different theme and design elements. Some are out of the box, some highly tweaked. And yes, I know how to make child themes. So, does the use of HTML5 mean all the posts on blogs and forums will need to be updated and what happens to those that happily use old-style formatting which does exactly what is needed and desired and not have the more modern inline scripting that is not allowed sometimes. (or, for old fogeys as I, harder to remember)
-
I would appreciate your help with layering a widget title with a background over a slider. The demo site appears here: http://acceleratedpowermarketing.com/reicher/ I want it to look like this: http://www.standrewsch.org/ Where the bar with the title doesn't move when the screen is zoomed. Using this code, I'm able to get it to look like I want if it's zoomed at the correct place. Otherwise the bar, is out of place. I want to learn how to do this with blocking if that is possible and will solve the problem. Thanks #it_widget_content-5 .widget-title { background: url("images/Home-Page-Banner.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fff; font-size: 2em; font-weight: normal; padding: 0.35em 0.5em; position: absolute; right: 15%; text-indent: 0; top: 30%; z-index: 995; }
-
Cut the code: <input onkeyup="s?e=Date.now():s=Date.now()"onblur="c=this.value.length;this.value+=c/(e-s)"><script>s=0</script> ☑ 113 <input onkeyup="s?e=Date.now():s=Date.now()"onblur="c=this.value.length;this.value+=c/(e-s)"> Ø 93
-
People always say that if you have JavaScript code which is used by multiple pages then it should be in an external page but if it is only used by a single page in should be internal. People also say that external JavaScript code can make the browsing slower since additional PHP requests are made but that when it is internal less bandwidth is used. Is it a good idea to put JavaScript code into PHP files and then include them like any other PHP files? I've been thinking about this because then I can minimise the HTTP requests and at the same time use the same JavaScript files in many PHP files.
-
New to this, so pardon my verbal mistakes. Site Currently Being Worked On The problem is, is that all the products are in great placement, until you reach the 4th row down, where the style breaks and the hats on the bottom do "their own thing". I can't find anywhere in the break that would show this... /*============= Begin Products Grid Styles========================*/#products {background:none;display:inline;float:left;margin:0px;width:995px;}#products div.product { border: 0 none; display: block; float: middle; height: 200px; margin-bottom: 20px; margin-right: 20px; width: 171px;}#products div.product p {margin-bottom:5;}#products .product-img { border: 1px solid #bbbbbb; display: inline; height: 170px; float: middle; vertical-align: middle; width: 169px;}#products .product-info {border-top:2px solid #fff;float:middle;padding:5px 9px 11px;width:157px;}html #products .product-info {width:157px;}#products .product-a h3, #products .product-a p { color: #FFFFFF; text-align: middle;}#products .product-title { background: none repeat scroll 0 0 #000000; font-size: 10px; line-height: 16px; margin-top: 5px; margin-bottom: 5px; padding: 3px 0; position: relative; text-transform: normal; vertical-align: middle;}#products .product-title span {padding-left: 10px;padding-right: 10px;}#products .product-price {background:none repeat scroll 0 0 #000000;float:right;font-size:11px;font-weight:700;margin-left:176px;margin-right:0;margin-top:-25px;padding:5px;position:relative;}#products .product-status {font-size:10px;font-style:italic;}#products .product-a {clear:left;cursor:pointer;display:block;float:center;overflow:hidden;text-align:center;width:100%;}#products .product-a h3,#products .product-a p {color:#ffffff;font-weight:normal;text-align:center;}.pagination {background:none repeat scroll 0 0 #fffff;clear:both;float:middle;font-size:12px;font-weight:normal;margin-bottom:20px;margin-left:5px;margin-right:5px;padding:5px 0;text-align:center;}.pagination span,.pagination a {padding:0 3px 0 6px;}.pagination span.yadda {background:none;padding:5px 4px;}span.stilt {display:inline-block;vertical-align:middle;}.current-product-counter {display:none;} What could the issue be?
-
I am trying to fix a problem that only occurs in IE 7 (and probably 6). View my page here with browser mode in IE7 (or view the screenshot I have attached) and you will see what I mean: http://houserepublicans.wa.gov/brad-klippert/. The hyperlinks are overlapping in some places, but not all. In my main stylesheet, I have a {display:inline !important;} It is the very last rule. While this worked to fix the problem in other browsers/versions, it doesn't for IE 7. I have spent a ridiculous amount of time with Google searching, to no avail. The biggest recommendation out there (and I think it was mostly if you're trying to use display:inline-block) was to add: zoom: 1; *display: inline; to my declaration. This merely makes my links dissapear altogether. I would appreciate any thoughts/ideas/links/suggestions...at my wits' end.I thought I could just ignore IE7, because it's nearly 3 versions old now, but unfortunately the agency I work for has "compatibility view" as a default selected on all our computers, as well as IE as the default browser. So people see our brand new beautiful site and think it's ugly.Thank you!!
-
why should i use a css id and not style it (inline).w3schools css book says that we shouldn't unse the same id multiple times on multiple elements why ?why shouldn't we use inline style id one id can only be used for one tag ?
-
Hello web wizards.I am currently developing my site and have downloaded a query menu to implement in it. I have successfully installed in into my page in dreamweaver and kind of successfully styled it to my design. I am having problems with the width of each menu item, the <a>. It seems that when I view the code in Safari-develop-view web inspector, that there is extra divs and inline styles that are not in my HTML page in dreamweaver. I am posting the snippet of the HTML and a screen grab of the page in browsers code... Can anyone give me some idea as to where the div class +holder horizontal maybe and where I can edit it. I have looked at the Javascript and cannot see anything relating to width or height in there either. Help Please...... <div class="container"> <div id="CS5Icons"><img src="images/CS55icons.png" width="199" height="37" alt="cs5 icons" /></div> <div id="followme"><img src="images/socmedicons.png" width="188" height="37" alt="facebook" /> <!-- end .followme --> </div> <div id="menu-wrap"><div class="menu-horizontal"><a href="#" class="active">Home</a><a href="#">Portfolio</a><a href="#">About me</a> <a href="#">Contact</a></div> </div>
-
I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="description" content="fromthericefields, blog, home" /> <meta name="author" content="Joseph Davies" /> <link rel="stylesheet" type="text/css" href="header.css" /> </head> <body> <header id="mainheader"> <hgroup> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2> <h3>Proverbs 18:21;</h3> </hgroup> <nav> <ul> <li><a href="signin.html">Sign in</a></li> <li>|</li> <li><a href="register.html">Register</a></li> </ul> </nav> </header> <nav id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Blog</a></li> <li><a href="index.html">Gallery</a></li> <li><a href="index.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> <section> <article> <h4>Setting up fromthericefields:</h4> <h5>Posted on 10/5/12</h5> </article> </section> <aside> <blockquote> </blockquote> </aside> </body> </html> The CSS: body { } #mainheader { background: blue; margin-top: -25px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; height: 200px; width: 1000px; } #mainheader hgroup { padding-top: 10px; width: 1000px; } #mainheader h1 { font-style: italic; color: #ffffff; text-shadow: 5px 5px 5px #000000; font-size: 40px; } #mainheader h2 { font-style: oblique; font-size: 20px; color: #FF0000; margin-left: 20px; margin-top: -20px; } #mainheader h3 { font-family: monospace; font-size: large; color: #AAAAAA; margin-left: 600px; margin-top: -10px; } #mainheader nav { margin-left: 810px; margin-top: -130px; } #mainheader ul { list-style-type: none; } #mainheader li { text-align: center; display: inline; color: white; } #mainheader a { text-decoration: none; color: white; } /*Main Navagation Bar*/ #mainnav { width: 900px; background: red; border-bottom-left-radius: 25px; border-bottom-right-radius:25px; margin-left: auto; margin-right: auto; } #mainnav ul { list-style-type: none; margin-left: -2.5em; } [b] #mainnav li { display: inline; border: solid; }[/b] #mainnav a { text-decoration: none; color: white; text-align: center; } The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?
