I Need to float two similar images to left and right of section container without affecting Div container. I need them to occupy the left and right side of the green boxy without affecting the position of the red box or overlapping.Please help. Heres my code:
Html:
<!Doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Envy</title>
<link rel="stylesheet" href="Envy.css">
</head>
<div id="M_wrap">
<body>
<div id="F_head">
<header id="M_head">Nhere</header>
<nav id="M_nav">
<ul>
<li class="Esec">New in stock</li>
<li>Men</li>
<li>Women</li>
<li>Children</li>
<li>Accessories</li>
</ul>
</nav>
</div>
<section id="M_section">
<img class="SE1" src="Bg2.jpg">
<img class="SE2" src="Bg2.jpg">
<div id="S_wrap">
</div>
</section>
</body>
</div>
</html>
Css:
body{
}
#M_wrap{
background-size:cover;
width:70em;
margin:.8em auto;
}
#F_head{
width:100%;
margin:.2em auto;
}
#M_head{
color:#000000;
font: Italic bold 80px/50px "Times New Roman" Arial, Tamoha;
text-align:center;
text-shadow:2px 2px #33ff00;
text-decoration:underline;
}
#M_nav{
height:3em;
width:37.5em ;
margin:2em auto;
background-color:black;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
word-spacing:80px;
text-align:center;
font:Italic bold 30px/20px Times "Times New Roman", tamoha;
}
#M_nav ul li{
display:inline;
}
li.Esec{
word-spacing:0px !important;
}
#M_nav li a {
display:inline-block;
padding: 0px 15px;
font-weight:bold;
border-right: 1px solid #ccc;
}
#M_nav a:link{
color:white;
font:Italic bold 30px/40px Times "Times New Roman", tamoha;
text-decoration:none;
}
#M_nav a:hover {
color:white;
text-shadow: 2px 2px black;
text-decoration:underline;
color:#33ff00 !important;
}
#M_nav a:active{
color:red;
}
#M_nav a:visited{
color:white;
text-shadow:2px 2px black;
}
#M_section{
margin:-3.75em 0 0 0;
width:100%;
height:50em;
border-style:solid;
border-color:#33ff00;
}
#S_wrap{
margin:3em auto;
width:80%;
height:85%;
position:center;
border-style:solid;
border-color:red;
}
Something like this?
Here is part of CSS I changed:
.SE1 {
float:left;
}
.SE2 {
float:right;
}
#S_wrap{
margin:0 auto 3em auto;
/* didn't touch rest of rules you have for this ID */
}
Related
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).
Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}
This is the beginning of the HTML code. Notice I put the div"dropdown" in the element in order to add the drop down button into my fixed navigation bar I learned how to create before learning the dropdown button. Another issue with the added button is the hover on the other list items is not flush to the bottom of the nav bar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="main.css" rel="stylesheet"/>
<title>Vasilios Lambos</title>
</head>
<body>
<header role="banner">
<div id="fixed">
<nav role="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>
<div class="dropdown">
<button class="dropbtn">Process</button>
<div class="dropdown-content">
Research
Exploration
Testing
</div>
</div>
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<img src="IMG_1677.jpg" width="200" height="200"/>
<h1>Vaslios Lambos</h1>
<p>Industrial and Interaction Designer</p>
<p>Always staying hungry to learn new and inspiring ways to improve my creative process. I utilize design thinking, research methods, and ethonography to explore user experience and services. Core hard skills consist of user interface design, product rendering, and testing.</p>
</div>
<div class="pics">
<img src="VL-Logo.png" width="200" height="200"/>
</div>
<div class="info">
<div class="container">
<h3>Overview</h3>
<p> ### </p>
</div>
</div>
<div class="footer">
<h3>Soft & Hard skills</h3>
<ul>
<li>Adobe Suite</li>
<li>Axure RP</li>
<li>HTML/CSS/Javascript</li>
</ul>
</div>
</body>
</html>
Below is the CSS code for how to style the dropdown and below that you can find the #fixed class for the nav bar.
#charset "UTF-8";
#font-face {
font-family: Verdana, Geneva, sans-serif;
}
body {
font-family:Verdana, Geneva, sans-serif;
background-color: #FFF;
}
*{margin:0;padding:0;}
.dropbtn{
background-color: #999;
color:white;
padding: 20px;
font-size: 11px;
font-weight:bold;
border: none;
cursor: pointer;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
z-index:-3;
}
.dropdown{
position:relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{
background-color:#3C6;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown:hover .dropbtn{
background-color:#3C6;
}
#fixed ul{
position:fixed;
top:0px;
width:100%;
z-index:9999;
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color: #999;
}
nav li{
float:left;
}
nav li a{
display:inline-block;
color: white;
font-size: 11px;
font-weight: bold;
padding:20px;
text-transform:uppercase;
text-decoration:none;
}
nav a:hover {
background-color: #3C6;
}
div.jumbotron {
margin-top:53px;
margin-left:auto;
margin-right:auto;
padding:10px;
height:500px;
max-width:100%;
color:white;
text-align:center;
background-color:#000
}
.jumbotron p{
width:500px;
margin-left:inherit;
margin-right:inherit;
}
.jumbotron img {
border-radius: 50%;
margin:inherit;
}
.pics{
/*float:right;*/
display:inline;
height:232px;
width:232px;
padding:0;
margin:0;
/*z-index:-1;*/
}
.pics img{
padding:15px;
border:1px solid #ccc;
background-color: #eee;
width:200px;
height:200px;
}
div.info {
max-width:100%;
background-color: #000;
color:white;
padding:20px;
height:400px;
}
div.footer{
max-width:100%;
background-color:#000;
color:white;
height:400px;
padding:20px;
}
The red bar is overlapping the topbar when it should be right below it, also even though I set the width to be 100% it's not extending the whole way across. I copied the CSS code from the topbardiv CSS, but it still wasn't working properly.
Image:
Code:
<head>
<title>Grace's WRAL</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin:0;
}
#topbar {
background-color:#0C1F2F;
width:100%;
height:95px;
}
.fixedwidth {
width:1095px;
margin:0 auto;
}
#logodiv {
padding:10px 0 0 45px;
float:left;
}
#topmenudiv {
}
#topmenudiv ul {
background-color:none;
padding:8px 0 0 35px;
margin:0;
height:20px;
}
#topmenudiv li {
list-style:none;
color:#008ECD;
font-size:0.9em;
font-family:Gill Sans;
border-right:1px solid #008ECD;
padding: 0 6px 0 10px;
float:left;
background-color:none;
}
#alertdiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 334px 0 334px;
font-size:0.9em;
}
#alertdiv p {
float:right;
margin-top:1px;
font-family:Gill Sans;
padding:0 5px 0 5px;
}
#signindiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 271px 0 271px;
}
#signindiv p {
margin-top:1px;
font-size:14px;
font-family:Baskerville;
margin-top:-8px ! important;
}
#searchdiv {
float:right;
margin-top:-33px ! important;
padding:0 55px 0 55px;
}
#searchdiv input {
height:15px;
width:190px;
background-color:#093B51;
border:none;
font-size:0.9em;
padding:5px 6px 6px 5px;
background-image:url("file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Search_Icon.png");
background-repeat:no-repeat;
background-position:right center;
}
#searchdiv input:focus {
background-color:#FFFFFF;
}
#searchdiv input::-webkit-input-placeholder {
color: white;
text-transform:none;
font-size:13px;
padding-left:5px;
}
#topicmenudiv {
}
#topicmenudiv ul {
background-color:none;
margin:0;
}
#topicmenudiv li {
list-style:none;
float:left;
color:white;
padding:15px 0 0 15px;
font-family:Gill Sans;
font-size:16px;
}
#currentweatherdiv {
float:right;
font-size:33px;
padding:8px 8px 0 0;
color:white;
}
#currentweatherdiv img {
float:right;
padding-top:4px;
}
#currentweatherimgdiv {
float:right;
padding:10px 50px 0 0;
}
.break {
clear:both;
}
#newsbardiv {
background-color:red;
width:100%;
height:95px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="topmenudiv">
<ul>
<li>Noticias</li>
<li>Instant Savings</li>
<li>Classifieds</li>
<li>Jobs</li>
<li style="border-right:none">Real Estate</li>
</ul>
</div>
<div id="alertdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Alert_Icon.png" /> <p>Alert</p>
</div>
<div id="signindiv">
<p>Sign In</p>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div id="logodiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/WRAL_logo.png" />
</div>
<div id="topicmenudiv">
<ul>
<li>News</li>
<li>Weather</li>
<li>Sports</li>
<li>Business</li>
<li>Consumer</li>
<li>Health & Life</li>
<li>Entertainment</li>
<li>Video</li>
</ul>
</div>
<div id="currentweatherimgdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Current_Weather.png" />
</div>
<div id="currentweatherdiv">
65 <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Degrees_Icon.png" />
</div>
<div class="break"></div>
<div id="newsbardiv">
<div class="fixedwidth"></div>
</div>
</div>
</div>
</body>
</html>
The red bar is nested inside a div with the class fixedwidth, which unsurprisingly has a fixed width of 1095px. So the width of the red bar can only be 1095px.
To debug a problem such as this, simply view it in Chrome, press F12, press Ctrl-Shift-C, and click on the element you want to inspect. It will explain what's going on.
One is issue is because .fixedwidth has a width of 1095px so your div can't be 100% because since it's nested 100% = 1095px.
Change .fixedwidth to this,
.fixedwidth {
width:100%;
margin:0 auto;
}
CODEPEN DEMO
So I have a list, but I want them to act as "blocks" so the whole thing is clickable and the background changes color. But I can not have both inline and block as display in css. How do I fix this?
The links at the top.
http://serenex.hostzi.com/
HTML
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title>Serenex - Index</title>
<head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<a href="http://www.http://serenex.hostzi.com/"> <img src="images/logo1.png" border="0" />
</a></div>
<div id="inbar">
<ul id="topbar">
<li>Home</li>
<li>News</li>
<li>Play</li>
<li>Vote</li>
<li>Forums</li>
</ul>
</div>
</div>
<div id="midsection">
</div>
</div>
</body>
</html>
css
body{
background:#363636;
}
#wrapper{
width:900px;
height:2000px;
margin: 0 auto;
}
#top{
width:100%
height:150px;
background:white;
border: 1px solid black;
}
#inbar{
height:30px;
width:100%;
background:#dedede;
border-top: 1px solid #b0b0b0;
}
#topbar{
position:relative;
top:-10px;
margin-left:-35px;
}
#topbar{
display: block;
}
#topbar li{
display:inline;
padding-left:20px;
padding-right:20px;
border-right: 1px solid black;
padding-bottom:5px;
padding-top:6px;
}
#topbar li a{
color:#363636;
display:block;
font: bold 14px arial, sans-serif;
display:inline;
}
Set the padding to the anchor a not the list item li. And it has to have the display: block.
This would cause it to jumb to a new line, which is why we use float: left on the list-item li and not display: inline.
#topbar li{
float: left;
border-right: 1px solid black;
}
#topbar li a{
color:#363636;
display:block;
padding: 20px 20px 5px 6px;
font: bold 14px arial, sans-serif;
}
But I can not have both inline and block as display in css
There is a way to have an element placed as an inline element and that behaves as a block element:
display: inline-block