I'm having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
Related
I have the following HTML:
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img
class="Section__item__image"
width="120px"
src="/static/images/test.jpeg"
>
<i class="Section__item__icon icon-right-nav-workflow"/>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
And this is my style using scss:
.Section {
&__item{
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
&:hover {
background-color: #E3F4FE;
cursor: pointer;
}
&__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
&__image {
padding-top: 5px;
float: left;
}
&__icon {
float: right;
font-size: 40px;
}
&__text {
float: left;
}
}
}
The result is the following:
And what I need to get is the following:
I need the text to be under the image and where you see a "red" line in the right the text can't go further, if text is bigger then wrap text.
Also if you see right icon has to be positioned exactly on the same top level as the image.
Any clue?
There's loads of ways to do this (flexbox, grid, tables, absolute positioning). The oldschool way would be a clearfix but really you should avoid floats altogether. The simplest solution to what you have so far is to remove ALL of the float's; make the div that holds the image and the icon position:relative; and set the icon to position:absolute; top:0; right:0;.
.Section__item {
border: #EEF3F7 solid 1px;
padding: 10px;
min-height: 150px; /* changed to min-height so that it expands if there's loads of text */
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
width:400px;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__imagewrap {
position: relative;
}
.Section__item__image {
margin-top: 5px;
}
.Section__item__icon {
font-size: 40px;
line-height: 40px;
position: absolute;
top: 0;
right: 0;
}
.Section__item__text {}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div class="Section__item__imagewrap">
<img class="Section__item__image" width="120px" src="https://placeimg.com/320/240/any">
<i class="Section__item__icon icon-right-nav-workflow">i</i>
</div>
<div class="Section__item__text">This is a description. If the text is long it will wrap and the section__item's height will increase to fit the content.</div>
</div>
Uh... don't use float? Or rather, only use float on the one thing you want to break out of normal flow, which is the icon.
PS: <i> is not an autoclosing tag, so writing <i /> is incorrect even if browsers will likely ignore your mistake. Also, putting padding on an image doesn't seem right, I switched to margin-top in this code.
.Section__item {
display: inline-block; /* so it doesn't take full width of the snippet */
border: #EEF3F7 solid 1px;
padding: 10px;
height: 150px;
margin-bottom: 15px;
box-shadow: 3px 3px #EEF3F7;
}
.Section__item:hover {
background-color: #E3F4FE;
cursor: pointer;
}
.Section__item__title {
text-align: left;
color: black;
font-size: 16px;
font-weight: 900;
}
.Section__item__image {
margin-top: 5px;
vertical-align: top;
}
.Section__item__icon {
font-size: 40px;
float: right;
}
<div class="Section__item">
<div class="Section__item__title">Title</div>
<div>
<img class="Section__item__image" width="120" height="120">
<i class="Section__item__icon icon-right-nav-workflow">Icon</i>
</div>
<div class="Section__item__text">This is a descritption</div>
</div>
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
Heyah, I have a transition for when you click the 'burger icon'(on mobile screens, max 580px) and then it becomes an 'x', I would like to also add a transition to the menu that then opens, can anyone help me how I can achieve that?
transition: all ease-in-out 0.4s;
Do I use this? and if so where do I put it?
$(document).ready(function() {
$("#burger-container").on('click', function() {
$(this).toggleClass("open");
});
});
$(document).ready(function() {
$("#burger-container").on('click', function() {
$("header nav ul").toggleClass("open1");
$("nav").toggleClass("open1");
});
});
/***** BASE STYLES *****/
body{
font-family: Raleway;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/************************************/
.wrapper{
max-width: 1180px;
margin: 0 auto;
}
h1.logo {
float: left;
padding: 0;
padding-left: 4%;
}
header nav h2{
height: 0;
margin: 0;
text-indent: -10000px;
}
#main-banner, #main-banner img{
width: 100%;
}
#main-banner img{
border-top: 2px dashed #a5053d;
border-bottom: 4px solid #a5053d;
}
p{
padding: 0 4%;
text-align: justify;
line-height: 170%;
float: left;
}
h2{
text-align: center;
margin: 4px 0 0 0;
}
.bigger{
font-size: 16.25px;
font-weight: bold;
}
.paragraph{
margin-bottom: 4%;
}
.work img{
padding-right: 1%;
}
.work p{
margin-bottom: 5%;
padding: 0 15%;
text-align: center;
}
.work{
text-align: center;
}
#burger{
height: 0;
width: 0;
}
header{
padding: 0;
}
nav{
float: right;
padding-right: 2%;
}
nav ul{
display: flex;
}
nav li{
margin: 10px 20px;
list-style: none;
}
nav li a {
text-decoration: none;
color: #666666;
font-size: 20px;
}
a:hover {
color: #a5053d;
font-weight: bold;
}
/*************FOOTER************/
.links ul {
list-style: none;
display: block;
margin: 0 auto;
width: 300px;
}
.links ul li {
display: inline-block;
}
.links ul img {
margin: 0 4%;
height: 40px;
width: auto;
}
footer{
margin-top: 15px;
}
.bottom{
background-color: #e8e8e8;
height: 70px;
padding-top: 2px;
margin-top: 150px;
}
li img:hover{
box-shadow: 0 0 30px #c1c1c1;
-moz-box-shadow: 0 0 30px #c1c1c1;
-webkit-box-shadow: 0 0 30px #c1c1c1;
-o-box-shadow: 0 0 30px #c1c1c1;
border-radius:100px;
}
/******** BURGER ********/
#media all and (max-width: 580px){
#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
}
/***************mobiles*********************/
#media all and (max-width: 580px){
nav{
width: 100%;
padding-right: 45px;
background-color: #666666;
height: 0;
}
header nav ul{
height: 0;
display: block;
overflow: visible;
}
header nav ul.open1, nav.open1{
height: auto;
}
header nav ul li{
width: 100%;
margin: 20px;
}
nav li a, nav ul li{
color: white;
text-align: right;
display: block;
}
header .wrapper{
width: 100%;
padding: 0;
}
h1 {
margin: 20px;
padding: 0;
}
h1.logo {
padding: 0;
margin: 20px;
}
header{
padding: 0;
}
.paragraph{
padding: 10px 20px 40px 20px;
}
.work p{
padding: 0 0 40px 0;
margin: 0 20px;
}
.work h3{
padding: 0 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/heart.png">
<title>heartcube</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/burger.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<header>
<div class="wrapper">
<h1 class="logo">Heartcube</h1>
<!-- ............BURGER............ -->
<div id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
<nav>
<h2>Main Navigation</h2>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</nav>
</header>
<!-- START OF HOMEPAGE CONTENT-->
<div id="main-banner">
<img src="http://heartcube.co.uk/img/london.jpg" alt="london banner">
</div>
<div class="wrapper">
<section id="home-menu">
<h2>Betti Bremm</h2>
<p class="paragraph"><span class="bigger">A little bit about me.</span> I'm a young and motivated Webdesigner located in West London. My journey into tech started when I was quite young already, I always loved setting up websites and my own homepages, but without coding
it myself. I've always been fascinated with the internet, it's design and social media. I was hooked and wanted to learn how to build my own site to fit my own specific needs. That curiosity then opened a door that could never be shut. When I
learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for
detail to write clean, elegant code.</p>
<div class="work">
<img src="http://heartcube.co.uk/img/html.png" alt="HTML icon">
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
<img src="http://heartcube.co.uk/img/css.png" alt="CSS icon">
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
<img src="http://heartcube.co.uk/img/pencil.png" alt="Pencil icon">
<h3>Ease Converting Designs into Code</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</section>
</div>
<!-- ..END OF HOMEPAGE CONTENT-->
<div class="bottom">
<footer>
<div class="wrapper links">
<ul>
<li>
<img src="http://heartcube.co.uk/img/mail.png" alt="Email">
</li>
<li>
<img src="http://heartcube.co.uk/img/twitter.png" alt="Twitter">
</li>
<li>
<img src="http://heartcube.co.uk/img/tumblr.png" alt="Tumblrn">
</li>
<li>
<img src="http://heartcube.co.uk/img/instagram.png" alt="Instagram">
</li>
<li>
<img src="http://heartcube.co.uk/img/linkedin.png" alt="LinkedIn">
</li>
</ul>
</div>
</footer>
</div>
</body>
other links of this code :
Homepage
or on codepen here
Here's a full list of changes to (and notes on) existing snippet I made in order to enable the animation:
You can't animate transition from 0 to auto or to 100%. The only library capable of doing it is velocity.js but they use a kind of a hack to determine the value they are rendering to before animating. To better understand the underlying problem read this.
The article linked above will also explain why I changed animating height to animating max-height.
The #burger element didn't have height and width, making it difficult to use. (One had to click exactly on the lines of the burger on order to open it).
In order to calculate the proper max-height of the element, I chose to wrap your menu inside a wrapper (.animator) as it simplified the JavaScript needed to calculate the height, when opening.
There's no point into making both the container and the contents have height:0 when closed. You're only over-complicating the animation and making it harder for yourself to understand/debug what's going on. So I removed placing open1 on children, I only left it on parent.
There's no point in having more than one instance of $(document).ready(){}. Just place all the code you want to run on that event into one single wrapper.
Generally speaking, there are two types of code you want to run when a page loads:
a. DOM manipulation code - place on $(document).ready(){} - runs first
b. bind to event code - place on $(window).load(){} - runs after
Since this script was a "bind to event" code, I placed it in $(window).load(){}.
Updated pen.
Note: If you ask yourself why I didn't include a SO snippet in the answer and used your pen, the main reason is because your SO snippet is incomplete, as you used relative links for the following assets:
normalize.css,
main.css,
burger.css,
index.js
I have a div block i want to apply border-bottom just beneath the text and not throughout the whole div block
the div block is
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
You can wrap your text in an inline element like <span> and apply border to it.
HTML:
<div id="info-header">
<span>some text here...</span>
</div>
CSS:
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
Note: You can make your element inline-block if you wants to apply block level properties but keep it behaving like an inline element. This way you can also control the border-width and the distance between text and border line.
body {
background: green;
min-height: 100vh;
margin: 0;
}
#info-header {
font-size: 40px;
text-align: center;
margin:100px 10px 10px 10px;
font-family: Poiret One;
color:lightyellow;
}
#info-header span {
border-bottom: 1px solid whitesmoke;
display: inline-block;
vertical-align: top;
}
<div id="info-header">
<span>some text here...</span>
</div>
Add css property text-decoration: underline
You should use text-decoration property.
In your case its:
text-decoration: underline;
You can also use text-decoration for overline and line-through read about CSS text-decoration Property
You can change the display value for an another block level.
html {
background: lightgray
}
#info-header {
font-size: 40px;
/*text-align: center;
margin:100px 10px 10px 10px;*/
display: table;/* shrinks on content */
margin: 10px auto;/* margin:auto instead text-align for this block */
font-family: Poiret One;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">
find us through
</div>
codepen
Give the <div> a fixed width and give it a {margin: 0 auto} for centering
body {
background: #131418;
text-align: center;
}
#info-header {
font-size: 40px;
margin: 0 auto;
width: 300px;
color: lightyellow;
border-bottom: 1px solid whitesmoke;
}
<div id="info-header">this is a nice title</div>
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}