I have posted some of this code before, trying to get the sidebar links in the right places and look a special way, I have decided to go in a different direction with that. What I need now is know what I am supposed to do to get the div that I have labeled "content" next to the sidebar instead of below it. I've tried everything. The sidebar and the content div are in the same div together and I've tried displaying in inline, inline-block. Nothing works. I just want them next to each other and level. Can you help me out again? Thanks so much!
Code displayed here: http://jsfiddle.net/eNUpJ/11/
HTML
</div>
<div id="wholething">
<div id="sidebar">
<h3>Navigation Links</h3>
<div id="sidelinks">
<div id="buttons">Home
</div>
<div id="buttons">Biography
</div>
<div id="buttons">News
</div>
<div id="buttons">Music
</div>
<div id="buttons">Contact
</div>
</div>
</div>
<div id="content">
<p>News stuff and things</p>
</div>
</div>
</body>
CSS
#sidebar {
background: #464646;
width: 250px;
height: 500px;
margin-left: 50px;
border-radius: 15px;
position: relative;
}
h3 {
font-family:'Coda', cursive;
color: white;
background: #6B6B6B;
font-size: 24px;
text-align: center;
padding: 15px 0 8px 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#sidelinks {
font-family:'Armata', sans-serif;
width: 250;
font-size: 25px;
text-decoration: none;
color: white;
background-color: #4D4D4D;
padding: 10px;
line-height: 40px;
}
#buttons a {
text-decoration: none;
color: white;
}
#content {
position: relative;
width: 750px;
border-radius: 15px;
background: #464646;
}
#wholething {
display: inline;
}
Give both #content and #sidebar float: left. You should also remove display:inline from #wholething. Also, you should know that if you want to add anything below the #content and #sidebar - for instance, a footer, with a copyright statement or such - you'll need to give it clear:both, which will force it to be below the two floated divs.
Related
I'm trying to make the above text (home help customer etc) similar to the one below Home and all in green box with white text and hover effect but I am unable to add the green background and make the words display similar to the once below with a hover effect I have tried some things out but it did not help me out and also I have tried a lot to move the cart to the top right to make it look like a normal shopping website but it didn't work if you guys see any mistakes or suggestions to make it better I would really appreciate it as I am a beginner https://imgur.com/2Bhxzs2
Help fix the top header please refer the image link as it shows were exactly is the green box and all thank youthe image has the header of the website were there are different buttons like guest customer help etc and I am trying to make it like the one underneath in the green box with a hover effect
<html>
<head>
<title>Rajeshri Traders </title>
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="subheader">
<div class="container">
<p> CCTV Supplier</p>
Guest Consumer Download App
Help
</div>
</div>
<!--==main header==-->
<div id="main-header">
<!--logo-->
<div id="logo">
<span id="ist"></span><span id="iist"> Rajshri Traders</span>
</div>
<!--==search area==-->
<div id="search">
<form action="">
</form>
<input class="search-area" type="text" placeholder="Search here">
<input class="search-btn" type="submit" value="SEARCH">
<!--="user-menu"==-->
<div id="user menu">
</div>
<li>Cart
<li>Login
</div>
</div>
</div>
<!----=====navigation bar==--->
<div id="navigation">
<nav>
Home
New Arrivals
Products
Deals
Accesories
Order
</nav>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#wrapper {
font-family: tahoma;
}
/*logo styling*/
#main-header {
width: 100%;
height: 125px;
background: #93A7FF;
display: flex;
flex-wrap: no-wrap;
}
#main-header > div {
flex: 1 1 0;
}
#ist {
color: black;
font-size: 65px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
#iist {
color: black;
font-size: 45px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
/*searchinga area styling*/
#search {
padding: 20px;
margin-left: 50px;
text-align: center;
}
.search-area {
width: 350px;
height: 30px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
width: 65px;
height: 34px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
margin-left: 15px;
}
/*this is for user menu styling*/
#user-menu {
margin-top: 20px;
margin-right: 20px;
text-align: right;
}
#unser-menu ul {
list-style-type: none;
width: 100%;
}
#user-menu li {
display: inline-block;
padding: 0px 10px;
}
#main-header > div {
flex: 1 1 0;
}
/*this style is for navigation bar */
#navigation{
width: 100%;
height: 35px;
background: #1aaa1a;
float: left;
box-shadow: 10px 14px 45px 3px #1aaa1a;
}
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
To give a background colour to your 'home, help, customer etc' text, you need to refer to the element in which they are all included. In this case, they are all contained within the .container class. So by adding styling to the .container class, you'll be adding styling to the div containing the text in question.
Simply add a background colour to the .container class like this:
.container {
background: #1aaa1a;
}
As for the hover effect, you can specify the effect you want for each link of the 'home, help, container etc'. For example, if you want to change the colour of the text when you hover on it, you can do something like this
.container a:hover {
color: black;
}
The .container a is how you reference the links contained in your .container class.
Alright.So you need to see what styling you have applied to the text in the green box. you need to copy the styling you use in #navigation which is the container for everything in the green box. You have included your links in the green box in a nav element, you have then styled the nav element as follows:
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
You need to style your links in the .container div in the same way. The easiest way to do this would be to include your home, help, customer links in a nav element as follows:
<div class="container">
<p> CCTV Supplier</p>
<nav>
Guest Consumer
Download App
Help
</nav>
</div>
I am trying to create a 3 column webpage. My bullets for the unordered and ordered lists are not aligning with the corresponding text in the column. Also, for my middle column the text is scrunched together. How do I space the paragraphs apart?
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
}
#container {
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto;
/*will center your page*/
margin-right: auto;
/*will center your page*/
}
h1,
h2 {
text-align: center;
}
li {
text-align: center;
padding: 5px;
}
h4 {
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header {
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #navigation {
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content {
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #content #sidebar1 {
background-color: #ADA9A0;
float: left;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1 {
background-color: white;
min-height: 300px;
margin-bottom: 3px;
width: 50%;
float: left;
margin: 0;
}
#container #content #sidebar2 {
background-color: #ADA9A0;
float: right;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #footer {
padding-top: 1px;
border-top: 1px solid black;
}
.CR {
text-align: left;
position: fixed;
}
.Instructor h4 {
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a {
color: white;
text-decoration: none;
/*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover {
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="HTML.CSS.css" />
<title>My Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
Home
HTML/CSS
PHP
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li>Lectures</li>
<li>Syllabus</li>
<li>Helpful Videos</li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website.
<p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across
several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p>
</p>
</div>
<div id="sidebar2">
<h4> Homework and Projects </h4>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Welcome Button</li>
<li>2-column Webpage</li>
</ul>
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<h4>Copyright Natalie Fofanova </h4>
</div>
</footer>
</body>
</html>
Declare a line-height to the 2nd section.
Example
#second p {
line-height: 20px;
}
http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
text-align: justify;
text-align-last: left;
padding-left: 10px;
padding-right: 10px;
}
Add this to your CSS hope it will work
As your code should change like the below code:
#content ul{
margin:0;
padding:0;
display:block;
}
#content ul li {
text-align: center;
padding: 0px;
list-style-type:none;/* if you really wants bullets remove this line*/
}
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
line-height:20px;
}
#column1 p{padding:4px;}
.clearfix{clear:both;}
To change your min-height should be min-height: 320px; instead of 300px.
You want to more clarity in this question. please tell me we will suggest some more points.
i will update your code jsfiddle.
Demo
p{
padding: 0 0 10px 0;
}
just padding down would make sure space between all paragraph
I have the following view running on Razor/MVC:
<div class="body">
<div class="content-wrapper">
<div class="treewindow">
<div class="treewindowtitle">
TREEWVIEW TITLE
</div>
<div class="treewindowcontent">
<div id="EquipmentTree">
<ul>
<li><a>Equip Class1</a>
<ul>
<li><a>Equip1.1</a>
<ul>
<li><a>Equip1.2</a></li>
<li><a>Equip1.3</a></li>
</ul>
</li>
<li><a>Equip Class2</a>
<ul>
<li><a>Equip2.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<p>Left Text 1</p>
<p>Left Text 2</p>
<p>Left Text 3</p>
</div>
</div>
The idea is to have a left positioned treeview control in order to navigate and on the right side of main screen the data that will appear according to the treeview selection. This code is done in that way as some data is loaded dinamically (all logic was removed to isolate the problem I have).
I´m using the following .css file:
html
{
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body
{
background-color: #fff;
font-size: .85em;
border-top: solid 5px #000;
font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
font-style: normal;
font-variant: normal;
color: #000066;
margin: 0;
padding : 0;
}
a {
color: #000066;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
.body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
/* Treeview control
----------------------------------------------------------*/
.treewindow
{
float: left;
width: 200px;
color: #495677;
background-color: #efeeef;
}
.treewindowtitle
{
color: #fff;
background-color: #495677;
text-align: center;
font-size: smaller;
}
.treewindowcontent
{
width: 200px;
height: 400px;
overflow-y: scroll;
overflow-x: scroll;
color: #495677;
background-color: #efeeef;
}
My problem is to keep same background color on both screens. It happens that when the window opens at left it destroys right side of screen background. You can see that here at Fiddle: I want both sides to have same background color.
Hope someone can help me with that...
Thanks.
Two possible techniques you might give a try:
1) Use Javascript (or jQuery or what have you) to equalize the heights of each containing div. For example, see this DEMO.
2) Retool your html so that either:
it uses one of the layout techniques that you'd find here.
sets heights to 100%, like in this trick.
remove the floats and use table-cell. See this.
I prefer that last one whenever possible. Hope this helps!
In each list item I have a text box within a div element.
<html>
<body>
<!-- Window -->
<div id="sample_container_id">
<div class="bucket" id="defaultBucket">
<h3>Default Bucket</h3>
<input type="button" value="Add" class="button">
<div class="innerBucket">
<ul id="tasks">
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
<li>
<div class="TaskDiv">
<input type="text" class="TaskTextInput">
</div>
</li>
</ul>
</div> <!-- innerBucket -->
</div> <!-- defaultBucket -->
</div>
</body>
</html>
This is the result:
body
{
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p
{
color: #333;
}
#sample_container_id
{
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
margin: 0px;
}
.innerBucket
{
width: 290px;
height: 355px;
margin-top: 40px;
margin-left: 5px;
position: relative;
background-color: white;
}
.bucket
{
width: 300px;
height: 400px;
background-color: #ddd;
position: absolute;
}
.bucket h3
{
float: left;
padding-left: 10px;
padding-top: -10px;
}
.bucket ul
{
margin: 0;
padding-left: 30px;
position: relavtive;
list-style: none;
}
.bucket ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
display: block;
position: relative;
}
.bucket .button
{
background-color:#fbb450;
border:1px solid #c97e1c;
float: right;
margin: 5px;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:bold;
padding:2px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
Result
As you may notice the first item is indented, and I would like the list items to all be aligned on the left. How do I fix this with the CSS (there probably is a lot of things wrong with my CSS, I was trying everything)?
EDIT
I added some more code. You should be able to replicate the problem now.
I didn't want to post a wall of code :)
Solution
I found the solution to the problem. The problem was actually the <h3> element. The bottom margin was forcing the first element off to the side.
Adding this fixed the problem:
.bucket h3
{
...
margin-bottom: 0;
}
Don't float the divs, if you do make sure to clear them or you get
what FakeRainBrigand got in his pen.
Spell relative right For that
matter take the positioning out of that code, it's pointless.
list items by definition are block elements, you don't need to declare
that either.
Close your input tags.
The float is likely the issue, pushing the divs against some invisible element.
.TaskDiv
{
margin: 0;
padding: 0;
}
ul
{
margin: 0;
padding-left: 30px;
list-style: none;
}
ul li
{
margin: 0;
padding: 0;
text-indent: 0.5em;
margin-left: -0.5em;
}
Example: http://jsfiddle.net/calder12/Yw4tB/
I found the solution to my own problem. The issue was the margin of the header forcing the div over (see the end of my question). The solution was simple once I figured that out.
Simply adding this to the h3 styling fixed my problem:
margin-bottom: 0;
I'm trying to make a sidebar which on a website which will have a "panel" in it containing
contact info. The problem is that on smaller screens, the text overflows the background.
Here is the CSS, where #navigation is the outer div and the inner div is called .innerPanel HTML to follow:
#navigation{
position: absolute;
left: 1.5625em;
top: 1.5625em;
bottom: 1.5625em;
display: block;
width: 12.5em;
background: navy;
border-right: 1px solid navy;
text-align: center;
background: #B6D2F0;
padding: 5px;
color: #4A4A49;
overflow: hidden;
}
#navigation .innerPanel{
min-height: 200px; /* supply current height here */
height: auto;
overflow: auto;
}
.titleHead{
display: block;
padding-top: 0.9em;
overflow: auto;
}
/* inverted corners for the links */
#navigation #links {
position: relative;
padding-top: 30px;
}
#navigation #links div div div h3{
border-top: 1px solid navy;
border-bottom: 1px solid navy;
color: navy;
padding: 0px;
margin: 0px;
margin-top: 1px;
line-height: 1.2em;
}
#navigation div div div div ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navigation div div div div ul li{
text-align: center;
}
#navigation div div div div ul li a{
display: block;
text-decoration: none;
font-weight: bold;
color: #B6D2F0;
padding: 0px;
padding-left: 0;
line-height: 2.5em;
background: navy;
border-bottom: #D8F4F2 1px dashed;
}
#navigation div div div div ul li a:hover{
display: block;
text-decoration: none;
font-weight: bold;
color: #D8F4F2;
background: #0000A2;
}
#navigation div div div div ul #last a{
border-bottom: 0px;
}
`
Here is the HTML fragment. The nested div tags were for rounded corners, which were "nixed" by the client
<div id="navigation">
<div id="logo" class="box">
<div>
<div>
<div style="text-align: center;">
<img src="./images/pictures/cbk-logo-sm.gif" alt="Logo" />
</div>
</div>
</div>
</div>
<div id="links" class="box">
<div>
<div>
<div> <ul>
<li id="home">
Home
</li><li>
Applications
</li><li id="last">
About
</li>
</ul><div class="innerPanel"><div class="innerMost"><h4 class="titleHead">
Contact Information</h4>
<h5 style="margin: 0.8em 0 0 0; padding: 0;">City Office (September-June)</h5>
<p style="font-size: 0.75em; margin: 0; padding: 0;">
<em>Phone:</em> 555-555-5555<br />
<em>Fax:</em> 555-555-5555<br />
<em>Email:</em> email#provider.com<br />
<em>Address:</em> 123 Main Avenue Somewhere, IL 11234
</p>
<h5 style="margin: 0.8em 0 0 0; padding: 0;">Camp (July & August)</h5>
<p style="font-size: 0.75em; margin: 0; padding: 0;">
<em>Phone:</em> 987-654-3210<br />
<em>Fax:</em> 123-456-1234<br />
<em>Email:</em> email#provider.com<br />
<em>Address:</em> 456 Centre Road, Nowhere, AL 67891
</p></div></div> </div>
</div>
</div>
</div>
</div>
I need a cross-browser solution to make innerPanel dynamically add a scrollbar to itself so that on smaller screens, the content is clipped but accessible via scroll...
Preferably, the solution should be pure CSS.
Any ideas?
EDIT: I apologize for the ambiguity. I have a sidebar, called #navigation. It contains a logo, the menu and the contact information. I want the contact info to scroll where needed.
Everything else seems to display normally on 800x600 screens and up.
EDIT: As it stands now, innerPanel is a fixed height. I would like it to grow when possible, and if there is enough room, eliminate the scrollbar.
Please note that there is an HTML div not mentioned in the CSS, which is contained inside of innerPanel.
I am a little unclear what you are asking, but it seems to me you either want overflow:auto on the #navigation element, or depending on your content and why it has a fixed height:
#navigation .innerPanel {
max-height: 200px; /* supply current height here */
height: auto;
overflow: auto;
}
DOES NOT WORK IN IE6
IE6 does not support max-height.