I'm currently having trouble with my css layout:
http://jsfiddle.net/XB2r7/1/
.content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
float: left;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background-color: rgba(255,255,255,0.9);
}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}
As you can see at JSFiddle the two sidebars are connecting to each other, obviously I don't want this to happen, how can I fix this?
You can just add some margin-bottom; to the sidebars to "disonnect" them from each other.
DEMO
(added margin-bottom : 10px; to .sidebar)
Or if you just want to separate the last .sidebar you can add
.sidebar:last-child {
margin-top: 10px;
}
DEMO
Related
I can't get the text box at the bottom to appear over the image without messing up the navigation bar
https://imgur.com/a/n2lfl57
I've tried all sorts of things and the text either just doesn't move the way I expect or messes up my navbar as I said
I'd be extremely happy if someone could help as I need to finish this in a few days for school.
here's my css code
body{
margin: 0px;
padding: 0px;
height: 100%;
}
header{
margin-bottom: -20px;
padding: 0px;
overflow: hidden;
}
footer{
background-color: black;
margin-top: : -5px;
padding: 0px;
}
.bgimage{
margin-bottom: -5px;
width: 1920px;
}
.container{
}
.imgtext{
border-style: solid;
color: white;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.YeStage{
margin: 0px;
padding: 0px;
width: 1920px;
height: 700px;
object-fit: cover;
}
.menu {
margin-top: : -20px;
ma
padding: 0px;
background-color: #3b1113;
overflow: hidden;
list-style-type: none;
position: sticky;
top: 0;
margin-bottom: 0
border:0;
}
.Logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px
margin-bottom: 0px
width: 440px;
height: 50px;
}
.menu a {
float: left;
color: #FFFF;
text-align: center;
padding: 36px 38px;
text-decoration: none;
font-size: 17px;
}
.menu a:hover {
background-color: #f5bd0e;
color: black;
}
.menu a.active {
background-color: #f5bd0e;
color: black;
}
I tried to change the color of my website. For example I changed "background-color: #3695F6;" to "background-color: #fff;". but my website background doesn't change. I tried to find a missing
semicolon but I didn't find any. I also tried to delete parts of the Css/Html code which I didn't fully understand but that changed nothing. After all that failed I tried to change a margin on the website from 40px to 100px and nothing changed. I think my Css isn't properly connected. can someone please help.
#charset "utf-8";
body {
font: 0.9em Tahoma, Verdana, Arial;
line-height:172%;
background-color: #fff;
margin: 0px;
}
.center {
display: block;
margin-left: 0px;
margin-right: 0px;
}
#containercontainer {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
/* bovenste kopje ========================================*/
h1.titel {
color: black;
font: Gill Sans, sans-serif;
font-size: 20px;
margin-bottom: -2px;
margin-top: 0px;
}
#titel {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
border-bottom: solid black 1px;
width: 5.5%;
left: 45%;
margin-top: -5px;
position: relative;
margin-bottom: 20px;
}
/* De Slideshow ========================================*/
.fling-minislide {
width:100%;
height:100%;
padding-bottom: 0%;
overflow:hidden;
position:relative;
}
.fling-minislide img{
position:absolute;
animation:fling-minislide 15s infinite;
opacity: 0;
size: 100% 100%;
}
#keyframes fling-minislide {33%{opacity:1;} 60%{opacity:0;}}
.fling-minislide img:nth-child(3){animation-delay:0s;}
.fling-minislide img:nth-child(2){animation-delay:5s;}
.fling-minislide img:nth-child(1){animation-delay:10s;}
#slideshow {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
float: center;
border: solid black 2px;
width: 55%;
margin-bottom: 20px;
height: 300px;
position: relative;
left: 21%;
}
/* Het nieuws blokje ========================================*/
img.nieuws {
margin-top: -20px;
height: 300px;
width: 400px;
position: relative;
border: solid black 2px;
margin-bottom: 20px;
}
p.nieuws {
float: right;
margin-top: -10px;
position: relative;
margin-bottom: 20px;
}
#nieuws {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 10px;
width: 78%;
height: 50px;
left: 10%;
position: relative;
margin-bottom: 20px;
}
/* Het vragen blokje ========================================*/
#vragen {
display: block;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
width: 80%;
height: 1000px;
left: 10%;
position: relative;
margin-bottom: 20px;
top: 300px;
}
p.A{
margin-top: 10px;
font-size: 22px;
width: 250px;
margin-left: 20px;
font-weight: bold;
}
#pointer {
width: 20px;
height: 20px;
position: relative;
background: black;
margin-left: 30px;
}
#pointer:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid white;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
p.vragentop1 {
margin-left: 80px;
margin-top: -25px;
text-decoration: underline;
width: 600px;
}
p.vragentext1 {
margin-left: 80px;
margin-top: -10px;
position: relative;
margin-bottom: 50px;
width: 600px;
}
/* hoveren over plaatje in directie//////////////////////////////////////////////////////////////////////*/
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 30%;
margin-bottom: 16px;
margin-left: 10px;
margin-top: 20px;
padding: 0 8px;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.columnL {
float: left;
width: 30%;
margin-left: 30px;
margin-bottom: 16px;
padding: 0 8px;
margin-top: 20px;
}
.card {
box-shadow: 6px 7px 6px 3px rgba(0,0,0,0.75);
border: solid black 2px;
padding-left: 10px;
}
/*//////////////////////////////////////////////////////////////////////////////////*/
#cbrlogo {
background: #fff;
width: 50px;
}
#container {
width: relative;
padding: relative;
background: #fff;
min-height: 500px;
}
#containercontainer2 {
display: block;
margin-left: 0px;
margin-right: 0px;
padding: 30px;
}
.afbeelding_container {
position: relative;
float: left;
margin-left: 0px;
}
.afbeelding_container .tekst_container {
position: relative;
top: 25px;
left: 50px;
color: #00f;
font-size: 36px;
}
.schoon {
clear: both;
}
#overzicht {
margin-left: 25px;
}
.links {
float: left;
width: 320px;
}
#rechts {
float: right;
}
#onder {
clear: both;
}
.breder {
width: 4000px;
}
ul {
padding-left: 35px;
padding-right: 35px;
list-style: none;
background: #00f;
}
hr {
margin: 0px 0;
height: 1px;
border: 1px solid #fff;
border-top: 10px solid #00f;
background-color: #fff;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: none;
}
a:active {
color: blue;
text-decoration: none;
}
.menu {
display: block;
margin: 0px;
padding:0px;
position: absolute;
width: 100%;
background-color: #3695F6;
}
ul.menu {
list-style-type: none;
}
img.menu{
border: solid black 2px;
}
.menu li {
float:left;
position:relative;
width: 200px;
text-align:center;
text-decoration: none;
margin: 0px;
padding: 0;
}
.menu li a {
display: block;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
text-decoration: none;
position: relative;
z-index: 100;
}
.menu li a span{
display: block;
padding-top: 10px;
font-weight: 700;
font-size: 20px;
color: black;
font-size: 18px;
}
.menu li:hover span{
color: #FFFFFF;
}
th {
padding: 10px 30px 10px 30px;
}
td {
padding: 0 30px 0 30px;
}
td.muteren {
padding: 0 0 0 10px;
}
tbody:before {
line-height:1em;
display:block;
}
thead {
text-align: left;
}
Body
this problem could be the caching problem try clearing your cache if that doesn't work check how you are linking your css to your HTML file if it's correct you can do the last thing which is add !important to the end of the background color like the example below:
background-color:#fff !important;
Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}
Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block
When trying to display image effects on my website they don't display.
If I run the image on jsfiddle.net it works perfectly fine. However my image doesn't work when i test it inside all my code. I want a border shadow effect all around the image. The code to do so is in my code but as you can see in my web site image there is no shadow.
Here is the image when I test it in jsfiddle.net without an image.
My code:
CSS:
#collage-container {
/*width: 699px;*/
width: 800px;
/*height: 510px;*/
height: 320px;
float: left;
margin-left: 200px;
margin-top: 10px;
background-color: #DADADA;
}
#collage-one{
width: 699px;
height: 300px;
margin-left: 50px;
margin-top: 10px;
box-shadow: 0 0 20px black;
}
HTML:
<div id = "collage-container">
<img src = "longblue.jpg" id = "collage-one"/>
</div>
Update: here is all my css
<head>
<style type = "text/css">
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
}
/* Fixed screen size so objects don't shift */
#screen {
/*
min-width: 768px;
min-height: 100% !important;
margin-bottom: 30px;
*/
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 100%;
padding-top:0;
padding-bottom: 30px;
margin-bottom: 150px;
postion: absolute;
margin-left: 70px;
}
/* Format for black strip header */
#header {
background-color: black;
height: 168px;
width: 100%;
position: relative;
}
/* Class1: Holds the navigation buttons in header */
.container {
width: 960px;
height: auto;
margin: 0 auto;
margin-left: 0;
}
/* Class2: Holds the small containers for short articles */
.containerShort {
width: 480px;
height: auto;
margin: 0 auto;
}
/* Sub Classes: For Class2 */
.short1 {
right: 30px;
}
.short2 {
right: 30px;
}
/* Format for Tree logo in header */
#logoArea {
width: 300px;
height: 168px;
background-image: url(treesmall.jpg);
float: left;
margin-left: 30px;
}
/* Formating for location of navagation buttons */
#navArea
{
height: 100%;
float: right;
margin-right: 0px;
margin-top: 80px;
margin-left: 100px;
}
/* Removes the bullets for navagation buttons in header */
#nav
{
list-style: none;
}
/* Navagation formating */
#nav a
{
color: white;
text-decoration: none; /*removes underline*/
}
/* Formats the links of navagation buttons */
#nav li
{
float: left;
margin-left: 60px;
background-color: #252525;
padding: 8px;
bording: 1px solid silver;
border-radius: 5px;
}
/* Makes a hovering effect where when the mouse hovers over the
links they change color */
#nav li:hover
{
background-color: gray;
}
/* Sub class formating for container class */
.page
{
background-color: white;
padding: 10px;
margin-top: 10px;
width: 1100px;
float: right;
border-radius: 5px;
padding-bottom: 1px;
}
/* Side quote article main page */
.article
{
background-color: #ebebeb;
padding-top: 1px;
margin-top: 20px;
width: 120px;
float: right;
border-radius: 20px;
height: 300px;
border: 1px solid black;
margin-right: 20px;
text-align: left;
}
/* Formating for left sidebar of information */
#sidebar {
background-color: #B4B4B4;
height: auto;
width:350px;
float:left;
margin-top: 10px;
border-radius: 5px;
padding: 10px;
color: #483D8B;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
/* Formating of Header quote */
#quote {
color: white;
float: right;
}
/* Paragraph formating */
p {
color: black;
margin-bottom: 20px;
padding: 5px;
padding-left: 40px;
}
p.light {
color: white !important;
margin-bottom: 60px;
padding: 5px;
padding-left: 40px;
}
p .imagespace {
padding-left: 40px;
margin: auto;
}
h3 {
margin-bottom: 60px;
}
h2 {
font-family: "Times New Roman";
font-style: oblique;
}
#collage-container {
/*width: 699px;*/
width: 800px;
/*height: 510px;*/
height: 320px;
float: left;
margin-left: 200px;
margin-top: 10px;
background-color: #DADADA;
}
#collage-one{
width: 699px;
height: 300px;
margin-left: 50px;
margin-top: 10px;
box-shadow: 0 0 20px black;
}
/*#collage-two,#collage-three,
#collage-four{
width: 226px;
height: 200px;
padding: 5px;
background-color: black;
background-position: top center;
float: right;
}*/
/*#space {
width:300px;
height: 508px;
background-color: white;
float: left;
margin-top: 0;
margin-left: 120px;
box-shadow: hshadow, vshadow blur color
box-shadow: 10px 0 20px #B4B4B4;
border-radius: 10px;
}*/
#ego {
box-shadow: 0 0 20px #B4B4B4;
}
#marquee{
color: #483D8B;
margin-top: 10px;
margin-bottom: 0px;
width: 1025px;
float: right;
}
</style>
</head>
From advice in comments, looks like I have to fix my shadow to accept more browser versions.
Thanks everyone I will play with it.
Main help: #Phillips126
Sorry for a weird title but I don't really know how to describe it easily.
First I'll link my JSFiddle on it http://jsfiddle.net/b7YTd/
When I added the "float: left" and "float: right" the rows jumped outside the box and the box doesn't expand as the content gets "larger".
My question is, how do I make the box expand after the content like it should do with content inside it if it doesn't have a set height?
In order to post my JSFiddle I need to add some code so my CSS:
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
.friend_left {
float: left;
width: 250px;
}
.friend_right {
float: right;
width: 250px;
}
.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}
.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}
#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}
#profile_friends hr {
margin: 0;
padding: 0;
}
If I understand you correctly use:
#friendlist {
overflow: auto;
}
http://jsfiddle.net/b7YTd/1/
I had this issue, but used overflow:hidden; on the parent div.
http://jsfiddle.net/b7YTd/3/
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;
}