I am currently having trouble adding a border & border-radius onto my layout. I've tried a bunch of different things, but can't get it to work. Please help me. I will provide the HTML & CSS source code below.
HTML:
<div class="colmask fullpage">
<div class="col1">
<!-- Column 1 start -->
...content goes here...
<!-- Column 1 end -->
</div>
</div>
CSS:
/* column container */
.colmask {
position: relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear: both;
float: left;
width: 100%; /* width of whole page */
overflow: hidden; /* This chops off any overhanging divs */
}
/* 1 column full page settings */
.fullpage {
background: #fff;
}
.fullpage .col1 {
margin: 0 1em;
}
I hope this is what your after, instead of using
border: 1px;
try
box-shadow: 0 0 2px 0 #000000;
jsfiddle.net/XYwc4/1
Related
I am new to CSS and hope someone can help me with this.
I have an HTML page that contains an HTML form with the below structure.
Everything works fine so far but for some reason I am unable to apply certain styles to the "main" section or the form, esp. a border or a background-color style.
I tried adding some of the following to both the section and the form and both using IDs and classes, with no effect - even if I add !important:
border: 1px solid #000;
background-color: #ccc;
The only thing I am able to set on the above is a margin which works.
However, if I set border or background styles to the inner divs (e.g. for class "frmLine") it works just fine so my guess is that for some reason the inner styles are overlapping any styles applied to the parenting form and section.
Can someone tell me how I can resolve this ?
Could the reason be that there is no margin or padding between the parenting section / form and the inner divs ?
My HTML:
<div class="wrapper">
<?php require_once("includes/menu.php"); ?>
<section id="main">
<form id="frmRequest">
<div class="col-12">
<span class="frmTitle">Some title</span>
</div>
<div class="col-12 frmLine">
<div class="col-3 frmCaption">Some caption</div>
<div class="col-9">Some form field</div>
</div>
<div class="col-12 frmLine">
<!-- ... -->
My CSS (relevant styles):
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
height: auto;
margin: 0 auto -140px;
min-height: 100%;
overflow: auto;
padding: 0 0 140px;
}
#main {
border: 1px solid #000; /* This is what is not working ! */
margin-left: 8.33%;
margin-right: 8.33%;
}
.frmCaption {
font-weight: bold;
}
.frmField {
display: block;
width: 100%;
}
.frmLine {
margin: 0;
padding: 0;
}
Update:
I did some further testing which showed this is caused by the CSS. I then removed all styles and re-added them step by step which showed that the issue is caused by my grid styles (see below), specifically by the floating styles on them. As soon as I add these styles the border around the main section disappears resp. gets moved above the section - can someone tell me how I can fix this ?
/* ... */
.col-12 {
width: 100%;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.row:after {
clear: both;
content: '';
display: block;
}
Many thanks in advance,
Mike
Somehow, the default value for the overflow of (most of the, if not all) block level elements (being visible) causes the overflowing elements to be visible, but the element itself to not adjust its own size. By setting the overflow to hidden the element does adjust its own size.
#main {
border: 1px solid #000;
margin-left: 8.33%;
margin-right: 8.33%;
overflow: hidden;
}
So basically I'm creating a navigation bar (seen below) and I want to know if it's possible to create an upward ribbon type of thing.
Ignore the badly designed rest of the navigation, but I simply want the right part, the upward ribbon. Is it possible to do so, and preferably without images? I'm fine working with them, but I prefer it without.
Any help would gladly be appreciated, and thank you in advance.
Try something like this. It is pure HTML and CSS, and you can change the bar and ribbon height.
Fiddle
HTML
<div id='wrapper'>
<div id='bar'>This is the bar</div>
<div id='corner'><div id='ribbon'></div></div>
</div>
CSS (I have explained how I got all the numbers in /* comments */)
#bar {
background-color: blue;
color: white;
width: 70%;
float: left;
height: 30px; /* bar height */
}
#corner {
width: 0;
height: 0;
border-top: 30px solid blue; /* bar height */
border-right: 30px solid transparent; /* bar height */
float: left;
}
#ribbon {
height: 10px; /* ribbon height */
margin-top: -40px; /* bar height + ribbon height */
background-color: green;
width: 30px; /* bar height */
}
#wrapper {
margin-top: 20px; /* ribbon height + 10px padding */
}
I'm still new to Bootstrap. If I'm designing within the 960 container and want the footer to fit correctly inside and stick to the bottom, how do I code that? Everything I find only applies to running the footer/nav across the entire view.
Ive tried the github example and even my classmates aren't sure how to fix this.
Add this CSS below bootstrap.css reference:
<!-- CSS -->
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 960px;
}
.container .credit {
margin: 20px 0;
}
</style>
Then you can render the footer as follows:
<div id="footer">
<div class="container">
<p class="muted credit">Example </p>
</div>
</div>
NOTE: If you are experiencing problems try to set max-width: 680px; in .container at CSS code
I'm designing a web page at: http://trackstudent.pt/index.php
I ran into a bug that I can't fix, if you notice after inspecting the link, the <p></p> is getting pushed to the right, by a measure and I can't figure out why. All the divs have margin:0, padding:0 and there's enough space so that that element should fit that space.
Amazingly in the 2nd row of content that thing doesn't happen.
I have css from 1kbgrid (960px grid with 12 columns):
// Grid Cell (column)
.column {
margin: 5px 10px;
overflow: hidden;
float: left;
display: inline;
}
// Grid row
.row {
width:960px;
margin: 0px auto;
overflow: hidden;
}
// Nested rows
.row .row {
margin: 0px -10px;
width: auto;
display: inline-block;
}
In HTML I have:
<body> -> width: 100%
<div id="container"> -> width: 100%
<div id="mainWrapper"> -> width: 960px
<section class="row"> -> width: 960px
EDIT: With clear:both; in #wrapperMain it works! But I still don't get why this is happening, because the header has height:40px and the logo too, so there shouldn't be any area from the logo expanding pass the header. Anyone can offer insight?
Thank you in advance.
It's from the floating logo. Simply add the following CSS:
#wrapperHeader {
overflow:hidden; /* Forces header to contain elements */
}
Or:
#wrapperMain {
clear:both; /* Pushes wrapper down until it's past bottom of header elements */
}
I have the following:
<div class="outer" style="margin-bottom: 10px">
<div class="dialog-float">
<select name="AccountID" id="AccountID">
...
</select>
</div>
<div class="dialog-float">
Create
</div>
<div class="dialog-float">
<label for="htmlEdit">Html Editor</label>
</div>
</div>
What I would like to do is:
a) Have a 10px margin below the class "outer". Right now it seems like that DIV does not have any height and the margin doesn't appear properly.
b) Have all the "dialog-float" classes line up vertically.
Can someone give me some suggestions on what I am doing wrong.
add the following to your css file
.clear_cont, .cc {
min-height: 1px;
}
.clear_cont:after, .cc:after {
clear: both !important;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
//ok now IE6 doen't have min-height property here is a hack
* html .clear_cont, * html .cc{
height: 1px;
}
Whenever you need to fix this kind of problems add "cc" or "clear_cont" class to the container DIV
<div class="outer cc" style="margin-bottom: 10px">
Add a wrapping element for this solution to work:
<div class="outer" style="margin-bottom: 10px">
<div class="inner_wrapper">
<!-- ... -->
</div>
</div>
Sample
http://jsfiddle.net/dbjPV/2/
CSS
.outer {
border: 1px solid #ff0000; /* Show element size */
margin-bottom: 10px;
height: 200px;
display: table;
overflow: hidden
/* Include in separate IE CSS-file */
/*position: relative;*/
}
.inner_wrapper {
display: table-cell;
vertical-align: middle;
/* Include in separate IE CSS-file */
/*position: absolute;
top: 50%*/
}
.dialog-float {
border: 1px solid #00aa00; /* Show element size */
/* Include in separate IE CSS-file */
/*position: relative;
top: -50%*/
}
If it was me i would use the following css:
.outer{
margin-bottom: 10px;
min-height: 100px;
width: [some width];
}
this should do it.
The outer box would be a minimal width of 100px and grow with the content.
and always have 10px margin at the bottom.
Also the width is in my opinion always best to set.
Then you always know how big it is.
And dont forget that a div is a block element, so when placed like you did it will always be shown verticle.
A tip:
I never (at least try to never) use a clear div.
I think it is better to declare a width for a floating div so that it will fit the container div perfectly and other divs wont get both sides.
if you have them as floats than you could use the display: block css for it, but i'm not sure if it overules the float.