2018-06-30         Ansel

CSS Layout with Pixel And Percents

I have a div which contains two nested divs, one that specifies a height of 65 pixels (header), the other which specifies the height as 100% (content) and it is supposed to take the rest of the space veritically. When the page renders, there is a scrollbar on the right because of the height specified of 65 pixels of the header. What am I doing wrong mixing percents and pixels? I must be missing something. How do I fix this so the content section uses the rest of the page space and I do not have a scroll bar?Here is the ASP .NET markup and CSS I am using:<div> <a...

 html                     4 answers                     26 view
 2018-06-30         Paddy

HTML/CSS positioning for Menus “float: bottom”

I am creating a horizontal menu, and I can't figure out how to align all the menu options to the bottom of a container. Provided is an example to demonstrate what I'm trying to do, but the CSS code does not work as needed. Can you provide suggestions to get all the menu tabs to sit on the bottom?<style>.example1 { position: relative; width: 32em; height: 10em; background-color: #fbc; background-color: #fdb; margin-left: auto; margin-right: auto; padding-bottom: 0;}.InventoryMenus { position: absolute; bottom: 0; background-color: #f00; padding:0; left: ...

 html                     1 answers                     29 view
 2018-06-30         Georgia

How do I auto-resize an image to fit a div container

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized. Do not apply an explicit width or height to the image tag. Instead, give it:max-width:100%;max-height:100%;Also, height: auto; if you want to specify a width only.Example: http://jsfiddle.net/xwrvxser/1/img { max-width: 100%; max-height: 100%;}.portrait { height: 80px; ...

 html                     28 answers                     26 view
 2018-06-30         Poppy

permanent 2x3 CSS image gallery

I have very basic image gallery how can I fixed it to be 3 columns by 2 rowsThis is the HTML code <div id="gallery"> <div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis"/> </a> <div class="descHead"> כותרת </div> <div class="desc"> Add a description of the image here </div> </div> <div class="img"> <a target="_blank" href="klematis2...

 html                     2 answers                     34 view
 2018-06-30         August

Visited link property overrides current page item

Im coding for quite a while but it seems i never got this problem before, or i just forget the tweak, so anoying:)I have a wordpress site set up, the menu links are a:(textual)the css defined(part):link (color:white;)visited (color:white;)hover (color:black;)active (color:black)now the problem is, i defined current-menu-item in wordpress, everything seams to change except the font color...it seems "visited" is overriding the color...how to fix this?css:#pages ul li { float: right; display: block; height: 37px; padding: 0px; } #pages ul li a:link { float: left; color...

 html                     2 answers                     32 view
 2018-06-30         Francis

Changing Menu Bar Font Size

I'm using wordpress for a website.Here is the link for the website: http://Jamezpearce.byethost7.comHow can I can make the font smaller so can fit more menu bars onto the website?I really appreciate any help given to me if anyone wants anything else please comment and I will supply it.I have already tried altering the CSS but don't seem to get anywhere I'm probably doing it incorrect.I have added font-size:0.75em;to all the menu CSS I can see and still no joy./* Pagenavi */#pnavigation { margin: 20px 0px;}.wp-pagenavi { font-size:0.75em; text-align: centre !import...

 html                     2 answers                     34 view
 2018-06-30         Antony

how to code some atom's atomic number and atomic mass number

I want to know how to code some atom's atomic number and atomic mass number in line also I tried this<sup>35</sup><sub>17</sub>ClIt is like this I triedBut I want like this Chlorine Avoid using the sup and sub tags.Use the following CSS rules instead:HTML:<p><span class="atoms">17</span>Cl</p>CSS:p { line-height: 1.5 }.atoms { position: relative; top: 0.3em; color: blue; font-size: 0.8em; }Edit: You can do something similar for mass number. HTML: <p><span class="mass">35</span><span cla...

 html                     1 answers                     35 view
 2018-06-30         Alfred

Why html element gets misaligned when adding overflow:hidden to one of the siblings?

