I'm trying to do main page for my website, I have picture how it should like this
I've tried to use Bootstrap, but they all were stick to each other
How should I solve this problem?
Here is my code for html:
<div class=" container-fluid">
<div class="row" style="margin-top: 15%;">
<div class="col-md-2 col-md-offset-5 text-center menu">About</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 text-center menu ">Skills</div>
<div class="col-md-2 text-center menu">Projects</div>
</div>
<div class="col-md-2 col-md-offset-5 text-center menu">Contact</div>
</div>
</div>
And here is css:
.menu{
font-family: 'Poiret One', cursive;
font-size: 350%;
color: white;
background-color:grey;
border: 1px solid black;
opacity: 0.95;
transition-property: all;
transition-duration: 0.5s;
}
Here is a simple example with Flexbox:
.content {
width: 250px;
padding: 20px;
margin: 10px;
border: solid 10px black;
text-align: center;
font-size: xx-large;
}
#wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#middle {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
</head>
<body>
<div id="wrapper">
<div class="content">text</div>
<div id="middle">
<div class="content">text</div>
<div class="content">text</div>
</div>
<div class="content">text</div>
</div>
</body>
</html>
It's be helpful if you provided some code but to get it just like that image, I have provided the code below - adjustments could be made from there:
#topdiv{
width:400px;
height:40px;
margin:0 auto;
border: 2px solid black;
}
#leftdiv{
float:left;
width:30%;
margin-left: 17%;
border: 2px solid black;
}
#rightdiv{
float:right;
width:30%;
margin-right: 17%;
border: 2px solid black;
}
#bottomdiv{
clear: both;
position: relative;
width:400px;
height: 50px;
bottom:0;
margin: 0 auto;
border: 2px solid black;
}
Then the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "CSSFILE.css" />
</head>
<body>
<div id = "topdiv">
Top
</div>
<div id = "leftdiv">
Left
</div>
<div id = "rightdiv">
Right
</div>
<div id = "bottomdiv">
Bottom
</div>
</body>
</html>
You didn't close every row, which is necessary for the bootstrap grid to work the way you want it.
I suppose it depends on the bootstrap version, but at least in codepen the offset classes have to be named differently: offset-md-5 instead of col-md-offset-5 and similar. There seems to be a bug or some inconsistency in the some bootstrap version/s - see also this question: Bootstrap 4 accepting offset-md-*, instead col-offset-md-* Naming Convention Bug
Here's the working code for your situation in a codepen:
https://codepen.io/anon/pen/NjxLdj
EDIT / CODE FROM CODEPEN ADDED HERE (but without Bootstrap CSS, i.e. not working without it):
<div class="container-fluid">
<div class="row" style="margin-top:15%;">
<div class="col-md-2 offset-md-5 text-center menu">About</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-4 text-center menu">Skills</div>
<div class="col-md-2 text-center menu">Projects</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-5 text-center menu">Contact</div>
</div>
</div>
I use div and span tags together with css properties such as block, cross-browser inline-block and text-align center, see my simple example here below but solution is obtained from Here
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</div>
</body>
</html>
Related
I'm trying to create title that looks like this :
The horizontal line must come from the left side of the viewport and end at the same point the title ends. Ideally I would like to have everything inside a bootstrap column. So my markup looks like this for now :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="title-with-line">
<h2>A great title</h2>
</div>
</div>
</div>
</div>
I would like to leave the HTML markup as it is. I can add more elements inside the column, no problem. It would be really good not to put anything outside of that column div.
You can just apply border-top to the title and adjust padding for the same:
.title-with-line {
width: fit-content;
border-top: 2px solid black;
padding-left: calc(2em * 2);
position: absolute;
left: 0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="title-with-line">
<h2>Nos prestations</h2>
</div>
</div>
</div>
</div>
I finally got a solution that should work on any screen size. Thanks to the responses which led me to this solution :
.title-with-line {
position: relative;
margin-top: 25px; /* This margin only to offset the line form the top of the body for demonstration */
}
.title-with-line h2 {
position: relative;
float: left;
}
.title-with-line h2:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
width: 100vw;
height: 1px;
background-color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="title-with-line">
<h2>A great title</h2>
</div>
</div>
</div>
</div>
//u have to use <hr> tag for horizontal line.
<!Doctype html>
<html>
<head>
<title></title>
</head>
<body>
<h1>This is example</h1>
<hr>
<h2>This is example 2</h2>
</body>
</html>
This code would do the job
.title-with-line h2 {
position:relative;
padding-top:20px;
display:inline-block;
}
.title-with-line h2:before {
content:"";
position:absolute;
height:1px;
background:black;
right:0;
top:10px;
width: 50vw;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="title-with-line">
<h2>A Great Title</h2>
</div>
</div>
</div>
</div>
My h1 tag shifts the entire div down when I have 2 or more divs next to each other enclosed in another div.
How do I make it so that I can add my text without the divs shifting.
I tried to add text onto a single div enclosed by another div and it only seems to be wrong when there are 2 or more divs next to each other inside a div. Any help is appreciated. This is how it looks like right now but
This is how I want it to look but with the text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="positioningTrial.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seperate">
<div class="inside">
<h1>hello</h1>
</div>
<div class="inside">
</div>
</div>
<!-- ------------------------------------------------------------------------------------------- -->
<div id="main-cont">
<div class="row">
<div class="left">
<h1>hello</h1>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
h1,
p {
padding: 0;
margin: 0;
}
#seperate {
border: 1px solid red;
height: 10vw;
width: 400px;
text-align: center;
margin-bottom: 5px;
}
.inside {
display: inline-block;
border: 1px solid red;
height: 100%;
width: 40%;
}
/* ---------------------------------------------- */
#main-cont {
width: 100vw;
height: 100vh;
border: 3px solid blue;
text-align: center;
}
.row {
width: 100%;
height: 20%;
border: 3px solid #ff0000;
}
.left,
.middle,
.right {
display: inline-block;
width: 20%;
height: 100%;
border: 2px solid black;
}
.left {
}
.middle {
width: 40%;
}
.right {
}
/* --------------------------------------------- */
[1]: https://i.stack.imgur.com/nGHtm.jpg
I think there might be some crossed wires with how the page layout works.
Can you make a simplified version in jsFiddle like this: https://jsfiddle.net/sheriffderek/hupdmg3q/ or something?
It's hard to tell what you want to happen from the image you provide.
How do I make it so that I can add my text without the divs shifting
All of the block-level elements are just full-width boxes:
<header>
<h1>Heading example</h1>
<div>Example div</div>
</header>
So, their existence takes up space - and pushes each other down the page.
Your CSS looks like you are kinda fighting the nature of how the pages work.
Here's some other things to think about: https://jsfiddle.net/sheriffderek/7j3f2chw/
I'm completely new to learn bootstrap grid and my guide has mainly been using website guides and tailoring them to this example.
The expected output is supposed to look like this when fullscreen:
Expected-FullSize
and like this when collapsed to a smaller size:
Expected-Collapse
My main problem is trying to get the "Aside" and "Section" parts to stack on top of each other inside the "Article" part. I can't even get it to line up in a row with the "article" part anymore. The other details I'll work out on my own, but this part I've been struggling with for awhile.
CSS:
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
}
.nav {
background-color: khaki;
height: 50px;
text-align: center;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle-Test2.css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="header">Header</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="nav">Nav</div>
</div>
<div class="col-md-8 col-sm-12">
<div class="article">Article</div>
<div class="col-md-2 col-sm-12">
<div class="aside">Aside</div>
<div class="col-md-2 col-sm-12">
<div class="section">Section</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="footer">Footer</div>
</div>
</div>
</div>
So, I did quite a bit with your code and I'll just post it back to you and I'll try to explain as many changes as I can remember :)
I wouldn't call myself an expert with bootstrap either. So these are fun to do.
First, I noticed that <link href= wasn't working in the head.
So, I changed that to bootstrap CDN and the latest version
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Be sure to match the Javascript from the same source if you want to use collapsable navigation or carousels or something like that later on...
Next, I changed the grid to look more like this:
<div class="container-fluid">
<div class="row">
<div class="header">Header</div>
</div>
<div class="row">
<div class="navigation-bar">Nav</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm mbody">
<div class="article">Article</div>
</div>
<div class="col-sm mbody">
<div class="row">
<div class="aside">Aside</div>
</div>
<div class="row">
<div class="section">Section</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="footer">Footer</div>
</div>
</div>
Really, what we're wanting is two rows inside of a single column
These changes got us close to what we want.
The next thing was to give all of your inner div's 100% width
body {
background-color: black;
font-size: 2em;
text-align: center;
}
.mbody {
margin: 0;
padding: 0;
}
.header {
background-color: cornflowerblue;
height: 60px;
text-align: center;
width: 100%;
}
.navigation-bar {
background-color: khaki;
height: 50px;
text-align: center;
width: 100%;
}
.article {
background-color: darkseagreen;
height: 180px;
text-align: center;
width: 100%;
}
.aside {
background-color: goldenrod;
height: 90px;
text-align: center;
width: 100%;
}
.section {
background-color: lightsteelblue;
height: 90px;
text-align: center;
width: 100%;
}
.footer {
background-color: lemonchiffon;
height: 40px;
text-align: center;
width: 100%;
}
Notice that finally, I changed the "nav" class to "navigation-bar" so your styling will apply, since "nav" is a predefined class in bootstrap already and overrides your styling.
Then I added the "mbody" class to the two columns and set the margins and padding to 0 to make everything fit together with no space on the left or right.
My result is looking like what you posted in the two pictures above. Hope this is helpful. :)
Bootstrap's grid works in such a way that if you don't need it to change when resizing your browser, you can set just one size and will take care of the rest. col-md-12 should work just fine for you all the way down.
To solve your primary question, check out nested items: https://getbootstrap.com/docs/4.0/layout/grid/#nesting
I have a a webpage that currently has a navigation bar on the top. I have been trying to create a layout underneath the navigation bar such as this:
Now left will be a "button" but really just a DIV that will be used to do something. Only one of the "Right" placeholders will actually contain text and the rest will be blank.
My issue is that I am not able to create this layout as I have in the picture. The closest I get is each "row" of left and right with now spacing between them.
Currently I have this for my code:
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Josh Schweigert - Contact</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<script src="contact.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li>Home
</li>
<li>Embedded Systems
</li>
<li class="active">Contact
</li>
</ul>
</div>
</body>
</html>
Note that the formatting will be screwed up as I did not include the CSS code.
I have tried making an "outter" div and inside that div have "container" div's which then hold a div for "left" and a div for "right" sort of like this:
#outter {
Position: Relative;
}
.container {
position: relative;
}
.left {
float: left;
width: 30%;
}
.right {
float: left;
width: 70%;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
But I am still not getting the result I want and I am thoroughly confused on how to achieve this layout. I appreciate any help!
I achieved this by making the following changes to your code:
Removed unnecessary position: relative; statements. They weren't doing anything in this context.
Removed floats
Changed .left and .right to display: inline-block;
Removed whitespace between divs as inline block is whitespace sensitive.
However this mightn't be the best solution because it's very unclear what your end goal is. If the idea is for the left column to be a vertical navbar then you would want that contained in its own element, and the main content in another. But again, it's not clear what the intent of the design is so I did it in as few changes as possible.
The box-sizing and other styles are just prettification so you can see that the code does lay out as specified in your image.
div {
box-sizing: border-box;
}
.left
{
width: 30%;
display: inline-block;
background-color: purple;
color: #fff;
padding: 15px;
}
.right
{
width: 70%;
display: inline-block;
background-color: red;
color: #fff;
padding: 15px;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
</div>
Please get your HTML structure correct to begin with. Also I made changes to your code to get the alignment you require here.
You need something like this:
.navbar {
background-color: #5983ff;
height: 35px;
width: 100%;
text-align: center;
margin-bottom: 15px;
}
.navbar-child {
width: 30%;
display: inline-block;
color: #fff;
font-size: 16px;
line-height: 35px;
}
.container {
margin-bottom: 15px;
height: 30px;
line-height: 30px;
border:2px solid #dd00ff;
}
.left {
float: left;
padding-left: 20px;
width: 15%;
color: #fff;
background-color: #dd00ff;
box-sizing: border-box;
}
.right {
float: left;
padding-left: 50px;
width: 85%;
color: #fff;
background-color: #ff0000;
box-sizing: border-box;
}
<div class="navbar">
<div class="navbar-child">
Home
</div>
<div class="navbar-child">
About
</div>
<div class="navbar-child">
Contact
</div>
</div>
<div class="body-section">
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
You could use flex with box-sizing: border-box:
.wrap{
display: flex;
flex-wrap: wrap;
}
nav, section, aside{
padding: 0.5rem;
}
nav{
width: 100%;
background: yellowgreen;
display:flex;
justify-content: space-around;
}
aside{
width: 30%;
background: blueviolet;
box-sizing: border-box;
}
section{
min-width: 70%;
background: pink;
box-sizing: border-box;
}
<div class="wrap">
<nav>
<div>Home</div>
<div>Forum</div>
<div>Contact</div>
</nav>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
</div>
width: 100% gives the nav full width, flex warp let other items under it, box-sizing lets you give the exact width for left and right
You can read more on flex here.
Also a post of mine that might help you understand
Try this:
<div class="container">
<div class="left">
left
</div>
<!--Remove this space -->
<div class="right">
right
</div>
</div>
I'm using Bootstrap and I want to place the last row of the .container at the bottom of the page's content.
The first thing I've tried was the following code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.highlight {
border: 1px solid red;
}
.push-to-bottom {
position: absolute;
bottom: 30px;
width: 100%;
}
</style>
</head>
<body>
<div class="container highlight">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/500x500">
</div>
</div>
<div class="row push-to-bottom text-center highlight">
<div class="col-md-12">
<button>Press me</button>
</div>
</div>
</div>
</body>
</html>
However, it doesn't work as expected because of the position: absolute property -- the last row doesn't know anything about other elements in DOM, so it gets wrong width and positioning.
Well, I changed this code to the following:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.highlight {
border: 1px solid red;
}
.rel {
position: relative;
}
.push-to-bottom {
position: absolute;
bottom: 30px;
width: 100%;
}
</style>
</head>
<body>
<div class="container highlight rel">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/500x500">
</div>
</div>
<div class="row push-to-bottom text-center highlight">
<div class="col-md-12">
<button>Press me</button>
</div>
</div>
</div>
</body>
</html>
As you see, I've added the position: relative property to the .container element, so now width: 100% do the right job, and our element placed in the .container visually. But it still has the following problems:
It doesn't care about other rows, so it can overlap with other rows' content
It still doesn't placed at the bottom of the page, not the .container only
How can I achieve such behavior without hardcoding heights and widths as suggested in other questions related to this problem?
You can use footer.
<footer id="footer" class="footer row">
<div class="container">
Your text or DOM here
</div>
</footer>
CSS:
footer {
display: block;
bottom: 0px;
height: [depends by content]
right: 0%;
left: 0%;
position: fixed !important;
position: absolute;
top: expression((0-(footer.offsetHeight)+ (document.documentElement.clientHeight? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop? document.documentElement.scrollTop:document. body.scrollTop))+'px');
text-align: center;
visibility: visible;
}