Alright, so I have no idea why this isn't working, but take a look. My top right navigation items are terribly screwed up. Everything else works great so far. Any suggestions would be much appreciated. Also, side-note, is there a way for me to have an "a" tag that heads to a directory (Music) and for me to customize the directory page? I'll make a separate question on that in a minute. Also, I would love to have my own player that shows metadata. Anyway, I'll try to stay on topic so you don't have to answer those, just the CSS help. Thanks!
The HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="description" content="AnonSeeker is a collection of HTML, CSS, and JavaScript files designed for privacy. We offer things such as a browser, bookmarks, proxies, music, a text/code editor, and much more, completely password-protected!">
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
<!-- Favicon -->
<title></title>
</head>
<body>
<!-- All Navigation Items -->
<div class="container" id="all-navigation">
<!-- Top Left Navigation Items -->
<div class="container" id="top-left-naviagtion">
<!-- Goto Browser -->
<div class="container goto-browser top-left-navigation-item">
<a href="html/anon-seeker-browser.html" class="goto-browser top-left-navigation-item">
<img src="img/browser.png" alt="browser-img" class="goto-browser top-left-navigation-item">
</a>
</div>
<!-- Goto Bookmarks -->
<div class="container goto-bookmarks top-left-navigation-item">
<a href="html/bookmarks.html" class="goto-bookmarks top-left-navigation-item">
<img src="img/bookmarks.png" alt="bookmarks-img" class="goto-bookmarks top-left-navigation-item">
</a>
</div>
<!-- Goto Music -->
<div class="container goto-music top-left-navigation-item">
<a href="html/music.html" class="goto-music top-left-navigation-item">
<img src="img/music.png" alt="music-img" class="goto-music top-left-navigation-item">
</a>
</div>
</div>
<!-- Top Right Naviagtion Items -->
<div class="conatiner" id="top-right-navigation">
<div class="container goto-ace top-right-navigation-item">
<a href="html/ace-editor.html" class="goto-ace top-right-navigation-item">
<img src="img/ace-editor.png" alt="ace-editor-img" class="goto-ace top-right-navigation-item">
</a>
</div>
</div>
</div>
<!-- Middle Elements -->
<div class="container" id="middle-elements">
<!-- Center AnonSeeker Image -->
<div class="container middle-img">
<img src="img/anonseeker.png" alt="anonseeker.png" class="middle-img">
</div>
<div class="container search-box">
<input type="text" placeholder="Search" class="search-box">
</div>
</div>
</body>
</html>
The CSS
html, body {
margin: 0;
}
#all-navigation {
width: 100%;
height: 100%;
}
#top-right-navigation {
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-navigation {
top: 10px;
left: 10px;
padding: 15px;
}
.top-right-navigation-item {
padding: 5px;
}
.top-left-navigation-item {
padding: 5px;
}
#middle-elements {
text-align: center;
padding: 5px;
}
top-left-navigation spelling wrong in your html so not working your css. Just replace CSS mentioned below code. Hope this will help you
#top-right-navigation {
position:absolute;
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-naviagtion{
position:absolute;
top: 10px;
left: 10px;
padding: 15px;
}
Related
Final answers seem to have been editing .row's styles to be margin-right: 0 !important; and editing the body element's styles to be overflow-x: hidden; Thank you to everyone!
In my site, I style the html element with a background-color in order to fill the entire page. However, when doing so, the page width increases and causes it to be scrollable, horizontally. Is there anyway to fix this? The only framework I'm using is Bootstrap, and I've been trying to fix this for about a week.
Edit: Removing the background-color styling gets rid of the issue, but that's not really an option.
Edit Two: Added all HTML in, as well as this screenshot:
HTML
<!DOCTYPE html>
<html>
<head>
<title>League Site</title>
<link rel="stylesheet" type="text/css" href="index.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="outer">
<div class="row">
<div class="col-lg-2"><h1>AnotherLOLSite</h1></div>
<div class="col-lg-10"></div>
</div>
<div id="menu">
<div class="row">
<div class="col-lg-2 menu-item"><h4>Home</h4></div>
<div class="col-lg-2 menu-item"><h4>Item DB</h4></div>
<div class="col-lg-2 menu-item"><h4>About</h4></div>
<div class="col-lg-6"></div>
</div>
</div>
<div id="body" align="center">
<form class="summoner-search" method="POST">
<input type="text" class="summoner-input" placeholder="Enter a summoner name...">
<button type="submit">GO!!!</button>
</form>
</div>
</div>
</body>
</html>
Relevant CSS
html {
background-color: #081f44;
}
#outer {
background-color: #081f44;
}
#menu {
background-color: #000000;
}
.menu-item {
color: gray;
}
.summoner-input {
border-radius: 3px;
width: 30em;
height: 2em;
}
You should be applying the color to body not html. It shouldn't be causing this issue, but still isn't best practice.
EDIT
The problem was in the class 'row' from the bootstrap framework. Just add the below into the stylesheet.
.row{
margin-right:0!important;
}
why use background-color in html instead the body tag?
body{
background-color:#081f44;
min-height: 100vh; //Fill all the screen
}
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I have a problem with login form, when browser window got smaller images that are appearing in the head of the login form stop appear correctly. correct view: http://im87.gulfup.com/bYOI29.png
when I change browser window size: http://im59.gulfup.com/95cyji.jpg
html code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="login panel">
<meta name="author" content="WhiteOne">
<title>Login</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- icon location -->
<link rel="stylesheet" type="text/css" href="styles/icon.css" />
<!-- Set Full Background -->
<link rel="stylesheet" type="text/css" href="styles/background.css" />
<link rel="stylesheet" type="text/css" href="styles/icon-login.css" />
</head>
<body>
<div style="margin: 100px auto 0 auto;">
<div class="container">
<div class="row">
<!-- login box start -->
<div class="col-md-4 col-md-offset-4" id="loginbox">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<img src="icons/Instagram.png" id="instagram-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Facebook-icon.png" id="Fb-login">
<h3 class="panel-title" >Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form" method="post" action="">
<fieldset>
<div class="form-group">
<span class=usericon>
<i class="fa fa-user"></i>
</span>
<input class="form-control" id="username" placeholder="Username" name="username" type="text" autofocus required>
</div>
<div class="form-group">
<span class="passwordicon">
<i class="fa fa-lock"></i>
</span>
<input class="form-control" id="password" placeholder="Password" name="password" type="password" value="" required>
</div>
<input type="submit" name="Login" value="login" class="btn btn-lg btn-success btn-block" id="login">
</fieldset>
</form>
</div>
</div>
</div><!-- End of login box -->
</div><!-- end of row class -->
</div><!-- end of container -->
</body>
</html>
css code for social icon position: icon-login.css
#instagram-login {
left: 250px;
opacity: 0.95;
position: absolute;
top: -16px;
}
#instagram-login:hover {
opacity: 1;
}
#twitter-login {
left: 195px;
opacity: 0.925;
position: absolute;
top: -12px;
}
#twitter-login:hover {
opacity: 1;
}
#Fb-login {
left: 140px;
opacity: 0.92;
position: absolute;
top: -12px;
}
#Fb-login:hover {
opacity: 1;
}
.panel-heading {
position: relative;
}
I tried relative to panel-heading instead of fixed, but it doesn't work also.
The first thing you should do is to warp the images in a links, then wrap all the links in a div with class social
<div class="social">
<img src="Instagram.png">
<img src="Twitter-icon.png">
<img src="Facebook-icon.png">
</div>
to position the icons absolutely, you should give the parent div (#loginbox) the following:
#loginbox {
position: relative;
}
Then, you can apply these styles to the social div
.social img {
width: 50px;
}
.social a {
display: inline-block;
float: right;
}
.social {
position: absolute;
right: 13px;
top: 0;
}
Put position: relative; on your #loginbox and it will keep the images inside loginbox and not out of it.
Then try to manage smaller left right top bottom parameters, because for #loginbox these you defined will not fit. The ones you defined is for .container since it has position defined..
First, put the title before the images and arrange your images properly.
<div class="panel-heading">
<h3 class="panel-title" >Please Sign In</h3>
<img src="icons/Facebook-icon.png" id="Fb-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Instagram.png" id="instagram-login">
</div>
Next, apply the following styles:
.panel-heading {
width: 400px; // make sure this width is big enough to contain the title and the flags
}
.panel-title {
display: inline-block;
width: 90px; // adjust the width so it's proper, I'm making rough guesses based on what I see
}
#Fb-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
}
#twitter-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}
#instagram-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}
This is a rough guess based on your damn images.
I'm currently in the process of creating a HTML/CSS layout for a Kiosk-style site.
However, I am having a few issues making the alignment of the images and text to work exactly how I want.
The logo and header should be fixed in the same place across every page, whereas I might need to expand the amount of buttons on-screen.
Here is the illustration of an example: Example Image, where:
Black box represents logo
Blue boxes represent individual buttons
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png">
<div id="logo">
<img src="logo.png">
</div>
<br>
<div id="icons1">
<img src="button-wmcweb.png"></a>
</div>
<div id="icons1">
<img src="button-appointments.png"></a>
</div>
<div id="icons1">
<img src="button-prescriptions.png"></a>
</div>
<br>
<div id="icons2">
<img src="button-somccg.png"></a>
</div>
<div id="icons2">
<img src="button-patient.png"></a>
</div>
<div id="icons2">
<img src="button-nhschoices.png"></a>
</div>
</body>
</html>
CSS:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
#icons1 {
display: inline-block;
}
#icons2 {
display: inline-block;
}
Is using inline blocks the best practice for what I'm trying to achieve?
Any help would be much appreciated.
I have created for you a JSFiddle with what you want as a starting point.
Click for the full screen mode for the fiddle.
There is the full code below for the ease of referencing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.png">
<div id="logo">
<div id="logoimg">
<img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
</div>
<div id="logotext">lorem ipsum</div>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
</body>
</html>
style.css:
body {
text-align: center;
}
#logoimg, #logotext, .row > img {
display: inline;
}
#logo, .row {
margin: 30px 10px;
min-width: 1000px;
}
#logotext {
min-width: 320px;
vertical-align: top;
font-size: 36px;
padding: 0 20px;
}
img {
width: 320px;
resize: noresize;
}
a:link {
text-decoration:none;
}
For more info on HTML/CSS, consider checking the following w3school tutorials: HTML and CSS.
Your HTML was wrong in a few places. No opening <a> tag, multiple id's with the same name, and the <link> for the css needs to be inside the <head></head> tags, as shown below.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Is this what you're looking to achieve?
http://jsfiddle.net/Q8gVL/