I have a div which contains the following layout (top image): http://tinypic.com/r/287eu88/8
I am trying to work out how to move the elements to the configuration shown in the bottom image on resize/ on mobile devices but I can't work it out.
Here is the jsfiddle: http://jsfiddle.net/9DZSA/1/
If someone could point me in the right direction that would be good, I am a beginner so my code is probably not very good so any pointers would be great too!
Thanks!
"Links to jsFiddle.net must be accompanied by code" - Well I am not targetting a specific element but here is the html to satisfy the requirement:
LATEST PROJECT
<h3 id="latestDescription">aboutaboutabout</h3>
<div id="latestSub">
<h4 id="latestSubheading">Insert Project Name</h4>
<p id="latestSubdescription">Out believe has request not how comfort evident.
<br>Extremity sweetness difficult behaviour he of.
<br>With my them if up many.</p>
</div>
<div id="latestIcons">
<div id="latestOne">
<img id="latestIcon1" src="http://placehold.it/80" alt ""/>
<h5 class="latestH5">Design</h5>
<p class="latestP">Instantly gentleman contained belonging exquisite now direction she ham.</p>
</div>
<div id="latestTwo">
<img id="latestIcon2" src="http://placehold.it/80" alt ""/>tH5">Accuracy & Details</h5>
<p class="latestP">Its hence ten smile age means. Seven chief sight far point any.</p>
</div>
<div id="latestThree">
<img id="latestIcon3" src="http://placehold.it/80" alt ""/>
<h5 class="latestH5">Posibilities</h5>
<p class="latestP">Children me laughing we prospect answered followed.</p>
</div>
</div>
<div id="latestPhotoDiv">
<img id="latestphoto" src="http://placehold.it/350" alt />
</div>
There are few possible ways to do it. You can select according to your need
You can use media queries in which you define different stylesheets for different screens. This is the most used way currently. Sneak Peek:
http://css-tricks.com/css-media-queries/ and
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use the viewport meta tag. Sneak Peek:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
You can design everything in % (fluid responsive) but that part is very tricky. From my experience I can say that designing a full
website giving everything in % is very difficult.
I will suggest you to learn media query. Its quite simple and reliable.
You will have to take a look at media queries.
Media queries give you a way to target certain CSS properties only to specific media properties (including of course the viewport size, but also if it's print, or black and white, and so on).
Many people would suggest that you begin with a mobile-first approach, that is, you start by applying the CSS for the mobile, minimal version, and apply media queries at break points as your viewports get wider, enclosing your CSS like so:
#media (min-width: 480px){
/* CSS goes here */
}
Related
I know that the topic of <img /> vs background-image() is extensively covered, but there is one aspect of it that I have doubts about.
I have a full-size slider on my page. It showcases high-resolution images in the background, but they are not part of semantic content, merely design. I want to keep the images crisp, yet not to congest traffic.
I love the srcset feature, and it would be a great tool for this job, but that would require me to use an <img /> tag or similar. On the other hand, I could stick with CSS' background-image() and use a #media workaround (sadly, image-set() isn't standard yet). (I'd like to avoid Javascript for this case).
Both solutions have their disadvantages. How would each of them weigh on the accesibility & semantic aspects?
One of the goals of this project is to keep the mark-up as lean and structured as possible. So, something like:
<h1>Welcome to Thiswebsite!</h1>
<p>We do lots of exciting stuff here.</p>
<ul class="slider">
<li>
<h2>Travel & Lifestyle</h2>
<p>This is slide 1. Lorem ipsum text and into. Find out more.</p>
</li>
<li>
<h2>Sodomy</h2>
<p>This is slide 2. Wait what? Also info and intro. Spank me.</p>
</li>
</ul>
...is not that bad even when displayed as plain text. Putting images in there would make it awkward to navigate, though. It's a fringe case, but it really makes me think about what the proper way to layout the elements would be.
Please let me know if information provided is inusfficient. Thank you.
CSS is perfectly fine.
You may also chose to use <img> tags but as you want them not to be part of semantic content, you will have to define them accordingly.
Using <img role="presentation" alt="" /> is a perfect choice.
Empty alt attribute is sufficient and mandatory for screenreaders to make them ignore the image. Using role="presentation" will assert that you willingly wanted them not to be announced by screenreaders (and would avoid any doubt in case of accessibility audit for instance).
I'm studying web development for a few months now and I generally have some problems with the front-end and the UI layout. I often have difficulties placing the elements exactly where I want them. In that case, either I use relative values and break the responsiveness of the site, or I write some rules that seem to me like hacks.
For the example, let's consider this image:
As you can see, there is a Bootstrap container, full-width background color, two classic elements inside the container and an image outside.
For this kind of layout, I'd do something like the following:
<!-- /* MAIN WRAPPER -->
<div class="pull-right">
<img src="/img/topright_image.PNG" alt="shape">
</div>
<div class="bg-red"> <!-- Red background color. -->
<div class="container">
<header class="row">
<div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
<img src="/img/logo.PNG" alt="logo">
</div>
<div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? -->
<h1>Centered title</h1>
</div>
</header>
</div>
</div>
<div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
<div class="container">
<section></section>
</div>
</div>
<!-- MAIN WRAPPER */ -->
It's a quick draft, but you get the idea. The CSS will then implement arbitrary height for the header and the section (300px and 400px), then the max-width for the container.
How to do that properly?
(And what if I want to make the logo a little above the title; between two rows?)
"Proper" is relative. Which makes this a tough question to answer. Using only TBS, this solution is how I would do it. However, I tend to favor flexbox more than TBS so I'd probably use the TBS container how you have it set up (yes, doing that to the containers is a valid way of achieving your goal. Another method I have used before, is box-shadows. Neither option is better, but now you know), and then handle each row as a flexbox or even just simply use floats and centering. This is not a very heavy layout.
If you are looking to learn how to do it "properly", I'd read other code. Specifically for TBS I'd recommend Start Bootstrap. It has a bunch of TBS themes you can look at. Look at the code, see how they do it, see what you like, start doing that.
Ultimately, in the end, it doesn't matter how you get there[1] it just matters that you do. This is a viable solution, and I don't see anything glaringly wrong or hackish.
It actually does matter. But you appear to still be in the learning
phase[2] so it doesn't matter as much so long as you are willing to
keep an open mind and correct things as they are found
We are all always learning.
I'm using Pure.css, and this is the code I have.
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
<h3 class="content-subhead">Title</h3>
<p>
Sample Text
</p>
<a class="pure-button pure-button-primary" href="#">Learn More</a>
</div>
I want this div to be centered when in small screen, so I tried is-center, but it centers everything regardless of screen size. I tried reading the guides but I couldn't find any info.
Any help would be greatly appreciated.
If you want CSS some behaviour to happen only for a certain screen size, your best bet is look at CSS Media Queries.
http://www.w3schools.com/css/css3_mediaqueries.asp
Pure.css is most likely using media queries behind the scene. If you couldn't find the right class for this behaviour in pure.css's docs, then you're probably going to need to make your own class that does this.
Here are some steps to get you started:
1. Learn css Media Queries
2. Find the is-center class CSS in the source code of Pure.css module
3. find the correct pixel cut-off for small screen by looking at the media queries in pure.css
4. apply the appropriate media query to the is-center class to create your new class
5. give this class an appropriate name, e.g. is-center-sm
I'm having a terrible time trying to figure out what the proper HTML code is for adjusting the width of my layout's photoset area. I've looked through a handful of previous solutions given by stackoverflowers, but have gotten nowhere. There seems to be a specific sort of hangup in the code I'm using that I just can't find and it's driving me bonkers.
This is the theme I'm using: http://pastebin.com/qePrzu7d
I would very much like to readjust the photoset's width to 650px. I know this can be done because of others who have asked/received help from the members of this website, but I haven't been able to figure out exactly how. I even messaged the creator of this theme and asked her for help, but she replied saying she was too short on time and that it was too complicated to tell me how. If anyone could give me a hand, I'd be so grateful.
Replace the 500px photoset variable with the 700px photoset variable in your theme's html.
{block:Photoset}
<div class="image">{Photoset-700}</div>
{block:IfShowCaption}<div class="cap">
{block:Caption}{Caption}{/block:Caption}
</div>{/block:IfShowCaption}
{block:IfNotShowCaption}{block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}{/block:IfNotShowCaption}
{/block:Photoset}
700px is closer to 650px than 500px is, but you cannot resize photosets easily using css or javascript because they are iframes — if you don't really care about the layout of the photos within the photosets, you can replace the photoset variable with this instead:
{block:Photos}
{block:Photo1}{/block:Photo1}
<div class="photoset_image">
<img src="{PhotoWidth-500}" alt="{PhotoAlt}" />
<div class="photoset_caption">{Caption}</div>
</div>
{/block:Photos}
This will display all of the photos within the photoset individually, and you can style them however you want.
I started reading upon html5 and I am trying to work on a project so that I can see how things work. I know that the tag can be use like this:
<figure id="car">
<img src="img/car.jpg" alt="the car">
<p>The car</p>
</figure>
Though I need to have 6 of those figures, as such I want to use sprites and (unless I dont know something important) sprites only work if i add the image width css (background-image). So what I would do is something like:
<figure id="car">
<pre></pre> <!-- add image from css -->
<p>The car</p>
</figure>
can I use figure tag like that?
Thanks a lot
The figure and figcaption elements are fairly specific in their semantic purpose. If you don't care for semantics, there is really not much of a reason to use them. Divs will work fine. Here is how figure should be used:
<figure>
<img src="/image.jpg" alt="A description of what this image is">
<figcaption>A description that may or may not describe the image specifically and accompanies content from within the article.</figcaption>
</figure>
edit: I should mention that a pre with a background is likely not how this is intended to be used and will not help people with screen readers at all. Bots for search engines may respond differently as well, which could be a negative for you.
Your use case is why object-fit was created.
img {
object-fit: cover;
}
See this stackoverflow question.
Depends on your purpose. If it is for decoration only, sure! Otherwise "is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience." WCAG 2.0 Techniques for CSS
Many developers ignore this, since a solution is often more complex than simply not worrying about accessibility issues. Steve Faulkner's article on high contrast proof CSS sprites goes into this in further detail.