Am new to ASP.NET and CSS.
I Need to Show Fixed Div and fixed menu in header. And Fixed Header Div have bottom border line and its also have another ul in top of bottom ul like this
Admin
New image 1 image 2 image 3 image 4
---------------------------------------------------------
so I tried Like this
CSS
#DivHeader
{
width: 100%;
height: 125px;
top: 0px;
left: 0px;
position:fixed ;
z-index: 2;
border-bottom: 1px solid #00e5e6;
}
#DivShow
{
height: 30Px;
width: 350px;
position:fixed;
float:left;
margin-left: 20px;
margin-top: 95px;
}
#DivRight
{ height: 80Px;
width: 150px;
position:fixed;
left: 85%;
margin-top: 10px;
}
#DivShow ul
{
position: relative;
height: 20px;
width :200px;
display:inline-block ;
font-size: 14px;
color: #1570a6;
list-style:none;
top: 50%;
margin-top: -10px;
margin-left: 129px;
margin-right: 10px;
margin-bottom: 0px;
padding: 0px;
}
#DivShow li{float:left;position:relative; cursor:pointer;}
#DivMenuRight
{
height: 30Px;
width: 500px;
position:fixed;
right:15%;
margin-top: 95px;
}
#DivRight ul { position:absolute;
width :100px; margin-left:5px; }
#DivShow li{float:left;position:relative; cursor:pointer;}
#DivRight ul
{
height: 100%;
text-align:center;
color: #1570a6;
list-style:none;
text-decoration:none;
table-layout:fixed;
display:table;
}
#DivRight li{cursor:pointer; display:table-cell;
margin-top:40px; height:20px; float:left;}
#UlIcon
{
height: 100%;
list-style:none;
text-align:center;
padding-left: 5px;
text-decoration:none;
}
#UlIcon li {float:right; margin-left:25px; width : 40px; height:100%;}
img {
display:inline-block;
width:40px;
height:100%;
cursor:pointer;
}
ASP.NET
<div id="DivHeader">
<div id="DivShow">
<ul> <li> Show All </li></ul>
</div>
<div id="DivRight">
<ul> <li > Admin </li></ul>
</div>
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiLog"> <img src="IMG/New.png" alt="" /></li>
<li id="LiDelete"> <img src="IMG/Delete.png" /></li>
<li id="LiSave"> <img src="IMG/Save.png" /></li>
<li id="LiNew"> <img src="IMG/New.png" /> </li>
</ul>
</div>
</div>
But bottom border line overlap with images only so how can i get the solution?
What am doing wrong here?
am using Visual Studio 2008 and CSS 2.1
Fiddle https://jsfiddle.net/e6LvsLh2/
Related
hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??
in simple words i want list item's border to be equal to the borders of "Signin" and "logo" div
<html>
<head>
<title>BBC</title>
<style>
body{
margin:0;
font-family:Arial,Helvetica,freesans,sans-serif;
}
#top{
width:100%;
height:50px;
}
.keepcenter{
width:1100px;
margin: 0 auto;
}
#logo{
border-right:1px solid #CCCCCC;
float:left;
padding-right:5px;
height:100%;
}
#signin{
font-weight:bold;
font-size:0.9em;
border-right:1px solid #CCCCCC;
width:200px;
height:100%;
float:left;
}
#signin img{
position:relative;
top:5px;
margin-left:15px;
}
#signin p{
display:inline;
position:relative;
top:1px;
padding-left:5px;
}
#menutop{
float:left;
}
#menutop ul{
list-style-type:none;
margin:0;
padding:0;
}
#menutop li{
padding:15px 20px 10px 20px;
display:inline;
font-weight:bold;
font-size:0.9em;
float:left;
border-right:1px solid #CCCCCC;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="images/logo.jpg" />
</div>
<div id="signin">
<img src="images/signicon.png" /><p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Simply remove the top and bottom padding from the list items.
body {
margin: 0;
font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
width: 100%;
height: 50px;
}
.keepcenter {
width: 1100px;
margin: 0 auto;
}
#logo {
border-right: 1px solid #CCCCCC;
float: left;
padding-right: 5px;
height: 100%;
}
#signin {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #CCCCCC;
width: 200px;
height: 100%;
float: left;
}
#signin img {
position: relative;
top: 5px;
margin-left: 15px;
}
#signin p {
display: inline;
position: relative;
top: 1px;
padding-left: 5px;
}
#menutop {
float: left;
}
#menutop ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menutop li {
padding: 0 20px;
display: inline;
font-weight: bold;
font-size: 0.9em;
float: left;
border-right: 1px solid #CCCCCC;
height: 100%;
}
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="http://lorempixel.com/40/40" alt="BBC" />
</div>
<div id="signin">
<img src="http://lorempixel.com/g/10/10" alt="" />
<p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
The list is floating though, which means that its baseline is not necessarily the same as the #signin div. In my snippet, the img in the div is small enough to not have an effect, but depending on its size, the baseline of the div (and therefore the position of the p) will move down. You may have to compensate for that in the ul.
I'm trying to make a header like this:
HOME ABOUT (LOGO HERE) CONTACTS LOGISTICS
l want everything to be in the middle of the page.
If anyone can help me or link me to a helpful website I would really appreciate it
You can use margin:0 auto for centering element in the page. Try the below code for develop your design.
http://codepen.io/ogzhncrt/pen/mJggdd
header {
width:700px;
margin:0 auto;
background-color:#999;
padding:10px;
height:20px;
color:#f4f4f4;
}
header ul {
list-style:none;
margin:0 auto;
}
header ul li {
display:inline-block;
float:left;
margin-left:20px;
}
The most simple, basic solution I can think of is using the <center> tag, and put the same padding trait for each of the elements. Play with the amount of padding to achieve exacly the distance you want between them. Example:
.distanced
{
padding:20px; /*will control the distance between the spans*/
}
<center style="background-color:#aaaaaa">
<span class="distanced"> HOME </span> <span class="distanced"> ABOUT </span> <span class="distanced"> LOGO </span> <span class="distanced"> CONTACTS </span> <span class="distanced"> LOGISTICS </span>
</center>
Using divs you can set up defined widths and place them into a container.
.container{
width:500px;
margin:auto 0;
}
.item{
margin-left:20px;
border:black solid 1px;
width:50px;
height:50px;
float:left
}
.search{
margin-left:20px;
border:black solid 1px;
width:100px;
float:left;
height:50px;
}
https://jsfiddle.net/bLxk96pq/ working example i just created
I recommend using tables in your script, they're easy to use and you can make some really cool things with them. You can use the answers above to make this centered. For example put this in the body:
<div id="menu">
<table>
<tbody><tr>
<td><b>HOME</b></td>
<td><b>ABOUT</b></td>
<td>*Put the logo here*</td>
<td><b>CONTACTS</b></td>
<td><b>LOGISTICS</b></td>
</tr></tbody>
</table>
</div>
And then this in the head/CSS (Border is optional, but it's really cool. Also, color and amount of padding is you choice):
div#menu {
background:red;
height:35px;
padding: 20px;
}
table {
width:100%;
border:3px solid black;
}
td, th {
border:3px solid black;
}
It follows the code is very simple, you simply use the logo as a menu item.
HTML
<div class="container">
<nav id="navbar" style="z-index: 100000" >
<ul>
<li> Home </li>
<li> About </li>
<li><img src="http://neows.com.br/nav-center-logo/logo.png" width="250" height="100" alt=""/></li>
<li> Contact </li>
<li> Logistc </li>
</ul>
</nav>
</div>
CSS
body {
width: 100%;
height: 100%;
font-family: 'Ariar', sans-serif;
color:#828282;
font-size: 18px;
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 960px;
}
#navbar {
height: auto;
float: left;
position: relative;
top: 20px;
right: 0;
z-index: 100000;
width: 100%;
text-align: center;
}
#navbar ul {
padding: 0;
margin-bottom: 0;
margin-top: 0;
list-style: none;
margin: 0 auto;
}
#navbar ul li {
display: inline-block;
height: 22px;
}
#navbar ul li a {
font-size: 16px;
float: left;
color:#828282;
padding: 0 15px 0 15px;
line-height: 1.1;
text-decoration: none;
vertical-align: central;
font-weight: bold
}
#navbar ul li a:hover {
text-decoration: none;
color: #363636;
}
.space-item {
margin-top: 40px;
}
http://jsfiddle.net/furlanj1/zku320q3/
First of all im a bit confused but i will do my best to explain my problem and what i want.
I have a div and inside that div i have another div, i want that div to move to left and right, nothing more, it has to follow the same path as the image when resizing (see my project).
How do i make that div that is behind the white circle always do the same path as the circle ?
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
}
.header {
background-color: transperent;
height: 100px;
color: white;
}
.product {
margin-top:0px;
height: 600px;
background-color: blue;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
display: inline-block;
}
.product2 {
height: 600px;
margin-top:0px;
background-color: red;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
position: relative;
display: inline-block;
}
.product2 img{
position: absolute;
right: 0;
bottom: 0;
}
.main{
background-image: url("http://i.imgur.com/Y5hHusa.png");
height:650px;
}
#crew {
height:50px;
clear:both;
background-color: tomato;
color: darkgrey;
}
.stick {
position: fixed;
top: 0;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: -5px;
margin-right: 50px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
.menu li a:hover{
background-color:none;
color:red;
}
.div_form {
height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}
.product2 .div_form{
}
.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}
.product2 .div_form .form_circulo{
z-index:1
}
.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;
}
.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}
.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="main">
<div class="header">
<img src="http://i.imgur.com/48nYArD.png">
<ul class="menu">
<li>Home </li>
<li>Product Tour </li>
<li>Pricing </li>
<li>Try </li>
<li>Vision</li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
<div id="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</body>
</html>
PS: Sorry for argumentation, my english isnt the best, hope you can understand.
Regards,
Duarte Andrade.
The problem is you're trying to position the div_form div vertically by giving it a margin-top of 36%. But a margin with a value in % is always relative to the width of the container, not the height. See the W3C.
The simplest solution is, because you know the height of the container (product2) is 600px, is to set the margin to 36% of 600px, or 216px.
body {
margin: 0;
}
.product {
height: 600px;
background-color: blue;
color: white;
float: left;
width: 50%;
margin: 0;
padding: 0;
display: inline-block;
}
.product2 {
height: 600px;
background-color: red;
color: white;
width: 50%;
float: left;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
.product2 img {
position: absolute;
right: 0;
bottom: 0;
}
.div_form {
height: 35%;
width: 40%;
margin-top: 216px; /* This is what I changed */
margin-left: 41%;
background-color: blue;
}
<div class="main">
<div class="header">
<div class="product">
</div>
<div class="product2">
<img src="http://i.imgur.com/3UTs03w.png">
<div class="div_form">
</div>
</div>
</div>
</div>
Or if you really need a percentage of the parent's height, you would remove the margins and give the div position:absolute in the same way as the img. Then you can use left:41%; top:36%; but you will also need to experiment with the z-indexes a bit to get their stacking order right again.
I'm trying to set up 3 elements, , , and in one row. The left and right images have set size, the middle is supposed to fill 100% of what's left. For some reason however, while the first img and div are set up properly, the last img flows away to the next line. Also, firebug says the middle is actually invisible? And has width of 0px, even though i can see the inside just fine
<div>
<div class="testowyDiv">
<img src="ikony/strzalkal.png" class="carousel-button-left"/>
<div class="testowyDiv2">
<ul class="testowyUl">
<li><img src="zdjecia/r_hale/1/1.jpg" /></li>
<li><img src="zdjecia/r_hale/1/2.jpg" /></li>
<li><img src="zdjecia/r_hale/1/3.jpg" /></li>
</ul>
</div>
<img src="ikony/strzalkap.png" class="carousel-button-right"/>
</div>
</div>
with styles:
.testowyDiv{
width: 564px;
height: 128px;
margin-top:15px;
margin-bottom:15px;
padding-left:53px;
padding-right:53px;
overflow: hidden;
float:left;
}
.testowyUl{
float:left;
padding:0px;
padding-right:5px;
display:inline;
width:1000px;
margin-bottom:0px;
margin-top:0px;
}
.testowyDiv2{
width:100%;
overflow:hidden;
display:inline;
}
.testowyUl li{
display:inline;
padding-left:5px !important;
padding-right:5px;
}
.carousel-button-left{
display:inline;
float:left;
width:53px;
margin-left:-53px;
}
.carousel-button-right{
display:inline;
float:right;
width:23px;
margin-right:-55px;
float:left;
}
You are over using display: inline and floats.
Here is some some simple css utilizing position: absolute (something which should be used sparingly) to set the left and right buttons. Then the centre div is free to do what it needs.
I have coloured the container div blue and the centre div green so you can see where they are sitting.
HTML
<div class="container">
<img src="http://www.buildgp.com/images/arrow_prev.png" class="carousel-button-left" />
<div class="centreContainer">
<ul>
<li>
<img src="zdjecia/r_hale/1/1.jpg" />
</li>
<li>
<img src="zdjecia/r_hale/1/2.jpg" />
</li>
<li>
<img src="zdjecia/r_hale/1/3.jpg" />
</li>
</ul>
</div>
<img src="http://www.buildgp.com/images/arrow_next.png" class="carousel-button-right" alt="right" />
</div>
CSS
.container {
width: 564px;
height: 128px;
padding: 0 53px;
background: #ccccff; /* blue */
position: relative;
}
.centreContainer {
background: #ccffcc; /* green */
height: 100%;
}
.centreContainer > ul {
padding:0px;
margin:0px;
}
.centreContainer > ul > li {
display: inline;
padding-left: 5px !important;
padding-right: 5px;
}
.carousel-button-left {
position: absolute;
left: 0;
top: 30px;
width: 53px;
}
.carousel-button-right {
position: absolute;
right: 0;
top: 30px;
width: 53px;
}
Demo
I'm having trouble with centering my full-width navbar with my fixed content area. The ul changes with browser or resolution.
here is a fiddle with my problem:
http://jsfiddle.net/fwyNy/
subject site
css:
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
width:auto;
padding-top:5px;
margin:0px 385px 0px auto;
float:right;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
}
and here is the html:
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
You should give the inner ul a position:relative, a width and then use margin: 0 auto
position:relative;
margin:0 auto;
width:980px; (for example)
http://jsfiddle.net/fwyNy/2/
(stretch the space of the 'result')
try
http://jsfiddle.net/Xxm76/34/
.lContent {width: 200px; border: 2px solid #000; border-right: none; float: right; position: relative;}
.rContent {width: 300px; border: 2px solid #000; border-left: none; float:left; position: relative;}
it d be cross-browser stable ??
Here is a basic example of how I would do it:
<div id="wrapper">
<div id="outer">
<div id="nav">
<ul>
<li>Free Ground </li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>555-5555</li>
</ul>
</div>
</div>
</div>
And the css:
#wrapper{
height: 5em;
background: #000090;
padding-top: 2em;
}
#outer{
width: 100%;
height: 3em;
background: #000;
}
#nav{
height: 3em;
background: #ccc;
width: 70%;
margin: 0 auto;
float: right;
}
#nav>ul>li{
width: auto;
list-style: none;
display: inline-block;
margin: 0 0 0 1em;
}
Fiddle: http://jsfiddle.net/fqTwN/