I want to be able to wrap text if there is a resizing of the window, I know this can be done as there have been other questions similar to mine in SO. (I guess this one would qualify )
I am using Foundation 4 (latest version) and the provided solution does not work; for example take a look at the following screenshot here which shows the result, computed CSS rules and actual page markup. It also shows that the strings of consecutive a's are not wrapped as they should. Any ideas on how to go about an correcting this?
It is not a language. It is a CSS framework. Word wrapping techniques are same as CSS. try the code below.
.class
{
word-wrap: break-word;
}
You can do this with the align attribute. This allows the text to wrap.
<div class="row">
<div class="small-6 columns">
<img align="right" src="http://placeimg.com/240/240/any">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
</div>
</div>
Related
A have CSS-code:
.hide, .hide + label ~ div {
display: none;
}
.hide:checked + label + div {
display: block;
}
It allows me to manipulate div next to label next to checked input.
It works fine, but is there a way, that I can manipulate div with checked/unchecked that is far away from input?
My div has class "dropdown-menu" and it is not related to input in any way and like 50 lines of code after the input.
Can I connect checked value with my "dropdown-menu" div in any way with CSS?
CSS is limited in terms of how one selected element is able to help select and affect other elements in the DOM. You've highlighted two of the very cool combinators available to use already: the adjacent sibling combinator (+) and the general sibling combinator (~). You're no doubt familiar with the descendant combinator (_) <- that's a space. Finally, there's the child combinator (>).
Of these, the only two that I can imagine would be even potentially helpful are the general sibling combinator (~) and the descendant combinator(_). The other two describe relationships that assume very specific proximity relationships (+, >).
You can do what (I think) you're describing with the general sibling selector (at least you can if your markup structure has the dropdown menu div as a general sibling of the label element above it). I don't think it's likely to be in real life, but (assuming it is) here's a contrived example.
.me-too {
padding: 8px;
background-color: #fafafa;
margin-top: 16px;
margin-bottom: 16px;
}
.hider+label+div {
display: none;
}
.hider:checked+label+div {
display: block;
}
.hider+label~.dropdown-menu {
display: none;
}
.hider:checked+label~.dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 16px;
}
<header>
<input id="my-checkbox" class="hider" name="my-checkbox" type="checkbox">
<label for="my-checkbox">Check me!</label>
<div>I can be hidden and revealed</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
<div class="me-too dropdown-menu">
<h2>DROPDOWN MENU</h2>
<p>I too can be hidden and revealed!</p>
Link 1
Link 2
Link 3
Link 3
</div>
</header>
Personally, I really appreciate that you're trying to accomplish this using CSS. I think it's always better to use the simplest tool that can get the job done (HTML, CSS, HTML+CSS, or finally HTML+CSS+JS).
But if my contrived example above doesn't mirror your actual use case, you could surely use JavaScript to cover the gap right?
Let me know if I've misunderstood the intent of your question.
There is no way to do that. It would be possible if there were a parent combinator in CSS, but there isn't.
The solution is very simple with JS-code:
Here it is:
<script>
function myFunction() {
var x = document.getElementById("dropdown");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Add this within container in HTML (of into JS-file if you know how to do that).
And add id to whatever block in div you are trying to hide/show.
ID in JS and ID in div should be the same
Also, remember that if you have basic value of display:block - everything works.
But if your basic display:FLEX, or INLINE, or else - you should change 4-th line of code (with BLOCK) to whatever value you need.
Have you tried data attributes?
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
This question already has answers here:
How can I put CSS and HTML code in the same file?
(6 answers)
Is there a way to do css inside an html body? [closed]
(5 answers)
Closed 2 years ago.
I'm doing my personal page for a virtual grad show in lieu of COVID, hence the school passed us a format that we could use, and told us for "security reasons" we could not modify the CSS whatsoever, even if we had access to it. The CSS is as follows.
.twocols {
display: flex;
justify-content: center;
margin: 4vw 8vw 0 8vw;
}
.twocols-spl {
display: flex;
justify-content: center;
margin: 4vw 8vw 0 8vw;
If I don't put in an image in the following code, my text auto centers, but I would like to know if its possible to override the margins manually as I strictly cannot modify the CSS.
<div class="twocols" id="mir">
<img class="left" src="./data/800x800.png" alt="">
<div class="mir_abstract">
<h2>Subtitle 2</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis suscipit aperiam laborum necessitatibus quae alias recusandae nostrum eum soluta corrupti quidem temporibus ipsa voluptatum nemo optio, libero, eveniet totam. Fugiat.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
Just add style="" to the specific HTML tag you want to modify.
You can easily override it.
Just add Another stylesheet on this page after the first one,
Or add a tag,
Or use th attribute style="" in the html,
Or add a JS script which update the style of the element if there is no img.
You can override by in-line Styling CSS and remove important! If you have used it in code.
I understand that normally when you click on a link from your nav bar another web page opens.
In my current personal project I only want to change the div content after I click on a link from the nav bar, this means the change is small and I know how important the DRY rule is so I am pretty confused here.
In this situation if I want to make this happen with only standard HTML, CSS and without javascript(not taught in class) the only option is to upload multiple version of the same HTML file with different div contents and link those with the anchor links in the nav bar in the index HTML file correct?
What you're looking for is called an inline frame, or <iframe>. This allows you to set up an area where context can appear, and you can link it directly to a specific frame.
For example:
<nav>
Open in iframe
</nav>
<iframe name="main" width="640" height="480"></iframe>
In this example, the link has the target set to main, which happens to be the name of the iframe. Any link with the target matching the iframe's name will open up within that iframe.
Another option is to use CSS :target. The idea is that you click a hashed link (like #about) and show the HTML fragment with the corresponding id via CSS, hiding everything not targeted.
main>section {
display: none;
}
:target {
display: block;
}
<nav>
Home
About
Contact
</nav>
<main>
<section id="home">
<h2>Welcome To My Homepage</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis obcaecati minima rerum doloribus expedita deleniti nesciunt voluptate quo, in, perferendis quibusdam sed quas quisquam recusandae adipisci, asperiores iure quod!</p>
</section>
<section id="about">
<h2>My About Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis obcaecati minima rerum doloribus expedita deleniti nesciunt voluptate quo, in, perferendis quibusdam sed quas quisquam recusandae adipisci, asperiores iure quod!</p>
</section>
<section id="contact">
<h2>My Contact Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque veritatis obcaecati minima rerum doloribus expedita deleniti nesciunt voluptate quo, in, perferendis quibusdam sed quas quisquam recusandae adipisci, asperiores iure quod!</p>
</section>
</main>
jsFiddle
I faced with interesting design problem.
I need to make scrollbar as at youtube menu (left menu):
Default scrollbar hidden, but with :hover show scrollbar.
I use overflow: hidden and overflow: auto ( for :hover).
But for mobile devices don't work for this method.
I search solution and find several interesting way:
https://codepen.io/kizu/pen/OyzGXY
.scrollbox {
width: 10em;
height: 10em;
overflow: auto;
visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover,
.scrollbox:focus {
visibility: visible;
}
.scrollbox_delayed {
transition: visibility 0.2s;
}
.scrollbox_delayed:hover {
transition: visibility 0s 0.2s;
}
<h2>Hover it</h2>
<div class="scrollbox" tabindex="0">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
<h2>With delay</h2>
<div class="scrollbox scrollbox_delayed" tabindex="0">
<div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>
But I have not know height of wrapper and this solution don't work for me.
Whether there is a working way to make something similar without JS use?
If is not present, then what simplest solution for JS?
(i find example by JS-library: https://tympanus.net/Tutorials/ScrollbarVisibility/index.html)
Scrollbar rendering is very inconsistent across browsers. On Mac, for example, it does the behavior you describe, by default, if using webkit.
If you want something working across all devices, you should rely on a JS solution.
But I would advice to really think about the use-case behind this, as, as a general rule of thumb, anyone messing with the user's scrollbar has a poorly designed interface to begin with.
I came up with a solution to my problem.
This proved to be the obvious method: media query. I set the media query (:hover) for large devices (PC). And for small devices, the scroll is always shown.
Of course, this solution may not be suitable for everyone, but for me it turned out to be a good solution.
For a universal solution is suitable JS (as Edouard Reinach said).
I have two <div>. One of them with 'Lorem ipsum' text, second - with numbers. I found, that div with numbers, don't wrap numbers to new line in fixed width <div>. Is anybody can explain, why number don't wrap to new line, maybe this situation described somewhere in specifications?
JSFiddle.
div {
width: 200px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>
Because the browser treats numerals as regular text and won't break it unless you tell it to with something like the word-wrap or word-break property. Add a rule like:
div {
width: 200px;
word-wrap:break-word;
}
to do that.
jsFiddle example
div {
width: 200px;
word-wrap: break-word;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div>
<div>111111111111111111111111111111111111111111111111</div>