I am sure this has been asked before so I apologize but I cant find an answer that works for me - or perhaps I just don't understand.
I am new in HTML & CSS and I am trying to build a navigation bar of images that stretches to 100% of the width of the screen. It would be great if someone could show me what I am missing. The links are going to be changed later.
<body>
<ul>
<li><a href="index.html">
<img src="images/logo.png" height="80" width="150">
</a>
</li>
<div id="menu">
<li>
<a href="index.html">
<img src="images/homeButton.png" height="80" width="150"></a>
</li>
<li>
<a href="index.html">
<img src="images/scratchButton.png" height="80" width="150">
</a>
</li>
<li>
<a href="index.html">
<img src="images/c++Button.png" height="80" width="150">
</a>
</li>
<li>
<a href="index.html">
<img src="images/PythonButton.png" height="80" width="150">
</a>
</li>
<li>
<a href="index.html">
<img src="images/signInButton.png" height="80" width="150">
</a>
</li>
</div>
</ul>
.
html, body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0
}
li {
float: left;
}
a {
}
#menu {
width: 100%;
list-style-type: none;
background-color: #000000;
}
#menu :hover{
background-color: yellow;
}
You could use a table and specify the columns as equal widths and place it in a div which occupies 100% of the width.
E.g.:
<div id="container">
<table>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%"> // maybe you can make all five statements at once
<tr>
<td>1st/td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
<td>5th</td>
</tr>
</table>
</div>
And
Related
I have 2 images that I want to show side by side, with the title above as part of a hyperlink.
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
If I remove the p tag around the titles, it displays inline, but I need the title to be on top of the image.
CSS:
#image {
display: inline-block;
float: left;
}
Here. Proper HTML and CSS.
a {
display: inline-block;
text-decoration: none;
}
<div id="image">
<a href="file:///L:/file" title="Project Reports">New Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2">Project Reports<br>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
</div>
add float:left; in a
#image {
display: inline-block;
width:1000px;
clear:both;
}
#image > a{
float: left;
display:inline-block;
}
<div id="image">
<a href="file:///L:/file" style="text-decoration:none;" Title="Project Reports">
<p>New Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;" />
</a>
<a href="file:///L:/file2" style="text-decoration:none;" >
<p>Project Reports</p>
<img src="http://tableau/" style="width:304px;height:228px;"/>
</a>
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
I stacked on the following problem. I have got an unordered list with the social icons and kind of a little dot appears on the right down corner of the icons when I change the display to inline.
HTML
<div class="iconos">
<ul class="contacto">
<li>
<a href="mailto:xxxxxx.com" class="socialicon">
<img src="images/mail.png" width="50" height="50">
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/xxxxx" class="socialicon">
<img src="images/facebook.png" width="50" height="50">
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/xxxx" class="socialicon">
<img src="images/twitter.png" width="50" height="50">
</a>
</li>
</ul>
CSS
ul.contacto {
list-style: none;
padding: 0;
margin: 0;
}
.contacto li {
padding: 20px;
display: inline;
}
That dot is an underline from <a> element. You can hide with this:
.contacto li a {
text-decoration: none;
}
I'm trying to align three small logos in a footer widget in a single line (using Wordpress, theme is Press coders) I've created a mock up of what I want at:
Image
However everything is skewing beyond belief!
You can see the mess in my footer at:
www.oxfordlifestylecentre.co.uk
I've tried using both a div and a table, my latest table looks like:
<table align="right">
<tr>
<td>
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" />
</td>
<td>
<a href="/hair-and-beauty/>
<img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" />
</td>
</tr>
</table>
You html syntax is wrong. You are missing closing anchors and quotation marks. Try this.
<table align="right">
<tr>
<td>
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" /></a>
</td>
<td>
<a href="/hair-and-beauty/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" /></a>
</td>
</tr>
</table>
Try this, Fiddle
<div class="logos">
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-logo.jpg" alt="Health and Fitness" />
</a>
<a href="/hair-and-beauty/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-logo.jpg" alt="Hair and Beauty" />
</a>
<a href="/nutrition-and-refreshment/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/nutrition-and-refreshment.jpg" alt="Nutrition and Refreshment" />
</a>
</div>
.logos {
float: right;
clear: right;
width: 500px;
height: 50px;
}
.logos img {
height: 80%;
}
.logos a {
text-decoration: none;
}
*Note: For the best effects resize images to same size.
As pointed out by previous answers, your HTML syntax is wrong. However, using tables for that is not the correct approach. You can simply keep the links and images inline and text-align right.
It depends on the complexity of the layout, but display:inline-block may be needed or you might need to wrap certain elements in a container. Either approach is superior to using tables for layout (Why not use tables for layout in HTML?)
HTML
<img src="http://placekitten.com/g/200/300" /><img src="http://placekitten.com/g/200/300" /><img src="http://placekitten.com/g/200/300" />
CSS
body {
text-align: right;
}
a {
margin-right: 10px;
}
http://jsbin.com/wuvoriye/1/edit
Ok so where to start:
1: dont use a table.
2: dont use a table.
3: you get the picture here....
Now for the fix:
I have left comments into it for you so to explain what I did.
I put in inline style for you so just add it to your css file.
<section class="footer-widget-container">
<div id="footer-widget-area" class="inside widget-area">
<!-- Social Media Div First -->
<div id="pc_info_widget_designfolio-pro-3" class="widget pc_info_widget" style="width: 40%; float: left;">
<!-- simple p tag with a class is all that needed -->
<p class="phone" style="margin: 0; padding: 0;">
(949) 867-5307
</p>
<!-- keep it simple: list items floated left + you can now just add as many as you want -->
<ul style="float: left; margin: 0; padding: 0;">
<li style="float: left; list-style: none;">
<a class="sm-icon" target="_blank" href="http://www.facebook.com//lifestyle-center">
<img width="32" height="32" alt="Facebook" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/facebook.png">
</a>
</li>
<li style="float: left; list-style: none;">
<a class="sm-icon" target="_blank" href="http://twitter.com//lifestylecentre">
<img width="32" height="32" alt="Twitter" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/twitter.png">
</a>
</li>
</ul>
</div>
<!-- Logo Div Second -->
<div id="text-8" class="widget widget_text" style="width: 60%; float: left;">
<div class="textwidget">
<!-- Dont use tables unless its table data | Simple ul list itmes float left again -->
<ul style="float: right;">
<li style="float: left; list-style: none;">
<a href="/gym/">
<img alt="Health and Fitness" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg">
</a>
</li>
<li style="float: left; list-style: none;">
<a href="/hair-and-beauty/">
<img alt="Hair and Beauty" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-1.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
I've got a ul list which contains a 9 pictures, which are either 70px in height or 70px in width, depending on whether the image was taken portrait or landscape. Ive got the images to to display with 3 rows and 3 columns quite easily, but I cant seem to align the images so they are in the center horizontally as well as vertically.
Thanks all.
This is my code below
css
#gallery_image ul {
list-style:none;margin:0;
padding:0;
}
#gallery_image li {
display: block;
height: 80px;
Width:80px;
line-height: 80px;
float:left;
padding:5px;
text-align:center;
}
#gallery_image li img {
line-height:80px;
vertical-align: middle;
}
html
<div id="gallery_image">
<ul>
<li>
<img src="/flower1.jpg" alt="" />
</li>
<li>
<img src="/flower2.jpg" alt="" />
</li>
<li>
<img src="/flower3.jpg" alt="" />
</li>
<li>
<img src="/flower4.jpg" alt="" />
</li>
<li>
<img src="/flower5.jpg" alt="" />
</li>
<li>
<img src="/flower6.jpg" alt="" />
</li>
<li>
<img src="/flower7.jpg" alt="" />
</li>
<li>
<img src="/flower8.jpg" alt="" />
</li>
<li>
<img src="/flower9.jpg" alt="" />
</li>
</ul>
</div>