I have a div that I'm using as a topbar with the code below:
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
padding: 0;
}
I'm trying to make it go across the whole screen but for some reason it's off center and doesnt cover the left portion of the screen. How do I fix this?
Just add left:0. So...
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
padding: 0;
left:0;
}
Related
My css:
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
nav{
width: 80vw;
height: 10vw;
background-color: black;
border: 2px red solid;
position: sticky;
top: 0;
}
li{
color: white;
padding: 2vh;
display: inline-block;
font-size: 5vw;
}
.nothing{
height: 100px;
width: 100px;
border: 2px brown solid;
}
My navbar isnt sticking to the top even though there is no overflow element anywhere (which causes problems in this case i think) and top: 0 is also mentioned. Why is this?
Here is the CSS code for my webpage, I want to resize this page according to screen size and resolution.
Different div classes are made to style the div containers.
column1 is fixed div at left and column2 is scrollable div which contain further divs that needs to be resized according to the screen size.
<style>
* {
box-sizing: border-box;
}
.column1 {
float: left;
width: 22%;
padding: 10px;
height: auto;
margin: auto;
text-align: center;
line-height: 20pt;
color: #e6b122;
position: fixed;
}
.photo {
margin: auto;
height: 90px;
width: auto;
overflow: hidden;
}
.column2 {
float: right;
width: 78%;
padding: 10px;
height: auto;
}
.photo img {
margin: auto;
max-height: 100%;
width: 80px;
overflow: hidden;
border-radius: 50%;
}
.image {
height: 400px;
max-width: 100%;
background-color: white;
overflow: hidden;
}
.image img {
margin: auto;
width: 700px;
max-height: 100%;
background-color: white;
overflow: hidden;
}
.Skill {
margin: auto;
text-align: center;
line-height: 20pt;
float: left;
width: 33.33%;
padding: 10px;
height: 330px;
border: 4px solid #F281F0;
border-radius: 35px;
}
h4 {
color: #C39D19;
}
p {
font-size: 12px;
font-family: cursive;
}
a {
text-decoration: none;
color: #000;
font-family: Garamond;
font-size: 14px;
}
a:hover {
color: #cc00cc
}
/* Container around content */
.container {
padding: 5px 5px;
position: relative;
background-color: inherit;
width: 50%;
border: 4px solid #CEF334;
border-radius: 25px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -18px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Arrows*/
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/*For circles*/
.left::after, .right::after {
left: 16px;
}
/* Left containers position */
.right {
left: 0%;
}
</style>
I learned how to layout my webpage by understanding the following CSS Layout tools.
Flexbox
CSS Grid
Media Queries
You use Flexbox and CSS Grid to layout your content, while Media Queries can help your website be responsive to different media(Phone, Tablets, Desktop etc...) sizes.
Goodluck!
Basically, there are two good solutions for your issue:
Use the Media Queries, and set the proper config for your content depends on the viewport of the browser. I can see in the code, that you already use it, so you know how to deal with it.
the second option is to use a flexbox display, which will adjust content size depend on the page width. Here you have probably the best explanation on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm looking for is the trick to create that border around the widget as shown in the image:
And the title should stick to the top.
Any idea how to do that kinda trick?
Thanks in advance :)
You can use like this -
body{
background: #ccc;
}
.border-col{
min-height: 300px;width: 220px;
background: #ccc;border:2px solid #fff;
margin: 10px auto 0;
position: relative;
}
.border-col h2{
background: #ccc;
font-size: 15px;
left: 0;
margin: auto;
padding: 3px;
position: absolute;
right: 0;
top: -13px;
width: 60px;
}
<div class="border-col">
<h2>Heading</h2>
</div>
I have a footer that contains 2 rows of 3 links - when the browser window is resized and goes too small, the links get cut off. Is there any way to keep the footer full size while the rest of the window gets resized?
.footer { position: fixed; top: 90%; left: 0; right: 0; bottom: 0;
background: #ffffff; border: solid black; border-width: 2px 0 0 0; }
set a "min-width" for your div
.footer {
position: fixed;
top: 90%;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid #000;
min-width: 200px;
}
Add a min-height to the footer, as shown in this fiddle:
.footer {
position: fixed;
height: 10%;
min-height: 40px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid black;
}
is fixing the footer to the bottom of the page an option? just delete the top: 90%; and the footer will retain it's height even when the window is half-sized
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-top: 2px solid #000;
}
PS I forked your fiddle: http://jsfiddle.net/6s5eN/
I cannot figure out why my css is creating this funky bottom margin or border I took a little video so you can see it: http://img.zobgib.com/2011-04-25_1317.swf The margin/border doesn't show except when the page is resized to pretty small. My css is pretty standard, and I have not inline styling or JS styling that would cause it. What would cause this weird margin?
Here is my CSS
html {
}
body {
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#drawn {
background: #fff !important;
}
#content > * {
}
#toolcontainer {
left: 0;
right: 0;
height: 50px;
min-width: 940px;
}
#toolcontainer > * {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-left: 10px;
}
#slidescontainer {
position: absolute;
left: 0;
bottom: 0;
top: 52px;
width: 130px;
min-height: 658px;
}
#newslide {
background: url(/static/img/new_slide.png) !important;
border: 1px solid #FFFFFF;
}
#slidescontainer canvas {
position: relative;
}
#slidescontainer > * {
height: 80px;
width: 106px;
margin: 10px;
background: #ffffff;
border: 1px solid #000;
}
#container {
position: absolute;
min-height:608px;
min-width: 810px;
/* height: 608px;
width: 810px;*/
background-color: #fff;
background-image: none;
top: 52px;
bottom: 0;
right: 0px;
left: 132px;
background: #d5d5d5;
border: 10px solid #000;
}
#container canvas {
/* left: 50%;
margin-left: -405px;
top: 50%;
margin-top: -304px;*/
}
#debug {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
overflow: auto;
border: 1px solid black;
background: black;
color: #34e338;
z-index: 50;
}
canvas {
position: absolute;
}
#colorSelector {
position: relative;
width: 46px;
height: 46px;
}
#colorSelector div {
position: absolute;
border: 1px solid #FFFFFF;
background: #000000;
width: 46px;
height: 46px;
}
You are using a lot of browser-specific CSS, and it looks like you were accessing it in an unsupported browser (Firefox doesn't support Microsoft markup, for obvious reasons). I'd recommend trying CSS3 selectors and rules instead of the browser-specific rules.
Try adding style = "overflow:hidden" to your html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml" style = "overflow:hidden">
If it is an issue with page height, that may clear it up
I fixed it by changing the min-height in #container to 638px.