When I zoom in and out, the gray in my background color goes over the red border. How do I stop this from happening?
My CSS:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
padding-top:30px;
margin: auto;
position:relative;
height:2055px;
border: 1px solid red;
width:1050px;
background-color: #090909;
margin-top:15px;
}
.backgroound {
position:relative;
top:-50px;
/* this gray goes over red border */
background-color: gray;
height:1950px;
border: 1px solid gray;
width:985px;
}
.paa {
background-color:black;
font-size:40px;
position:relative;
border: 1px solid gray;
padding: 0px;
text-align:center;
height:80px;
margin-top:-30px;
}
And my HTML:
<header class="paa"> <a href="#">
<img src="" alt="loggo">
</a>
</header>
<nav>
<ul>
<li>
<a class="vari" href="" id="home"><span >Home</span></a>
</li>
<li>
<a class="vari" href="" id="m">llls</a>
</li>
</ul>
</nav>
<div class="backgroound"></div>
You need to shorten the height of .backgroound.
Either:
height: 1830px;
or
height: 87%;
Fiddle: http://jsfiddle.net/ryanpcmcquen/1q52w0jf/
So you need the grey div to be in the center of the red border?
if that's the case, add this line:
.background
margin:auto;
}
Check this fiddle: https://jsfiddle.net/x3uc9qm5
Related
I develop under Laravel 5.4. There is a top menu show as in the picture 1. top menu
However, I want to the menu show like picture 2 ideal top menu show,show in any size screen only in one row. Is there any good solution to make it? Like by change the menu font auto?
.venus-menu {
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"><i class="fa fa-bars"></i> </a>
<div class="content">
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
</div>
Check working fiddle to get the same, but you have to change css part
NOTE - As you mansion that "top menu display only in one row"
Working fiddle
fiddle code
.navbar-minimalize {
margin:5px 50px 5px 15px;
display: inline-block;
}
.content {
width:100%;
display:flex;
width: 100%;
margin: 0;
padding: 0;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
list-style: none;
background: #fff;
box-shadow: 0 1px 3px #dedede;
}
.content ul.venus-menu {
width:100%;
margin:0px;
padding:0px;
list-style:none;
border-left: 1px solid #ddd;
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
}
.content ul.venus-menu li {
display:flex;
justify-content:space-around;
align-items:center;
flex-flow:row wrap;
}
.content ul.venus-menu li a {
display:block;
padding:10px 15px;
font-size:15px;
text-decoration:none;
color:#505050;
}
.content ul.venus-menu li a:hover {
background:#eee;
}
<div class="content">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<ul class="venus-menu" id="top_bar">
<li>首页</li>
<li>title1</li>
<li>title2</li>
<li>title3</li>
<li>title4</li>
<li>title5</li>
<li>title6</li>
<li>title7</li>
<li>title8</li>
<li>title9</li>
<li>title10</li>
</ul>
</div>
In my case I am having a nav bar(two tabs) with green border. Below this there is a container with green border. For active tab border-bottom should be white and another tab should be green. So I changed border-bottom:1px solid #fff for active tab alone. This case is working fine is large and medium device. But in small device green line is still displaying under active tab which is the border of the container present under the nav.
HTML Code:
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:3px;
float:left;
list-style:none;
}
.tab-links a {
background:none repeat scroll 0 0 #dfdfdf;
border:1px solid #c3c3c3;
color:#484e2a;
display:inline-block;
font-family:open_sansbold;
font-size:11px;
min-width:166px;
padding:8px 4px;
text-decoration:none;
transition:all .15s linear 0s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background: #fff;
border:1px solid #dddfb0;
border-bottom:1px solid #fff;
color:#484e2a;
}
.tab-content {
padding:15px;
background:#fff;
border:1px solid #dddfb0;
margin-top:-20px;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab #1</li>
<li>Tab #2</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Test Content 1</p>
</div>
<div id="tab2" class="tab">
<p>Test Content 2</p>
</div>
</div>
JS Fiddler link:
https://jsfiddle.net/ktncf454/
#padamapriya :
I did few modifications for you..:
.tab-links li {
margin: 3px;
float: left;
list-style: none;
position: relative;
z-index: 1;
margin-bottom: 2px;
}
.tab-content {
padding: 15px;
background: #fff;
border: 1px solid #dddfb0;
margin-top: -20px;
position: relative;
z-index: 0;
}
Hope this helps!!!!
You will have to write the media query for the this scenario.Generally what happens on different devices the navbar adjust himself automatically.so writing the media query you can change the border for the container and for the tab.
It will good if you share your source code or create a jsfiddle so that we can test and give you the proper solution.
I've created a CSS top bar menu that uses the | character as separators. It's rendering exactly as it should on any browser I try for Linux or Windows. But, on Mac, with any browser, the | characters drop down a line or so, and render below the menu bar.
CSS
#menu {
position:relative;
width:80%;
min-width:800px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
text-align:center;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
padding: 12px 12px;
height:1.6em;
font-family: 'Geometria-Medium';
}
#menu ul {
display:inline-block;
margin: 0;
margin-left:auto;
margin-right:auto;
text-align:left;
padding: 0px;
line-height: 1.2em;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
position:absolute;
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 5%;
text-decoration: none;
text-transform: uppercase;
color:#666666;
line-height:2em;
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
}
#menu .active {
}
#sub {
background-color:#CC0000;
line-height:2em;
}
#sub a:hover {
background-color:#ff9999;
}
HTML
<div id="menu">
<ul class="nav">
<li class="navLi" style="vertical-align: top !important;">Home <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">About <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Services <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Portfolio <span style="vertical-align: top !important;"> |</span>
<ul id="sub">
<li>The Sparkle Project</li>
<li>Jam In Jubilee</li>
<li>Connect Now Network</li>
<li>Ovidiu Bistriceanu</li>
<li>The Devon Clifford Music Foundation</li>
</ul>
</li>
<li class="navLi">Testimonials <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Blog <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Contact</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks
If it was me..
I'd put all my css in a css file, not inline. Then I'd use css for visual appearances, like below..
#menu>ul>li{
border-right: 1px solid #000;
padding-right:20px;
padding-left: 10px;
}
#menu>ul>li:last-child {
border-right:none;
padding: none;
}
...
<div id="menu">
<ul class="nav">
<li class="navLi">Home</li>
<li class="navLi">About</li>
<li class="navLi">Services</li>
<li class="navLi">Portfolio
Demo
[Currently at: http://www.jsfiddle.net/tqtFg Michael Durrant]
I'm very new to css and I'm trying to create a website with a logo and navigation panel side by side. If you visit the site initially the panel appears out of the 'topcontent', just below and to the right in fact, but if you clicked the logo to go to the same page the panel appears where i'd like it to be!
My Site : http://acews.x10.mx
it seems something is not being intialized when first opened, but I can't tell what. here's my html code;
<div id="topcontent">
<div id="top">
<a href="index.html">
<img src="logo.png">
</a>
<div id="navbar">
<ul id="menubar">
<li class="menuButton">Home</li>
<li class="menuButton"><a href="about.html" >About ACE</a></li>
<li class="menuButton"><a href="login.html" >Customer Login</a></li>
</ul>
</div>
</div>
Here's my css code;
body {
}
/*Content page divider*/
#topcontent {
/* margin: 50px auto; */
height: 170px;
margin-left:auto;
margin-right:auto;
background-image:url('backgroundcolor.png');
}
#top {
height: 170px;
width: 900px;
margin-left:auto;
margin-right:auto;
}
/* MenuBar */
#navbar {
margin-top:60px;
float:right;
}
ul#menubar {
/* margin:20px; */
list-style:none;
margin-left:auto;
margin-right:auto;
padding: 5px 10px 0 10px;
}
ul#menubar li {
display:inline;
font-family: calibri;
font-weight: bold;
margin-left:10px;
}
ul#menubar li a {
text-decoration:none;
text-align:center;
padding:5px 10px;
/* width:100px; */
color:#FFFFFF;
float:left;
font-size:26px;
}
.menuButton a:hover{
background-color:#618E00;
text-decoration: none;
-webkit-border-radius: 5px;
}
add id for link with logo:
<a href="index.html" id="logo">
<img src="logo.png">
</a>
and CSS
#logo {float:left;}
link with logo is like one single line, if you add float to it should be ok.
How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.
Does it work?
<div style="border:1px solid #000">
Your content here
</div>
It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>
Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}