Basically, I have the code:
<div id="footer">
<img src="image here.jpg">
<div style="position:absolute;left:5px;top:0px;">
text here
</div>
</div>
CSS:
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center;color:#ECECEC; }
It works lovely on one computer, then if I load it on another the text is offset even further to the left or right depending on monitor/resolution.
How can I set it so it's centered but hovered over/under the image to an offset just right of the image?
EDIT
Small Screen:
Large Screen:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stuff here</title>
<style type="text/css">
#footer_container {border:0px solid #666; bottom:0; height:95px; left:0; position:fixed; width:100%; }
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center; }
#footer2 { line-height:165px; margin:0 auto; width:500px;height:100%; text-align:center; }
</style>
</head>
<body>
<div id="container">
stuff here
</div>
<div id="footer_container">
<div id="footer">
<img src="http://i.imgur.com/nx8pHGH.png">
<div style="position:absolute;left:500px;top:0px;">
<i><font color=black>dasdasdasd dsad dasdasdas dsadsad ssdasdasd</font>.</i>
</div>
</div>
<div id="footer2">
<div style="position:absolute;left:500px;top:0px;">
<font color=black><b>dasdsa dasdasd dasdasdasd dasdsadsad .</b></font>
</div>
</div>
</div>
</body>
</html>
You need to set position: relative; on the footer if you want the text to be positioned absolute in relation to the footer.
DEMO
Or you can remove all the positioning and the enormous line-height
DEMO
You can use the image as a background-image instead. Then it's much easier to position the text
HTML
<div id="footer">
<a href="http://site.com/" target="_blank">
<div>text here</div>
</a>
</div>
CSS
#footer {
line-height:125px;
margin:0 auto;
width:500px;
height:100px;
text-align:center;
color:#ECECEC;
background-image: url(http://i.imgur.com/nx8pHGH.png);
background-repeat: no-repeat;
}
See JSFiddle
Related
Hi I created a Search Bar and wrapped it inside a div and have given it the max-width of 500px (100% with to the search Input) but don't know why max width is not working and I search the Stack Overflow and found a link Why would max-width not work on this? and tried this but it didn't worked for me
So can anyone please tell me why its not working and how to make it work :)
Any kind of help is highly Appreciated
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
font-family:arial;
}
header{
width: 100%;
padding:20px 20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-container{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.search-input-container{
width:100%;
max-width:500px;
}
input[type="search"]{
border-radius:500px;
padding:5px 10px;
width:100%;
}
ul li{
list-style:none;
}
ul{
margin:10px;
}
button{
outline:none;
border:none;
padding:8px 15px;
}
a{
text-decoration:none;
}
.submenu-items{
position:absolute;
top:100%;
border:2px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<!-- Logo Wrapper -->
<div class="logo">
<img src="" alt="Test Logo">
</div>
<!-- Search Wrapper || Issue Area-->
<div class="search-container">
<form action="get">
<div class="search-input-container">
<input type="search" class="search">
</div>
</form>
</div>
<!-- Search Wrapper Ends ↑ -->
<div class="menu-container">
<ul>
<li>
Help
</li>
</ul>
<ul>
<li>
Campagians
</li>
</ul>
</div>
<div class="buttons-container">
<button class="Login-btn">Log in</button>
<button class="signup-btn">Sign up</button>
</div>
</nav>
</header>
</body>
</html>
Instead of max-width, try using width: clamp() (MDN)
I think in your case it would be something like:
.search-input-container {
width: clamp(150px, 400px, 500px);
}
Here 150px is the minimal size,
400px - is the ideal size, that the element wants to be,
and 500px - is the maximum possible size. so it can't grow bigger then that.
That way the input will try to be 400px, but if there is no space - it will shrink down up to 150px.
I am struggling to understand how to implement a simple carousel. I've tried the append()/prepend() functions but can't seem to get it to operate how I would like.
The setup I am using:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>First Step Connections - Online Media Marketing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="testimonial-carousel-container">
<div id="btn-prev"> < </div>
<div id="testimonial-carousel">
<div id="testimonial-container">
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
How was lunch today?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Football is the best sport!
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Meeting at 12pm.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
The weather outside is gorgeous.
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris<br/>
Houston, TX
</span>
</div>
<div id="testimonial">
<div class="speech-bubble">
<div class="arrow bottom right"></div>
Susan can you call Jim?
</div>
<img src="../Customer_Testimonial1.jpg"/>
<span class="author">
Justin Harris</br>
Houston, TX
</span>
</div>
</div>
</div>
<div id="btn-next"> > </div>
</div>
</body>
</html>
Basically I have a carousel container, and within the carousel container I have a testimonial container with x amount of testimonial divs.
The css seems okay in that I hid the overflow of carousel container, and removed white-space wrapping on the testimonial container. So everything appears fine.. I just need help with the logic of how I would endlessly be able to scroll through the x amount of divs.
So when I get to the last testimonial it continues fluidly to the first.
Here is my css incase you need it:
:root {
--main-red-color: #e11a2c;
--main-blue-color: #013e7b;
--main-green-color: #8dc63f;
}
* {
color:var(--main-blue-color);
box-sizing:border-box;
font-family:"Lato", sans-serif;
}
#testimonial-carousel-container {
width:70%;
margin: auto;
position:relative;
}
#testimonial-carousel {
margin: auto;
background-color:var(--main-blue-color);
position:relative;
overflow:hidden;
}
#testimonial-container {
white-space:nowrap;
width:100%;
position:relative;
}
.speech-bubble {
border-radius:5px;
background-color:var(--main-green-color);
width:auto;
display:inline-block;
padding:20px;
text-align:center;
position:relative;
}
.speech-bubble .arrow {
border-style: solid;
position:absolute;
}
.bottom {
border-color: var(--main-green-color) transparent transparent transparent;
border-width:8px 8px 0 8px;
bottom:-8px;
}
#testimonial {
padding:10px 5px 5px 5px;
height:200px;
background-color:var(--main-red-color);
position:relative;
display:inline-grid;
opacity:.4;
}
#testimonial img {
width:40px;
height:40px;
border-radius:50%;
margin-top:13px;
}
#testimonial span {
color:#fff;
font-weight:900;
}
#btn-prev, #btn-next {
position:absolute;
background-color:var(--main-red-color);
color:#fff;
height:40px;
width:40px;
z-index:5;
border:3px solid #fff;
text-align:center;
line-height:40px;
font-weight:900;
margin-top:-20px;
}
#btn-prev:hover, #btn-next:hover {
background-color:var(--main-blue-color);
}
#btn-prev {
top:50%;
left:-40px;
}
#btn-next {
top:50%;
right:-40px;
}
As for the Jquery scripting I am drawing blanks. If you could provide some help as to the logic for completing this I would greatly appreciate it. Is append() prepend() the only way to go?
You can view the demo at:
http://firststepconnections.com/carousel/
I've been trying to get this layout to work for smart phones. What I'm looking to do is have a fixed header that doesn't move and then have a flex container underneath the header that takes up the rest of the screen space. Inside the flex container should be 3 sections of the same size that each takes up the size the flex-container.
My current attempt isn't working. I can't figure out how to keep the fixed header from moving and I can't figure out how to get the flex container the right size with each of the sections.
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
height:80%;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>
If you set the position to fixed or absolute, the element's position must be definite. You either have to additionally set the navbar's width to 100%, or add both the left: 0 and right: 0 properties. Also, don't set each of your sections to height: 80%, but only the flex container. Ensure that each flex item has the flex: 1 property.
Your code should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>scroll</title>
<style>
html{
margin:0;
padding:0;
height:100%;
}
body{
margin:0;
padding:0;
height:100%;
}
#container{
height:100%;
overflow:scroll;
}
#fixed{
postion:fixed;
top:0;
height:20%;
width: 100%;
background-color:lightblue;
}
#flex-container{
display:flex;
flex-direction:column;
justify-content:space-around;
height:80%;
}
.sections{
flex: 1;
}
#section1,#section3{
background-color:blue;
}
</style>
</head>
<body>
<div id='container'>
<div id='fixed'>
</div>
<div id='flex-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>
I have a container which has a fixed width of 200px and the rest of the width is margin equally on both sides.
I have applied margin-bottom on this container but it will occupy only the 200px width since that is the width of the container box.
How can i make the border-bottom occupy the entire screen width.
code:
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
border-bottom:1px solid red
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
FIDDLE
Implementing as two class will be the best choice.
.sch-container{
border-bottom:1px solid red;
}
.content{
max-width:200px;
margin:0 auto;
text-align:center;
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
This is not a straight forward solution to your problem, more of an alternative.
You could use <hr /> tag instead of border-bottom on .sch-container.
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
}
hr{
height: 1px;
border: 0;
border-top: 1px solid;
}
.red{
border-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Some Title</title>
</head>
<body>
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
<hr class="red"/>
</body>
</html>
Sorry, searching has returned tons of results, but nothing that matches my problem exactly. Seems like SO is drowning in div-height problems. :-(
I have the following test layout:
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
height:100%;
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:absolute;
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
height:400px;
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
I want the div one and three to stay in top and bottom, div twotwo should expand in height to accommodate my pagecontent, and expand when the content is more than the page height, therefore pushing the div three down and cause scrolling.
Is this possible without JavaScript? If so, what's the CSS solution to this?
Thanks!
Javascript is needed for this. When you have a header and footer height and you want the middle to have 100% height, the result will be full page height + header height + footer height. So you'll end up with scroll bars to view the entire page. If you want everything to fit in the same window, then you we need to use javascript to detect how much middle space is left and assign height accordingly.
To detect middle height with jQuery, you can do
var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);
This will give you the height that is left for the middle part which is <div id="two"> in your case.
See jQuery code in action at http://jsfiddle.net/Ppw5y/. Notice that when you expand the window and you run the code again, you will have a different content height.
How about setting height:auto; for #two and #twotwo?
I think it can be done without script. Check this code out.
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
/*changed*/
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:relative; /*changed*/
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
/*changed*/
min-height:400px;/*changed*/
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
I have added a /* changed */ wherever i have changed your code.