I am trying to show a message on the top - center of my web page. I create a very basic example :
http://jsbin.com/eniwax/3/edit
Here the problem is with message container with. I want to set the container width equals to the message text width means ( auto, width vary according to the size of message ).
Do it like this DEMO
Explanation: Use a nested div and make the container div width as 100% and give text-align: center; to the container div
CSS
.test {
top: 0;
text-align: center;
position: relative;
width:auto;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
display: inline-block;
}
.container {
width: 100%;
text-align: center;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="test">I am a sample text</div>
</div>
</body>
</html>
Use a <span /> inside your div rather than a <div /> on it's own.
Divs are block level elements which means they fill all the available width that they have. Spans are inline which means they are only as wide as their contents.
Give display: inline-block; and text-align: center; to the parent.
body {text-align: center;}
.test
{
top: 0;
text-align: center;
position: relative;
width:auto;
display: inline-block;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
}
Demo: http://jsbin.com/eniwax/15
Related
/*
Project Name: Monthly Resolutions
Client: One Month
Author: Christopher Castig | #castig
*/
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Lato', sans-serif;
}
html {
margin: 0px 0px 0px 0px;
}
.clear {
clear: both;
}
h1 {
padding: 0px 0px 0px 0px;
font-size: 60px;
margin-bottom: 0%;
letter-spacing: -4px;
margin-left: 100px;
line-height: 1;
margin-top: 100px;
}
h6 {
font-size: 17.5px;
margin-top: 0%;
margin-left: 100px;
}
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 1200px;
}
#rheading {
font-size: 40px;
margin-top: 30px ;
margin-bottom: 2px;
}
#container {
width: 1200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#caption {
color: rgb(88, 88, 88);
font-size: 15px;
margin-bottom: 70px;
}
#content {
background: white;
float: left;
width: 680px;
padding-left: 30px;
padding-right: 30px;
margin-left: 100px;
}
#sidebar {
float: left;
background: white;
width: 310px;
border: 3px;
border-style: solid;
border-top: none;
border-right: none;
border-color:rgb(192, 192, 192);
margin-left: 10px;
padding: 15px 15px 15px 15px;
margin-right: 100px;
}
#footer {
margin-top: 30px;
margin-bottom: 20px;
margin-left: 100px;
}
a {
color: orange;
text-decoration: none;
}
.image {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
blockquote {
font-style: italic;
border-left: 4px solid gray;
padding-left: 20px;
margin-left: 0px;
}
<!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">
<meta name="description" content="">
<meta name="author" content="Chris Castiglione, and the One Month team">
<title>Monthly Resolutions by Harsh Fernandes</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fourth-code-resources/css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Monthly Resolutions</h1>
<h6>Dreaming Aloud. 30 days at a time.</h6>
</div>
<!--header-->
<div id="content">
<p id="rheading"> Learn to Surf </p>
<img src="fourth-code-resources/images/surfing.jpg" alt="surf image" class="aligncenter" width="620px">
<p> This april I will travel to the Carribean and take surfing lessons.</p>
<hr>
<p id="caption">My April Resolution by Harsh Fernandes</p>
<p id="rheading">Read Everyday</p>
<img src="fourth-code-resources/images/book.jpg" alt="book" class="aligncenter" width="620px">
<p>This Month I will read at least 50 pages everyday, including weekends.</p>
<hr>
<p id="caption">My March Resolution by Harsh Fernandes</p>
<p id="rheading">Meditate</p>
<img src="fourth-code-resources/images/meditate-girl.jpg" alt="Meditate" class="aligncenter" width="620px">
<p>I will take a meditation class and practice meditating at least 20 minutes everyday for the month. Hopefully I won't fall asleep every time I meditate.</p>
<hr>
<p id="caption">My February Resolution by Harsh Fernandes</p>
</div>
<!--content-->
<div id="sidebar">
<img class="image" src="fourth-code-resources/images/chris-castiglione.jpg" alt="Chris">
<p>This blog was made by Harsh Fernades (I don't look like that)</p>
<h3>Follow Me</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
<li>Facebook</li>
</ul>
<h3>Quote of the Day</h3>
<blockquote>
<p>"We are what we repeatedly do. Excellence, then, is not an act, but a habit."</p>- Aristotle</blockquote>
</div>
<!--sidebar-->
<div class="clear"></div>
<div id="footer">
Made with the help of One Month HTML by Chris Castglione
</div>
<!--footer-->
</div>
<!--container-->
</body>
</html>
strong text
I am learning to code through this website and for my first proper project, we had to build a static website which has to look as similar to the screenshot. I got everything right except for the margin on the right. I even tried using inspect element and it appears to be coming from my body but even after setting my body's margin to 0, nothing changed. Since this is for beginners, it shouldnt be that difficult but I am REALLY struggling with this for hours. Please help me.
This is what it is supposed to look like
This is what it looks like at 100% zoom
It does look pretty close but here are the main issues:
Margin: 0 is All around the body element and the .container class, and in terms of default that means everything is pushed to the left, there is not default centering.
With a static 100px margin and a float: left on your #content it does give a close approximation of what the image is, but again this is based on your screen size. If your screen were widened it would look incorrect from left to right.
SOLUTION: The simplest solution for things like content and containers, or simply body elements, is
{ margin-left: auto; margin-right: auto; }
As you did with the images.
If you want to do it in shorthand you can declare multiple margin attributes in one line, such as Top & bottom being 0 margin and left and right being auto would be
{ margin: 0 auto;}
Source for shorthand
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
This will help you, change your style (body & #container) like this :
body {
background: url(/Users/harshfernandes/Desktop/Coding/fourth-code-resources/images/notebook.png); /* add a fallback color of #d6d6d6 */
color: #000000;
font-family: 'Lato', sans-serif;
font-size: 100%;
width: 100%;
overflow-x: hidden;
}
#container {
display: table;
margin: 0 auto;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="NWC.css">
<meta charset="utf-8">
<!--Font Import Links-->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#700&display=swap" rel="stylesheet">
<!---JS File Imports-->
<script src="NWC.js">
</script>
<!--HTML Code Starts Below-->
</head>
<body>
<section>
<div class="header">
<div class="logo_container">
<h1>N W C</h1>
</div>
</div>
</section>
<!--Cover Section-->
<section>
<div class="coverpic">
<img src="file:///C:/Users/jakes/Desktop/NWC/nwcgfrey.png" alt="NWC LOGO" width="60%" height="40%">
</div>
</section>
<!--About Section-->
<section>
<div class="about-section">
<h1>About NWC</h1>
<p>New World Coding is a startup teaching kids to program. Coding is an essential skill to learn because it is our future. All of our technology today whether it's using a computer to making a pot of coffee is run by the code engineers write. Here at NWC, we have group lessons for you and a friend, or 1:1 lessons! For more information about NWC, our lessons, or any other questions, please fill click the button below.</p>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-image: url(file:///C:/Users/jakes/nwcWebsitecity.png);
background-size: cover;
}
.header {
display: block;
background-color: #1E1E1E;
background-size: 1000px;
width: 100%;
height: 80px;
}
/*
.inner_header {
width: 1000px;
height: 100%;
display: table-cell;
margin: 0 auto;
}
*/
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo_container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Josefin Sans', sans-serif;
padding-left: 10px;
}
.coverpic {
bottom: 750px;
vertical-align: middle;
text-align: center;
display: table-cell;
}
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: fixed;
color: white;
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
transform: rotate(180);
}
[What site looks like now, I just want to move the body section lower1
Basically, I want the text body to move down lower so that you don't see it when you first load into the site, I want the .coverpic to be centered when you first load into the site and when you start scrolling you see the about section.
U can use margine-top in css.
which text u want to lower just write in css margine-top: and how px u want.
Like example
h1 {
margine-top: 50%;}
to be in the middle screen or just lower or more high % to make it in the right position
Add a class to your text (p tag):
<p class= "sample">
and then adjust the margin in your CSS:
.sample {
margin-top: 50px;
}
adjust the margin-top accordingly for how low you want the text to go.
edit: change the "color" in your about-section to black for example. Basically you have white on white right now.
You'll also notice that I added margin-top: 50px on both about-section and sample classes. The first margin-top brings the title down and the second brings the text down.
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: relative;
font-family: 'Josefin Sans', sans-serif;
color: black;
text-align: center;
transform: rotate(180);
margin-top: 50px;
}
.sample {
margin-top: 50px;
};
So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)
Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.
Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down.
(Feel free to try it yourself with my code)
I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.
Here is the fiddle
My CSS file is completly empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>
try this code.
html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}
.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
height: 100%;
where
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
and if you want to change the size, just change .container
I'd like to know if there's a way to keep a text inside a div if the text exceeds the width the ´div´'s height is stretched until all the text is fitted.
UPDATE:
Thank y'all for helping +1, so should I use ´Inherit´ or ´min-height´?
A plain div:
Then I added a word-wrap: break-word;, and I've got this:
The Ideal:
The div's height should be increased in order to fit the whole text
Thanks in advance.
div {
width: 50px;
height: 50px;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
</head>
<body>
<div>asjdkljaddddsadsssssssdfsdfsdfsf</div>
</body>
</html>
Change height to min-height in your CSS:
The min-height property is used to set the minimum height of an element.
This prevents the value of the height property from becoming smaller than min-height.
div {
width: 50px;
min-height: 50px;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
</head>
<body>
<div>asjdkljaddddsadsssssssdfsdfsdfsf</div>
</body>
</html>
Simply use width:inherit for your <div>
This way, your <div> will inherit its height from the content it is enclosing
Here's the css class
div {
width: 50px;
height: inherit;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
and here's the demo
Try the css lines. You can check here https://jsfiddle.net/ogd5cruf/
div {
width: 50px;
height: auto;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
If you change height: 50px to min-height: 50px the div's height will grow to fit it's content. Similarly, you can set a limit on the allowed height using max-height.
div {
width: 50px;
min-height: 50px;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
<div>asjdkljaddddsadsssssssdfsdfsdfsf</div>
div {
width: 50px;
height: 100%;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
</head>
<body>
<div>asjdkljaddddsadsssssssdfsdfsdfsf</div>
</body>
</html>
Remove the fixed height
div {
width: 50px;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
</head>
<body>
<div>asjdkljaddddsadsssssssdfsdfsdfsfqwqweqewqqweqweeqewqweeqw</div>
</body>
</html>
If you want to set the div's height initially, then use:
div {
width: 50px;
min-height: 50px;
border: 1px solid red;
display: inline-block;
word-wrap: break-word;
}
This will ensure it is at least 50px high, but will still expand when you put more content in it.
I've been fighting this issue for a long time. Here is one of pure-CSS ways to get that to work.
My example allows you to have a responsive(optionally) block of text, with a customize amount of displayed lines.
// Usually you want to have that everywhere.
* {
word-wrap: break-word;
}
div {
/* height / desired number of lines, must be higher than font-size */
line-height: 16.66px;
font-size: 14px;
width: 50px;
height: 50px;
border: 1px solid red;
overflow: hidden;
}
<div class="text">Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s</div>
I'm having a HUGE problem, geting my masterpage layout to stretch to 100% browser window height. There is no problem for width. I tried many different solutions, but none worked.
This is what I have so far. I managed to expand html and body to height:100%, but div#container is giving me problems...it wont expand to height:100%. For testing purposes I put borders arround html, body and container, to see which one isn't working. Any help appritiated. I'm designing my web app in VS2010 and using Chrome (also tested in IE and Mozilla with no success).
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 runat="server">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="headercontent">
HEADER
</div>
<div id="leftcontent">
<p>LEFT CONTENT</p>
<p>MENU</p>
<p>MENU</p>
<p>MENU</p>
</div>
<div id="rightcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footercontent">
FOOTER
</div>
</div>
</form>
</body>
</html>
And my stylesheet.css
body{
font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
background: yellow;
}
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid red;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 2px solid blue;
}
#container{
width: 100%;
height: 100%;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
#headercontent{
height: 70px;
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
#leftcontent{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
#rightcontent{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
#footercontent{
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
Your body element IS 100% height as you set it but you've not set the contents to anything to position anywhere so they follow the normal flow, like a stack of boxes, as they should. You also don't have enough content to fill the screen. If you want the footer to stick to the bottom, search here on SO or Google for "sticky footer".
If you want some of the content to stretch further, you'll have to add some height to those.
Just do the following:
Set html and body to height: 100%;:
html,
body {
height: 100%;
}
Next step: wrap your form with a container and gibt it a minimum height of 100%:
#wrapper {
min-height: 100%;
}
This won't work in IE6. Therefor add a little hack:
* html #wrapper {
height: 100%;
}
Your #container element is nested inside your <form> tag, so even though you've set the height of #container to 100%, this will set it's height to 100% of it's parent element i.e. the <form> tag.
Try moving your #container <div> tag so it sits outside the <form> tag like this: http://jsfiddle.net/ianoxley/E4zAm/
If you can live with having div#container using position: absolute, you can use this little trick:
#container{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0px;
border: 2px solid black;
line-height:150%;
}
Setting all four layout attributes (top/right/bottom/left) to the values you want will cause the element to stretch to accomodate those values.