Unwanted space above img and below li html css - html

I've noticed a white space above an image and it unfortunately throws off the neatness of the design. I'm not sure why its there, I've reduced image size and even removed tables, nothing fixes it. It almost appears affixed to the bottom of the td, but then it also has the space without a table. So I'm not sure what the issue is.
Second issue is a thick white space below my list and a smaller one above it. I have no margin or padding to the list, I have removed and increased padding to the font but it makes no difference.
Here are two examples;
(Plain examples with no tables, infact nothing but the basic code, problem is still apparent. Green lines are not uniform to the list (I'd like a small white space above and below, just a few pixels, not like this.)
http://www.dinodeals.co.uk/test.html
(Here I have added a border to the table that will be present on the main design, purely to help highlight the issue. The spaces are far more apparent now.
http://www.dinodeals.co.uk/fossils.html
So any ideas how to get the lines into the middle of the to allow an even white space above/below it. And how to remove all white space on the list?
Code is below:
h1 {font-size: 30px;}
h2 {font-size: 20px;}
p {font-size: 14px;}
A.class1 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 30px; padding: 6px;}
A.class1:link, A.class1:visited {color: #FFFFFF; background-color: #0fa616;}
A.class1:hover, A.class1:active {color: #0fa616; background-color: #ffffff;}
A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}
#sub li {list-style-type: square;}
#categories li {list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline;}`
I've removed the basic parts, like the html, body, doctype tags etc
<table border="1" bordercolor="#000000" cellspacing="5" cellpadding="0" width="1240">
<tr><td colspan="2"><center><img src="http://www.dinodeals.co.uk/images/logo2.jpg"></center></td></tr>
<tr><td colspan="2">
<img src="/images/line.jpg" width="100%"></td></tr>
<tr><td colspan="2"><center>
<img src="/images/line.jpg" width="100%"><br>
<ul id="categories">
<li>Home</li>
<li>Crystals</li>
<li>Meteorites</li>
<li>FAQ</li>
<li>Encyclopedia</li>
<li>Contact</li>
</ul><br>
<img src="/images/line.jpg" width="100%"></center></td></tr>
<tr><td colspan="2">
<img src="/images/line.jpg" width="100%"></td></tr></table></body>

It looks like you issue is slight error in the HTML. This isn't a CSS issue and trying to fix it in CSS will drive you crazy.
Your HTML:
<div class="green-line"></div>
<ul id="categories">
<li>Home</li>
<li>Crystals</li>
<li>Meteorites</li>
<li>FAQ</li>
<li>Encyclopedia</li>
<li>Contact</li>
<!-- NOTICE THE LINE BREAK -->
</ul><br>
<div class="green-line"></div>
You'll notice that just after your closing </ul> tag you placed an unnecessary line break, which prints a blank line to the screen. This blank line is the line you're seeing that you don't want I believe.
I took the liberty of making this into a JSFiddle and you can see that making the bars out of a <div> is probably the better way to go for loading and styling purposes.

i want to give you some guide line tips that will help you build your website better.
*generally, i don't recommend you to use images for borders design, every image you use for your website = more image to load for the client, the purpose is to set the page load time down as much as you can, even if there are returning clients who will use cache for faster loading, there are always new ones. use css borders.
if you want to use images anyway, images are set to display: inline; on default, set the "border images" to display: block;
*tables are not recommended for layout design either, if you want to learn about it, there is a lot of sources, here is one: Why not use tables for layout in HTML?
*use margin instead of <br /> tag to make some layout space - for example, let's say tomorrow you will want to change all the vertical space between the layout divs, you will need to search all over the website and add / remove <br /> tags, it's a lot of work and it will make you code more dirty, with CSS, if you are doing it right, you can do it with one simple action, change margin value.
example with border images:
HTML:
<div id="categories_wrap">
<img src="http://www.dinodeals.co.uk/images/line.jpg" width="100%" />
<ul id="categories">
<li>Home</li>
<li>Crystals</li>
<li>Meteorites</li>
<li>FAQ</li>
<li>Encyclopedia</li>
<li>Contact</li>
</ul>
<img src="http://www.dinodeals.co.uk/images/line.jpg" width="100%" />
</div>
CSS:
#categories_wrap
{
text-align: center;
}
#categories_wrap img
{
display: block;
}
Live: http://jsfiddle.net/5zzwxsbb/
example with css borders:
HTML:
<div id="categories_wrap">
<ul id="categories">
<li>Home</li>
<li>Crystals</li>
<li>Meteorites</li>
<li>FAQ</li>
<li>Encyclopedia</li>
<li>Contact</li>
</ul>
</div>
CSS:
#categories_wrap
{
text-align: center;
border-top: 3px solid #0fa616;
border-bottom: 3px solid #0fa616;
}
Live: http://jsfiddle.net/5zzwxsbb/1/

Related

Why is it in the middle and not the top?

I've almost got my website finished but am growing incredibly frustrated and not being able to get the vertical-align to work. Everywhere else, my content is where it should be, but for reasons unknown, these lists are appearing in the middle... meaning when the iframe is set to the desired size, my lists move to the middle of their td?
I've tried adding the vertical align option to the css of the links, created a div option for the entire area, adding it html etc, no luck anywhere? What am I doing wrong? :(
A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}
#sub li {list-style-type: square;}
Please bear in mind that I have a main ul menu above that I do not want affected in any code anyone manages to fix for me.
<center><h2>Amber w/Inclusions</h2></center><ul id="sub">
<li>Baltic</li>
<li>Copal</li>
</ul>
<center><h2>Dinosaurs/Reptiles</h2></center>
<ul id="sub">
<li>Pterosaur</li>
<li>Raptor</li>
<li>Spinosaurus</li>
</ul>
<center><h2>Trilobites</h2></center>
<ul id="sub">
<li>Cambrian age</li>
<li>Devonian age</li>
<li>Ordovician age</li>
</ul>
You can see what I mean on the page http://www.dinodeals.co.uk/fossils.html
The table itself is only for aid during design, it won't be visible on the complete design. I would love a little divider also, say a green line to the right of the entire sub category menu I'm trying to set to the top. But had no luck implimenting that either after reading up how. I'm not sure the border-right css is usable anymore?
you can try this, I just inspected the page and found you are running some type of padding on your td element (most likely caused by it aligning to the middle).
Try this little snippet:
td{
padding-top: 0px;
vertical-align: top;
}
This aligned the table to the top on my screen.
EDIT:
As per your request for border on the right of it (I didn't see that far into the question).
td{
vertical-align: top;
border-right: 3px solid rgb(15, 166, 22);
padding: 10px 0;
}

Is it possible to make my fixed menu responsive?

I have been attempting to make my menu responsive. www.treytrumble.com
It seems that because it is fixed, it will not scale properly when viewed on a device smaller than a laptop. What can I do to make the menu appear like this one when the screen is scaled to smaller than 1,150px wide? http://www.adtile.me
HTML
<div class="contactcontainer">
<div class="contactmenu">Trey Trumble<br /><br/>804-513-7704 <br/><br/>
trey#treytrumble.com<br/><br/>Resume
</div><!-- end .contactmenu -->
</div><!-- end .contactcontainer -->
<div class="container">
<div class="sidebar1">
<table width="120" height="104" border="0">
<tr>
<th scope="col"></th>
</tr>
</table>
<ul class="nav">
<li><img src="images/logo.jpg" width="180"/></li>
<li><a id="webbutton" class="nav">WEB DESIGN</a></li>
<li><a id="printbutton" class="nav">PRINT DESIGN</a></li>
<li><a span class="contactbutton">CONTACT & RESUME</span></a></li></ul>
</div><!-- end .sidebar1 -->
CSS
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
position:fixed;
}
ul.nav li {
border-bottom: 1px solid #666;
letter-spacing: 2px;
font-family: "Helvetica", Arial, sans-serif;
cursor: pointer;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #fff;
inline-box-align:initial;
color:#F60;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background:#F60;
color: #FFF;
font-family: "Helvetica", Arial, sans-serif;
letter-spacing: 2px;
font-size: 9px;
}
This is quite simple to accomplish, but it's quite a bit hard to explain. You have to use media queries to accomplish this, maybe even JavaScript.
Media Queries
Chris Coyier has a very interesting article in CSS-TRICKS that explains various concepts of responsive menus here: http://css-tricks.com/responsive-menu-concepts/
As for the main question, you can definitely make that menu responsive, though, I wouldn't suggest you put the exact same layout you have for desktop for mobile, because that would be a problem since the screen is too small, I would suggest making it go all the way to the top like a normal menu, being responsive, you can also fix it to the top and adding a padding-top to the remaining elements so that they don't go below the menu.
If you decide that the menu should be always on top, make sure you add a z-index property to the nav or div element so that no other goes across it too.
FlexBox
There is another approach you can take as well, but depending on what support you're giving to certain browsers I would suggest or not using Flexbox. If you display your navigation as display: flex and you tweak it CSS wise, you can achieve beautiful combinations, but again, remember this is a slightly new CSS3 property, and mainly Internet Explorer has just recently began supporting it.
More about Flexbox can be found here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Responsive Design
If you're new to responsive/adaptive design, then sir you have a lot of work to do, but, luckily for you, there are today tons of free and/or paid resources that will give you a pretty good idea of what to do.
I found this article on Team Tree House very useful: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can go on from there and start looking for other resources, some of them mentioned on this answer:
Media Queries
Flexbox
Other Tips
If you want to make your menu responsive, you also need to make your site responsive, make sure you have all these:
Responsive viewport tag
HTML5 doctype
A plan (grid system, media queries, flexbox, etc)
Fallbacks for unsupported content
Of course yes,
use media queries to choose the resolution you want it to snap to.
Define your classes within the query and apply it around the menu.

Keep structure of navbar when zoomed in

I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base

Navigation bar stretched to cover screen

Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.

Why is <hr> given a thickness in HTML different than CSS?

I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle