Hi guys i would like the border to surround my whole <div id=wedding> but it wont wrap around the image and the text within the <div>. Please help my code is below:
HTML:
<div id="Weddings">
<img src="images/gallery/weddinggh.jpg">
<br>
<a href="gweddings">Click here to check out pictures of
<br> our past wedding cakes<a>
</div>
CSS:
#Weddings {
padding: 2px;
border: 1px solid;
}
#Weddings a:link {
text-decoration:none;
color:black;
font-size:16px;
font-family: "footer";
}
#Weddings img {
width:200px;
height:300px;
}
#Weddings {
padding: 2px;
border: 1px solid;
width:200px;
}
you just need to set a width to your div :)
Here's an example : http://jsfiddle.net/f4t2Z/
You need to define a border color
#Weddings {
padding: 2px;
border: 1px solid red;
}
or whatever.
Have you tried
#Weddings img {
width:200px;
height:300px;
display:block;
}
Related
I am having trouble getting my hover to work on my button. I want my button to not have a border but to display a blue border when my mouse is on top of it. I also need it to change the image when the mouse is not top but that has been sorted, therefore the changeImage function :). Just need help with the border, any suggestions?
HTML
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda"
/>
CSS
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
}
.button:hover {
border: 2px solid blue;
border-radius: 20px;
cursor:pointer;
}
<input type="button" class = "button" value="Panda"
/>
Missing closing bracket }
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
}
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda" />
The border on hover will appear if you add the closing bracket to your css rule button. You just missed that ;-)
Concerning the changing of the images I am not sure if I did understand it right ... but at the end: without the JS code cannot be said much about it. Here it would be helpfull if you could show the JS code ;-)
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
} /* <<< add missing bracket here */
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
I need to have a single underline below my heading text <h1> tag. But the colour of the underline below text should have a different colour than rest.
Below is the image for my requirement.
What I have tried doing is placing two <div> side by side and setting different border bottom colour. But this is not a best practice to follow.
Please suggest some improvements to my code.
#left {
border-bottom: 3px solid black;
float: left
}
#right {
border-bottom: 3px solid red;
overflow: hidden;
color: transparent;
}
<div id="container">
<div id="left">
<h1>My Heading</h1>
</div>
<div id="right">
<h1>Transparent Text</h1>
</div>
</div>
You can give the parent a bottom border, set the heading to inline-block so it's width is contained to the text size, give the heading a bottom border, then shift the heading down 3px so the borders overlap.
h1 {
display: inline-block;
margin: 0;
border-bottom: 3px solid black;
transform: translateY(3px);
}
div {
border-bottom: 3px solid red;
}
<div>
<h1>heading</h1>
</div>
You can give H1 red border and black border to the span inside it. Use padding to fix the alignment of borders.
h1 {
border-bottom: 3px solid red;
padding:3px 0;
}
h1 span {
border-bottom: 3px solid black;
padding:4px 0
}
<h1><span>heading</span></h1>
h1 {
border-bottom: 3px solid red;
padding:3px 0;
position:relative;
}
h1:before{
position:absolute;
width:100px;
height:3px;
background:#333;
content:"";
bottom:-3px;
}
<h1>heading</h1>
I am not sure how to make a separate line as shown in this image.
This is what I am doing:
.separate-line {
background-color: #D8D9DE;
border-width: 0;
color: #D8D9DE;
height: 1px;
}
I added this html to show the border line:
<div>
<hr class="separate-line">
<input...>
</div>
The result shows a normal border. But I want to display a separate horizontal line.
If your looking to create a two coloured/seperate lined <hr>, this is a way that you can do it
If you zoom in close, you can see the difference in colours between the top half of the line and the bottom half
I've added a darker background so you can notice the difference in colour
.separate-line {
background-color: #fff;
color:#fff;
height: 2px;
border:0;
border-top:2px solid #aaa;
}
input {
width: 96%;
margin-left:2%;
}
body {
background-color: #ddd;
}
<div>
<hr class="separate-line">
<input type="text">
</div>
For Firefox (some reason have to double hr height):
.separate-line {
background-color: #fff;
color:#fff;
height: 4px;
border:0;
border-top:2px solid #aaa;
}
input {
width: 96%;
margin-left:2%;
}
body {
background-color: #ddd;
}
<div>
<hr class="separate-line">
<input type="text">
</div>
Hello Try This This Might Help you as you want a separate border.
hr {
display: block;
border-style: inset;
border-width: 2px;
background-color: #D8D9DE;
}
you can increase the border using border-width:
I am trying to get my text within my border that I added as an image. I will be adding more text and would like it to show up in my border as I am writing it. Any help would be appreciated. Thanks!
li {
list-style-type: none;
display: inline-block;
font-size: 20px;
letter-spacing: 4px;
width: 150px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
border-bottom: 2px solid black;
border-top: 2px solid black;
}
a:link {
color: #008B00;
}
a:visited {
color: #008B00;
}
p {
font-size: 20px;
}
#main-border {
text-align: center;
}
.searchbutton {
font-size: 20px;
}
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
<img src="../desktop/background.gif" alt "border" height="500px" width="550px">
</div>
I could not understand your question but i think this is what you are looking for :
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
#main-border {
text-align: center;
background : url(../desktop/background.gif);
background-size : 100% 100%;
min-height : 500px;
min-width : 500px;
}
like this? obviously style to your liking
var place=document.getElementById('txtplace');
function add_text(txt){
place.innerHTML=txt;
}
#txtplace{background-color:grey;opacity:0.8;font-size:150%;position:absolute;top:100px;left:50px;}
<input type="text" id="text_to_add" onkeyup="add_text(this.value);"/>
<span id="txtplace"></span>
<img src="http://lorempixel.com/600/600" id="background">
I believe this is what you're looking to achieve (although, instead of a picture of a kitten, your image)
.THIS {
background-image: url(http://placekitten.com/g/500/500);
background-repeat: no-repeat;
height:500px;
width:500px;
}
<div id="main-border">
<p class="THIS">Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
Late answer but if you are trying to add text in the border you can absolute position it and do it like this http://jsfiddle.net/vo7jzz4m/
div{
width:250px;
height:250px;
background:url('http://placekitten.com/300/301') no-repeat;
background-size:cover;
border:10px solid transparent;
outline:1px solid green;
}
div:before{
top:0px;
position:absolute;
content:"aA";
}
I'm trying to play around with div to get the item layout that I need, but I can't achieve what I'm looking for
.skills-container
{
height:50px; /* something like 50px */
padding:5px;
}
.skill-pic
{
width:48px;
height:48px;
}
.skill-content
{
}
.skill-content p
{
}
.progress
{
}
HTML :
<div class="skills-container">
<div class="skill-pic">
<img src="img/ps.png" alt="Klematis" width="48" height="48">
</div>
<div class="skill-content">
<p>Photoshop</p>
<div class="progress">
<div class="progress-bar progress-success">
</div>
</div>
</div>
</div>
You need to add float: left; to the .skill-pic css.
EDIT: Someone also pointed out this doesn't get exactly what you need. You'll also need to add a border attribute to the css of the elements like so:
border: solid black 1px; and replace the 1px with the size of the border you need... You'll have to play with it.
Try this as your CSS: it should work and you can tweak it as such... Working JSfiddle here:
.skills-container
{
display:inline-block;
border: solid black 4px;
}
.skill-pic
{
margin:2px;
float:left;
width:45px;
height:45px;
}
img
{
border: solid black 3px;
height:45px;
}
.skill-content
{
height:45px;
width:200px;
border: solid black 3px;
float:left;
margin:2px 2px 2px 5px;
}
.skill-content > div
{
margin:2px;
border: solid black 1px;
}
.progress
{
margin:2px;
border: solid black 1px;
}