I made a little start-up for a computer science project.
For this project, we have to build just a regular website with HTML, CSS and if wanted, javascript.
I got my navigator menu thing from w3-schools but after putting the button in the top-container instead of the header, it suddenly centered instead of showing up left.
I deleted the text-align: center; from the top-container and put in button {
text-align: left;
}
Didn't work
HTML
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<div id="main">
<section class="top-container">
<h2>Just some bullshit here</h2>
<button
id="openNav"
class="w3-button w3-teal w3-xlarge"
onclick="w3_open()">☰
</button>
</section>
CSS
.top-container {
background-color: #f1f1f1;
padding: 30px;
}
button{
text-align: left
}
I expect the button being on the left side instead of being in the centre.
(here's a link to the whole code https://jsfiddle.net/Ellefien12/qg6thu5v/1/, I don't know why, but it is working in there, but when I have it in NetBeans 11, it isn't working)
Here's how it looks in firefox
Put your button inside the div
<div class="wrapper">
<button id="openNav" class="w3-button w3-teal w3-xlarge"
onclick="w3_open()">☰</button>
</div>
And then position the element
.wrapper {
text-align: left;
}
#openNav {
position: absolute;
top: 50%;
}
Related
I'm trying to set up a nav bar with a png link to the top left corner, and a text element "menu" to the top right corner. I haven't been able to get this to work with "float: right;"
I've included the code that shows I used float: right; for the .topnav elements. I'm not sure if .logo is interfering with this. I needed the png logo to be aligned with the text element which was not possible without putting them in separate divs.
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
float: right;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 17px;
}
.topnav_right {
float: right;
}
.logo {
float: left;
}
<div class="container">
<div class="logo">
<img src="####.png" style="max-width:100%;">
</div>
<div class="topnav">
<div class="topnav_right">
Menu
</div>
</div>
</div>
The text still remain next to the logo, when it should be in the opposite corner to the right.
In the container class, instead of having position: absolute , do position: flex . It will fix the problem.
Since you want a Navbar with left-aligned png-link and right-aligned text, it can be achieved in a much simpler way using flex-box, with the need of nesting them.
It also handles alignment easily
You can read more about flexbox from csstricks
<style>
.topnav {
display:flex;
justify-content:space-between;
align-items:center;
}
</style>
<div class="topnav">
<div class="logo">
<img src="###.png">
</div>
<div class="text">
Menu
</div>
</div>
I'm making a card/grid layout using wells in bootstrap. My problem is that the button needs to always be positioned on the bottom of the well at all times with the well having a fixed height. The button is at the bottom but is also overlapping the text.
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.well {
min-height: 280px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container content-sm customClass">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Test123</h3> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Join server!
</div>
</div>
</div>
</div>
Make sure to click show full page. The button is overlapping some of the text. What would I need to do to make it so where the text positions itself so where it avoids contact with the button? Changing the height fixes it somewhat, but it needs to stay at this height.
If you wanted each of your well class height to be fixed, You need to move each of your btn-purple class outside of your well class as well. Also, To retain the look of your current layout, Place some of your css property from your well class to your col-sm-12 class (parent container)
Here is a sample jsfiddle to guide you: https://jsfiddle.net/u7ecv316/1/
Note: I've place a col-item class in col-sm-12 then place the btn-purple outside of well class. I've also override the css properties of well class too.
Hope this will guide you well
Hello guys i have trouble with my code. I have a bootstrap button and thats is fine but how can i put space between the button and end of the page. because its only on iphone the problem. Its very weird because when im holding in normal its good the button but when i turn my iphone there is no space anymore.
This is my button:
<div class="row">
<div class="text-center">
<button type="button" class="learn btn btn-info">Learn more</button>
</div>
</div>
As Ashiqur suggested, add some margin to the bottom of the button
.learn {
margin-bottom: 1rem;
}
Maybe put CSS like this to your button :
button.learn {
margin-bottom: 10px;
// Or :
padding-bottom: 10px;
}
maybe you should add this :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I have started to make a website for a local restaurant and I am new to using Bootstrap. Currently i am working on getting the header of the page to work. I made a header with a fixed position and I am using the buttons built into bootstrap, albeit with many css style changes, as tabs for other pages on the website. There are 4 tabs. In between the 2nd and 3rd tab is the logo for the restaurant, a png file. To start out I have designed the page to work with only large screen displays. So on my 2560 x 1440 res screen, everything looks exactly as it should, as shown in this picture:
Though, immediately as I start to decrease the size of my screen, the padding between each button and the logo image starts to decrease. Eventually, at around an inner screen size of 1638 x 1277, ONLY the closest button to the logo on its right side starts to overlap with the logo, and this is all happening while it's still considered a "large" screen. Here is a picture of this:
To fix this I tried setting the width of the logo to 100% rather than 286px and it fixed the problem with the buttons overlapping with the logo, but it did not produce the result I wanted. I want the logo to always remain the same size. I also want the horizontal space in between each button and the logo to always be the same, not in relation to the original length in between, just the same in relation to each other. Like the space between button x and button y is the same amount between button y and the logo.
Here is the head:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.header{
background-color: red;
}
.col-lg-2, .col-lg-4, .col-lg-1{
background-color: transparent;
text-align: center;
}
.header{
height: 140px;
}
.header h3{
color: white;
font-size: 200%;
font-family: 'HeaderFont';
margin-top: 10px;
}
#logo{
margin-top: 30px;
}
.button{
background-color: black;
background-repeat: no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
margin-top: 45px;
padding-right: 18%;
padding-left: 18%;
padding-top: 5px;
padding-bottom: 5px;
}
</style>
Here is the body:
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-lg-3"></div>
<div class="col-lg-1">
<button type="tab" class="button"><h3>Home</h3></button>
</div>
<div class="col-lg-1">
<button type="tab" class="button"><h3>About</h3></button>
</div>
<div class="col-lg-2">
<img src="http://www.sizzledcore.com/wp-content/uploads/2009/11/google-new-logo.png" id="logo" style="width:286px; height:106px; vertical-align:middle"></a>
</div>
<div class="col-lg-1">
<button type="tab" class="button"><h3>Menu</h3></button>
</div>
<div class="col-lg-1">
<button type="tab" class="button"><h3>Order</h3></button>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
Okay so I figured it out. What I wanted was that the column would always be a certain width, what would happen is the image of the picture would become greater than the width of the column. To fix this I set .header .col-lg-2 to have a width: 286px;
In other words, this is the CSS needed:
.header .col-lg-2{
width: 286px;
}
So to start this off I would like to just say that any help is appreciated, I'm not looking for the entire code laid out for me. I have tried to create this but fail every time as something disappears of it breaks the entire layout of the page. I am fairly new to programming but I have a pretty good grasp of concepts and I'm open to learning new things.
I would like to create a top bar like in this website, with the logo and social icons. No search bar.
http://www.complex.com/
Thank you to anyone for any help
First, as a general tip: Whenever you see something you want to recreate, right click on it in chrome and select "inspect element". Then you can look at the css used to create it.
To have social icons up like your example site, they've simple floated them right.
So HTML:
<div class="header">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
CSS:
.leftThing { float:left;}
.rightThing { float:right;}
The float will cause the element to go as far to the side you select as it can, then sit there. Here is a good css tricks article on the concept: http://css-tricks.com/all-about-floats/
I made you a litte JS-Fiddle to show you how to fix the header on top of the screen when you scroll down. Hope it helps a bit!
HTML:
<div id="WebContent" class="Content">
<img src='http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg'></img>
</div>
CSS:
.Header{
top: 0px;
left: 0px;
min-height: 50px;
max-height: 50px;
min-width: 1024px;
background-color: #2C2C2C;
color: white;
position: fixed;
}
.icon{
height: 50px;
}
.Content{
max-width: 300;
max-height: 300;
overflow-y: auto;
}
Fiddle: http://jsfiddle.net/wujood/pgqeLr7s/
Or you can just insert a fixed position to your header:
<div class="header" style="position:fixed">
<div class="leftThing">
</div>
<div class="rightThing">
</div>
</div>
Apply either CSS float: left or display: inline-block to your elements.
http://jsfiddle.net/njoh7x73/
CSS code
.menu {
background-color: #333;
}
.menu div.item {
width: 64px;
height: 16px;
background-color: #888;
}
.menu .item {
float: left;
padding: 10px;
margin: 5px;
}
.menu .item:hover {
background-color: #555;
}
HTML code
<div class="menu">
<a class="item" href="#">LINK</a>
<div class="item"></div>
<a class="item" href="#">LINK</a>
<div class="item"></div>
<div style="clear:both"></div>
</div
If you use this approach (floating elements), don't forget to clear them.