HTML & CSS newbie can't work out why div container isn't being applied - I put the color as red to test it on the font - but it's not updating. I've named the container class as home.hero
I want to use a container for it, as I want to make text changes max width etc only affecting the text and not the background.
I am very bad at explaining this atm!
Thanks in advance (sorry for being a newb/noob/n00b)
P
section#home {
background: url('images/test.png') no-repeat center center/cover;;
color: white;
justify-content: left !important;
padding: 8%;
max-width: 60%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.home-hero {
color: #E83C3C;
}
<section id="home">
<div class="home-hero">
<h2 class="text-dark">Hello we are,</h2>
<img src="images/test.png" alt="">
<h2>Test <h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, augue vitae interdum rutrum, quam.</p>
</div>
</section>
Your code does work for me, therefore I would suggest to you that makes sure that your css-link is correct.
You can in a lot of developer tools ctrl+click the css-link in the HTML file, and then you should be directed to the css-file. If you're directed to an undefined file or gets asked to create said css file, you know for sure that the file path in your html-document is wrong.
Note: css-link are in the head of the html-document and looks like this:
<link rel="stylesheet" href="aFolderHere/yourpage.css" type="text/css" />
or if your css is in the same directory/folder as your html is would look more like this:
<link rel="stylesheet" href="yourCSS.css" type="text/css" />
You have double semi-colons behind the first line in your css - this probably makes the browser stop reading past this point as it produces an error, so none of the remaining css is read:
section#home {
background: url('images/test.png') no-repeat center center/cover;;
change to
section#home {
background: url('images/test.png') no-repeat center center/cover;
I am using Marp which is a tool to create presentations in markdown and convert it into pdf. On the first slide I have some content such as this:
# <center> Working with Virtual Box </center>
<img align="right" src="images/logo.png" width="250">
All of this is top center aligned. What I would want is that the text to be middle aligned(vertically and horizontally) and the image to be bottom right aligned. I couldn't find much about it in the Marp documentation. I am hoping someone with better css know how could help! Believe me, I searched for over 2 hours on this, but my lack of css skills is getting me nowhere.
There are three options:
1. Make the image part of the background.
It sounds like you are trying to put a logo on the slide in the bottom right. In this case, if it is to be on most slides - just create a new background with the image in the bottom right. Then set the image as the slides' background, using the bg keyword in the alt-text box:
2. Create an image background and offset it.
(Perhaps less applicable for a 'logo in the corner' effect put works well for other images).
Insert the image and use the bg keyword in the alt-text box, along with the either right or left.
This can be further customised with percentages - adjusting how much of the slide is given over to the background image.
The image can also be scaled with an additional percentage.
The example below sets 40% of the slide on the right-hand side over the background, and the image is then scaled to 80% of it's original size.
3. Use the footer directive and adjust the css to suit.
This allows for great flexibility of sizing and positioning of the image.
Use Marp's footer directive, and include the image link within that. This can be applied globally or locally to individual slides (as in the example below).
Then you can change the css to customise the size an position of the image. This can be done through a theme css or via the markdown text with tags (as below).
<!-- _footer: "" -->
<style>
footer {
height: 200px;
margin-bottom: -80px;
}
footer img {
height: 100px;
float: right;
}
</style>
# Logo - footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc molestie euismod ipsum, et malesuada sem condimentum a.
Sed pellentesque arcu mattis massa porttitor volutpat.
Try something like this :
where x is your width in %
Source (french) : https://www.unixmail.fr/informatique/presentation-avec-marp/
Tested this today and it worked:
<style>
img[alt~="center"] {
display: block;
margin: 0 auto;
}
</style>
Source: https://github.com/marp-team/marpit/issues/141
Try float right inline style:
<img src="images/logo.png" style="float:right" width=250>
I'm looking for an HTML/CSS solution to this challenge:
I have multiple elements with the same class or same id, and I want to show/hide them all at the same time, using a button or toggle switch. So I then have a click event, when I click that class or ID representing all those elements, they all hide. When I click again, they must show again.
I would appreciate
Thanks
HTML and CSS are used to describe a static representation of content - there is no way dynamically hide/show content using HTML/CSS. You would need to use Javascript to do this. Code example (very simplistic and unelegant example):
<div id="somediv">Hide This</div>
<input type="button" onclick="hide('somediv')" value="Hide Div"/>
<script type="text/javascript">
function hide(div_id) {
document.getElementById(div_id).style.display = "none";
}
</script>
A nicer solution would be to use jQuery but I think for your case you should first learn the basics of Javascript and HTML/CSS before moving onto jQuery.
Do not use same ID for HTML elements! Use element class attribute. jQuery is nice thing, but is overkill for such thing :)
<div class="hide1">One</div>
<div class="hide2">Two</div>
One
Two
No hide
And simple JS code:
function ToggleVisibility(divClass)
{
var els = document.getElementsByClassName(divClass);
for(var i = 0; i < els.length; i++)
{
els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
}
}
According to W3Schools, visibility is standart thing for all major browsers
http://www.w3schools.com/jsref/prop_style_visibility.asp
You can do it with just CSS.
See this simple example http://jsfiddle.net/rHSmV/ (Code Pasted Below).
See here http://dev.opera.com/articles/view/css3-show-and-hide/
and here http://cssdeck.com/labs/css-only-showhide
for more in depth examples
<html>
<head>
<style type='text/css'>
/* Use a checkbox to workaround showing and hiding */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
/* Shown */
div.showhide {
display: inline;
}
/* Hidden */
input[type=checkbox]:checked ~ div.showhide {
display: none;
}
</style>
</head>
<body>
<label for="showHide">Show/Hide</label>
<input type="checkbox" id="showHide">
<div class="showhide">
<p>Show and hide me without JavaScript!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="showhide">
<p>Show and hide me too without JavaScript!</p>
</div>
</body>
</html>
You can use jquery...
$("id of button").click(function(e) {
if($("class of elements").css("display") != "none") {
$("class of elements").hide();
$("class of elements").css("display","none");
} else {
$("class of elements").show();
$("class of elements").css("display","block");
}
});
There is no CSS solution for your task. Look for JQuery function .toggle().
$('.button').click(function(){
$('.some_class').toggle();
});
In Jquery, you could simply call:
$('.ToggleMe).toggle();
where .ToggleMe is the class of your element.
To toggle by ID:
$("#ToggleMe").toggle();
And to toggle my name:
$('div[name=ToggleMe]')
I would like to know how to align the image inside the div on the right side?
You can give the surrounding div a
text-align: right
this will leave white space to the left of the image. (= the image will occupy the whole line).
If you want content to be shown to the left hand side of the image, use
float: right
on the image. However, the surrounding div will then need overflow: auto to stretch to the needed height.
<div style="width:300px; text-align:right;">
<img src="someimgage.gif">
</div>
<p>
<img style="float: right; margin: 0px 15px 15px 0px;" src="files/styles/large_hero_desktop_1x/public/headers/Kids%20on%20iPad%20 %202400x880.jpg?itok=PFa-MXyQ" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.
<br style="clear: both;" />
</p>
There are plenty of ways to align with CSS, each one has it's benefits and disadvantages, you could test them all to check which one fits your case better:
http://www.w3schools.com/css/css_align.asp
TIP: Always search using W3 as extra word, that will give you in first places the resources of the W3school website or the w3.org if there's any relevant.
vertical-align:middle; text-align:right;
<style type="text/css">
>> .imgTop {
>> display: block;
>> text-align: right;
>> }
>> </style>
<img class="imgTop" src="imgName.gif" alt="image description" height="100" width="100">
I know there is a hr (horizontal rule) in html, but I don't believe there is a vr (vertical rule). Am I wrong and if not, why isn't there a vertical rule?
No, there is no vertical rule.
EDIT: It's 2021 (twelve years after I answered this question), and I no longer think my original explanation is true:
(original explanation)
It does not make logical sense to have one. HTML is parsed
sequentially, meaning you lay out your HTML code from top to bottom,
left to right how you want it to appear from top to bottom, left to
right (generally)
A vr tag does not follow that paradigm.
I'm not sure why a VR tag was never introduced, but it's likely not because of the way HTML is parsed - there are many different layout modes in HTML/CSS now that do not follow this "paradigm".
If I were to now speculate as to why there is no VR tag, I might look at MDN's definition of the HR tag as a clue:
The HTML <hr> element represents a thematic break between
paragraph-level elements: for example, a change of scene in a story,
or a shift of topic within a section.
In practice, however, the <hr> tag often ends up used for things other than it's semantic meaning. Although it may seem based on it's real world use that there should be a <vr> tag, it probably would not resemble anything related to the semantic definition of the <hr> tag. It was probably never thought to be introduced.
My hunch is that the creators would suggest that the domain of the solution for this problem lies in CSS, not HTML (and most of the answers to this SO question reflect that).
Nixinova's solution looks like the most elegant and modern solution to this problem.
(The rest of my old answer follows below):
This is easy to do using CSS, however. Ex:
<div style="border-left:1px solid #000;height:500px"></div>
Note that you need to specify a height or fill the container with content.
You can make a vertical rule like this: <hr style="width: 1px; height: 20px; display: inline-block;">
An <hr> inside a display:flex will make it display vertically.
JSFiddle: https://jsfiddle.net/w6y5t1kL/
Example:
<div style="display:flex;">
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
<hr>
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
</div>
As pointed out by others, the concept of a vertical rule does not fit in with the original ideas behind the structure and presentation of HTML documents. However, these days (especially with the proliferation of web-apps) there are is a small number of scenarios where this would indeed be useful.
For example, consider a horizontal navigation menu fixed at the top of the screen, similar to the menu-bar in most windowed GUI applications. You have several top-level menu items arranged from left-to-right which when clicked open up drop-down menus. Years ago, it was common practice to create this with a single-row table, but this is bad HTML and it is widely recognised that the correct way to go would be a list with heavily customised CSS.
Now, say you want to group similar items, but add a vertical separator in between groups, to achieve something like this:
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]
Using <hr style="width: 1px; height: 100%; ..." /> works, but may be considered semantically incorrect as you are changing what that element is actually for. Furthermore, you can't use this within certain elements where the HTML DTD allows only inline-level elements (e.g. within a <span> element).
A better option would be <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>, however not all browsers support the display: inline-block; CSS property, so the only real inline-level option is to use an image like so:
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
This has the added advantage of being compatible with text-only browsers (like lynx) as the pipe character is displayed instead of the image. (It still annoys me that M$IE incorrectly uses alt text as a tooltip; that's what the title attribute is for!)
<style type="text/css">
.vr
{
display:inline;
height:100%;
width:1px;
border:1px inset;
margin:5px
}
</style>
<div style="font-size:50px">Vertical Rule: →<div class="vr"></div>←</div>
Try it out.
How about:
writing-mode:tb-rl
Where top->bottom, right->left?
We will need vertical rule for this.
I know I am adding my answer very late, but it would be worth I am sure. You can achieve vertical line using flex and hr
See my codepen here.
There isn't, where would it go?
Use CSS to put a border-right on an element if you want something like that.
Ancient question but I solved this with display:flex; and it works great:
<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
<div>
This is a div
</div>
<div style="border-left:1px solid black;margin:0 7.5px;"></div>
<div>
This is another div
</div>
</div>
https://jsfiddle.net/6qfd59vm/3/
This solution also doesn't require fixed height.
Try this.
You can set height and width on "div", like the scope for "hr".
The margin of "hr" is used to alignment.
<div style="display: inline-flex; width: 25px; height: 100px;">
<hr style="margin: 0px 0px 0px 12.5px;">
</div>
HTML has little to no vertical positioning due to typographic nature of content layout. Vertical Rule just doesn't fit its semantics.
Try it and you will know yourself:
<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>
you can do in 2 way :
create style as you already gave in div but change border-left to border-right
take a image and make its width 1-2 px
You can very easily do this by
hr{
transform: rotate(90deg);
}
<html>
<head>
</head>
<body>
<hr>
</body>
</html>
Be careful about the height and width of hr
In the context of a list item being used as navigation a <vr /> tag would be perfectly useful. The reason it does not exist is because "It does not make logical sense to have one" in the context of HTML a decade ago.
For use in HTML email for most desktop clients you have to use tables. In this case, you can use <hr> tag, with necessary (but simple) inline styling, like:
<hr width="1" size="50">
Of course that styling with CSS is more flexible, but GMail and similar don't allow using of any CSS styling other than inline...
You can use css for simulate a vertical line, and use the class on the div
.vhLine {
border-left: thick solid #000000;
}
You could create a custom tag as such:
<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>
(If anyone knows a way that I could turn this into an "open-ended" tag, like <hr> let me know and I will edit it in)
There is no tag in HTML, but you can use |.
You could use the new HTML5 SVG tag:
<svg style="position:absolute;width:100%;height:100%;">
<line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
</line>
</svg>
I find it easy to make an image of a line, and then insert it into the code as a "rule", setting the width and/or height as needed. These have all been horizontal-rule images, but there's nothing stopping me (or you) from using a "vertical-rule" image.
This is cool for many reasons; you can use different lines, colors, or patterns easily as "rules", and since they would have no text, even if you had done it the "normal" way using hr in HTML, it shouldn't impact SEO or other stuff like that. And the image file would/should be very tiny (1 or 2KB at most).
Too many overly-complicated answers. Just make a TableData tag that spans how many rows you want it to using rowspan. Then use the right-border for the actual bar.
Example:
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid"> </td>
<td rowspan="5"> </td>
Ensure that the " " in the second line runs the same amount of lines as the first. so that there's proper spacing between both.
This technique has served me rather well with my time in HTML5.
Today is possible with CSS3
hr {
background-color:black;
color:black;
-webkit-transform:rotate(90deg);
position:absolute;
width:100px;
height:2px;
left:100px;
}
For people who're trying to make columns for text, there's a column-rule property which you should consider using!
.content{
margin: 20px 5%;
padding: 5px;
}
.content p{
-webkit-column-count: 3;
-moz-column-count:3;
-o-column-count:3;
column-count: 3;
-webkit-column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
-o-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
text-align: justify;
}
<div class="content">
<p>
Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.
</p>
</div>
<div style="width:1px;background-color:red;height:30px;float:right;"></div>
Easily can be done using a div like this
HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The - is mandatory in all custom elements.
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.
3. instantiate
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*Unfortunately you can't create custom self-closing tags.
usage
<h1>THIS<v-r></v-r>WORKS</h1>
example: http://html5.qry.me/vertical-rule
Don't want to mess with javascript?
Simply apply this CSS class to your designated element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
link to original answer on SO.
No there is not. And I will tell you a little story on why it is not. But first,
quick solutions:
a) Use CSS class for basic elements span/div, e.g.: <span class="vr"></span>:
.vr{
display: inline-block;
vertical-align: middle;
/* note that height must be precise, 100% does not work in some major browsers */
height: 100px;
width: 1px;
background-color: #000;
}
Demonstration of use => https://jsfiddle.net/fe3tasa0/
b) Make a use of a one-side-only border and possibly CSS :first-child selector if you want to apply a general dividers among sibling/neigbour elements.
The story about <vr> FITTING in the original paradigm,but still not being there:
Many answers here suggest, that vertical divider does not fit the original HTML paradigm/approach ... that is completely wrong. Also the answers contradict themselves a lot.
Those same people are probably calling their clear CSS class "clearfix" - there is nothing to fix about floating, you are just clearing it ... There was even an element in HTML3: <clear>. Sadly, this and clearance of floating is one of the few common misconceptions.
Anyway. "Back then" in the "original HTML ages", there was no thought about something like inline-block, there were just blocks, inlines and tables.
The last one is actually the reason why <vr> does not exist.
Back then it was assumed that:
If you want to verticaly divide something and/or make more blocks from left to right =>
=> you are making/want to make columns =>
=> that implies you are creating a table =>
=> tables have natural borders between their cells => no reason to make a <vr>
This approach is actually still valid, but as time showed, the syntax made for tables is not suitable for every case as well as it's default styles.
Another, probably later, assumption was that if you are not creating table, you are probably floating block elements. That meaning they are sticking together, and again, you can set a border, and those days probably even use the :first-child selector I suggested above...
There is not.
Why? Probably because a table with two columns will do.