I'm building a website for a friend and it's quite image heavy, I've sliced up the image into relevant bits but I've deciding to use divs and not make use of tables. So this is what I've got:
The Html
<body>
<div id="container">
<div id="header">
<img src="images/header1280.jpg" />
</div><!--end header-->
<div id="nav">
<ul>
<li><img src="images/mixes.jpg" /></li>
<li><img src="images/events.jpg" /></li>
<li><img src="images/artists.jpg" /></li>
<li><img src="images/christ.jpg" /></li>
<li><img src="images/links.jpg" /></li>
<li><img src="images/contact.jpg" /></li>
<li><img src="images/hos.jpg" /></li>
<li><img src="images/forum.jpg" /></li>
<li><img src="images/news.jpg" /></li>
<li><img src="images/fun.jpg" /></li>
<li><img src="images/shop.jpg" /></li>
<li><img src="images/join.jpg" /></li>
</ul>
</div><!--end nav-->
</div><!--end container-->
</body>
The CSS
html, body, div, img, ul, li, a {
margin: 0;
padding: 0;
border: 0px none;
vertical-align: baseline;
font-size: 100%;
font: inherit;
}
body {
line-height: 1;
background: #000;
}
#container {
margin: 0 auto;
width: 1280px;
}
#header {
width: 100%;
}
#nav ul li a img {
width: 100%
height: auto;
}
#nav ul {
list-style: none;
width: 100%;
}
#nav ul li {
float: left;
}
Now there are 12 image links in all and they span over 2 lines. So imagine You have this:
HEADER
NAV LINE 1
NAV LINE 2
on Chrome a 2px gap is created between the header & the NavLine1 & between Navline1 & Navline2. This can be eliminated by:
li {margin-top: -2px;}
On firefox 3.6 there is instead a 3px gap between the Header & Navline1 & just a 2px gap between NavLine1 % Navline 2.
On IE8 there is instead a 2px gap between the Header and Navline1 but a 3px gap between Navline1 and Navline2.
I'm a little confused as to whats causing this, is it a float bug? But can anyone shed some light on the issue?
Use:
#header img, #nav img {
vertical-align: top
}
img elements are inline with a default vertical-align of baseline. The problematic gap is the space reserved for descenders in letters like g or p. Changing vertical-align from baseline removes the gap.
Related
I changed CSS Class so my other list doesn't run the same code by CSS but the text-align code in the first code didn't run and I don't know why
I tried to put p tag and align right but it doesn't work, I also tried to put align attribute in "a" tag and it doesn't run too. I tried to put text-align attribute in CSS and it also doesn't run. But, only the text-align property which doesn't work. The rest of the CSS is fully working.
here's my CSS code:
.navbar-text ul{
flex: 1;
text-align: right;
}
.navbar-text ul li{
display: inline-block;
list-style: none;
margin: 0 25px;
}
.navbar-text ul li a{
text-decoration: none;
color: #000;
padding: 0 10px;
width: 100%;
position: relative;
}
And here's my HTML code:
<div class="navbar-text">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And this:
<ul>
<li><img src="instagram.png" alt=""></li>
<li><img src="twitter.png" alt=""></li>
</ul>
I'm new to coding and will be so grateful if anyone could help me to put 4 images spaced evenly apart on the same line.
<div id="kudobuzz_badge_widget"></div>
[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]
[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]
[su_custom_gallery source="media: 2267" limit="1" link="post" target="blank" width="250" height="120" title="never"]
There are many ways to skin this cat, as it were. One way is to make a list and then float those list items left. I leave the responsiveness up to you, i.e. what happens when the viewport gets smaller. Make sure all the images are the same size for the best appearance, and don't size them with inline styles so you can use media queries for responsiveness and use the cascade properly. I put in the blue borders on every 2nd box so you can see the images are lining up horizontally:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul img {
display: block;
width: 100%;
}
ul li {
float: left;
width: 25%;
}
ul li:nth-child(2n) {
border: 1px solid blue;
}
<ul>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
<li><img src="http://placehold.it/100x100"></li>
</ul>
I'm trying to make a list of images, 2 per row.
The uneven rows (1, 3, 5, etc.) should have a small image first, and a wide one second. The even rows (2, 4, 6, 8, etc.) should have the wide image first and the smaller one second.
I'm now at row 3, and I cannot get the small image to the left for whatever reason. As you can see in the image below it floats to the right.
My code is very basic, and Dreamweaver displays it correctly in its Split function.
HTML:
<div id="portfolio-screen"></a>
<ul>
<li><img src="images/portfolio-jaar1.png" width="228"/></li>
<li><img src="images/portfolio-pr1_2.png" width="500"/></li>
<li><img src="images/portfolio-pr1_4.png" width="500"/></li>
<li><img src="images/portfolio-pvs1.png" width="228"/></li>
<li><img src="images/portfolio-jaar2.png" width="228"/></li>
<li><img src="images/portfolio-pr2_2.png" width="500"/></li>
</ul>
</div>
CSS
#portfolio-screen {margin-top: 8px; width: 768px; height: 602px; background-color:#37322d; overflow: auto;}
#portfolio-screen li {margin-top: 8px; margin-left: 8px; float: left;}
For some reason it is not allowed to post images, so I have supplied a link to one: http://oi51.tinypic.com/b63vkk.jpg
You can try something like this - the CSS height for the images could be removed for your size needs.
HTML
<div id="portfolio-screen">
<ul>
<li>
<img src="images/portfolio-jaar1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr1_2.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pr1_4.png" class="imgLarge" />
</li>
<li>
<img src="images/portfolio-pvs1.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-jaar2.png" class="imgSmall" />
</li>
<li>
<img src="images/portfolio-pr2_2.png" class="imgLarge" />
</li>
</ul>
</div>
CSS:
img {
height:20px;
}
.imgSmall {
width:228px;
}
.imgLarge {
width: 500px;
}
#portfolio-screen {
margin: 0;
padding: 0;
width: 768px;
height: 602px;
background-color:#37322d;
}
#portfolio-screen ul {
margin: 0;
padding: 15px;
width: 768px;
}
#portfolio-screen li {
margin-top: 8px;
margin-left: 8px;
display: inline-block;
}
#portfolio-screen li:nth-child(odd) {
margin:0;
}
JS Fiddle: http://jsfiddle.net/5qREV/
First, you have a broken </a> in there.
Secondly, make sure your unorder list has Margin and padding of 0
Lastly, mess with JSfiddle:
http://jsfiddle.net/Riskbreaker/NT4DS/10/
Instead of floats try inline-block
Hope someone can help me, I am trying to center my gallery (list items) and I feel I have tried everything and nothing is working, if someone could point me in the right direction it would much appreciated.
http://www.jamessuske.com/thornwood/gallery.php
HTML CODE
<div class="gallery">
<ul>
<li><img src="pics/icon1.jpg" border="0" /></li>
<li><img src="pics/icon2.jpg" border="0" /></li>
<li><img src="pics/icon3.jpg" border="0" /></li>
<li><img src="pics/icon4.jpg" border="0" /></li>
<li><img src="pics/icon5.jpg" border="0" /></li>
<li><img src="pics/icon6.jpg" border="0" /></li>
<li><img src="pics/icon7.jpg" border="0" /></li>
<li><img src="pics/icon8.jpg" border="0" /></li>
CSS CODE
.gallery{
width:965px;
float:right;
}
.gallery ul{
list-style-type:none;.gallery li{
float:left;
text-align:center;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
Centering child elements can be done like this:
Apply text-align:center to the parent element
Remove any floats from children and apply or ensure that the display is inline or inline-block
So something like this:
.gallery ul {
text-align:center;
}
.gallery li {
float:none; /* or just make sure you don't float them */
display:inline-block;
}
Should work for you, if your goal is to center the images but have them in rows.
Can't do it with float left:
Example http://jsfiddle.net/HerrSerker/KvPPe/
.gallery{
width:965px;
}
.gallery ul{
list-style-type:none;
text-align:center
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
You are going to continue to have significant problems with all this because you don't have a doctype and you are in 'quirks mode'. Add this to your very first line: <!DOCTYPE html>.
However, by adding the doctype, this may change the whole layout. But that's the cost of not starting off properly.
I have the following code for showing some images:
HTML:
<div class="footer-logos">
<ul>
<li><img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"></li>
<li><img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"></li>
</ul>
</div>
CSS:
.footer-logos {text-align:center;}
.footer-logos img {margin-left:20px;margin-right:20px;}
.footer-logos img.first {}
.footer-logos img.last {}
.footer-logos ul {}
.footer-logos ul li {display: inline; list-style:none;}
This produces images that look like:
alt text http://labs.dante-studios.com/footer-logos-normal.jpg
But i would like it to center the logos vertically so it looks like:
alt text http://labs.dante-studios.com/footer-logos-fixed.jpg
I've tried vertically aligning everything through CSS but that doesn't really work unless i'm using a table. So anyway i can get the desired effect without using a table row?
UPDATE 1
The images that are produced can be of different heights, thus cannot use a fixed height css element...
Do the images have a fixed upper bound as to their height?
If so you can set the line-height of the containing div to that height, and then set vertical-align property of the img tags to middle.
See here: http://phrogz.net/CSS/vertical-align/index.html
ul.seznam {margin: 0px; padding: 15px 0px 15px 15px; list-style: none;}
li.bod {color: #502945; font: normal 13px/21x Tahoma;
margin: 0px 0px 0px 70px; padding: 0px 0px 2px 25px;
background: url(components/bod_odrazka.png) left no-repeat;}
Add vertical-align: middle; to .footer-logos img:
.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}
That said, you should set a fixed width and height in each of the <img> elements to avoid the whole thing jumping up during page load.