I want to align centered an image and a short text, relative to viewport.
I would like to have the image followed by the text in the same line when it is space enough, like landscape view.
And when isn't enough space for both in the same line, I would like the text to slide under the image, and both to be still centered!
Any ideas will be welcomed.
Your request is the basic fundamental reason why the whole area of responsive web pages exist, and mobile first design methodologies ... this is a very very generic question, you need to be more specific ... are you trying to achieve this just with your own html and css ?? are you using any frame works ?? This is standard business as usual for frameworks like Bootstrap3.0 and jQuery. If you have not heard of them, then I would recommend stop trying to re-invent the wheel, get a crash course in Bootstrap3.0 (particularly in the scaffolding, this is how you achieve responsiveness, you can specify css settings for different screen sizes, what is the minimum width of an item, and what to do in the event that this minimum width is crossed ... slide one item under the other ... items can be divs, viewports, ANYTHING)
Related
I am trying to make my nav bar sit parallel with my logo but I'm having difficulty doing this.
First of all, when I enter the code for the image, the image afterwards doesn't display at the top of the page.
Instead, it sits about 40px below the page. I have tried using floats, but have had no luck.
I have created a negative value of -20px for the logo to sit further at the top of the page but would like to know if that is normal practice in CSS
I have tried looking at youtube videos but the code they share doesn't seem to work on my project. I'm just wondering whether the image may be a bit too big for the header
I would definitely recommend using Flexbox. It takes the hard work of setting floats and setting things in a manual way out of your way. Here is a cheat sheet and a little background into using Flexbox. It's also responsive too.
The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
if want to easily make a navbar you can go to the website listed below and you can pick which one of the navbars you want then alter or change it based on what you like it has all styles of navbar with logo without a logo or even the style you want.
link to navbar code:
https://www.w3schools.com/css/css_navbar.asp
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
Situation:
I created a full screen layover navigation for a html5 webpage including links displayed as images. I used images because of the special hover effect, which is not possible in code.
This means that my links such as Home, About, Portfolio, Contact are made out of images (and not text) and displayed in a list.
I created two images per link: 1 for normal state and 1 for hover state.
I used the replacing img technique shown here:
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
Issue: The navigation works well on a large screen, but the trouble starts when scaling-down the viewport. The images controlled by max-width behave separate from each other and do not scale at a similar rate when scaling down the screen. Of course this relates to the biggest image (which hits the viewport border) to scale first and the smaller later. In my case: the Portfolio image will scale earlier than the Home image. This results in a strange looking navigation, as the images differ in size at some point.
Some other elements I considered:
I can make smaller images for smaller screens, but that would make a lot of images too load.
I can make all images the same size as the biggest image. But it means the smaller word will have empty spaces on the left and right of the word. This empty space will also activate the hover state, which makes it look strange (hover state activates while I'm not on the link itself (visually, not technically).
Question:
How can I use an image-based navigation and scale down the navigation links/images equally when scaling down the viewport?
I made a JSFiddle for testing: DEMO
Thanks in advance.
I've been looking at this for a while and I'm beginning to think this isn't possible. The root of the problem is that each image would need to be aware of the largest image, or at least each of the <li>s would need to be aware of the other ones' dynamic height, which isn't possible with some sort of DOM manipulation. Even with flexbox I'm unable to make this work.
My advice would be to create each image the same width, using PNG transparency, then simply use an image map to activate the hover state over only the button area of each image. It's a bit of work but I can't think of a better way. See this StackOverflow question for ways to make the image maps.
I'm making some chevron style links for my web application, and have followed the tutorial here (breadcrumb links with css) in order to add them to the site. This all works fine. However when I start to shrink the size of the page they rapidly start to pile up on top of each other, and look crap. They remain the same width - whereas I'd like them to gradually shrink in width (and perhaps increase in height to accommodate the contents) as the page size shrinks. Ultimately I'll put in some that point down specifically for the mobile user.
Is it possible to tell bootstrap to shrink a block element or to scale it down as the available page width decreases?
I dont know, but maybe give the block this:
height:auto;
You only need to find the right class in bootstrap.css or bootstrap.min.css.
But if you want to edit somthing please use bootstrap.css and not bootstrap.min.css
I have the following
image as a powerpoint flow chart (text with hyperlinks not shown).
I want to turn this chart into an html-website.
Any ideas how to get a good result for this task?
I think recreating this with coding in html is troublesome.
Thank you.
Text on gray backgrounds (5 on right, 2 on left) are probably headings of the same level so they would be hN floating on the right and coming before each set of arrows.
Each individual set of arrows can be fairly easily coded as lists and styled as these breadcrumbs:
Simple scalable CSS based breadcrumbs (by Veerle Pieters)
Breadcrumb Navigation with CSS Triangles (by Chris Coyer)
They can expand with content if it seldomly occupies 2 lines (Firefox/Ubuntu and Safari/Mac have laaarge fonts, don't assume that your text will always stay on 1 line. Not speaking of zoom text that should be taken into account)
As for orange arrows between individual series ... that's complicated enough without HTML so it depends of context I believe. Is this an industrial process, webmarketing or else? To make it accessible, I'd use HTML images with alternative text trying to describe relationship.
Red arrows could be anchor links, probably.
I Think this image can be optimized pretty good, as it doesn't have a very complicated graphic. Therefore an easy solution can be just including it as an background image and then you can set the text and links into place using css.
A better solution is to break the picture into smaller components, then this way you can define "div" s with the background-color, border, and border-radios as the gray parts, and set the white elements as the background-image of "a" tag... However for the arrows I think you should include them as background-image...
Hope this helped...