I'm currently working on a landing page for a website. I want the navigation menu to have a shadow blur, just like this (https://ibb.co/9ZkJ8tD).
The problem is, I haven't been able to figure out how to execute that. I tried creating a container div with two separate divs inside (the mask div and the actual div). I then had the two divs mirror each other, in specs and position. This is my CSS so far (I create borders around each element so I can see them in live server):
HTML
<body>
<div class="wrapper">
<div class="main">
<div class="inner">
<div class="header">
<h1>Distinctive Brokers</h1>
</div>
<div class="nav-container">
<ul id = "menu" >
<li>Listings</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="mask">
</div>
</div>
</div>
</div>
</div>
CSS
.mask
{
border: 2px solid gold;
margin: 0;
padding: 10px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menu{
border: 2px solid magenta;
list-style-type: none;
display: flex;
margin: 0;
padding: 10px;
align-items: center;
align-content: space-between;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
li{
padding-left: 10px;
padding-right: 10px;
margin: auto;
}
This is what it looks like at the moment (https://ibb.co/xf80vFt).
What would be the simplest method to create the navigation bar? I'm relatively new to web development so I would to avoid anything with Javascript.
you can add background-color: rgba(255, 255, 255, 0.1) to have the visibility effect. You can change the a number according to your liking of the visibility. background-color: rgba(255, 255, 255, 1) will go full white while background-color: rgba(255, 255, 255, 0) will go full transparent.
Related
I am trying to make a table, but I do not wish to use a table.
I have instead placed divs inside other divs just as shown below:
<div class="windows" id="head">
<div class="windows" id="location">
<div class="windows" id="character">
<div class="windows" id="buttons">
<div class="windows" id="textbox"></div>
</div>
</div>
</div>
<div class="windows" id="map"></div>
</div>
And I want to have them essentially look just like this:
Click image link
But as soon as I make the border in CSS for all divs to be :
border: 0px gold;
Then it lines them up with a 3px margin or padding:
Click image link
I've personally tried to set the margin and padding of *, body, #head, div and .windows to:
div {
padding: 0;
margin: 0;
}
This has been fruitless.
A big chunk of the CSS currently looks like this, where the remaining divs go by the same pattern as #location. Where the "top" is always the "height" of the previous .
html {
background-color: black;
font-family: gabriela;
text-color: black;
}
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
padding: 0;
}
div {
padding: 0;
margin: 0;
}
.windows {
box-sizing: border-box;
display: block;
position: relative;
border: 3px gold;
border-style: inset;
background-color: maroon;
}
#head {
width: max(500px, 100%);
height: max(150px, 15%);
}
#location {
background-color: purple;
width: 380px;
top: max(150px, 15%);
height: max(100px, 10%);
}
I think that you are too over complicating, try using grid-layout it will be much easier.
Here is a link of how to use grid-layout https://www.w3schools.com/css/css_grid.asp.
How can I make these forms in the middle of the page width
the Intended form
using pseudo elements before and after
and using this code:
<body>
<div class="cont">One</div>
<div></div>
<div>Three</div>
</body>
Note I am a beginner with CSS
You can try removing one of the content and see effect . Giving margin-top/bottom equal makes it vertically center align and display:block; with margin-left/right:auto makes it horizontally center
.box {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.content {
position: relative;
background-color: red;
border: 2px solid rgb(209, 208, 208);
border-radius: 5px;
width: 40%;
padding: 2%;
display:block;
margin: 15% auto 15% auto;
}
<div class="box">
<div class="content">hd</div>
<div class="content">hd</div>
</div>
I want to create a special box/div for this message board which adds the top part of the cross to this project. Ideally, this solution will allow a small picture to the left of the bar and the banner/logo will occupy the space to the right of the top bar.
I cannot wrap my head around how to create two div elements where the left side is a fixed width and the right side fills the remaining browser space. link to test-site: https://bchristiancross.runboard.com
#wrapper {
position: relative;
width: 95%;
margin: 0 auto;
border: 2px solid #FF0000;
}
#header {
text-align: center;
height: 175px;
background: #FFFF80;
}
#content,
#footer {
margin-left: 175px;
border: 1px solid #0000FF;
border-left: 50px solid #0000FF;
}
#content:after {
content: '';
position: absolute;
width: 400px;
left: 0;
top: 125px;
border-top: 50px solid #0000FF;
}
<div id="wrapper">
<div id="header">
board banner/logo goes here
<h1>Your board name here</h1>
</div>
<!-- end header -->
<div id="content">
</div>
</div>
Use 'css flex', I hope it helps your question.
There is good web site to learn about CSS Flex
Following code is an example that you might want to do, I hope it answers your question.
index.html
<div id="header" class="flex_container">
<div class="flex_left">
<img alt="picture" src="">
</div>
<div class="flex_right">
board banner/logo goes here
<h1>Your board name here</h1>
</div>
</div>
main.css
.flex_container {
display: flex;
}
.flex_left{
min-width: 175px;
padding-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
border-right: 50px solid #0000FF;
}
.flex_right{
width: 100%;
}
I want to contain the teal hover within the borders of my social media links. I’ve tried adjusting the padding and heights and widths via CSS properties but when hovering, it still overlaps over the right border.
This is what it looks like while not hovering:
This is what it looks like when hovering:
The image sizes are each 19px × 15px.
#box {
width: 200px;
height: 50px;
background-clip: padding-box;
position: relative;
margin: 0;
left: 1.4em;
background: rgba(0, 0, 0, 1);
float: right;
z-index: 200;
}
#boxlist li {
height: 50px;
width: 20px;
position: relative;
list-style-type: none;
display: inline-block;
bottom: 1em;
margin-left: -2.5em;
float: left;
}
.imgli:hover {
background: rgba(0, 255, 255, 1);
}
.imgli {
border-left: 1px solid rgba(153, 153, 153, 1);
padding-right: 4em;
}
.imgli:first-child {
left: -0.1em;
border: none;
}
.imgli:nth-child(2) {
left: 1em;
}
.imgli:nth-child(3) {
left: 2em;
}
<header>
<div id="box">
<ul id="boxlist">
<li class="imgli"><img src="images/banner-social-icon-twitter.png" class="boximg"></li>
<li class="imgli"><img src="images/banner-social-icon-facebook.png" class="boximg"></li>
<li class="imgli"><img src="images/banner-social-icon-email.png" class="boximg"></li>
</ul>
</div>
</header>
The overlapping is happening, I believe, because of the
margin-left:-2.5em combined with the fixed width of the container, you are still experiencing overlap, despite the fact that your elements are floating.
Without doing a detailed lookover of your layout, one solution is to apply a background color to your <li>s to prevent the overlap, see the update I made to your fiddle:
http://jsfiddle.net/VVj3R/1/
I just added the background line to .imgli's definition and it seems to work.
.imgli {
border-left: 1px solid rgba(153,153,153,1);
padding-right:4em;
background-color:black;
}
You may want to change black to something else, as long as its an opaque color.
PS the images didn't show up in your fiddle because you used relative path names.
Try making your code bit simpler.. like this:
<div id="box">
<ul>
<li><div class="button" id="btn1"></div></li>
<li><div class="button" id="btn2"></div></li>
<li><div class="button" id="btn3"></div></li>
</ul>
</div>
CSS:
#box ul {
margin: 20px;
padding: 0px;
}
#box li {
float: left;
display: block;
background: #ededed;
padding: 1px;
}
#box .button {
width: 50px;
height: 50px;
background-color: #000;
}
#box .button:hover {
background-color:rgba(0,255,255,1);
}
#btn1 {
background-image: url(someicon.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px 40px;
}
Here is fiddle:
http://jsfiddle.net/tb2Ug/
I tried to implement fixed position header bar. But when I try to resize window to smaller width, right part of header is not shown.. If I changed position to absolute, problem is resolved but I'm losing the fixed effect of header bar..
#header {
position: fixed;
top: 0px;
display: block;
height:56px;
width: 100%;
padding-left: 0px;
background-color: #333333;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 99999;
}
here is the html;
<body>
<div id="mask"></div>
<div id="wrapper">
<div id="header">
<div id="center">
<a id="logoWrapper" href="/makale"><div id="logo"></div></a>
<div id="categoryWrapper">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="searchWrapper">
<div id="search">
<input type="text" />
<a id="searchBt" href="#"><img src="/images/site/search.png"></a>
</div>
</div>
</div>
</div>
<div id="content">...</div>
</div>
</body>
Here is the link http://sporapp.com/makale
i had the same problem some time ago. look at my older post up there -> Make Fixed Header Scroll Horizontal
you can use jQuery or Javascript to reposition the div on the top of the page ( causes some laggy effect sometimes )
hie, i have fixed your problem. You must have to add min-width property of css for #header portion while working on resizing window.
CSS:
#wrapper
{
background-color: #F4F4F4;
display: block;
height: auto;
min-height:100%;
min-width:980px;
overflow:auto;
width: 100%;
}
#header
{
backgroung-color: #333333;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
display: block;
height: 56px;
min-width: 1265px; // Here, if you want to adjust your min-width of header as per your need (for that you can use fire bug) else remains same
padding-left:0;
position: absolute;
top: 0;
z-index: 99999;
}
#header #center
{
margin: 0 auto;
width:980px;
}
Hope, it will helps you. Cheers. !!
Mark it as answer if it will helps you so that other can fix their same problem. Thanks. !!