Disclaimer: I'm a Python coder learning to use CSS/html etc etc
Right guys/gals, I'm just working on a sticky bar for my website, and from the picture you will see that the social bar is mis-aligned. Please see attached image. (It's long)
I have used:
* {border: dashed blue 1px;}
within the CSS to see if my divs weren't aligned correctly, but they seem fine.
Here is the html in question (links removed):
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="some link" width="42" height="42"></img></li>
<li class="social"><img src="some link" width="42" height="42"></img></li>
<li class="social"><img src="some link" width="42" height="42"></img></li>
</ul>
</div>
</div>
The CSS in question is:
.sticky-bar {
background: #000000;
bottom: 0;
color: #ffffff;
font-weight: 600;
left:0;
margin: 0;
opacity: 0.95;
padding: 0em;
position:fixed;
width: 100%;
z-index:99999;
}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #ffffff;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
}
#footerlist li {
display: inline;
list-style-type: none;
/*padding-right: 5px;*/
}
The images are also 512x512 pinned down to 42x42 with the src (could this be a reason) and they are homogenous and come as a set.
If anyone could suggest a fudge fix or better still why it is not aligning correctly I would be very grateful.
Thankyou
Your list has default padding you should remove since it's pushing the contents over to the right a bit:
#footerlist {
padding-left:0;
}
Related
I'm trying to figure out why I can't fill this spot, despite trying many things I have been unable to figure out how to fix it. I tried padding the top, but to no avail. I have provided the code below as well as a picture of the space I'm talking about. In the picture there's a white space between the header 2 and the gray area that has a brief summary. I have tried padding and also increasing the height of the background color, but it doesn't seem to work. Thank you in advance for reading this and I really do thank you for taking the time to help me figure this out.
$(document).ready(function()){
$("figure img + figcaption").prev().addClass('hasCaption');
});
.body{
margin: 0px;
}
.homeButton{
width: 40px;
}
#MidPort{
background-image: url("http://www.geocities.ws/spahealthcare/pic/dark-green-home-button.png");
background-size:cover;
position:absolute;
margin-left:1565px;
bottom:10px;
}
.topnav{
font-size: 20px;
font-family: Times New Roman;
position:fixed;
top 0;
width:100%;
}
#bg2{
background-color:red;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
background-color: #333
}
li{
float:left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.active{
background-color:#4CAF50;
}
li a:hover:not(.active)
{
background-color: #111;
}
li:last-child{
border-right:none;
}
#margintop1{
margin-top: .5cm;
font-family: Gadget;
}
.jumbotron{
height:175px;
background-color:#808080;
}
hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
img.hasCaption {
padding-bottom: 50px;
}
figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 16px;
background-color: white;
text-align: center;
color: blue;
font-family: 'Reenie Beanie', cursive;
font-size: 30px;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
left: 0;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
img {
border-color: white;
border-width: 15px;
-moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-style: solid;
margin: auto;
}
#imgR{
margin-left:1285px;
height:400px;
}
font{
font-family:Gadget;
}
section{
background-color:#00FFFF;
margin-bottom:10cm;
font-family:Gadget;
}
}
<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<div>
<header>
<!--<div class="container">-->
<h2 class="topnav" id="cs2">
<ul>
<li><a class="active" href="/home">Home</a></li>
<li>About Me</li>
<li>Contact</li>
<li id="MidPort"></li>
</ul>
</h2>
</header>
</div>
<body>
<div class="intro-text">
<div class="jumbotron">
<div>
<p id="margintop1"style="margin-right:200px;">
<font color="white">Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve emerging economic problems
</font>
</p>
<hr class="style17"/>
</div>
<figure>
<img src="http://i.maniadb.com/images/artist/116/116122.jpg" id="imgR">
</figure>
</div>
</div>
<div id="midSec">
<section>
<h2>
<center>
<font color="#2F4F4F" size="20">
Portfolio
</font>
</center>
</h2>
</section>
</div>
</body>
<!--setup a home button at the bottom-->
[![Space is in between Portfolio and the brief summary][1]][1]
You're using an h2 in your code that has a margin.
h2{margin: 0;}
This will fix it.
h2{margin-top:0}
will fix the issue
h2 by default has a margin top . Remove that.
Also, your HTML is not correct . ( that's why i post this as an answer, to explain to the op the problems from his html )
The biggest problem is that you nested ul inside h2 . This practice is not valid.
As stated in the doc
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
Heading tags like h1,h2 etc. are pharsing content, ul is a flow content . So you cannot put ul inside h2
You can check your HTML here > HTML validator and check docs here > documentation
Second problem is that you write <li>About Me</li>
So you first open li, then a but you close first the li and then the a. You need to close the a before closing the li. a being a child of li . Correct form :
<li>About Me</li>
Another problem is using tags that are no longer supported in HTML5 . font,center . ( also the use of size is not supported either) You either use inline styles for example <h2 style="font-size:10px;text-align:center"> or you can use CSS styles separately .
These are just the problems i see from a first look over your code
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
I am trying to make this exact box with borders lines. you can see after H2 there is new border line and then a paragraph. Please tell me how do I make this? as when I do it with border-bottom:1px solid it just makes a lines but doesn't touch the edges of the main border. here I am attaching the image so you can better understand this here you can see image
my code
<div class="col-sm-8 col-sm-offset-2" id="house">
<h3 class="text">Our house packages include:</h3>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & ‘M’ Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>‘Classic’ range of inclusions</li>
</ul>
<img src="images/landing.jpg" alt="landing Image">
<p class="note">NB. Please note that all packages are subject to developer and/or council and statutory authorities’ approvals.</p>
</div>
</div>
CSS
#house {
border: 1px solid black;
background:white;
}
#house h3 {
border-bottom:1px solid;
font-size:28px;
font-weight:bold;
margin:10px;
}
#list {
font-size:15px;
margin:15px;
padding:15px;
position:relative;
right:20px;
text-align:left;
}
#house img {
width:40%;
position:relative;
left:500px;
bottom:260px;
}
please tell me how do I make border lines after heading and after list. please take a look into image. It should be responsive.
thank you all
I think your code is missing one div tag on the top, so I'm not able to debug. :/
But this is how I'd solve it if I had to do the same thing:
<style>
html {
background: #EEE;
width: 100%;
height: 100%;
border: 0;
text-align: center;
padding: 40px;
box-sizing: border-box;
color: #AAA;
font-family: calibri;
}
.box{
background: #FFF;
border: 2px solid #DDD;
width: 80%; /*SPECIFY WIDTH HERE*/
display: inline-block;
}
.heading {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
text-size: 30px;
font-size: 30px;
box-sizing: border-box;
display: inline-block;
}
.content {
border-bottom: 2px solid #DDD;
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.footer {
width: 100%;
padding: 20px;
box-sizing: border-box;
display: inline-block;
}
.myList {
display: inline-block;
text-align: left;
padding: 10px;
}
li {
margin: 10px 0;
}
.myImg {
display: inline-block;
padding: 10px;
}
.houseImg {
width: 300px;
}
</style>
<div class='box'>
<div class='heading'>
Our house packages include:
</div>
<div class='content'>
<div class='myList'>
<ul class="lead text" id="list">
<li>Standard site costs (based on 500mm fall to site & 'M' Class slab)</li>
<li>Rainwater Tank or connection to recycled water where available.</li>
<li>Concrete driveway (up to 55sqm)</li>
<li>Tiled Front Porch</li>
<li> Internal Floor Coverings</li>
<li> 5+ star gas instantaneous HWS</li>
<li>Wall & Ceiling insulation</li>
<li>'Classic' range of inclusions</li>
</ul>
</div>
<div class='myImg'>
<img src='http://www.simplyeleganthomedesigns.com/hudson%20cottage%20FL.jpg' class='houseImg'>
</div>
</div>
<div class='footer'>
Some Footer text here
</div>
</div>
The reason h3 is not working the way you want is because you assigned it a margin: 10px; This is going to push the h3 border 10px away from its parent on all sides. If you don't assign it a margin, border-bottom will work fine.
It may be good practice for you to add borders to all elements so you can see how each css rule affects an elements box.
Refer to box model for further information
W3C Box Model
MDN Box Model
1- the border is inside the margin that's img why there is spaces .
try use the padding for h3
padding: 20px;
I fix the list for you as well .
check
jsfiddle
I've got an image of a house I want to display on my navbar as the 'home' link. I've entered some CSS to implement this but it doesn't seem to work. Could anyone help me display the image? See the image and CSS code below for clarification.
The light blue box is where the little white house should be. See below for CSS
html, body
{
padding: 0;
margin-right: auto;
margin-left: auto;
}
.navbar
{
height: 48px;
width: 100%;
background-color: #294052;
text-align: center;
vertical-align: middle;
margin-bottom: 10px;
}
li
{
display: inline;
position: relative;
padding: 20px;
border-right: inset 2px white;
font-size: 20px;
font-weight: normal;
font-family: sans-serif;
vertical-align: middle;
padding-top: 31px;
padding-bottom: 14px;
}
a
{
text-decoration: none;
color: white;
}
li:hover
{
text-decoration: underline;
background-color: #447294;
}
li.home
{
background-color: #447294;
background-image: url('home.png');
}
span
{
font-weight: bold;
}
I've tried using the display:block fix but it just messes up the rest of my navbar.
And the HTML code...
<div class="navbar">
<ul>
<li class="home"></li>
<li>ABOUT</li>
<li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li>
<li>CONTACT</li>
</ul>
</div>
To start debugging, I'd first try to use absolute URL to make sure that the image can be loaded.
li.home
{
background-color: #447294;
background-image: url('full_path_to_image/home.png');
}
Also, please provide HTML code, ideally make a ready demo at http://jsfiddle.net/ (or any other similar service). That way you'll we can help you better.
EDIT: After you have added the HTML code, the problem seems to be indeed the path to your image.
Here is a working demo: http://jsfiddle.net/tBNSU/
Your background image is present in li.home; but li.home isn't wide enough to display anything. Background images are like background color - they won't change the shape of the content.
Try adding some content:
<li class="home">home</li>
Or change the alignment of your bg image to center center to perhaps see it more clearly.
This is what the weird view looks like, in Chrome on OS X on first load:
That blue bar running right across the screen is actually the navigation bar that should be at the top of the screen. See below.
This is what the original view looks like, and this is what it reverts to - once I scroll down (so that portion of the screen disappears) and scroll back up:
Edit1: I don't even know what code to post, if any because it is kinda random. If you ask some questions though, maybe something might jump out and I will know what code to either post or look at.
Thanks.
Edit2: Here is the code for the div#navigation:
<div id="navigation">
<div id="quota-info">
Plan: Chameleon<br />
# of Projects: 2 / 20<br />
# of Clients: 2 / 15<br />
Storage: 10.8 MB / 10.0GB <br />
</div>
<div id="user-info">
<span class="username">Hi Test</span><br />
Name: Test User<br />
Email: test#abc.com<br />
Last Logged In: about 2 hours ago<br />
</div>
<ul>
<li><img src="logo.png" /></li>
<li id="dashboard">Dashboard</li>
<li id="settings">Settings</li>
<li id="logout">Logout</li>
</ul>
</div>
Here is the CSS:
#navigation {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #2d343f;
background-image: url('../images/nav-textured-bg.png');
background-repeat: repeat;
padding: 5px 5px;
margin: 0px auto;
position: relative;
height: 75px;
}
#navigation a {
text-decoration: none;
padding: 10px 15px;
display: inline;
height: 35px;
line-height: 35px;
color: #c6c8cb;
}
#navigation ul {
width: 100%;
margin: 0 auto;
text-align: center;
}
#navigation li {
width: 100%;
display: inline;
list-style-type: none;
}
#navigation li img {
position: relative;
top: 15px;
}
Edit 3:
Here is another screenshot of how it looks when I scroll up. The top navigational bar is still there. This blue thing is not even the menu, it's like a screenshot of it. When I hover over the menu links, they don't work.
You have to create a reduction. Start with a copy of the actual page and then remove stuff not related to the problem, one by one, until it disappears. Then you'll see what's causing it, whether it's a browser bug and what you can do to fix it.
PS: If it's a browser bug, don't neglect to report it. It's a web developer's responsibility.
I would start by cleaning up some of your CSS.
#navigation {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #2d343f;
background-image: url('../images/nav-textured-bg.png');
background-repeat: repeat;
padding: 5px 5px;
margin: 0px auto; <--- see below
position: relative;
height: 75px;
}
this should be margin:0 since it's a block element. Block elements take up the entire line, so trying to center it makes no sense.
#navigation a {
text-decoration: none;
padding: 10px 15px;
display: inline; <--- conflict (see below)
height: 35px; <--- conflict (see below)
line-height: 35px;
color: #c6c8cb;
}
Inline elements can't have a width or height applied to them, but some browsers when you try to will automatically convert any inline element to inline-block for you. If that is what you want, you should specify it, otherwise drop the height.
#navigation ul {
width: 100%;
margin: 0 auto; <-- see below
text-align: center;
}
Centering an item with 100% width does not make sense here
#navigation li {
width: 100%; <--- conflict
display: inline; <--- conflict
list-style-type: none;
}
#navigation li img {
position: relative;
top: 15px;
}