Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a JSFiddle. I'm probably missing something pretty obvious, but can anyone point out what that might be?
HTML:
<body>
<div class="wrapper">
<div class="navbar">
<p>Random white text which should appear in a grey banner at the top of the page.</p>
</div>
</div>
</body>
CSS:
body {
width: 100%;
margin: 0;
}
.wrapper {
display: table;
width: 100%;
}
.navbar {
width: 100%;
height: 200px;
background-color: #292929;
color: #ffffff;
text-align: center;
vertical-align: middle;
display: table-cell;
}
EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).
Make sure to link your css file to your html file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
...
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm having difficulty pinpointing whats preventing the following link from working.
I chose a random link (w3schools) to test it before I linked it to what its meant for.
I thought the problem may have to do with the CSS.
ul {
font-family: 'Montserrat';
font-size: 15px;
color: #994f00;
}
#innerNav {
/*adding a relative or absolute here will break sticky*/
background-color: black;
color: white;
left: 0px;
overflow: hidden;
height: 1300px;
width: 150px;
z-index: -1;
white-space: nowrap;
list-style-type: none;
}
<!DOCTYPE html> <!-- HTML 5 -->
<html lang="en">
<body>
<div class= 'wrapper'>
<div id = 'innerNav'>
<li>
<ul>The Door</ul>
<ul>Mr Pointy</ul>
<ul>Block Rain</ul>
</li>
</div>
</div>
</body>
</html>
But even when I comment out the last line of the innerNav, the link still doesn't work (clicking it doesn't open anything).
Any ideas?
also my git files for this is:
Portfolio
The problem has nothing to do with the link and everything to do with the fact that you have the z-index of your #innerNav set to -1. So you are covering your navigation up with the .wrapper. So just remove the z-index from the innerNav completely or just set it to 1.
PS the markup for this is invalid as well you may want to look up the correct markup for an unordered list it should be as follows:
<ul>
<li></li>
<li></li>
</ul>
For some reason you have it backwards with <ul> nested inside of <li> it should be the other way around.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to do something like this..
enter image description here
I need to do this vertical line and the bottom border for every input. anyone has an idea?
Here is a basic structure you can use. Now it is up to you to integrate this with the elements of your website...
However, please be aware that Stack Overflow is not an outsourcing website where you ask people to code for you. Try to find a solution yourself and come here if you need help.
#wrapper {
display: flex;
justify-content: center;
}
#wrapper > div > div {
height: 30px;
margin: 10px;
border-bottom: solid 1px gray;
}
#separator {
height: 90px;
border-left: solid 1px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<div>
<div>1: plcHolder</div>
<div>3: plcHolder</div>
</div>
<div id="separator"></div>
<div>
<div>2: plcHolder</div>
<div>4: plcHolder</div>
</div>
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Hi there I was wondering how I would make an image appear when I hover over another one.
I have some code but it just isn't working I think it should be something like this;
CSS-
a bikeq
{
display: none;
}
a:hover bikeq {
display: block;
}
HTML-
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
I fell like I am doing something wrong with the html part but I don't know what else to do.
Any help will be great thanks,
Zack
Keeping the HTML you have provided is not possible, as the elements are sibling. You can "fake" this effect with the following code:
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
.bikeq {
display: none;
}
.r_img:hover .bikeq
{
display: block;
}
When hovering the container of the two images, the image with .bikeq class will show up..
Try this:
html
<section class="r_img">
<a href="" class=”bike_img”></a>
</section>
css
a.bike_img { width: ?px; height: ?px; display: inline-block; background: url("img/bike.png"); }
a.bike_img:hover { background: url("img/bikeq_3.png"); }
Where ?px are the width and height of your image. You will also need to make sure that your image urls are corrrect, I just had a guess.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I'm total CSS/HTML noob.
I would really appreciate if you help me out.
I need to fix my button:
decrease activation field (hover) to the actual size of the button (without shadow)
when I hover cursor over button, how to get rid of 1st image left overs?
THANK YOU!
jsfiddle link:
http://jsfiddle.net/cRqhT/125/
HTML:
<html>
<body>
<div>
<a id="button" href="http://mysite.com"</a>
</div>
</body>
</html>
CSS:
div {
width: 820px;
height: 820px;
background: url('https://gator1174.hostgator.com/~mskparik/facebook/thx.jpg')
}
#button{
display: block;
width: 204px;
height: 116px;
background: url(https://gator1174.hostgator.com/~mskparik/facebook/111.png) no-repeat top left;
position: absolute;
top: 90%;
left:10%;
}
#button:hover {
background: url(https://gator1174.hostgator.com/~mskparik/facebook/222.png) no-repeat top;
}
I simply added a corner bracket where appropriate, and it seems to have fixed both problems. See JSFiddle here.
<html>
<body>
<div>
<a id="button" href="http://mysite.com"></a> <!--Notice extra corner bracket-->
</div>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm almost embarrassed to ask help with this. It's not like I've never done this before - with the exact code I'm using now!
For the life of me, I can't understand why the content of a new page won't center in the browser window.
The HTML I have is this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="mainContainer">
Main Content Goes Here
</div>
</body>
</html>
And this is the CSS:
body { background-color: #EDEDC7; }
#mainContainer {
width: 1000px;
margin: 0 auto; }
What's happening is the text is being positioned about 1/3 of the way from the left edge of whatever browser window I view the page in. I know the stylesheet is "being found" by the web page because the background color is working.
I've checked it in FF8, IE9, Chrome, Safari 5, the latest versions of Opera and Dragon - even FF, Safari and Chrome on Mac! Okay - a little obsessive, I know, but I'm stumped as to why it won't center. So what the heck am I missing here? (Probably some stupid little thing I'm forgetting, too...)
It is working, the problem is that your text is not centered. If you add text align center to it it will work the way you are expecting.
example:
#mainContainter{
width: 940px;
margin: 0 auto;
text-align: center;
}
If you want to center text inside that container you need to put it in a separate div, format the width of that div(where your text need to go) and center it..
In your example it is centering the div which has length 1000px so there is no problem in code..:)
if that did work you could always use:
.wrapper {
display: flex;
justify-content: center;
}
<div class="wrapper">
<h1>Hello</h1>
</div>