My ribbon.png and logo.png both have a broken icon on my webpage while my fade.png is perfect. I have them with the correct path so I'm kind of stumped. I should say as well that the difference in the 3 is that those 2 up there I deleted the background so that only the ribbon and logo show and the back is transparent not sure if I need to add special code for that. I'm seriously out of html practice so anyone have a tip?
html
<img src="ribbon.PNG" alt="Ribbon Picture" width="270" height="573" class="ribbon" style="height:auto " >
<img class="logo" src="logo.PNG" alt="Logo" style="height:auto " />
css
div.fade{
position: relative;
z-index: 1;
height: 1400px;
width: auto;
top: 200px;
background-image: url("fade.png");
background-repeat: repeat-x;
}
img.ribbon{
position: absolute;
top: 600px;
left: 20px;
width: 229px;
}
img.facebook{
position:absolute;
top: 418px;
left: 940px;
}
img.logo{
position: absolute;
top:20px;
left: 250px;
Related
I'm currently working on a website for a client, but I'm struggling on making an image grid like this:
example
However, the hardest parts for me to achieve are: Set a grid of 4 images, responsive, where I can move the border below the image.
I've tried to set each of the images inside a div tag which I give it a border. Since I'm pretty much new into coding, I'm not sure what else should I try.
div.composition {
display: inline-block;
float: right;
position: relative;
}
img.composition-photo {
background-position: center center;
background-repeat: no-repeat;
margin: 0 auto;
object-fit: cover;
width: 250px;
height: 250px;
position: absolute;
}
<div className="composition">
<div>
<img src={ModelOne} alt="Modelo 1" className="composition-photo img-fluid" />
</div>
<div>
<img src={ModelTwo} alt="Modelo 2" className="composition-photo img-fluid" />
</div>
<div>
<img src={ModelThree} alt="Modelo 3" className="composition-photo img-fluid" />
</div>
<div>
<img src={ModelFour} alt="Modelo 4" className="composition-photo img-fluid" />
</div>
</div>
Thanks in advance for your valuable help!
Maybe not the best way, but one of the ways would be this. I hope it helps.
.composition {
position: relative;
float: right;
}
.composition-photo {
background-position: center center;
background-repeat: no-repeat;
margin: 0 auto;
object-fit: cover;
width: 250px;
height: 250px;
}
.composition img:nth-child(1){
position: absolute;
top: 10px;
right: 265px;
}
.composition img:nth-child(2){
position: absolute;
top: 0;
right: 0;
}
.composition img:nth-child(3){
position: absolute;
top: 280px;
right: 280px
}
.composition img:nth-child(4){
position: absolute;
top: 260px;
right: 15px;
}
<div class="composition">
<img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 1" class="composition-photo"/>
<img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 2" class="composition-photo"/>
<img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 3" class="composition-photo"/>
<img src='https://guianoivaonline.com.br/wp-content/uploads/terno-para-noivo-18-700x467.jpg' alt="Modelo 4" class="composition-photo"/>
</div>
I know how to make an image fixed position with CSS but I have no idea how to actually create a header using HTML.
I've attached an image, I'd like to be able to still edit things into the header,
Any help would be greatly appreciated because I can never do this.
Here is how I'd do it if it were an image:
<style>
.header
{
position: fixed;
top: 0%;
left: 0%;
right: 0%
z-index: 1;
}
</style>
<img src="IMAGE URL" class="header" width="100%" height="150px">
The image would then be pinned, How do I make it so there is a solid colour box over the top of everything.
Thanks.
<style>
.header
{
background-color: red;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 150px;
z-index: 1;
}
</style>
<div class="header">
Some Text
</div>
I want to simply overlay these 4 images with a block of colour, and text aligned in the middle of each. But with my current use of "position: absolute" to get each image in the correct position and z-index etc. I'm finding it hard to attempt something like this: http://jsfiddle.net/jimjeffers/mG78d/1/ and get it to work. My position absolute seems to always break other code I've been trying from stackoverflow and others, even tried a few jquery scripts.
Live URL: http://bit.ly/1k7RgDS
HTML
<div class="index-gallery">
<img src="<?php HTTP_HOST ?>/Images/1.JPG" alt="" class="img1" />
<img src="<?php HTTP_HOST ?>/Images/2.JPG" alt="" class="img2" />
<!-- <img src="<?php //HTTP_HOST ?>/Images/3.JPG" alt="" class="img3" /> -->
<img src="<?php HTTP_HOST ?>/Images/6.JPG" alt="" class="img3" />
<img src="<?php HTTP_HOST ?>/Images/5.JPG" alt="" class="img4" />
</div>
CSS
#index-gallery .index-gallery { margin-bottom: 30px; }
#index-gallery .index-gallery img:hover { opacity:0.6; filter:alpha(opacity=40); /* For IE8 and earlier */ }
#index-gallery .index-gallery img:before { content: "Show Home Hemel Hempstead"; }
#index-gallery .index-gallery .img1 { width: 550px; top: 10px; position: absolute; z-index: 3; display: block; }
#index-gallery .index-gallery .img2 { width: 550px; right: 0; position: absolute; z-index: 2; display: block; }
#index-gallery .index-gallery .img3 { width: 400px; top: 400px; left: 10px; position: absolute; z-index: 4; display: block; }
#index-gallery .index-gallery .img4 { width: 710px; top: 400px; right: 0; position: absolute; z-index: 1; display: block; }
I've got a little bit of a transparency code to work but looking more for what's on that JSFIDDLE with the ability to center the text in the middle when hovered over with colour overlay. If you have a suggestion which would change all the code I don't mind, if this is bad practice what i've got so far.
So - Working with what you already have you could just try this route. Minimal position changes and I've added Paragraph tags inside your spans so you can position the text absolutely.
http://jsfiddle.net/9H7eM/
<span><p>Hello</p></span>
#overlay {position: relative;}
#overlay span {
background: red;
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#overlay span p {
position: absolute;
text-align: center;
width: 100px;
top: 30px;
font: bold 16px arial;
}
IF you're open to changing your code, you could try an approach similar to this: http://jsfiddle.net/te6t8/1/
But if you're already happy with how it is, stick with what you have and know!
The webserver was case sensitive it seems, Thank you very much #David and everyone. Website is working perfectly. :D
So I have had to make a website for a bakery for an assignment but some images are not displaying and I have no idea why e.g. my cookies page is perfect by my cakes page is a disaster (this is my first website so the coding in general is terrible) When I view the website locally the images are displayed perfectly. Hosted by www.000webhost.com. Website was built using Dreamweaver.
Any help is greatly appreciated, thank you in advance.
http://beckasbakery.comlu.com/Cookies.html
http://beckasbakery.comlu.com/Cakes.html
COOKIES
#Smartiecookie img {
position: absolute;
left: 487px;
top: 310px;
width: 208px;
height: 149px;
}
#Orangecookie img {
position: absolute;
left: 486px;
top: 519px;
width: 206px;
height: 145px;
}
#Doublechoccookie img {
position: absolute;
width: 210px;
height: 147px;
left: 832px;
top: 314px;
}
#Chocolatecookie img {
position: absolute;
left: 838px;
top: 546px;
width: 207px;
height: 148px;
}
</style>
</head>
<body>
<
<div id="Smartiecookie"><img src="Smartie Cookies.jpg" width="364" height="242" /> </div></p></p></p>
<div id="Orangecookie"><img src="Orange cookie.jpg" width="354" height="242" /> </div>
<div id="Doublechoccookie"><img src="doublechoccookie.jpg" width="364" height="242" /> </div>
<div id="Chocolatecookie"><img src="Chocolate cookie.jpg" width="364" height="242" /> </div>
</body>
</html>
CAKES
#Cake1 img {
position: absolute;
left: 506px;
top: 315px;
width: 208px;
height: 149px;
}
#Cake2 img {
position: absolute;
left: 503px;
top: 554px;
width: 206px;
height: 145px;
}
#Cake3 img {
position: absolute;
width: 210px;
height: 147px;
left: 904px;
top: 339px;
}
#Cake4 img {
position: absolute;
left: 906px;
top: 567px;
width: 207px;
height: 148px;
}
</style>
</head>
<body>
<div id="Cake1"><img src="Cake 1.jpg" width="364" height="242" /> </div></p></p></p>
<div id="Cake2"><img src="Cake 2.jpg" width="354" height="242" /> </div>
<div id="Cake3"><img src="Cake 3.jpg" width="364" height="242" /> </div>
<div id="Cake4"><img src="Cake 4.jpg" width="364" height="242" /> </div>
you have to make sure that you have the image files in the same directory as the .html if you're gonna do it as src="Cake1.png", otherwise, you have to specify the location of the image such as src="img/Cake1.png" or something like that.
Hope that helps
Remove the spaces from the image filenames, "Cake 1.jpg", etc. These are requested as "Cake%201.jpg", where %20 is the space character, but this is likely to be interpreted as %201 (some other character).
Web addresses should not contain spaces, they cause too many problems.
I am using wordpress as my CMS, and have used a theme of my choice. The theme shows a slider (carousel) on the home page, but takes up too much space. I tried to edit the width and height to be 80%, but the UI gets screwed. The slider does not center, or the frame with the left right arrows come closer. The image gets smashed. I need to get the css right for this.
I tried the following
modified width and height to 80%
reduced the px values, messed it up further
Below I have relevant css and html portions of the code.
<div id="slides">
<div class="slides_container slide" style="overflow: hidden; position: relative; display: block;">
<div class="slides_control" style="position: relative; width: 2736px; height: 480px; left: -912px;"><div style="position: absolute; top: 0px; left: 912px; z-index: 5;">
<img src="http://localhost/taxeeta/wp-content/uploads/2013/01/116.png?1358343444279" alt="">
</div>
<div style="position: absolute; top: 0px; left: 912px; z-index: 0; display: none;">
<img src="http://localhost/taxeeta/wp-content/uploads/2013/01/215.png" alt="">
</div>
</div>
</div>
CSS:
#slides {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
.slides_container {
width: 912px;
margin: 0;
padding: 0;
}
.slides_control {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
Are you sure that there is jo javascript code modifying the element-css?
Did you changes the width of slides and slides_control as the same?
(sorry iam not able to write comments...)