I'm going to try to explain this the best that I can. This picture represents the layout I'm trying to achieve.
I'm trying to have a navbar on the side. I'm using bootstrap so this is about a col-md-3 for row layout. I'm able to get it into my document, but what I am having a hard time with is layering this nav bar on top of the body tag.
I have a body tag that has an image set to the background with no-repeat and background-size 100% and all of that. But it always covers the nav bar. How can I get the navbar (as well as other elements) to layer on top of it. I was hoping that I could do this with z-index, but after half an hour of playing around with this, I think maybe I don't understand z-index nearly as much as I thought it did.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class = "navWrap row">
<div class = "col-md-3">
<div class = "brand">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Heres my CSS:
body {
background-image:url(img/carousel-lifestyle.jpg);
background-size: 100%;
position: fixed;
background-repeat: no-repeat;
position: fixed;
z-index: -1;
}
.col-md-3 {
background-color: white;
position: absolute;
z-index: 1;
}
.brand {
background-image:url(img/Screen%20Shot%202015-10-26%20at%205.38.31%20PM.png);
background-size: 100%;
background-repeat:no-repeat;
width: 75px;
height: 200px;
padding:20px 100px 20px 10px;
margin-left: 25px;
}
Thanks in advance!
Related
I am new to SVG apologies! I am having an issue with an SVG where I have it set to max-width: 60% but it seems to take precedence over the overall height of the elements.
I want it so the overall height of the row is 50vh. But even if I set it and remove the max-width from the SVG it still is taking precedence over the set vh. If anyone has any suggestions on the best way to approach this?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="safetyFreelancer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
body {
background: #f3f4f5;
}
.wave-container {
position: relative;
background: #ce1212;
color: #FFF;
text-align: center;
overflow: hidden;
}
.wave-container > svg {
display: block;
background: #ce1212;
}
.vh {
height: 50vh !important;
}
</style>
</head>
<body>
<div class="wave-container">
<div class="row vh">
<div class="col-md-6">
<h1 class="text-center">Welcome</h1>
</div>
<div class="col-md-6">
SVG
</div>
</div>
SVG
</div>
</body>
</html>
I did not enter the SVGs as it maxes out the character count
If I undestood correclty you want to set width for your svg. If yes, then you can just set through this new rule:
.col-md-6.test > svg {
width: 50%;
}
The jsfiddle example can be seen here.
Hello I would like to have a row (in blue) in a col-lg-4 div (in red) in another row (in yellow), like this:
Here is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid" style="height: 400px;background-color: yellow">
<div class="row">
<div class="col-lg-4 col-lg-offset-1" style="background-color: red;">
<div class="row" style="padding-top:20%;padding-bottom: 20%;background-color: blue;">
dddd
</div>
</div>
</div>
</div>
</body>
</html>
with this css:
.navbar {
margin-bottom: 0 !important;
background-color: white;
}
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
[class*="col-"], footer {
background-color: lightgreen;
opacity: 0.5;
line-height: 400px;
text-align: center;
}
But I get this:
Despite that the colors get mixed up (if you have a solution to prevent this also It would be cool) I can't have the result that I am looking for...
much thanks
I have posted the jsfiddle code with the solution
In your css remove the class attribute rule [class*="col-"].Try targeting the rules to the specific elements using css. You are converting all the columns to have a line-height of 400px that's why your final html looks like that. And Don't use inline styles
If you remove the [class*="col-"] and add the following in the css file you will get the desired result
.container-fluid > .row, .col-lg-4.col-lg-offset-1 {
height: 100%;
}
.col-lg-4.col-lg-offset-1 > .row {
top: 50%;
transform: translateY(-50%);
position: relative;
text-align: center;
}
Fiddle demo
https://jsfiddle.net/karthick6891/4js3r3hd/
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;
I have a fiddle with a right and a left sidebars. The bootstrap container class works great with the left side bar with text wrapping and all that.
But the Right Sidebar doesn't work quite right. Text gets tucked underneath it and doesn't wrap correctly. I also want to hide the sidebars at certain media points as well and want the container to work correctly at that point as well...
Can someone give me some pointers on getting my right sidebar and container to work correctly with each other?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sidebar test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
.sidebar-fixed-left {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
}
.sidebar-fixed-left + .container {
padding-left: 220px;
}
.sidebar-fixed-right {
width: 200px;
position: fixed;
border-radius: 0;
height: 100%;
right: 0;
}
.sidebar-fixed-right + .container {
padding-left: 220px;
}
</style>
</head>
<body>
<div class="navbar-inverse sidebar-fixed-left">
</div>
<div class="navbar-inverse sidebar-fixed-right">
</div>
<div class="container">
<div class="row">
<h2>Left and Rigth sidebars (Fixed)</h2>
<p>Left and Right sidebars</p>
</div>
</div>
</body>
</html>
Hello apologies for what may come across as a silly question as I am still fairly new to HTML & CSS. I want to avoid using Javascript if possible to solve this solution.
My issue is the text "Still working on it". On the various laptops / desktop screens and android phones tested I've had no issue with it the entire text field being centered. However on iphones I am assuming that it centers the first letter of the string "S"? Below is an example of what it looks like on iphone devices:
Below is my HTML and CSS code respectively, if anyone could guide me in the right direction to sorting this issue I would very much appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>Elias Malik</title>
<link rel="stylesheet" href="main.css">
<link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="shortcut icon" href="diamond.ico">
</head>
<body>
<div class="bc">
<h1>Still working on it</h1>
</div>
<footer class="mainFooter">
<div class="socialmediaFooter">
<img class="focus" src="facebook.png"</img>
<img class="focus" src="instagram.png"</img>
<img class="focus" src="linkedin.png"</img>
</div>
</footer>
</body>
</html>
and
html
{
background: url("devbc.jpg") no-repeat center center;
min-height:100%;
background-size:cover;
}
body
{
text-align: center;
min-height:100%;
}
.bc h1
{
text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax;
position: fixed;
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}
img
{
max-height: 10vmax;
max-width: 5vmax;
}
The website is:
https://eliasmalik.com
I'm not sure if it will fix it on your phone, but try to take out the left:51% and your transform property on your .bc h1 css and instead add a width:100%