I have a series of nested divs in which I am trying to have one piece of text, "TICKET NAME", overflow onto two others.
Here's a picture of the undesired results:
And here's my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="game_head">
<div id="timer">
</div>
<div id="flags">
<div id="best_of">
</div>
</div>
<div id="team_1">
<span class="team_name">Team 1</span>
</div>
<div id="ticket">
<span class="versus">VS</span>
<span class="ticket_name">TICKET NAME</span>
</div>
<div id="team_2">
<span class="team_name">Team 2</span>
</div>
</div>
<div id="game_body">
</div>
<body>
</body>
</html>
My CSS looks like this:
#game_head {
height: 62px;
width: 555px;
background-color: #CCC;
}
#timer {
height: 100%;
width: 26%;
background-color:#111;
float:left;
}
#flags {
height: 100%;
width: 4%;
background-color:#333;
float:left;
}
#best_of{
height:33%;
background-color:#F00;
}
#team_1 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#team_2 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#ticket {
height: 100%;
width: 7%;
background-color:#333;
float:left;
overflow:visible;
}
span.ticket_name{
color:#FFF;
}
span.team_name{
display: table-cell;
vertical-align: middle;
}
span.versus{
color:#F00;
}
How would I go about making the "TICKET NAME" text be centered in the "ticket" div but spill over into the "team_1" and "team_2" divs?
Thanks in advance!
Well you could make all the divs absolute and then set the z-index of the ticket to greater than the rest and have it wider than them as well
Related
So I spent a couple hours searching, but all I've seeing is just standard help with adding text over an image, nothing that will put the text over the image, as it "falls" off the image.
I've attached an example of what I'm referring to.
I'm trying to do it in a way so the images stay right under each other and not create space between the, added another photo for reference on what I mean.
I've tried creating an img-container and add text but that doesn't allow me to have the text "fall" off the image. This is what I have so far (not including the text".
I've attempted to make the images as the body background but that didn't have the same design I'm looking for unfortunately, as the text will also serve as links in the future.
images stacked with no space
text falling off the image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="navigation.css">
<title>Pasetta Studios</title>
</head>
<body>
<div id="wrapper">
<div class="navbar">
Home
About
Projects
Contact
</div>
<div class="img-container">
<img src="images/top-image.jpg" alt="plants">
<img src="images/second-image.jpg" alt="benches">
<img src="images/third-image.jpg" alt="cactus">
<img src="images/last-image.jpg" alt="more cactus">
<img src="images/pasetta-studios" alt="pasetta studios">
</div>
<code>Designed by #PasettaStudios. </code>
</div>
</body>
</html>
And here is my CSS
#font-face {
src: url(fonts/Modric.ttf);
font-family: Modric;
}
#font-face {
src: url(fonts/Orkney-Regular.ttf);
font-family: Orkney;
}
#font-face {
src: url(fonts/Made-Bon-Voyage.otf);
font-family: Made-Bon-Voyage;
}
* {
box-sizing: border-box;
}
#wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-right: 50px;
padding-left: 50px;
}
body {
background-color: #262c2c;
}
.navbar {
max-width: 100%;
height: 100px;
margin-right: auto;
margin-left: auto;
}
/* links and text inside nav bar */
.navbar a {
float: left;
padding: 40px 0px 0px 0px;
background-color: #262c2c;
text-decoration: none;
font-size: 20px;
width: 25%; /* Four links of equal widths */
text-align: center;
color: #dae1e7;
font-family: Orkney;
}
h1 {
text-align: center;
font-family: Orkney;
}
img {
max-width: 100%;
height: auto;
display: block;
opacity: 50%;
margin-left: auto;
margin-right: auto;
}
p {
text-align: right;
font-size: 100px;
padding-left: 100px;
color: #dae1e7;
font-family: Modric;
font-size: 150px;
}
Try this:
<div class="img-container">
<div class="row">
<img src="images/top-image.jpg" alt="plants">
<span>Your text</span>
</div>
<div class="row">
<img src="images/second-image.jpg" alt="benches">
<span>Your text</span>
</div>
<div class="row">
<img src="images/third-image.jpg" alt="cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/last-image.jpg" alt="more cactus">
<span>Your text</span>
</div>
<div class="row">
<img src="images/pasetta-studios" alt="pasetta studios">
<span>Your text</span>
</div>
</div>
.img-container {
width: 500px;
height: auto;
}
.row{
position: relative;
width: 100%;
}
.row span {
position: absolute;
color: white;
top: 0;
}
.row:nth-child(odd) span {
left: -20px;
}
.row:nth-child(even) span {
right: -20px;
}
What you have to do is put your Image in a Container, along with your text. The text is then positioned absolute and with a negative margin or left and right values instead of only setting top values.
<div class="img-container">
<img src="img1.jpg" alt="Image 1">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
<div class="img-container">
<img src="img2.jpg" alt="Image 2">
<p class="lefttext">Left</p>
<p class="righttext">Right</p>
</div>
For multiple images, just repeat this code.
And your CSS:
.img-container {
position:relative;
margin:0;
padding:0 40px;
}
.img-container img {
border:0;
}
.img-container p.lefttext {
position:absolute;
top:50px;
margin-left:-40px;
}
.img-container p.righttext {
position:absolute;
top:120px;
width:100%;
text-align:right;
margin-right:—40px;
}
Alternatively, you could do
.img-container p.lefttext {
position:absolute;
top:20px;
left:0;
}
.img-container p.righttext {
position:absolute;
top:120px;
text-align:right;
right:0;
}
If the position of the text over the image should change for each picture, simply remove the ˋtop:..pxˋ from your CSS and add ˋstyle="top:50px;"ˋ to each image tag.
html {
font-family: 'Open Sans', sans-serif;
}
body {margin: 0;
padding: 0;
}
#wrapper {
padding-left:50px;
padding-top:30px;
}
#third, fifth {
background-color:#E8E8E8 ;
}
img[src^="my_menu.png"] {
z-index:10;
}
#second, #third, #fourth, #fifth {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
background-color:white;
z-index:-1;
}
#second {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
margin-top:100vh;
}
#fourth, #second {
background-color:grey;
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
<div id="fift">
</div>
</div>
</body>
</html>
I am making a website for my client, and I need help. I want to make 4 divs with height of 100vh, and with width equals to 100%. That's what I have. Now, I need to put arrow facing down to all of these divs, somewhere at the bottom center. How to do it?
I'm not sure if this is what you want, but according to your question, this might be what you want to achieve. Just created a div with an image inside (you can also use background property for arrow image)
html * {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.full {
position: relative;
height: 100vh;
width: 100%;
}
.full:nth-child(1) {
background: cyan;
}
.full:nth-child(2) {
background: magenta;
}
.full:nth-child(3) {
background: yellow;
}
.full:nth-child(4) {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 32px;
height: 32px;
left: calc(50% - 16px);
}
.arrow-down > img {
width: 100%;
}
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
I'm new to coding so this is a simple page for a course (full code below includes html and inline css).
The problem is that my is not responding to positioning -- and it wouldn't respond to "float:left;" prior to using the positioning code. I loaded the page in firefox, chrome, and several online code test sites (e.g. codepen, squarefree).
Thank you for your help.
<!doctype html>
<html>
<head>
<title>Learning CSS</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.large {
font-size:200%;
}
#green {
color:green;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.purplebox {
background-color:#8904B1;
width:200px;
height:200px
position:relative;
left:100px;
}
.greenbox {
background-color:#01DF01;
width:300px;
height:100px;
}
</style>
</head>
<body>
<div class="purplebox">
<p class="large">This is some text.</p>
</div>
<div class="greenbox">
<p id="green" class="large">This is some more text.</p>
</div>
<div class="clear"></div>
<p>The third <span class="underline large bold">word</span> in this paragraph is underlined.</p>
</body>
</html>
I'm not entirely sure what your question is, but I think your biggest problem is that you didn't put a semicolon before your position in your .purplebox element's CSS.
Your Original CSS:
.purplebox {
background-color:#8904B1;
width:200px;
height:200px /*No semicolon*/
position:relative;
left:100px;
}
Fixed CSS, which appears to work for me in the Stackoverflow Snippet editor.
.purplebox {
background-color: #8904B1;
width: 200px;
height: 200px; /* Semicolon */
position: relative;
left: 100px;
}
.large {
font-size: 200%;
}
#green {
color: green;
}
.underline {
text-decoration: underline;
}
.bold {
font-weight: bold;
}
.purplebox {
background-color: #8904B1;
width: 200px;
height: 200px;
position: relative;
left: 100px;
}
.greenbox {
background-color: #01DF01;
width: 300px;
height: 100px;
}
<div class="purplebox">
<p class="large">This is some text.</p>
</div>
<div class="greenbox">
<p id="green" class="large">This is some more text.</p>
</div>
<div class="clear"></div>
<p>The third <span class="underline large bold">word</span> in this paragraph is underlined.</p>
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/
here is the css/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" />
<style>
#chatContainer {
position: fixed;
bottom: 20px;
right: 0;
vertical-align: bottom;
}
.chat {
border: 1px solid #999;
float: right;
margin: 0 5px;
height: 200px;
width: 250px;
vertical-align: bottom;
overflow: hidden;
bottom: 0px;
transition: 1s;
}
.title {
padding: 0.5em;
background-color: blue;
color: white;
}
.text {
padding: 10px;
overflow-y: scroll;
overflow-x: hidden;
height: 120px;
}
.inputText {
width: 100%
}
</style>
</head>
<body>
<div id="chatContainer">
<div class="chat" id="{id}">
<div class="title"> <span>{title}</span>
<div style="float:right">
<input class="minimize" name="" value="min" type="button">
</div>
</div>
<div class="text"> </div>
<div class="chatbox">
<input type="text" class="inputText" placeholder="enter text" />
</div>
</div>
<div class="chat" id="{id}" style="height:100px">
<div class="title"> <span>{title}</span>
<div style="float:right">
<input class="minimize" name="" value="min" type="button">
</div>
</div>
<div class="text"> </div>
<div class="chatbox">
<input type="text" class="inputText" placeholder="enter text" />
</div>
</div>
</div>
</body>
</html>
My problem is that I want the chatbox to be aligned on bottom
Here is now the bad result I got:
Any idea how to fix that ?
(I tried vertical-align with no success)
I have created the fiddle:
http://jsfiddle.net/uwmxT/
(click on min to see the bug)
Don't use float:right but display:inline-box on your chat boxes and vertical-align them to the bottom.
http://jsfiddle.net/willemvb/SfnrU/2/
.chat {
display: inline-block;
vertical-align: bottom;
}
Add width to following id of css :
#chatContainer {
bottom: 20px;
position: fixed;
right: 0;
vertical-align: bottom;
width: 265px; // added width
}
Demo : http://jsfiddle.net/7gEfL/1/
Its actually pretty simple i just made a fiddle which shows a fixed positioned chatbox
with a input area in the bottom of it
i made a innerholder to make sure it works in all browsers
See this fiddle to see the code
code:
<div class="chat">
<div class="innerchat">
<input type="text" class="textbox" placeholder="start chatting" />
</div>
</div>
.chat {
height: 300px;
width: 200px;
display: block;
border: 1px solid #000;
position:fixed;
top:20px;
left:20px;
}
.chat .innerchat {
position:relative;
height:100%;
width:100%;
}
.chat .innerchat .textbox {
position:absolute;
bottom:0;
left:0;
width:100%;
border:none;
background:#ccc;
color:#404040;
height:30px;
text-indent:6px;
}
enjoy
set the box css position to absolute and add to it basic positioning commands to css style
#id_chat{
position:absolute;
bottom:0;
right:250px; /*width of your very right chat box, + you can add e.g. 10px as margin*/
}
http://jsfiddle.net/ueE4b/1/