I have a website coded currently in XHTML and I recoding it in HTML 5. There a few spacing issues that need to be sorted out in order get it to look the same.
I'm replacing most of the inline-block with block if I can get it to look the same and setting the vertical align on images to something other than baseline.
The only problem I'm having is some elements of the page have a bit of horizontal spacing on them. One page had...
KeredDrahcir
Last Activity: Aug 1 '16, 04:33 PM
Joined: Nov 19 '09
Location: Henley-on-Thames
-
Horizontal Spacing with HTML 5
-
What's the point of being on Bytes if no one ever answers your questions? -
Change number of clicks required to follow link
I'm using a nested list as a menu with sub menu items. I used to do it where if you hovered over main menu item, the sub menu items would appear by changing the display from none to block.
I decided to make the sub menus looks as if they were dropping down and used CSS transitions.
The problem I have is that in the first approach if you touched a main menu item on an iPad the sub menu would display and you would touch it again... -
Calulate number of colums from content
I have got a container 800 pixels wide with the overflow set to hidden. Inside I've got the content set to be in columns of a fixed height and 400 pixels wide so that two are shown at a time.
I've got an onclick event to adjust the margins to the columns to move through the content two columns at a time.
Since I know the width and height of the columns, is there a way to calculate how many columns my content is likely to take... -
Load page and change margin using JavaScript
I want to load a page using a link and depending on which link I click on, I want to change the margin on the page.
If I click on link 1, I want the margin to be 0, but if I click on link 2 I want it to be 350.
Is there a way to load a page and set the margin of an element if I know the ID in JavaScript? I'm quite happy to use JavaScript to open the page.
I don't want to use jQuery. -
For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.
On hover, define a new transition duration ( the duration that the list will take to appear ).
Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm
HTML :
CSS :Code:<div class="text">Some texte</div>
...Code:.text{ background:blue;Leave a comment:
-
Change speed of transition
I've got a dropdown menu that uses lists to achieve it. The sub menu has a height of 0 and then the hight changes when the user hovers over it.
The limit of the animation is that I can't set the max-height as auto so I've set it to a value that it unlikley that the sub menu will ever reach.
Since the tranistion time is based on the max-height is is very fast so I've slowed it down to be a suitable speed but what I'd... -
That makes sense. Thanks. I'll give it a try and let you know. The reason I was setting it as a string was becuase it hadn't worked so I'd tried something else but I have a feeling it's going to work. Thanks.Leave a comment:
-
Deselect checkbox if confirm is false
I have a series of checkboxes that uses can click on which will cause a form to submit. Before I submit the form I wasn't them to confirm that's what they want to do.
I can't seem to uncheck the box if they choose cancel and I'm not sure what is wrong with the code I'm using. Can anyone help?
...Code:<input type="checkbox" name="box_1" id="box_1" value="1" onclick="javascript:if (confirm('Are -
Split table row into two rows without specifying height
I am trying to include a table on a mobile responsive design. The table only has two columns but on the lowest resolutions the table takes up too much horizontal space.
I'm quite happy to display the columns as two rows and I have a way to achieve this but it causes problems if one of the fields is long enough to go onto more than one line.
I can recode the table as divisions but I'd like to try and avoid that if possible.... -
Perform different option on desktop
I have found a way of making a link initiate a phone call on a mobile website.
This is fine of a mobile but on the desktop it asks me which application it would like me to use and suggests Skype but I'd prefer it to link to a Contact page. Is there any way to set the link to do something different depending upon whether it is a mobile of not?Code:<a href="tel:12345678910">Call us at 12345 678910</a>
-
Function to change image by input value
Since <input>s are not easily customisable, I'm using an image to replace a checkbox with a hidden input to store the value. I want three options (0, 1 or 2) and I want the user to be able the click on the checkbox a second time to select the second option before a third click deselects it again.
The function I've used before and it worked so I can't see why it isn't this time. Can anyone help me please?
This is the function:... -
Can't anyone help me?Leave a comment:
-
Flexable columns in Safari and iPhone Chrome
I am trying to create a mobile responsive template. I am using the CSS media to find the browser width and it's working fine in most cases.
I want however on a device where the left column will take up too much space for it to jump below the main content on the right.
The solution to get the left down was to use flexible columns to reverse the flow.
This works fine in Firefox, Google Chrome, Internet Explorer and Opera... -
This is the way to do it:
Code:background-position: calc(50% + 490px) top;
Leave a comment:
-
Isn't anyone prepared to help me?Leave a comment:
-
Positioning the body background starting from container end
I have a container that is 980 pixels wide. I want a background of the main page (the body) to start from the right of the container and continue as far right as the browser window goes, or until the image ends (whichever is sooner).
It I position the background image like this:
...Code:body { margin: 0; font-size: 10pt; line-height: 1.4em; text-align: center; background: url(images/image.jpg) -
Can't anyone help me? If you need mpre detail let me know. I'm stuck without being able to fix this.Leave a comment:
-
Adding border radius to colour stop
I have a box that needs to be 270 pixels high and I want the top part of it to be black without having to use an image.
The black bit needs to hava border radius of 8 pixels on the top left and bottom left edges.
To get only top part of the box black, I'm using a liner gradient with a colour stop. It there anyway to put rounded edges on that?
...Code:.label{ background: -webkit-linear-gradient(0deg, #ffffff 249px, #000000 -
Nested flexboxes
I'm trying out using flex boxes to get columns to have the same height.
My page layout looks like this:
...Code:<body> <div id="container"> <div id="site_header"> </div> <div id="menu"> </div> <div class="page_header"> </div> <div id="content">
No activity results to display
Leave a comment: