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>
Related
I'm making a simple web page for practice and attempting to incorporate an image gallery, but I think I messed up my divs somehow because when I add content to the main part like image thumbnails they cause a weird gap between the header and left navbar. It's probably some simple solution but I'm super beginner so it's escaping me. Any help at all is appreciated, thanks in advance!
Here is my HTML code:
<!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,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>Lab 8</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img class= "image" alt="flower" src="flower.jpg"style="max-width:100%;height:auto;">
<h1 class="header">Photos By Doug</h1>
<div id ="wrapper">
<main> Here is some content info about Doug Kowalski Photography
<img src="desert.jpg" class="thumbnail" height="100" width="100" />
<img src="hills.jpg" class="thumbnail" height="100" width="100"/>
</div>
<div class="nav">
Home<br>
Journals<br>
Books<br>
Nature<br>
Contact<br>
</div>
<img class ="image2" alt="vine" src="vine.jpg"style="max-width:100%;height:auto;">
</main>
</body>
</html>
And CSS:
body {
background-color: #88abc2;
margin:0;
}
.image{
height: 250px;
border-radius:5px;
background-repeat: no-repeat;
padding-bottom:10px;
float:left;
width: 25%
}
.header{
display:flex;
padding-top: 100px;
color: white;
text-align: center;
font-size: 50px;
font-family: papyrus;
background-color:#49708A;
justify-content: center;
align-items:center;
}
#wrapper {
height:100%;
margin: 10px;
padding: 0px;
width:67%;
}
.nav {
height: 100%;
width: 20%;
padding-top: 40px;
background-color:#49708A;
}
.nav a{
padding-left:3px;
padding: 6px 6px 6px 32px;
font-weight: bold;
color: #EBF7F8;
text-decoration: none;
font-size: 25px;
display: block;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
}
.nav a:hover {
color: #CAFF42;
}
main{
padding-top: 38px;
text-align:left;
padding-left: 30%;
}
.image2{
height:10%;
width:15%;
position: absolute;
right: 0px;
bottom: 0px;
right:0px;
bottom: 0px;
}
.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
Edit: and a photo of the area in question:
Do you mean like this?
I saw this:
<div id=wrapper>
<main>
</div>
</main>
Edit: Mistyped styles.css
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.
I'm having difficulty fixing a problem in my html/css code for the position attribute. I want to have a word "Social" to the right and bottom with a fixed position so I can scroll with it in the same spot. I can't even get it to the right and bottom regardless of what positioning it is. Please tell me where my problem may be stemming from so I can fix it.
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
<!--></-->
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
<!--></-->
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
<!-->controls images within banner</-->
position: ;
}
.social_bar{
width: 300px;
border: 3px solid #73AD21;
}
#social_strip{
<!-->post button on either left or right to remain fixed
through scrolling
position:fixed;
right:0;</-->
position: fixed;
bottom: 0px;
right: 0px;
}
.content_container{
<!-->contain all content within container, relative to
overall container</-->
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
remove your comments on html style. It will work.
I am not sure of this.
But in css, you need /* */ to comment.
(e.g)
/* This is a comment */
<head>
<meta charset="utf-8" />
<title>Template_</title>
<!--><meta name="generator" content="Geany 1.27" /></-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container{
position:relative;
width= 100%;
height= 100%;
overflow=scroll;
}
.banner{
position:absolute;
margin:5px;
width:90%;
right: 0px;
}
.banner .test{
font-weight: 900;
font-size: 3em;
margin:10px;
font-variant: small-caps;
}
.banner .logo{
position: ;
}
#social_strip{
position: fixed;
bottom: 0px;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
}
.content_container{
position: relative;
margin:5px;
padding:5px;
}
</style>
</head>
<div class="social_bar" id="social_strip">social</div>
<body class="container">
<div class="banner">
<p>Banner</p>
<div class="test">
<p>Test</p>
</div>
</div>
<div class="content_container">
<p>Content</p>
</div>
</body>
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 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