I'm trying to build a small website that is one page with 5 stacked divs within the body. The first and second div are fine but all the divs after that(3, 4, and 5) all repeat the unique background image when the site is viewed in IE9. The site works fine in FF 20.0.1, IE10, IE 10 compatibility, and IE9 compatibility so this issues appears to only show up in IE9. I have taken everything out of the CSS and html except for just those 5 containers and find that I can't pinpoint the issue causing the background images to duplicate in the 3rd, 4th, and 5th div. I've also repeated the second div and it also duplicates the background in the second instance. If anyone has any insight as to what I am missing I would greatly appreciate it.
Also, I have played with no-repeat and other ideas I found while searching for a solution but nothing has worked for me at this point.
CSS:
* {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
font-family: Myriad, Arial, Helvetica, sans-serif;
}
p {
margin-bottom: 1em;
}
a {
color: #60789c;
text-decoration: none;
}
a:visited {
color: #60789c;
}
img {
border: 0;
}
body {
margin-bottom: 0px;
margin-top: 0px;
}
div#content {
margin: auto;
padding: 0;
width: 900px;
}
div#SectionOne {
Background-image: url(../images/section1.jpg);
height: 707px;
width: 100%;
}
div#SectionTwo {
Background-image: url(../images/section2.jpg);
color: #FFFFFF;
height: 1159px;
width: 100%;
}
div#SectionThree {
Background-image: url(../images/section3.jpg);
height: 668px;
width: 100%;
}
div#SectionFour {
Background-image: url(../images/section4.jpg);
height: 1385px;
width: 100%;
}
div#SectionFive {
Background-image: url(../images/section5.jpg);
height: 1165px;
width: 100%;
}
And this is the HTML:
<body>
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo" />
</div>
<div id="SectionThree">
<a name="SectionThree"/>
</div>
<div id="SectionFour">
<a name="SectionFour"/>
</div>
<div id="SectionFive">
<a name="SectionFive"/>
</div>
</div>
</body>
Close your a tags like this <a name="SectionXXX"></a> rather than this <a name="SectionXXX" />
HTML
<div id="content">
<div id="SectionOne">
</div>
<div id="SectionTwo">
<a name="SectionTwo"></a>
</div>
<div id="SectionThree">
<a name="SectionThree"></a>
</div>
<div id="SectionFour">
<a name="SectionFour"></a>
</div>
<div id="SectionFive">
<a name="SectionFive"></a>
</div>
</div>
All I can suggest with what you've posted is that you change Background-image to background-image ... but that's a long shot.
Also your <a> elements are incomplete; and the name attribute is out of date now. Use IDs instead. That is, if you want to link to one of those divs, use this:
Go to Section Five
Then just get rid of those as in the divs altogether.
Related
I am trying to design a weather website. In the body I have a div for my search bar, and then a div below it for the main area with the weather information. The problem is that there is a divider between the two (below the search area and above the main area) How do I get rid of this? I have tried margins but I can't figure out what I'm missing.
As well, I am trying to get these two divs to share one background image
Thanks in advance
<div class="searchArea">
<ul>
<li><div><input type="text" id="search_term" placeholder="Other Location ..."></div></li>
<li><div><input type="submit" value="Check Weather" onclick="findNewWeather()" /></div></li>
</ul>
</div>
<div class="mainArea">
<h1>City Name</h1>
<ul>
<li>
<div>
<h1>Current</h1>
<img src="http://openweathermap.org/img/wn/10d#2x.png" alt="today icon">
<h2>12oC</h2>
<h3>Feels: 9oC</h3>
<h3>Mostly Sunny</h3>
ETC ....
.weatherMain {
margin-top: 1px;
background-image: url("./WP.jpg");
background-size: 100%;
background-repeat: no-repeat;
color: gray;
padding: 25px0px;
display: flex;
flex-direction: row;
height: 600px;
font-family: poiret one;
font-size: 35px;
color: yellow;
font-weight: bold;
}
.searchArea {
background-image: url("./banff.jpg");
background-position: 0 -75;
height: 50px;
margin-bottom: 1px;
}
Given the code you posted above, I think the problem is that your <ul> and <h1> tags have their own margins that are pushing your <div> tags apart.
This should fix the issue:
.searchArea ul {
margin-bottom: 0;
}
.weatherMain h1 { // or .mainArea h1, your example has both
margin-top: 0;
}
To give them one background, I would recommend wrapping them in a <div> and applying the background image to that.
https://www.citywidelaw.com/
For this page, there is a section with a Q and A (you click on question and answer is next to it. The Q symbol and A symbol are supposed to line-up. I'm not sure why the A is dropping. I tried a , but it had no effect.
I added an image. Thanks in advance.
HTML
<div class="row">
<div class="col-xs-12">
<div id="verticalTab" class="resp-vtabs" style="display: block; width: 100%; margin: 0px;">
<h2 class="resp-vtabs-heading">
<ul class="resp-tabs-list">
<div class="resp-tabs-container">
</div>
</div>
</div>
CSS:
.resp-vtabs .resp-tabs-container {
clear: none;
float: left;
min-height: 350px;
padding: 0 0 0 40px;
width: 53%;
}
.resp-tabs-container {
background-color: #fff;
clear: left;
padding: 0;
}
The "Q" symbol, the <h2> element, is an element above the two columns.
So here's what I would do. Create a <div> element around the <h2> and <ul> elements with a class of, say, resp-tabs-list-container. Then just rename, in your CSS, the selector .resp-vtabs ul.resp-tabs-list to .resp-vtabs .resp-tabs-list-container.
Pow.
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code
I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!
I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)
A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/