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 6 years ago.
Improve this question
I have a problem with styling my navigation ID. I feel like I am doing everything correctly, but my HTML is not recognising my styling when I refresh it. What am I doing wrong?
Here is the HTML code -
<body>
<div id="Navigation">
<ul>
<li> Marketing </li>
</ul>
</div>
And here is the styling of that id -
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto
}
You are never closing your div tag.
<div id="Navigation"></div>
And make sure you have a closing curly bracket for your CSS.
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto;
}
Looks like your CSS file has a UTF-8 BOM. Try recreating the file, or add /* */ in front of every rule. Eg:
/* */
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto;
}
Related
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 last year.
Improve this question
Can anyone help me?
How can I integrate in html pages 2 different CSS styles for 2 diferent images, both being separated vertically by a space?
See the paintings below. They have different sizes, different styles.
Something like this. You may change the dimensions anytime
.img, .firstImage, .secondImage {
border: 1px dotted blue;
width: 200px;
}
.firstImage {
float:left;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
.secondImage {
float:right;
border: 2px solid #fff;
border-radius: 2px;
padding: 3px;
width: 120px;
}
A friend write for me this code, a good answer:
HTML
<div id="img1"><img src=logo.png"></div>
<div id="img2"><img src=logo2.png"></div>
CSS
#img1{border-style :solid;
border-color:red;}
#img2{border-style :solid;
border-color:blue;
margin-top:20px;}
SOURCE: HERE
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 1 year ago.
Improve this question
I am making a website for a school project and i'm trying to make the height of a border fit the size of the text. however, whenever i adjust the height the text doesn't go with it and i'm not sure how to fix this.
Code:
#slidercompare {
font-size: 17px;
font-family: sans-serif;
border-style: solid;
border-color: grey;
opacity: 87%;
position: absolute;
top: 5px;
right: 10px;
}
#slidercompare {
width: 355px;
height: 40px; /* for some reason I can't adjust the height smaller than this or else the border goes through the text. */
color: white;
background-color: black;
}
<html>
<head>
<link rel="stylesheet" href="css/boardgames.css">
</head>
<body>
<h1 id="slidercompare"><br>Chess.com (left) vs Video Chess (right)</h1>
</body>
</html>
Any ideas? Thanks
May this be what you are trying to achieve?
#slidercompare {
font-size: 17px;
border-style: solid;
border-color: grey;
opacity: 87%;
}
#slidercompare {
width: fit-content;
color: white;
background-color: black;
}
<h1 id="slidercompare">Chess.com (left) vs Video Chess (right)</h1>
I inserted <br> to <h1>. Used that to seperate a thing earlier i dont need to seperate now. So, removing the <br> tag fixed the issue.
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 2 years ago.
Improve this question
This is my first question on stack overflow so sorry if I'm doing anything wrong.
The lower half of the button is only working and the top part isn't.
How can I fix it?
Thanks in advance
Here's my code:
.music{
position: absolute;
top: 5px;
right: 93%;
}
<div class="music">
<audio id="sound1" src="static/assets/sound/dreams.mp3" preload="auto"></audio>
<button style="box-shadow: none; border: none;height:100px;width:120px; background: url(static/assets/img/button.png)" onclick="document.getElementById('sound1').play();"></button>
</div>
It is working completely fine.
There may be some other things overlapping it.
button {
box-shadow: none;
border: none;
height: 100px;
width: 120px;
color: white;
background: url(https://source.unsplash.com/eHH_5rn3xnU/);
background-position: center;
background-size: cover;
}
<div class="music">
<audio id="sound1" src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">play</button>
<button onclick="document.getElementById('sound1').pause();">pause</button>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/wvzVXwg?editors=1100
Is it being cut off or is it not clickable?
Also, try to avoid inline styles.
For example:
Change:
<button style="box-shadow: none; border: none;height:100px;width:120px; background: url(static/assets/img/button.png)" onclick="document.getElementById('sound1').play();">
To:
button {
box-shadow: none;
border: none;
height: 100px;
width: 120px;
background: #000;
}
<button onclick="document.getElementById('sound1').play();"></button>
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 have set a hover effect in my CSS, but it seems to be having no effect. What am I doing wrong?
.button_link {
display: inline-block;
border: solid black 2px;
border-radius: 15px;
background-color: #ddf;
padding: 10px;
text-decoration: none;
}
.button_link#hover {
color: orange;
background-color: #fff;
}
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
It doesn't work as you expect it to simply because you've written your selector as:
.button_link#hover,
Which is the selector for an element with the class of button_link and an id of hover; whereas you want to target the element of class button_link with the :hover pseudo-class, therefore:
.button_link:hover
.button_link {
display: inline-block;
border: solid black 2px;
border-radius: 15px;
background-color: #ddf;
padding: 10px;
text-decoration: none;
}
.button_link:hover {
color: orange;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
</html>
Reference:
CSS Selectors Level 3.
# hover needs to be :hover
That should fix it
Because you need to write:
.button_link:hover {}
.button_link {
display: inline-block;
border: solid black 2px;
border-radius: 15px;
background-color: #ddf;
padding: 10px;
text-decoration: none;
}
.button_link:hover {
color: orange;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
</html>
Hello, You should change button_link#hover to button_link:hover.
Happy coding!
Reference: CSS Pseudo-classes
https://www.w3schools.com/css/css_pseudo_classes.asp
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i have my main "watchlisten" div, with everything you see so far inside, but for some apparent reason, i am unable to float my video image on the right side of my left arrow image, i have this as the code for CSS and HTML, i apologize for not having the images available for you to see them, but i want to float Video_1.jpg on the right of Left_watchlisten.jpg.
HTML for the whole watchlisten DIV
<div id="watchlisten">
<img src="Images/boxes.png" class="imageBoxes" />
<h2>Watch/Listen</h2>
<img src="Images/Left_Watchlisten.jpg" class="leftarrow"/>
<div class="wlblock">
<img src="Images/Video_1.jpg" height="75"/>
<p>action to cut leve crossing deaths</p>
</div>
</div>
CSS code for all the classes/id's/h2.
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 380px;
position: relative;
top: -80px;
}
h2 {
color: #505050;
margin: 10px 0 10px 10px;
font-size: 1.8em;
}
.imageBoxes {
float: right;
max-height: 20px;
max-width: 100%;
margin: 12px 10px 0 0;
}
.leftArrow {
float: left !important;
border-right: 1px solid white;
}
.wlblock {
float: left;
}
i hope someone can help, i am a little stuck.
There is problem in your class naming
Your CSS code:
.leftArrow {
float: left !important;
border-right: 1px solid white;
}
Your HTML code:
<img src="Images/Left_Watchlisten.jpg" class="leftarrow"/>
Can you see the difference in class name?
Make the leftArrow, leftarrow in css or leftarrow in html to leftArrow.
It will work.