http://www.wedevents.com.au/index.asp
No problem in FF but in IE there are some unwanted white margins appearing around the images in the top and bottom menu.
Any ideas on how to remove the unwanted margin?
HTML:
<ul class="topnav">
<li>
<a href="http://www.wedevents.com.au/index.asp">
<img src="/images/menu_home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)" alt="Home" /></a>
</li>
<li>
<a href="http://www.wedevents.com.au/about.asp">
<img src="/images/menu_about.gif" name="about" onMouseOver="over(1)" onMouseOut="out(1)" alt="About" /></a>
</li>
CSS:
ul.topnav {
list-style: none;
padding: 0 85px;
margin: 0 auto;
width: 630px;
height: 36px;
background: #b09a27;
font-size: medium;
text-align: left;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
ul.topnav li a{
padding: 0;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
There is no margin or padding on the image. The user agent style is defaulting to putting a border around the image. Set border: 0; on the image. Also see the other answer for reset.css to prevent this sort of thing in the future.
Try using a reset.css Here's one I like http://meyerweb.com/eric/tools/css/reset/
Related
I have a menu made up of 5 links. I need each link to be 33% of the available width with spacing between the links. The horizontal and vertical spacing must be the same.
Links must be the same height as the tallest link in there row, even though the length of the link text will vary per link. Ideally all links would be the same height but I doubt this is possible.
The link text is dynamic and will change. This for a responsive website so the page width will vary.
I cant change the HTML at all.
This is for a mobile only website so I dont need to worry about older browsers. I should be fine to use flexbox.
<ul>
<li>
<a href="#">
<span>Link 1</span>
</a>
</li>
<li>
<a href="#">
<span>Link 2 has much longer text than the other links</span>
</a>
</li>
<li>
<a href="#">
<span>Link 3</span>
</a>
</li>
<li>
<a href="#">
<span>Link 4</span>
</a>
</li>
<li>
<a href="#">
<span>Link 5</span>
</a>
</li>
</ul>
My code below works fine in Chrome. The only thing I still need to do is vertically center the link text (see the image below).
The align-items: center property looked promising however If I apply it to the ul then the lis' stop being the same height.
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
width: 50%;
border: 2px solid black;
margin: auto;
}
li {
list-style-type: none;
float: left;
width: 32%;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
vertical-align: middle;
}
li:nth-of-type(2),
li:nth-of-type(5)
{
margin-left: 2%;
margin-right: 2%;
}
a {
display: inline-block;
margin: -10em;
padding: 10em;
}
a {
background: gold;
}
a:hover {
background: green;
}
http://codepen.io/anon/pen/CeiqK
I don't know if this solution that I post here will be valid for you. Anyway, I changed your css a bit to get it:
ul {
margin: 0;
padding: 0;
width: 50%;
border: 2px solid black;
margin: 0 auto;
font-size: 0; /* this fix inline-block margins */
}
li {
font-size: 14px;
list-style-type: none;
display: inline-block;
width: 32%;
min-height: 34px;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
}
a {
display: table-cell;
width: 100em;
height: 34px;
vertical-align: middle;
}
Check it at codepen
Creates this:
I have some mysterious white space that I don't know how to get rid of. I have a vertical list and I want it to be right next to the paragraph with text. Here is my HTML and CSS
SOLVED BY jmgem I ALSO HAD TO READJUST THE SIZE OF MY PARAGRAPH ELEMENT SO IT WOULD FIT BESIDE THE NAV BAR
HTML
<div id="classOfferingList" class="classOfferingList" align="left">
<ul>
<li>
<a href="" >General U.S. K-12 English Speaking Course</a>
</li>
<li>
<a href="" >University Preperation Course</a>
</li>
<li>
<a href="" >SAT Preperation Course</a>
</li>
<li>
<a href="" >GRE Preperation Course</a>
</li>
</ul>
</div>
<div id="classOfferingInfo" >
<p>example text</p>
</div>
CSS
.classOfferingList ul {
list-style-type: none;
float: left;
}
.classOfferingList ul li {
margin: 5px 0px;
}
.classOfferingList ul li a {
list-style: none;
margin: 1px 0px;
display: inline-block;
background-color: blue;
width: 35%;
text-align: center;
}
First of all, I copied your code into jsfiddle. Go on in and have a look.
http://jsfiddle.net/GyuX5/
If I understand your question correctly, you wanted to put the paragraph right next to the vertical menu. So here's your adjusted CSS
.classOfferingList ul {
list-style-type: none;
float: left;
}
.classOfferingList ul li {
margin: 5px 0px;
}
.classOfferingList ul li a {
list-style: none;
margin: 0px;
display: inline-block;
background-color: grey;
text-align: center;
width: 150px;
}
#classOfferingInfo {
display: inline-block;
}
I had your paragraph display as an inline-block, then I changed the width of the li a to 150px instead of 35%. Voila.
Chose not to use a left float as they tend to disrupt layouts as they become more complicated. try to imagine html/css as blocks filling up a row in the browser from left to right.
Try floating the two main div to the left then they will be right next to each other. See Fiddle
.classOfferingList {
float: left;
}
.classOfferingList ul {
list-style-type: none;
float: left;
}
.classOfferingList ul li {
margin: 5px 0px;
}
#classOfferingInfo {
float: left;
}
.classOfferingList ul li a {
list-style: none;
margin: 1px 0px;
display: inline-block;
background-color: blue;
width: 35%;
text-align: center;
color: #fff;
}
http://jsfiddle.net/erenyener/TC856/
#classOfferingList > ul
{
padding:0px;
}
you need to reset ul element
or your question could be this
FIDDLE
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
I have this problem. I searched the site and others were having similar problems, but none of the answers seemed to work. Those included setting line-height to 0px; and setting all margins/paddings to 0px. I use Google Chrome's Inspect Element material to check the margins/paddings. I hovered over my "a" element and "li" element to see if they had any unnecessary paddings or margins, but they didn't.
What was weird is that they had a little white space, not occupied by any element in the entire document, between each link.
Right now, as there are no borders between the text, it is unrecognizable, but the space around the "a" in Link4 is smaller than the space around the text in Link1. The width of the first "li" element is strangely 4px wider than the 4th "li" container, and there is a little white space. I want to get rid of the white space, any ideas?
Here is the code:
CSS:
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px;
text-align: center;
}
.nav-link {
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
line-height: 0px;
display: table;
display: inline;
margin: 0 auto;
}
HTML document:
<body>
<script src="jquery-1.9.1.js"></script>
<script>
</script>
<div id="wrapper">
<div id="header">
<div id="header-toolbar">
<ul id="nav-position">
<li class="nav-link-container">
<a class="nav-link">Link1</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link2</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link3</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link4</a>
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
Anything helps! Thank you very much!
there are some spaces when you put <li> to new line. so one solution is to add them all in same line like here: http://jsfiddle.net/6tzxj/1/
I am trying to align a set of images horizontally within a div tag and then display a horizontal scroll bar when the images exceed the length of the div tag. I am relatively new to CSS and have tried everything I can think of. The below code displays my images vertically!!!
Thank you very much for any help.
Inside the body tag:
<div id="TNBox">
<ul class="imagelist">
<li>
<img id="tnimage1" src="images/tn-images/Rio-Street-Art-TN01.jpg">
</li>
<li>
<img id="tnimage2" src="images/tn-images/Rio-Street-Art-TN02.jpg">
</li>
<li>
<img id="tnimage3" src="images/tn-images/Rio-Street-Art-TN03.jpg">
</li>
<li>
<img id="tnimage4" src="images/tn-images/Rio-Street-Art-TN04.jpg">
</li>
<li>
<img id="tnimage5" src="images/tn-images/Rio-Street-Art-TN05.jpg">
</li>
</ul>
</div>
And the CSS:
#TNBox {
width: 500px;
height: 88px;
border: 1px solid black;
position: absolute;
left: 50px;
top: 320px;
overflow-x: auto;
display: inline-block;
text-decoration: none;
}
.imagelist {
list-style: none;
margin: 0px;
padding: 0px;
}
#TNBox{
width: 500px;
height: 88px;
border: 1px solid black;
position: absolute;
left: 50px;
top: 320px;
overflow-x: auto;
display: inline-block;
text-decoration: none;
white-space:nowrap;
}
.imagelist{
list-style: none;
margin: 0px;
padding: 0px;
}
.imagelist li{
display:inline-block;
}
Preview >> jsfiddle (I have styled images too)
Link to fiddle. I also changed the image urls to point to something that exists
http://jsfiddle.net/GVdMz/2/
Here is what I added:
To get the images to display horizontally
.imagelist li{
display: inline;
}
And this will make a horizontal scroll appear if the images extend past the width of #TNBox
#TNBox{
white-space:nowrap;
}