Problems with basic image grid on Wordpress twenty-thirteen theme - html

I'm trying to grid a number of images on a wordpress website, using the twenty thirteen theme.
this is the code i'm using
<style>
#fontContainer {
font-size: 0px;
width: 958px;
margin: 0 auto;
padding: 2px;
margin-top: 30px;
}
#fontContainer {
font-size: 0px;
width: auto;
margin: auto;
padding: 2px;
}
#frontContainer a {
margin: 6px;
display: inline-block;
height: 150px;
width: 150px;
float: left;
}
#frontContainer img {
height: 100%;
width: 100%;
border: 4px solid black;
border-radius: 10px;
}
</style>
<div id='frontContainer'>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/BowFrontDesk_pacificexpresscopy_zps7e8dc151.jpg'/></a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/corner_workstationcopy_zps1ff2c6b7.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Corner_work_station_zps644dc92c.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/screen_4person_workstation_zps73078288.jpg'/></a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Counter_reception_01_zps9b4c1fbe.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/home_office_desk_zps5a5737d9.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/chair_mesh_am100_zps582ba090.jpg'/> </a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/tamboor_cupboard_zps0e8c0f6c.jpg'/></a>
<a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Screen_zps64d2ea85.jpg'/> </a>
</div>
it should be fairly straight forward but on the WP site the top row of images is stepping downwards. I have no idea why or how to fix it.
the website is www.pacificexpress.com.au
if anyone could help it will be greatly appreciated.
James


You have it right, You just have a spelling error in your css selector:
#fontContainer{
}
should be
#frontContainer{
}
notice the "r"


its breaking because of auto formatting in wordpress. you can see in source code "<br>" tag is generated by wordpress. copy this html and paste to your editor. basically remove space so "<br>" will not generate.
<div id='frontContainer'> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/BowFrontDesk_pacificexpresscopy_zps7e8dc151.jpg'/></a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/corner_workstationcopy_zps1ff2c6b7.jpg'/> </a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Corner_work_station_zps644dc92c.jpg'/> </a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/screen_4person_workstation_zps73078288.jpg'/></a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Counter_reception_01_zps9b4c1fbe.jpg'/> </a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/home_office_desk_zps5a5737d9.jpg'/> </a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/chair_mesh_am100_zps582ba090.jpg'/> </a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/tamboor_cupboard_zps0e8c0f6c.jpg'/></a> <a href='https://www.pacificexpress.com.au/shop'><img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Screen_zps64d2ea85.jpg'/> </a> </div>

Related

Align images with text baseline in <div>

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
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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;
}

How to I align my icons in the navbar in css react?

I'm pretty new to css and my navbar looks really bad. I'm trying to play with the css but i get nothing better than the below picture. If i remove the .menu, icons get verticaly aligned;
Of course i've seen a lot of stackoverflow post on this topic and tryied lot of stuff, but again, could not get better than the below picture.
Here my react html code.
<ul className="menu">
<li>
<a href="https://discord.com/channels/#me" id="menu-item-41">
<img src={Discord} alt="discord" className="discord-logo"/>
</a>
</li>
<li>
<a href="www.twitter.com" className="page-scroll" id="menu-item-42">
<img src={Twitter} alt="twitter" className="twitter-logo"/>
</a>
</li>
<li>
<a href="#" className="page-scroll" id="menu-item-44">
TAG
</a>
</li>
<li>
<a href="#roadmap-title" className="page-scroll" id="menu-item-43">
ROAD MAP
</a>
</li>
<li>
<a href="#team" className="page-scroll" id="menu-item-45">
TAG2
</a>
</li>
<li>
<button onClick={() => this.connect() }
id="menu-item-47"
className="connect-button">CONNECT
</button>
</li>
</ul>
Here my css :
li.menu-item {
margin-bottom: 40px;
vertical-align: middle;
text-align: center;
}
.menu{
position: left;
display: inline-flex;
text-align: center;
vertical-align: middle;
float: left;
margin: 40;
}
Eny suggestions or observation would be super welcomed !

Try changing your css to this
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}

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

Last-Child inside div not working

