I want to align an image and h1 in the same line. I have attached my source code and it doesn't work. can someone tell what's wrong with it.
<head>
.header img{
float: left;
width: 2px;
height: 3px;
background: #555;
}
.header h1{
position: relative;
top: 18px;
left: 10px;
}
<title> home page </title>
</head>
<body>
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
use display : inline-block
.header img{
display:inline-block;
width:10px;
height:3px;
background:#555
}
.header h1{
display:inline-block;
position: relative;
}
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
you can also use float:left to image and float:right to the header
.header img{
float:left;
width:10px;
height:3px;
background:#555
}
.header h1{
flaot:right;
position: relative;
}
<div class="header">
<img src="greenlock.jpg" alt="logo" />
<h1> UNIVERCITY OF GREENLOCK <h1>
</div>
Please try this code:
.header img{
width:2px;
height:3px;
background:#555;
vertical-align: middle;
}
.header h1{
display: inline-block;
vertical-align: middle;
}
In a situation like this, where the image is essentially part of the heading, I would have the image which sits beside the <h1>, not as an <img> at all but as a background style rule applied to the <h1>:
h1 {
margin: 18px 0 0 10px;
padding-left: 30px;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
background: url('http://placehold.it/24x24') no-repeat left top rgb(255,255,255);
}
<header>
<h1>University of Greenlock</h1>
</header>
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.
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/
I'm arranging a couple of block level elements next to an image and have used the following HTML/CSS to position everything:
<style>
#logo p {
font-size: 24px;
margin-left: 220px;
margin-top: -27px;
}
#logo img {
position: absolute;
top: 10px;
}
#logo #a {
padding-top: 43px;
}
</style>
<div id="logo">
<p id="a">Label A</p>
<p id="b">Label B</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>
(Editable version here: http://jsfiddle.net/49cAv/1/)
To get the two P elements closer I've used a combination of margin-top: -27px; and padding-top: 43px; which seems a bit clunky.
Is there a better / cleaner way of doing this?
Here is my solution:
html
<div id="logo">
<div id="imgCont">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>
<div id="labelCont">
<p id="a">Label A</p>
<span style="clear:left"></span>
<p id="b">Label B</p>
</div>
</div>
css
*{
padding:0;
margin:0;
}
#logo p {
font-size: 24px;
}
#logo img {
position: relative;
}
#imgCont{
float:left;
}
#labelCont{
float: left;
padding: 15px;
}
fiddle
I have a website that works fine, looks okay, etc. The problem is I am not the best with positioning, float, etc. Instead of elements just lining up one under another, I have to manually set increasingly large margins for each additional paragraph I add.
My navbar is composed of a ul inside a fixed div. The ul is not floating, but the "li"s are. I need a way to position this and the other elements such that everything is below the navbar. I have tried using clear: both; to no avail. I know my positioning is all over the place, I don't really understand how/if positioning and float are inherited.
Here is a link to the website.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="webfonts/stylesheet.css">
<title>
Artwork
</title>
</head>
<body>
<div class="navbar">
<img src="images/navbar/title.png" class="navbar">
<ul>
<li>Home</li>
<li>Art</li>
<li>About Me</li>
</ul>
</div>
<h1 id="header">Welcome to my Website!</h1>
<p>
The purpose of this website is to showcase my artwork, and, in a way, my HTML skills. Click on
one of the links up top, and you can see some of my <b>artwork</b> or maybe learn <b>about me</b>!
</p>
</body>
</html>
CSS:
html{
height: 100vh;
width: 100vw;
margin: 0px;
}
body{
height: 100vh;
width: 100vw;
margin: 0px;
background-color: #009900;
}
div.navbar{
height: 50px;
width: 100vw;
position: fixed;
background-image:url('images/navbar/navbar.png');
background-repeat:repeat-x;
}
#header{
position: relative;
float: left;
margin: 40px 0px 0px 5px;
font-family: 'League Gothic', sans-serif;
}
p {
position: absolute;
margin: 100px 0px 0px 5px;
font-family: 'Ubuntu', sans-serif;
}
img.navbar{
float: left;
}
ul{
list-style-type: none;
margin: 4px 0px 0px 0px;
padding: 0;
overflow: hidden;
}
a:link,a:visited
{
display: block;
width: 120px;
font-weight: 500;
font-family: 'Ubuntu', sans-serif;
color: #FFFFFF;
text-align: center;
padding: 4px;
margin: 0px;
text-decoration: none;
}
li{
float: left;
{
yeah instead of giving margin manually for everything why don't you use margin for whole wrapper the contents that follows fixed nav-bar check this fiddle
.nav-bar{
height:50px;
overflow:hidden;
background-color:#000;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
margin-top:75px;
}
and the html
<div class="nav-bar">
<h1>
topbar
</h1>
<ul>
<li>one</li>
<li>tow</li>
<li>three</li>
</ul>
</div>
<div class="content">
<h2>content</h2>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
<p>hi hello ouyasd asdasda dasdasd</p>
</div>
Okay so I am trying to integrate a link into the flow of the paragraph (directly to the right of '1.' but for some reason it is not showing up? How do I make it integrate into the flow.
Here is a http://jsfiddle.net/5CMfv/ for reference
Thanks
<div id="home-infobox">
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<a style="position:absolute; padding-left:30px;"><h1>Image1</h1><p>Kappa kappa kaap 1. <p>more</p></a>
</div>
<div class="infobox_picture">
<img src="images/news.jpg" width="92" height="90">
<a style="position:absolute; padding-left:30px;"><h1>NEWS</h1><p>DKappakpapapapa</p> </a>
</div>
<div class="infobox_picture">
<img src="images/314.JPG" width="93" height="90">
<a style="position:absolute; padding-left:30px;"><h1>The Team</h1><p>KappaKappa </p> </a>
</div>
</div>
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
.infobox_picture {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
height: 90px;
position: relative;
}
.home-infobox ~ .home-infobox:before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 100%;
border-top: 1px solid black;
}
#home_infobox p a{
color: #3B4B7E;
text-decoration: none;
z-index:999;
position:relative;
}
#home_infobox p a:hover{
color: #475883;
text-decoration: underline;
}
h1 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z- index:999}
h2 {font-family: 'Montserrat', sans-serif; font-size:25px; position:relative;}
h3 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z-index:999}
You have invalid HTML:
<p>Kappa kappa kaap 1.<p>more</p>
should be:
<p>Kappa kappa kaap 1. more</p>
On further inspection, you have other HTML issues as well.
http://validator.w3.org/
You can do it like this:
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<div style="display:inline-block; position:absolute; padding-left:30px;">
<h1>Image1</h1>
<p>Kappa kappa kaap 1.</p>
<p>more</p>
</div>
</div>
An a element always has to have an href attribute. It's better to put an 'a' inside a text element. So, i'va put a div element on de place where you had an 'a' element, and added the display:inline-block css-property to make this block element behave somewhat like the inline 'a' element.