I am trying to get three images in a line within a div without spaces and have text display over each of the images that will click through to a different page. I understand the solution to this probably lies in the position of both elements but I cannot seem to get the text to stay over the correct image. If someone could help me with this that would be great?
Below is the HTML.
<div class="services">
<div id="text-overlay">
<img src="Untitled-5.jpg">
<p>Landscaping</p>
</div>
<div id="text-overlay">
<img src="Untitled-6.jpg">
</div>
<div id="text-overlay">
<img src="Untitled-7.jpg">
</div>
</div>
And the CSS:
#text-overlay {
position: relative;
}
img {
display: block;
width: 33.3333333333%;
float: left;
height: 250px;
}
#text-overlay p {
position: absolute;
top: 1%;
left: 1%;
background-color: firebrick;
color: white;
padding: 1%;
}
Any help would be appreciated. Is this the best way to do it or are there better alternatives?
Your code has few errors:First of all you should use unique ID for indivisual element.Secondly you should use background-image for these conditions.Refer here for more details.
If you want to overlay over image learn from here.
Related
Im building my first responsive type website, So far doing the index page. Im having an issue when that i cannot align the footer divs together. i have three divs spread out and the last div on the right has social 4 icons. but im unable to get these to align with the other two divs texts. Ive tried a number of different things to fix it in the css and flex though id rather stick to css right now on this site.
Here is the site on test host to see the actual icons in the footer.
https://hireahottub2.netlify.com/
i feel the problem may lie in my code somewhere but i cannot see it for the life of me.
align-items: center
display:inline block is in the parent
<html>
<footer>
<div id="footerwrap">
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<a href="https://www.facebook.com/hireahottub2000" target="_blank"
><img src="./img/fb2.png"
/></a>
<a href="https://www.instagram.com/hireahottub2000" target="_blank"
><img src="./img/insta2.png"
/></a>
<a href="https://twitter.com/HireahottubUK" target="_blank"
><img src="./img/twitter2.png"
/></a>
<a href="mailto:hireahottub2000#hotmail.com" target="_blank"
><img src="./img/email2.png"
/></a>
</div>
</div>
</footer>
</html>
/* FOOTER CSS */
footer{
padding: 5px;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
#footerwrap{
width: 80%;
text-align: center;
}
.fdiv1{
float: center;
display: inline-block;
width: 20%;
}
.fdiv2{
float: left;
width: 20%;
}
.fdiv3{
float: right;
width: 20%;
min-width: 75px;
}
.fdiv3 img{
width: 30px;
}
For your issue specifically, I'm seeing that your divs fdiv1 and fdiv2 only align in the center because of browser-set margins on the heading tags within them. Furthermore, they have zero concept of the height of any other div, because they are floated (removed from document flow). To fix this, you will need to set them all an equal height. Then vertical-align will actually work.
h5 {
margin: 0;
}
.fdiv1, .fdiv2, .fdiv3 {
height: 50px;
}
a {
display: inline-block;
vertical-align: middle;
}
It may be beneficial for you to learn Flexbox. It makes these types of tasks easy, but it's not supported in older browsers.
My recommendations are:
Get rid of all of the float stuff.
Get rid of the width: 20% stuff on the footer items. (Maybe bring it back after you see the results of the rest of this.)
Get rid of the single inner <div> that's a child to the <footer> element (I guess you said you already did that somewhere else, just not on the current demo website).
Use the flex justify-content (space-between) and align-items (center) CSS attributes on your <footer> to spread your footer items out in the proper fashion.
Follow up...
I tried the above, ended up keeping the width: 20%, and got this as a result:
I guess you might want to switch the order of those first two footer items around, but that's not something I could do easily just playing with CSS attributes in my web console.
Use a css grid layout to achieve this.
footer {
padding: 5px;
color: #ffffff;
background-color: #354243;
text-align: center;
border-top: #e8491d 3px solid;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
footer div img {
width: 30px;
}
<footer>
<div class="fdiv1">
<h5>Hire A Hot Tub, Goole, DN14 6QT</h5>
</div>
<div class="fdiv2">
<h5>Web Design by DM DESIGN</h5>
</div>
<div class="fdiv3">
<img src="./img/fb2.png" />
<img src="./img/insta2.png" />
<img src="./img/twitter2.png" />
<img src="./img/email2.png" />
</div>
</footer>
Hello this is a solution if you want to stick with only CSS ( without flex ) :
footer{
padding: 5px;
position: relative;
margin-top:;
color:#ffffff;
background-color: #354243;
text-align: center;
font: bold;
border-top: #e8491d 3px solid;
}
.fdiv3{
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.fdiv2{
width: 20%;
width: 20%;
min-width: 75px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How do I vertically center text with CSS?
I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).
Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.
CodePen
Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.
.headerLeft {
margin-left: 30px;
margin-right: 40px;
float: left;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
.headerRight {
margin-left: 30px;
margin-right: 40px;
float: right;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
verticalAlignHelper {
vertical-align: middle;
line-height: 150px;
height: 150px;
}
Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.
Prevent covered-up body content
Use JavaScript to set a padding-top on body, just larger than the top height. Like so:
$("body").css("padding-top", $("nav").height() + 25);
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
Fix vertical alignment of nav-bar images
Because I can't see the images, the following are only suggestions:
Easiest: Make the navigational bar the same height as the image (or vice versa)
Manually hard-code margins in (only if you know exact heights of everything)
Hardest but best Use JavaScript (dynamic and fun)
$(function() {
var elem = $("#img4");
elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
img {
height: 75px;
}
div.navbar {
width: 100%;
height: 100px;
background-color: lightgrey;
margin-bottom: 20px;
}
div.text {
line-height: 100px;
display: inline-block;
vertical-align: top;
}
img#img1 {
height: 100px;
}
div#div2 {
height: 75px;
}
div#text2 {
line-height: 75px;
}
img#img3 {
margin: 12.5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text">Uncentered image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
<div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
<div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
<div class="text">Centered using JS and jQuery (dynamic)</div>
</div>
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
So to start this off I would like to just say that any help is appreciated, I'm not looking for the entire code laid out for me. I have tried to create this but fail every time as something disappears of it breaks the entire layout of the page. I am fairly new to programming but I have a pretty good grasp of concepts and I'm open to learning new things.
I would like to create a top bar like in this website, with the logo and social icons. No search bar.
http://www.complex.com/
Thank you to anyone for any help
First, as a general tip: Whenever you see something you want to recreate, right click on it in chrome and select "inspect element". Then you can look at the css used to create it.
To have social icons up like your example site, they've simple floated them right.
So HTML:
<div class="header">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
CSS:
.leftThing { float:left;}
.rightThing { float:right;}
The float will cause the element to go as far to the side you select as it can, then sit there. Here is a good css tricks article on the concept: http://css-tricks.com/all-about-floats/
I made you a litte JS-Fiddle to show you how to fix the header on top of the screen when you scroll down. Hope it helps a bit!
HTML:
<div id="WebContent" class="Content">
<img src='http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg'></img>
</div>
CSS:
.Header{
top: 0px;
left: 0px;
min-height: 50px;
max-height: 50px;
min-width: 1024px;
background-color: #2C2C2C;
color: white;
position: fixed;
}
.icon{
height: 50px;
}
.Content{
max-width: 300;
max-height: 300;
overflow-y: auto;
}
Fiddle: http://jsfiddle.net/wujood/pgqeLr7s/
Or you can just insert a fixed position to your header:
<div class="header" style="position:fixed">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
Apply either CSS float: left or display: inline-block to your elements.
http://jsfiddle.net/njoh7x73/
CSS code
.menu {
background-color: #333;
}
.menu div.item {
width: 64px;
height: 16px;
background-color: #888;
}
.menu .item {
float: left;
padding: 10px;
margin: 5px;
}
.menu .item:hover {
background-color: #555;
}
HTML code
<div class="menu">
<a class="item" href="#">LINK</a>
<div class="item"></div>
<a class="item" href="#">LINK</a>
<div class="item"></div>
<div style="clear:both"></div>
</div
If you use this approach (floating elements), don't forget to clear them.
My question is about HTML - I need to arrange 2 images (there are in same line) in central of line, but also I need to write text to the right of each image; text must be align on vertically rather image. How can I do it?
You could do the following:
<div class="container">
<div class="img1">
<img src="http://www.veryicon.com/icon/png/Nature/Nature/Red%20Flower.png" />
<span>This is flower1</span>
</div>
<div class="img2">
<img src="http://www.veryicon.com/icon/png/Nature/Nature/Red%20Flower.png" />
<span>This is flower2</span>
</div>
</div>
And CSS:
div.container {
margin: auto;
width: 700px;
text-align: center;
position: relative;
}
div.img1 {
position: absolute;
left: 0px;
}
div.img2 {
position: absolute;
right: 0px;
}
img {
vertical-align: middle;
}
I made this example for you here on JSFiddle.
In the old way, you can use a table with border=0 with 1 row and 4 cols. The table, and td tags allow you to align vertical and horizontal. This is a very simple way to achieve your requirements, but it's not probably the better.
Also, you can align working with divs.