We Keep Coding

Make a div a wide rectangle with a circle in the middle

How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:
I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.

You will need to play with exact height and size, but this is a possible take on your problem
.menu {
background: darkgray;
padding: 1rem 0;
margin: 5rem;
text-align: center
}
.menu::after {
content: '';
background: darkgray;
border-radius: 50%;
padding: 5rem;
}
<nav class="menu"></nav>

You can try it with flexbox... I don't know, perhaps you have to build a little bit on it...but it's possible
.nav {
width: 100%;
height: 35px;
display: flex;
justify-content: center;
background-color: grey;
margin-top: 100px;
}
.logoContent {
height: 130px;
width: 130px;
border-radius: 130px;
background-color: grey;
margin-top: -50px;
}
<div class="nav">
<div class="logoContent"></div>
</div>

try this
html
<div id="rect">
<div id="cir">
</div>
</div>
css
#rect {
width: 500px;
height: 50px;
background: green;
margin: 100px;
}
#cir {
width:150px;
height: 150px;
background: green;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -50px;
}
see this https://jsfiddle.net/9rtoqpjc/

If you just trying for shape, then you can use gradients.
div{
width: 400px;
height: 100px;
color: #333;
background-image: radial-gradient(circle, currentColor 50px, transparent 0),
linear-gradient(transparent 30%, currentColor 30%, currentColor 70%, transparent 60%);
}
<div></div>
Working Fiddle

You should first of all get in confidence width css properties of div.
I suggest you to look here: w3schools.com
Anyway this is an example of code on what you can start working:
div{
background-color: gray;
}
#rectangle{
margin-top: 100px;
width: 500px;
height: 40px;
}
#circle{
position: relative;
width: 200px; /* radiant*2 */
height: 200px; /* radiant*2 */
border-radius: 50%;
left: 150px; /* rectangle_width/2 - radiant */
top: -80px; /* rectangle_height/2 - radiant */
}
#logo{
position: relative;
top: 36px; /* radiant - img_heigth/2 */
left: 36px; /* radiant - img_width/2 */
}
<div id="rectangle">
<div id="circle">
<img id="logo" src="http://findicons.com/files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
</div>
</div>

try this
html
<div class="header-area">
<div class="header-main">
<div class="menu-left">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
</ul>
</div>
<div class="logo">
<img src="#" />
</div>
<div class="menu-right">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
<li class="menu-3">Menu 3</li>
</ul>
</div>
</div>
</div>
css
.header-area {
width: 100%;
margin: 34px 0px;
}
.header-main {
width: 100%;
height: 60px;
position: relative;
background-color: #272727;
}
.menu-left {
width: 40%;
float: left;
}
.logo img {
width: 100%;
position: relative;
top: 38px;
vertical-align: middle;
}
.header-main ul li {
display: inline-block;
padding: 5px;
text-align: center;
}
.header-main ul li a {
color: #fff;
}
.logo {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: #272727;
color: #fff;
margin-left: auto;
margin-right: auto;
top: -27px;
float: left;
}
.menu-right {
width: 40%;
float: left;
}
see this https://jsfiddle.net/onn3b9z7/

You can try and use border-radius: 70% in your css file on a rectangular div and see if that works.

How to put <ul> around image in css

So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.

Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>

Add image after one and two. And .list-menu li float:left; display:block;

Problems with positioning and z-index

I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});

use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position

The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/

Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"

jQuery slideshow button that coordinates with picture #?

UPDATE: I figured it out thank goodness... So the key was to make the position: absolute and take out the bottom: 400px on the last thing on my CSS.
I'm trying to make a slide show of images that fade in and out when the circular buttons are clicked. There are 4 pictures and will be 4 circular buttons, so if I click the 3rd button the 3rd pic will fade in. However, my code isn't doing it properly. I reckon I'm using index() improperly? The pictures aren't appearing. They just fade in halfway through and then fade back out and then all the pictures disappear altogether. I think it's because of my position:relative on the ".pic"s. Help please!
Here's my HTML:
<body>
<div class="wrapper">
<div class="image_frame">
<div src="" class="first"></div>
<img src="images/galaxy.jpg" class="gala pic">
<img src="images/aurora.jpg" class="auro pic">
</div>
<div class="buttonholder">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
Here's my CSS:
html, body {
background: black;
margin: 0;
padding: 0;
}
.wrapper {
width: 800px;
margin: 0 auto;
padding: 0;
}
.image_frame {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
}
img {
width: 700px;
height: 400px;
padding-top: 10px;
float: left;
}
.gala {
display: block;
position: relative;
}
.buttonholder {
display: block;
width: 400px;
margin: 0 auto;
text-align: center;
}
ul li {
list-style: none;
height: 3px;
width: 3px;
float: left;
background: #efefef;
padding: 10px;
margin: 0 5px;
border-radius: 100px 100px 100px 100px;
cursor: pointer;
text-indent: -9999px;
}
.button_normal {
background: #efefef;
}
.selected {
background: grey;
}
.pic {
position: relative;
bottom: 400px;
}
And here's my JS
$('ul li').click(function(){
$('img').fadeOut(300);
var listPos = $('ul').index(this);
$('img').eq(listPos).fadeIn(300);
});

To minimally change your code replace your code
var listPos = $('ul').index(this);
with this:
var listPos = $('ul li').index(this);
or, better:
var listPos = $(this).index();
To answer the second part of your question you might want to refer to this answer: How to overlay images, or this Image over Image CSS

3 column layout auto middle col width

I am trying to make a 3 column layout webpage with percentage wrapper width, fixed (pixels) left and right side width and a varying middle column width but i cannot get it to work for the middle column. Here is the source:
html
<aside class="left">
<span>Categories</span>
</aside>
<section>
<span>Main</span>
</section>
<aside class="right">
<span>Test</span>
</aside>
css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.container > aside.left {
float: left;
width: 197px;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: auto;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 200px;
}

Have you looked at the flexible box model? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

If you don't have to support IE7, this will work:
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
min-width: 600px;
}
.container > aside, .container > section {
display: table-cell;
width: auto;
}
.container > aside.left {
width: 197px;
border-right: black dashed 3px;
}
.container > aside.right {
background-color: #005f98;
width: 200px;
}

You could replace your floats with absolutely positioned sidebars:
<aside class="left">
<span>C</span>
</aside>
<section>
<span>M</span>
</section>
<aside class="right">
<span>T</span>
</aside>
And
.left {
position: absolute;
top: 0;
left: 0;
width: 50px;
display: block;
background: #ffe;
height: 100%;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 50px;
display: block;
background: #fef;
height: 100%;
}
section {
display: block;
margin: 0 50px; /* Margin sized to match the sidebars */
background: #fee;
}
Live: http://jsfiddle.net/ambiguous/puPbu/
The colors and sizes are just to clarify where everything is. If you're going to put a wrapper <div> around the whole thing then you'll want to have position: relative on it to get the absolutely positioned sidebars in the right place.

in CSS3 you can use
#multicolumn{
column-count: 3
}
check it on http://jsfiddle.net/ilumin/w7F7c/
reference: http://www.quirksmode.org/css/multicolumn.html

Try setting the widths according to percentages, so for example:
.container > aside.left {
float: left;
width: 31%;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: 31%;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 31%;
}
Thats how i've overcome this problem before.

If you specify width and float for the left and right column, the middle column will automatically fill up the gap:
http://jsfiddle.net/xHnDX/4/
As you can see, the content div actually overlaps the side divs, although the content will stay between them. If you like, you can add an extra container to compensate for the width of the content div as shown here:
http://jsfiddle.net/YauQc/