I have two spans in a div positioned next to each other. But it gets misaligned the moment I add overflow: hidden to one of the span.Why does this happen?.parent { border: 1px solid red;}.one { height: 30px; width: 30px; background-color: #4784ff; display: inline-block;}.two { height: 30px; width: calc(100% - 30px); background-color: #08dd0f; display: inline-block; overflow: hidden;}<div class="parent"> <span class="one">One</span><span class="two">Two</span></div>Try This:-Use vertical-align: top; .parent { border: 1px solid ...

 html                     4 answers                     36 view
 2018-06-30         Brady

How to create text around a circle (Circle of Fifths)

Level of expertise in HTML & CSS: BeginnerGoal: Use HTML & CSS to add text that surrounds the outside of a circle just like this one: Circle of FifthsProgress: https://codepen.io/annieg4123/pen/GGPayQIssue: When I position one letter, it affects the positioning of the others. For instance, if I add left: 855px;to #Gb-Fsharp, the position of #C is changed.Question: Why does this happen? Is my current way of positioning the letters incorrect? If so, what should I do instead? You have to give right id to the css file and give fixed position of letters.I create sampl...

 html                     2 answers                     37 view
 2018-06-30         Jerome

How to show file content into a html to make it as complete html

I was planning to construct a html file which takes the input from other file.Example I want write html file as follows:<html>..//file content.</html>File as follows:<td> </td>..Is there any simple way to do this You can do it using JQuery .load() function, but better to use other container rather than the html element tag. A div for example:<div id="container"></div>And your Javascript code using JQuery:$('#container').load('path/to/yout/file.html'); [XXX]

 html                     1 answers                     39 view
 2018-06-30         Spring

Why the table's inside element's width is not fixed even it's given a fixed number?

I have a DOM structure like this:div#holder > table > tbody > tr > tdI have specified the td to be a fixed widht of 15px. But when I resize the #holder's width, the td's width changed.I would like to know:Why the given number is not ruling? How can I make the td's width fixed?Thanks,setInterval(function(){ var w = 300*Math.random(); $('#holder').css('width', w + 'px');},500)td {width:15px;height:50px;background:#f00;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="holder"> <table> <...

 html                     2 answers                     40 view
 2018-06-30         Abbott

How to make content wrapper "on top" of css grid

I'm working on a site layout using a two-column CSS grid, which looks somewhat like this. It works fine and all the content centers perfectly in each div. The cells with "bg" just have a background image. Each grid cell "touches" the borders of the browser window.+--------+--------+| text | bg |+--------+--------+| bg | text |+--------+--------+| text |+-----------------+However, is there an easy way to wrap & center the content so that it doesn't go beyond a certain width? I could target individual paragraphs to align left or right depending on t...

 html                     2 answers                     41 view
 2018-06-30         Elton

Bootstrap image scatter like this site

I am trying to make a page where a list of images are place like this site:http://www.journaldemontreal.comCan anyone suggest anything? I am a huge fan of google search because with the right keywords, you get the expected output.See this link: https://codepen.io/ckschmieder/pen/KVaZMW/body { margin: 0; background: #333; }.gallery { max-width: 900px; padding: .5vw; font-size: 0; border: 2px solid whitesmoke; display: -ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-direction: row; -webkit-flex-flow: row wrap; flex-flow: row wrap; display: -webkit-box; display: fl...

 html                     1 answers                     48 view
 2018-06-30         Tina

Margin Issue With Child

This issue is a little bit complicated. I am trying to position some images in the order you can in this fiddle, but I had to add a parent div for the images so they could work properly with an animated box that displays the names of the people the images represent. The issue lies with the div not lining up the way the images do as just being lone img tags. Any help with this would be extremely appreciated.body {background: #7d7d7d;}h2 { font-family: Pacifico; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 200; color: white; line-height: 0px;...

 html                     1 answers                     51 view
 2018-06-30         Nathaniel

Does HTML5 ban th cells from tbody?

I have the following markup as a part of a Razor view:<table> <caption>Presidents</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Born</th> <th scope="col">Died</th> </tr> </thead> <tbody> <tr> <th scope="row">Washington</th> <td>1732</td> <td>1799</td> </tr> <!-- etc --> </tbody></table>With the "target schema for validation" set to HTML5, Visual Studio compla...

 html                     3 answers                     48 view

Page 1663 of 1663  |  Show More Pages:  Top Prev Next Last