I am trying to make an online portfolio for myself and I have a bottom container for the bottom half of the screen and I would like to place 3 buttons at the top of the container. I have got it to work except when you resize the page. When you shrink the page's width the buttons will overlap. How can I stop them from overlapping? I want them to go close together side by side but not overlap.
h1 {
margin-left: 33%;
margin-right: 33%;
text-align: center;
}
img {
width: 15%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#bottom {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}
#navbuttons {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: relative;
border: 2px solid black;
padding: 15px;
padding-bottom: 10px;
}
#resumebutton {
display: inline-block;
position: absolute;
top: 0%;
left: 33%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
#coverletterbutton {
display: inline-block;
position: absolute;
top: 0%;
left: 46.5%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
#portfoliobutton {
display: inline-block;
position: absolute;
top: 0%;
left: 62.5%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>--Name Here-- Resume and Portfolio</title>
</head>
<body>
<div style="height: 100%"></div>
<div id="top"></div>
<h1>--Name Here--</h1>
<img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg"/>
<h1>Resume and Portfolio</h1>
<div id="bottom">
<div id="navbuttons">
<div id="resumebutton">Resume</div>
<div id="coverletterbutton">Cover Letter</div>
<div id="portfoliobutton">Portfolio</div>
</div>
</div>
</body>
</html>
I would provide an example if I knew how.
Thank you
you don't need to absolute position the buttons if you have the container fixed. you can use inline-block and just text-align: center on your container. Also there are errors in your css, like there is no float: center;, you can also skip the # and use class as they share css properties. But I agree that Bootstrap is the way to go for responsive, and especially if you are new.
#bottom {
border-top: 2px solid black;
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}
.nav-button {
display: inline-block;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
<div id="bottom">
<div class="nav-button">Resume</div>
<div class="nav-button">Cover Letter</div>
<div class="nav-button">Portfolio</div>
</div>
The bootstrap grid system is great at this. I recommend using it in combination with some of your custom styles to produce a bottom section split into equally sized columns.
Grids are split into 12 columns, so columns of 4 (e.g. col-md-4) will split into evenly spaced vertically.
For the bottom, that would look something like:
<div id="bottom">
<div id="navbuttons" class="row">
<div id="resumebutton" class="col-md-4">Resume</div>
<div id="coverletterbutton" class="col-md-4">Cover Letter</div>
<div id="portfoliobutton" class="col-md-4">Portfolio</div>
</div>
</div>
You can make these columns wrapper divs if you want to center smaller buttons inside those columns, but the grid structure is a good place to start.
You can just delete attribute position: absolute; from all buttons ( resumebutton, coverletterbutton and portfoliobutton) and add text-align: center to navbuttons selector.
Consider removing the absolutepositioning to replace the elements in question back into the flow of the document. They'll have relation to each other now, so you won't need to rely on positioning rules like left and right.
The elements are already displayed inline-block so just declare a text-align: center rule to the parent and the nested elements will align accordingly.
In the snippet example below, margins have been added around each button for spacing, repetitive rules have been replaced with one instance using a class selector applied to all button elements, note that float: center; is not a valid rule.
Snippet Example
h1 {
margin-left: 33%;
margin-right: 33%;
text-align: center;
}
img {
width: 15%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#bottom {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}
#navbuttons {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
/* invalid rule */
position: relative;
border: 2px solid black;
padding: 15px;
padding-bottom: 10px;
text-align: center;
}
#navbuttons .button {
display: inline-block;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
margin: 0px 20px;
}
<div style="height: 100%"></div>
<div id="top"></div>
<h1>--Name Here--</h1>
<img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg" />
<h1>Resume and Portfolio</h1>
<div id="bottom">
<div id="navbuttons">
<div id="resumebutton" class="button">Resume</div>
<div id="coverletterbutton" class="button">Cover Letter</div>
<div id="portfoliobutton" class="button">Portfolio</div>
</div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
.dashboard-monthly-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
}
.dashboard-small-total-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
}
<div class="dashboard-monthly-sales">
<h2>Monthly Sales - <?php echo date("Y"); ?></h2>
</div>
<div class="dashboard-small-total-sales">
</div>
This is my html code and css code when I add an element inside a div one block is going down. Is there any problem with display inline block part. I really can't figure out hope somebody will help
Thanks.
You can use this css hope it's work
.dashboard-monthly-sales{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
vertical-align:top; // Add this line in your code
}
.dashboard-small-total-sales{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
vertical-align:top; // Add this line in your code
}
otherwise, you can use display: flex it helps you what you want
Simply adding vertical-align: top; to the first div solves the problem. This tells the CSS to align the element to the top of the tallest element on the line.
.dashboard-monthly-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
vertical-align: top;
}
.dashboard-small-total-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
}
h2 {
display: block;
}
<div class="dashboard-monthly-sales">
<h2>Monthly Sales - <?php echo date("Y"); ?></h2>
</div>
<div class="dashboard-small-total-sales">
</div>
Try to use a main div containing the inner divs, so that all the inner divs will be aligned inside that main div. And use some css changes as below, so that adding the text inside the empty div will not affect the alignment.
.dashboard-monthly-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
}
.dashboard-small-total-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
}
.container{
display: inline-flex;
width: 100%;
}
<html>
<body>
<div class="container">
<div class="dashboard-monthly-sales">
<h2>Monthly Sales - <?php echo date("Y"); ?></h2>
</div>
<div class="dashboard-small-total-sales">
</div>
</div>
</body>
</html>
use one div as a container which will cover both divs. and in CSS use positioning properties and align it to according to your wish. first off all define the width of whole page.
I'm trying to stick an image to div block in CSS. I couldn't move 'image' using margin... What can I do? Advice is appreciated. Thank you.
What I want to implement
.bottalk {
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
Current view
Please ignore the background color: I snipped it from the second image!
I have moved the position of the image inside the div with class bottalk, then I absolutely positioned the image, then all you need to do is to set the top and left position based on the image, (Cropped the image online so please ignore the quality of the output), So now you can position this anywhere. Also I have added background-color:pink to the body to show the image, please ignore this too.
So to summarize. I set the parent div element with class bottalk as position:relative and the child image with class bottalkwhite to position:absolute so that it can be positioned inside the parent. Position absolute will take the position relative to the immediate parent with position:relative, I hope I made my summary clear.
body{
background-color:pink;
}
.bottalk {
position: relative;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
position: absolute;
top: 80%;
left: -30px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
<img src="https://i.stack.imgur.com/7i9bY.gif" alt="bottalk" class="bottalkwhite" />
</div>
</div> </div>
You can use the position: relative; and adjust the values of the top and left properties， like the follow code：
.bottalk {
position: relative;
left: -5px;
top: 10px;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
In order to put a image into a exact position relative to its ancestor, you can set position property to absolute then using left-right-top-bottom properties, you can determine its exact position. like this:
.bottalkwhite{
position: absolute;
left: 250px;
top: 0px;
}
though in such a particular css rule definition using id selector instead of class selector sounds more appropriate.
Use position:relative on the wrapper element of the image and position the image via position: absolute, left: 0 and bottom: 0 in the bottom-left corner. Then adjust it's position via transform: translate, to get the desired effect.
Note: I moved the image into the div.botttalk container to position it relative to its parent.
Like this:
body {
background: #715886;
font-family: Open Sans, Arial, sans-serif;
}
.bottalk {
background-color: white;
width: 200px;
margin-top: 20px;
margin-left: 100px;
border-radius: 8px;
padding: 24px 16px;
position: relative;
text-align: center;
color: #715886;
}
.bottalk .bottalkwhite {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
color: white;
transform: translate(-100%, 100%) translate(16px, -16px);
}
.bottalk h4 {
line-height: 1;
margin: 0 0 24px 0;
}
.bottalk button {
cursor: pointer;
color: #715886;
display: inline-block;
background-color: #fbcb33;
font-weight: bold;
padding: 0 32px;
border: none;
line-height: 40px;
font-size: 14px;
box-shadow: 0px 1px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<h4>Ready to get started?</h4>
<button>Let's talk</button>
<img src="https://i.imgur.com/oeUdlld.png" alt="bottalk" class="bottalkwhite" />
</div>
</div>
I'm building a calendar, and this is what I'm after:
http://postimg.org/image/vpd10bkqt/
So basically I want to show all the events as a small rectangle inside the
appropriate day's big rectangle.
The difficulty is the first element should be shown at the bottom right corner,
and should be filling form right to left and bottom to top.
I think the simplest solution would be if a rectangle would be a
span element with a solid border around it, and it contains a dot as text.
Here is a jsfiddle demo:
http://jsfiddle.net/jv392gmv/
CSS:
section#calendar {
width: 970px;
}
time {
display: inline-block;
width: 120px;
height: 120px;
margin: 4px;
text-align: right;
font-size: x-large;
font-weight: 900;
border: 1px solid #c3c7c7;
border-radius: 5px;
background: #fff;
}
time.notmonth {
background: #777;
}
section#calendar h1 {
text-align: center;
}
section#calendar time a {
display: inline-block;
width: 110px;
height: 110px;
margin: 5px 5px 0 0;
padding: 3px 3px 0 0;
color: #f55b2c;
text-decoration: none;
}
section#calendar time a:hover {
color: #000;
}
span.event {
top: 10%;
left: 7px;
position: relative;
border-color: #222;
border-style: solid;
border-radius: 5px;
border-width: 5px;
}
HTML:
<section id="calendar">
<h1>
←
July 2015
→
</h1>
<time datetime="2011-05-29">
29
<!-- <span class="event">.</span> -->
</time>
</section>
Anyone has any idea how to achieve it?
The original time tag idea came from here:
http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata
In the container, set a rotation of 180 deg.
In the children, rotate again to get them upright
.base {
width: 140px;
height: 140px;
border: solid 1px black;
position: relative;
}
.test {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.children {
width: 40px;
height: 40px;
background-color: lightblue;
transform: rotate(180deg);
display: inline-block;
margin: 2px;
}
<div class="base">
<div >123</div>
<div class="test">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
</div>
</div>
I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
Having a bit of trouble getting my nested divs lined up properly. You can see an example of the code I'm working with on Dabblet:
http://dabblet.com/gist/6125817
I've run into the following issues:
The wrapper scrolls vertically. I can live with this, but ideally I would rather it not.
The content needs to fill up most of the box. If the wrapper takes up the screen, then the content needs to take up most of the space.
The footer needs to align itself to the bottom of the wrapper (plus bottom margin), not bottom: 0.
Everything I try seems to make something else fall out of whack. I've been able to do parts of this when disabling other css classes. Just can't get them to all work at the same time.
Just in case the link isn't working:
body, html {
}
body {
background-image: url('/bground_home.png');
background-size: 100%;
background-repeat: no-repeat;
font-family: 'LegacySansUltra';
font-size: 20px;
}
.wrapper {
width: 90%;
height: 90%;
background-color: white;
border: solid 1px #666;
box-shadow: 10px 10px 5px #888888;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.header {
font-size: 27px;
margin: 10px;
background-color: Black;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
color: White;
}
.content {
width: 90%;
height: 70%;
position: relative;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #effbfb;
border-radius: 15px;
-moz-border-radius: 15px;
border: 3px solid #e0f8fd;
font-size: 25px;
}
.footer {
background-color: black;
padding: 5px;
color: White;
margin: 10px;
border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
height: 50px;
}
<div class="wrapper">
<div class="header">
<div style="position: relative; float:left; width: {#logowidth}; height: {#logoheight}; padding: 0px 10px;">
<img src="{#logo}" height="{#logoheight}" width="{#logowidth}" alt="{#name}" border="1" />
</div>
<div style="position: relative; float:left; padding-top: 20px;">
{#name}
</div>
<div style="clear: both;"></div>
</div>
<div class="content">
<div class="links">{#links}</div>
</div>
<div class="footer"></div>
</div>
Use this code:
overflow: hidden;