milosev.com
  • Home
    • List all categories
    • Sitemap
  • Downloads
    • WebSphere
    • Hitachi902
    • Hospital
    • Kryptonite
    • OCR
    • APK
  • About me
    • Gallery
      • Italy2022
    • Curriculum vitae
      • Resume
      • Lebenslauf
    • Social networks
      • Facebook
      • Twitter
      • LinkedIn
      • Xing
      • GitHub
      • Google Maps
      • Sports tracker
    • Adventures planning
  1. You are here:  
  2. Home
  3. CSS

One more example of responsive design

Details
Written by: Stanko Milosev
Category: CSS
Published: 04 June 2019
Last Updated: 09 November 2021
Hits: 1995
Here I already gave one example of responsive table. Now I needed to display thumbnails on the right side for bigger screens (desktops) and for smaller screens (mobiles) to display them under the map. So here is my example:
@media only screen and (max-width: 480px),
(min-device-width: 768px) and (max-device-width: 1024px) {
	#map-canvas {
		position: relative;
		width: 100%; 
		height: 50%; 
		float: left;
	}

	#thumbnails {
		width: 100%; 
		height: 50%; 
		float: left; 
		overflow: auto;
	}
}

@media only screen and 
(min-device-width: 768px)  {
	#map-canvas {
		position: relative;
		width: 50%; 
		height: 100%; 
		float: left;
	}

	#thumbnails {
		width: 50%; 
		height: 100%; 
		float: left; 
		overflow: auto;
	}	
}

pointer-events: none

Details
Written by: Stanko Milosev
Category: CSS
Published: 16 February 2016
Last Updated: 16 February 2016
Hits: 4025

Just a short reminder to myself, copy / paste from here:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. 

Understanding vertical-align

Details
Written by: Stanko Milosev
Category: CSS
Published: 05 February 2016
Last Updated: 07 February 2016
Hits: 3949

Title (and content) of the article I stole from this web site.

From that same web site copy / paste of the key sentence:

HTML layout traditionally was not designed to specify vertical behavior

To have properly working vertical alignment, in my case, I had to introduce a table, this is my HTML:

<div style="height: 800px" class="detail-control">

	<table style="height:100%">
		<tbody>
			<tr>
				<td>
					<img style="vertical-align: middle" border="0" alt="Please press the play button." onerror="this.src='path to image to be displayed if original one is not found'" src="/URL of an image">
				</td>
			</tr>
		</tbody>
	</table>

</div>

Notice height of div (800px for the sake of testing), and height of table (100% to cover whole div), then in img tag note style.

Selectors again

Details
Written by: Stanko Milosev
Category: CSS
Published: 09 December 2015
Last Updated: 09 December 2015
Hits: 3364

This time I was combining id's and classes. This is my HTML:

<div id="article" class="l-fixed">
	Article
</div>

CSS:

#article {
    width: 80%;
    float: left;
    border: 2px solid black;
}

.l-fixed#article {
    width: 600px;
}

Notice that there is no space in selectors: 

.l-fixed#article

Like this we can add class on the same element with id, otherwise, with space:

#article {
    width: 80%;
    float: left;
    border: 2px solid black;
}

.l-fixed #article {
    width: 600px;
}

I would need nested element, something like:

<div class="l-fixed">

	<div id="article">
		Article
	</div>

</div>
  1. Simple drop down menu
  2. How to find default font size
  3. em's and rem's
  4. More about selectors

Subcategories

CSS3

Page 1 of 8

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8