Align images with text baseline in <div> - html
I have a CGI script that creates a "navigation aid" consisting of arrow icons and text label like this:
Obviously it would look much better if the text baseline would align with the bottom of the arrow icons.
The arrow icons were copied from GNOME 16x16 arrow actions a few years ago.
The HTML code is this:
<div><a title="Erster Eintrag" href="#A0"><img alt="|<" src="/ig16a/go-first.png" class="toolbar"></a> <img src="/ig16a/go-previous.png" alt="<" class="toolbar"> <span class="navaid">2 von 29</span> <img src="/ig16a/go-next.png" alt=">" class="toolbar"> <img alt=">|" src="/ig16a/go-last.png" class="toolbar"></div>
The CSS used is:
body {
color: black;
}
.navaid, .toolbar {
font-size: small;
font-family: sans-serif;
background: #fffab7;
margin-top: 1ex;
margin-bottom: 1ex;
}
If someone wonders about the different classes:
The idea was to hide the arrow icons when printing the page...
In case someone needs the arrow icons (Sorry for the length!):
# tar czf - icons | uuencode icons.tar.gz
begin 644 icons.tar.gz
M'XL(`````````^R<"3B4:\/'QQ;'DK%ES1I)Q>Q#62=.=#F)VI;$/LK<-
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
5````````````^/?X$XK8#%``H```
`
end
Use vertical-align: top | middle | bottom; in your CSS to align vertically.
Also ensure you use display: inline-block; in your CSS to align to the top / bottom of your images correctly.
Note: You can also use display: inline-flex | inline-grid;. See MDN for details of display options.
body {
color: black;
}
.navaid,
.toolbar {
font-size: small;
font-family: sans-serif;
background: #fffab7;
margin-top: 1ex;
margin-bottom: 1ex;
}
.nav a {
text-decoration: none;
}
.nav-top .navaid,
.nav-top .toolbar {
vertical-align: top;
display: inline-block;
}
.nav-middle .navaid,
.nav-middle .toolbar {
vertical-align: middle;
}
.nav-bottom .navaid,
.nav-bottom .toolbar {
vertical-align: bottom;
display: inline-grid;
}
<p>Align Top</p>
<div class="nav nav-top">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Align Middle</p>
<div class="nav nav-middle">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Align Bottom</p>
<div class="nav nav-bottom">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Some text</p>
Remove side note concerning frameworks
maybe try adding this to your CSS:
.toolbar{
margin-bottom: 0;
}
Related
Why is the border only adding around the first <li> item despite all <li> items being in the <aside> element
Here is the HTML and then the CSS. As you can see the aside is covering all the li items. The CSS is using the aside tag to add the border around all of these elements, but it is only adding a border around the first li item. I have tried adding a separate aside element around each li to overcome this but this didn't work. I have inspected using chrome dev tools and couldn't understand why this is happening.
<aside>[enter image description here][1]
<h5><strong>Related posts</strong></h5>
<ul>
<li class="related-post">
<img
src="img/mantyping.jpg"
alt="mantyping"
width="100"
height="70"
/>
<div>
<a href="Howtolearnwebdevelopment.html" class="related-link"
>How to learn web development</a
>
<p class="related-author"><strong>By Jonas Schmed</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/csspower.jpg"
alt="lightning"
width="100"
height="70"
/>
<div>
<a href="Unknownpowersofcss.html" class="related-link"
>The unknown powers of css</a
>
<p class="related-author"><strong>By Jim Dillon</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/javascriptcode.png"
alt="javascript code"
width="100"
height="70"
/>
<div>
<a href="javascriptisawesome.html" class="related-link"
>Why Javascript is awesome</a
>
<p class="related-author"><strong>By Matilda</strong></p>
</li>
</div>
</ul>
</aside>
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px;
width: 500px;
}````
[1]: https://i.stack.imgur.com/1hIls.png
I am not sure if you are looking forward to adding a border to all list items or want to add a border to the entire aside. In this solution, I'm showing how you can add borders to each list of items. If you want to add a border to the entire <aside>, just replace the .related-post class with aside. Be careful about the code formatting with correct opening and closing tags, else it may break the UI.
/* aside { */
.related-post {
background-color: #f7f7f7;
border: 5px solid #1098ad;
padding: 50px;
width: 500px;
list-style-type: none; /* It removes the bullet */
}
<aside>
<h5>
<strong>Related posts</strong>
</h5>
<ul>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/smiling-young-man-sit-table-600w-1939452445.jpg" alt="mantyping" width="100" height="70" />
<div>
How to learn web development
<p class="related-author">
<strong>By Jonas Schmed</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-vector/vector-illustration-abstract-electric-lightning-600w-1706216764.jpg" alt="lightning" width="100" height="70" />
<div>
The unknown powers of css
<p class="related-author">
<strong>By Jim Dillon</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/digital-technology-software-development-concept-600w-2111828198.jpg" alt="javascript code" width="100" height="70" />
<div>
Why Javascript is awesome
<p class="related-author">
<strong>By Matilda</strong>
</p>
</div>
</li>
</ul>
</aside>
Hope it helps.
Why each word is in a separate line? [duplicate]
This question already has answers here:
How to stop text from taking up more than 1 line?
(5 answers)
Closed 2 years ago.
I have a problem, it is weird, I thought I have finished a task but I was playing with the browser and then boom, a problem, so I have a container with flex displaying, it contains links elements, each element has a text, but now, the text is not displayed correctly, I don't know why, is it because of flex displaying of the parent ? I don't know, here is what I want to achieve :
But that is what I get :
[![enter image description here][2]][2]
I don't get that return, why is that ?
Here is my html code :
<div class="header__options">
<a href="#" onclick="showDetails(0)">
Dernières minutes
</a>
<a href="#" onclick="showDetails(1)">
Vol
</a>
<a href="#" onclick="showDetails(2)">
Séjour
</a>
<a href="#" onclick="showDetails(3)">
Location
</a>
<a href="#" onclick="showDetails(4)">
Camping
</a>
<a href="#" onclick="showDetails(5)">
Hôtel
</a>
<a href="#" onclick="showDetails(6)">
Train
</a>
</div>
And my css :
.header__options a {
margin-right: 20px;
position: relative;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
}
Any help would be much appreciated.
Adding white-space: nowrap will ensure that the element text does not wrap, and stays on one line.
.header__options {
background: black;
}
.header__options a {
margin-right: 20px;
font-size: 14px;
text-decoration: none;
color: #ffffff;
font-family: Arial, sans-serif;
/* Add white-space: nowrap */
white-space: nowrap;
}
<div class="header__options">
<a href="#" onclick="showDetails(0)">
Dernières minutes
</a>
<a href="#" onclick="showDetails(1)">
Vol
</a>
<a href="#" onclick="showDetails(2)">
Séjour
</a>
<a href="#" onclick="showDetails(3)">
Location
</a>
<a href="#" onclick="showDetails(4)">
Camping
</a>
<a href="#" onclick="showDetails(5)">
Hôtel
</a>
<a href="#" onclick="showDetails(6)">
Train
</a>
</div>
You can use the CSS: white-space: nowrap; For more information: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space
How to make clickable gif and make it link to somewhere?
So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.
I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.
I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)
<!DOCTYPE html>
<html lang="en-US">
<html>
<style>
head {
background-color: white;
}
span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px;
}
span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;
}
span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;
}
span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;
}
span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;
}
span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;
}
</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>
<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page"
style="width:50px;height50px:;border:0;">
</a>
</span>
<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>
<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>
<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>
<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>
<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>
<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>
</head>
<body>
<hr>
</hr>
</body>
</html>
Tab example pic
All you need to do to make an image clickable is to wrap the image in a hyperlink parent: <a href="http://www.google.com"> <img src="http://placehold.it/100"> </a> As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync. Instead of this, I would recommend using a sprite map instead of a GIF. Hope this helps! :)
You can't control animated gif without javascript/jquery control. With 2 image, one static and one animated and control the start of animation with jquery, like this solution: Stop a gif animation onload, on mouseover start the activation Using jquery plugin like this: http://rubentd.com/gifplayer/
css & html :checked property
CSS:
nav a{
display: none;
}
#menubutton:checked, nav a{
display: block;
color: black;
text-decoration: none;
}
HTML:
<nav>
<img src="pictures/close.png" alt="Close" height="20" width="20">
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
</nav>
I want that the HTML code isn't displayed until the #menubutton is :checked.
(The #menubutton is an invisible checkbox).
If the #menubutton is :checked I want, that the HTML code is displayed. The code that should be displayed is in the css "nav a{}".
Use the adjacent sibling selector +.
#menubutton {
display: none;
}
nav * {
display: none;
}
#menubutton:checked + nav * {
display: block;
color: black;
text-decoration: none;
}
#closeMenu {
height: 20px;
width: 20px;
}
<label for="menubutton">MenuButton</label>
<input type="checkbox" id="menubutton" />
<nav>
<label for="menubutton"><img src="pictures/close.png" alt="close menu" id="closeMenu" /></label>
<a class="navitem" id="firstnavitem" href="index.php">Home</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
<a class="navitem" href="#">Test</a>
</nav>
If there are other elements in between your #menubutton and your nav element, you might need to make use of the general sibling selector ~ instead.
css
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
html
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
This works with pure CSS and HTML using the :target psuedo class. It works as of IE 9. See MSDN for more info.
Watch out: the :target psuedo-class relies on the fragment (or hash) of the current URL, so it might mess up internal page navigation.
#menu {
display: none;
}
#menu:target {
display: block;
}
Menu
<nav id="menu">
Close |
<a class="navitem" id="firstnavitem" href="index.php">Home</a> |
<a class="navitem" href="#">Test</a> |
<a class="navitem" href="#">Test</a> |
<a class="navitem" href="#">Test</a>
</nav>
Can anyone tell me how to make my these images have a hover?
I am building a site in HTML & CSS and I have a section where I would like to have my images change when hovered over. My problem is I can get the first one to do what I want, but when I try the same method on the images that are side by side, everything gets moved or it just doesn't work. You can see the example of the first hexagon that changes in the "Core Values" section of the site. You can either pull my Githib repo here or I have also added a fiddle . Thank you!
.hex-image {
padding-top: 70px;
}
.hexy-hex {
position: relative;
margin-top: 60px;
height: 900px;
}
.hexy-hex-2 {
position: relative;
top: -45px;
}
.hexy-hex-3 {
position: relative;
top: -45px;
}
.hexy-hex-4 {
position: relative;
top: -45px;
}
.hexy-hex-5 {
position: relative;
top: -45px;
}
.lt-blue-hex {
margin: 0px;
}
.drk-grey-hex {
margin: 0px;
}
.lt-grey-hex {
margin: 0px;
}
#Spirituality {
background-image: url('http://i.imgur.com/DPTzosk.png');
height: 200px;
width: 175px;
}
#Spirituality:hover {
background-image: url('http://i.imgur.com/Ha9YgEG.png');
}
<section class="hex-image">
<h1 style="color: #686868" align="center">Core Values</h1>
<div class="hexy-hex" align="center">
<div id="Spirituality"></div>
<!-- <a class="lt-blue-hex cv" href="http://"><img src="images/blue-hex-up-sm.png" title="JDI" /></a> -->
<div class="hexy-hex-2" align="center">
<div id="Honesty"></div>
<div id="Innovation"></div>
<a class="drk-grey-hex" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
<a class="lt-grey-hex" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
<div class="hexy-hex-3" align="center">
<a class="lt-grey-hex" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
<a class="lt-blue-hex" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
<a class="drk-grey-hex" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
<div class="hexy-hex-4" align="center" >
<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
<div class="hexy-hex-5" align="center" >
<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</section>
So onto your problem: It seems what you try to achieve is a mouseover effect like on the first hexagon. It further seems you already tried it a failed because the hexagons (<div>s) did get displayed over each other. Instead you builded your hexagon pyramid with <a>-tags but now there is no mouseover effect because the <a>-tags have hard coded <img>s which cannot be changed with CSS. Like in all cases you have several possibilities. One could be to change the <img>s on mouseover via JavaScript/jQuery. Another (out of even more) would be to try an approach via CSS and as you already tried that yourself (at least from the comments in your code it looks that way), lets go with that. So your <div>s in the second row get displayed over each other because by default a <div> is a block element. If you want them to stack up just like your <a>-tags from which you built the pyramid now you need them to behave like inline elements (because thats what <a>-tags are). This can be done (for example) by adding the following CSS rule to your <div>s in question: display: inline-block; Now you can use them just like <a>s and so set the initial background image via CSS and change it as well via CSS and :hover selectors. I've updated your fiddle and have done that for the second line (obviously not with the images you intended but it should be understandable): https://jsfiddle.net/7k50bhva/5/ You can follow that example for the other lines. Note that if you want to have real links I would place transparent <a>-tags within the <div>s. On those transparent (so contentless) <a>-tags you will have to specify width and height.