I and using addthis share plugin and have changed background color to yellow and also added bottom-border: of 1px, I want to remove the bottom border from the last a which is not working for me using following css
css
div#at4-share a:last-child
{
border-bottom: 0px solid #1f1f1f;
}
HTML
<div id="at4-share" class="addthis_32x32_style atss atss-left addthis-animated slideInLeft at4-show">
<a class="at4-share-btn at-svc-facebook" href="#">
<span class=" at4-icon aticon-facebook" title="Facebook">Facebook</span>
</a>
<a class="at4-share-btn at-svc-twitter" href="#">
<span class=" at4-icon aticon-twitter" title="Twitter">Twitter</span>
</a>
<a class="at4-share-btn at-svc-pinterest_share" href="#">
<span class=" at4-icon aticon-pinterest_share" title="Pinterest">Pinterest</span>
</a>
<a class="at4-share-btn at-svc-google_plusone_share" href="#">
<span class=" at4-icon aticon-google_plusone_share" title="Google+">Google+</span>
</a>
<a class="at4-share-btn at-svc-compact" href="#">
<span class=" at4-icon aticon-compact" title="More">More</span>
</a>
<div id="at4-scc" class="at-share-close-control ats-transparent at4-show at4-hide-content" title="Hide">
<div class="at4-arrow at-left">Hide</div>
</div>
</div>
I had tried
div#at4-share a:last-of-type
{
border-bottom: 0px solid #1f1f1f;
}
so i am not sure what is wrong

You need to use :last-of-type, because :last-child is div with text hide in this case.
div#at4-share a:last-of-type {border-bottom: 2px solid red;}
https://jsfiddle.net/4y9j0z9q/
See the :last-child too
https://jsfiddle.net/4y9j0z9q/1/

The correct selector is :last-of-type.
div#at4-share > a:last-of-type
{
border-bottom:none; /* To remove the bottom border. */
}
FIDDLE

How to target all but the first tag in css3?

This is my html
<div class="app-screens">
<a href="./includes/images/taaid/Screenshot_2013-12-08-15-00-37.png" data-title="TA AID" data-lightbox="taaid">
<img src="./includes/images/taaid/Screenshot_2013-12-08-15-00-37.png"/>
</a>
<a href="./includes/images/taaid/Screenshot_2013-12-08-15-02-16.png" data-title="TA AID" data-lightbox="taaid">
<img src="./includes/images/taaid/Screenshot_2013-12-08-15-02-16.png"/>
</a>
<a href="./includes/images/taaid/Screenshot_2013-12-08-15-03-38.png" data-title="TA AID" data-lightbox="taaid">
<img src="./includes/images/taaid/Screenshot_2013-12-08-15-03-38.png"/>
</a>
<a href="./includes/images/taaid/Screenshot_2013-12-08-15-06-19.png" data-title="TA AID" data-lightbox="taaid">
<img src="./includes/images/taaid/Screenshot_2013-12-08-15-06-19.png"/>
</a>
<a href="./includes/images/taaid/Screenshot_2013-12-08-15-06-29.png" data-title="TA AID" data-lightbox="taaid">
<img src="./includes/images/taaid/Screenshot_2013-12-08-15-06-29.png"/>
</a>
<a href="./includes/images/taaid/Screenshot_2013-12-08-15-06-45.png" data-title="TA AID" data-lightbox="taaid">
<img src="./includes/images/taaid/Screenshot_2013-12-08-15-06-45.png"/>
</a>
</div>
and my css
.app-screens img:not(:first-child) {
display: none;
}
I want to hide all the img tags except the first. But they all still show... Does anyone know whats wrong?
Thanks

.app-screens a:not(:first-child) img {
display: none;
}
You have to target the anchors before then the image.

Instead of img:not(:first-child) you have to use a:not(:first-child).
CSS:
.app-screens a:not(:first-child) {
display: none;
}

You can try this:
Demoenter link description here
.app-screens a:not(:first-child) {
display: none;
}

Just for fun, you can do this with CSS2, in case you wanted to support more browsers:
.app-screens a img { display: none; }
.app-screens a:first-child img { display: block; }