Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page
Related
The current issue I have is when I resize my browser window, bigger especially, the images I've added in disappear off the screen, or overlap with the text above it.
I've tried aligning it differently, but again, I find that either it's not worked, or it'll disappear off the page. Potentially because my text and my image aren't talking to one another, and are just sitting on the page together, but I'm not sure how to fix this so any suggestions and help would be greatly appreciated.
Also had a little trouble resizing my button, I've tried targeting the height/width in both HTML and CSS, but it doesn't seem to make a difference.
Current issue: the button's disappeared off the page completely, and the image has overlapped the text.
Current Issue
Expected outcome: Ideally would look something like below, but button would be smaller, higher etc. Text would ideally be more bulky in a paragraph, so it's not just 1 line that runs across the entire page, but maybe 3 or 4 lines centered.
Expected Outcome
Thank you!
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
#font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
#font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
left:50%;
transform: translate(-50%, 10%);
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
left:50%;
transform: translate(-50%, 50%);
text-align: center;
margin: 0px 100px 0px 0px;
}
.image {
position: fixed;
align-content: space-between;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
padding-top:40px;
padding-left: 3000px;
float:left;
}
</style>
</head>
<body>
<a href="index.html"><div class="button">
<img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
</a>
<div class="div1"; style="color:black";style="align: middle">Chapter 1: <br>The Stranger</div>
<div class="div2"; style="color:black";style="align: middle">Text Text Text</div>
<div class = "image"; style="align: middle"><img src="assets/images/narrative/man_liferaft.png"></div>
</body>
</html>
there are many mistakes on your code:
- you put ; to separate html tag attributes, you should put it inside the style attribute instead, to separate the styles
- you don't need position: relative just to center the text, you can use text-align
- you also don't need the left: 50% and transform: translate() to center the text, this is a hack when something is difficult to center
- when you using position other than relative (absolute and fixed), you don't need float: right
- also when using position, you can just move it using top, bottom, left, or right, don't make the element bigger by padding it, unless if its necessary
- you can't use justify-content or align-items if you don't use display: flex
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
#font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
#font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
text-align: center;
color: black;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
text-align: center;
color: black;
margin: 0px 100px 0px 0px;
}
.image {
text-align: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
top: 40px;
right: 40px;
}
</style>
</head>
<body>
<div class="button"><img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
<div class="div1">Chapter 1: <br> The Stranger</div>
<div class="image"><img src="assets/images/narrative/man_liferaft.png"></div>
<div class="div2">You decide to set a path toward the object. As you draw closer, you discover it's a man, passsed out on an inflatable life raft. You tie his life raft to the boat, haul him aboard and wait for him to wake up. <br> Your journey continues.
</div>
</body>
</html>
If you want to view your image after the paragraph, then you shouldn't be using position: fixed. you have to use position: relative also to center align the image you can use flex property.
This is how you CSS should look like, you can adjust the margin paddings as you want.
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
margin: 0px 0px 0px 0px;
}
.image {
position: relative;
align-content: space-between;
justify-content: center;
align-items: center;
display:flex;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
padding:0 15px;
}
.button {
position: fixed;
padding-top:40px;
right: 40px;
float:left;
}
#header {
margin: *<--This one*
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
margin:0 auto;
display: block;
}
I am building a website in which I encountered that the <h1> element goes behind the fixed navbar. I tried to find the optimal solution for this.
I figured out that many people made an extra <div1> container which had the same height as that of the navbar and then used another <div2> element to write whatever they have to show to the user.
I had a problem with this solution actually my navbar is a responsive one. So I have to make the <div1> element responsive too, using #media.
Then experimenting with margin I found that leaving the margin blank gives me the optimal one. It doesn't requires me to add the <div1> container.
I found this helpful. Since I am newbie in Programming, I don't know if these type of shortcuts are not good to be used.
P.S. I used "Brackets" editor and the live preview was shown in Google Chrome.
edit: the #header is the container for the navbar and is fixed. position:fixed.
It causes everything until the next ; to be treated as invalid and dropped.
It is not a shortcut, it is a longer way to achieve the same effect as not typing margin: position: fixed; at all.
CSS was designed to be very forgiving of errors. There are multiple reasons for this.
Imagine you're using a background-gradient which older browsers might not understand. Your whole CSS code would break.
That's why CSS just continues with the next statement that it can find. For example:
.foo {
color: white;
background: black;
background: linear-gradient(red, yellow);
}
CSS reads the file top to bottom, so first the black background shall be applied and after that the gradient background will be applied. Which will lead to a red/yellowish background in modern browsers.
Without CSS error handling our whole CSS would die in old browsers.
In your case however, CSS reads the following statement:
#header {
margin: position: fixed;
}
Which is an syntax error and neither of those will be applied. CSS will just continue with your width: 100% statement.
When you use a fixed header, you should give margin-top to the next element that is equal to the height of the fixed header, so that it starts after the fixed element. But this will work only if your header is of fixed height. In case your header is not of a fixed height and changes with viewport then add a resize function on body that calculates the height of header on each resize and gives the same value as marginTop to the next element after the fixed element.
body{
margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
#media(max-width:600px){
#nav-bar{
position: relative;
display: flex;
flex-direction: column;
}
.nav-right{
display: flex;
flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}
#header-img {
height:35px;
width:30px;
}
h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}
#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}
#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}
section {
position: relative;
top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet">
</head>
<body onresize="myFunction()">
<main>
<header id="header">
<div id="nav-bar">
<img src="book.jpg" id="header-img"> The Bookworms Site
<div class="nav-right">
About
Features
Pricing
</div>
</div>
</header>
<div id="abc" style="margin-top: 65px;">
<h2> Hurry!! Offers until Next 20 Hours!!</h2>
<form id="form">
<section>Email:</section>
<input id="email" type="email" placeholder="Enter Your Email">
<button type="submit" url="">Submit</button>
</form>
</div>
</main>
<script>
function myFunction() {
document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
}
</script>
</body>
</html>
I am working on a web project and need to design an HTML page. I want to set the element's height to a percentage to make it better fit the page.
When I use float in CSS and set:
body, html{
height: 100%;
width: 100%
}
It doesn't work with height. I temporarily fixed it by changing the position rather than using float. I want to to why it doesn't work. And anyone can help me?
This is the faulty code:
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
</body>
</html>
Exclude the above codes, the result following:
detail image
It shouldn't appear white section in the bottom.
Your three divs are each 1 viewport high, but the #test3 div is inline-block, so it creates a line box in which it sits. All line boxes contain a strut, the baseline of which is vertically aligned with the bottom of the #test3 div, and the descender part of the strut hangs down below this. The vertical scroll bar is created to show the document to the bottom of the strut, showing the additional height as a white gap.
To fix, just detach the vertical alignment of the strut, from that of the #test3 div by making the #test3 div vertical-align:top.
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
vertical-align:top;
}
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
Add an empty block level element and use clear: both; before the parent element ends, which holds floated elements, now this one is cheap solution to clear your floating elements which will do the job for you but, I would recommend not to use this.
From here
html, body{
width: 100%;
height: 100%;
margin: 0;
}
#test1, #test2{
display:inline-block;
height: 100%;
width:30%;
}
#test1{
float:left;
background: #111111;
}
#test2{
float:right;
background: #009A61;
}
#test3{
display:inline-block;
height: 100%;
width:40%;
background: cornsilk;
}
.clear {
clear: both;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
<div class="clear"></div>
</body>
</html>
Did this work? I didn't see the problem or might not have understood it correctly
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
I want the elements within my top logo div to be centered. I'm not sure quite how to do that.
My navigation div is not matching up with the logo div. There is still space between the divs even tho I have set the margins to 0px.
My placeholder graphic for some reason has more padding on the bottom than anywhere else within the logo div. What do I need to do to change that?
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
margin: 0px;
}
#logo p {
display: inline;
}
#logo h2 {
display: inline;
}
#logo a {
float: right;
color: rgb(255, 200, 0);
text-decoration: none;
font-size: 1.25em;
padding: 10px;
}
#navigation {
background-color: rgb(255,200,0);
width: 100%;
margin: 0px;
}
body {
margin: 0px;
font-family: Arial, Helvetica, Verdana;
}
</style>
</head>
<body>
<div id="logo">
<p>
<img src="picture.jpg" >
</p>
<h2>SUBSCRIBER PORTAL</h2>
LOG-IN
CONTACT US
</div>
<div id="navigation">
<p>
This is just a navigation test.
</p>
</div>
<div id="contents">
<p>This is just some dummy text. Dummy. </p>
</div>
</body>
</html>
1) give the img { vertical-align:middle; }. also remove the around the img.
2) have you tried padding:0;?.
3) padding-bottom:-<value here>px; or you could try just padding:0; or padding-bottom:0;.
I'm not sure about the questions, because they are not really setup well.
Use position: absolute; in your CSS for your navigation and logo or a tags to specify exactly where you want them to appear. Such as this example:
#logo {
position:absolute;
top: 170px;
left: 300px;
}