I'm making a game website, and I'm using the DIV tag for the genre menu. While making the menu, I found that I am not able to set the size of the DIV elements for the menu. I'm using if that matters.
HTML:
<div class="center">
<div class="menu" onclick="location.href='all.html';">All</div>
<div class="menu" onclick="location.href='action.html';">Action</div>
<div class="menu" onclick="location.href='arcade.html';">Arcade</div>
<div class="menu" onclick="location.href='racing.html';">Racing</div>
<div class="menu" onclick="location.href='rpg.html';">PRG</div>
<div class="menu" onclick="location.href='skill.html';">Skill</div>
</div>
<div class="center">
<div class="menu" onclick="location.href='strategy.html';">Strategy/Puzzle</div>
<div class="menu" onclick="location.href='shooting.html';">Shooting</div>
<div class="menu" onclick="location.href='sports.html';">Sports</div>
<div class="menu" onclick="location.href='gamegarage.html';">GameGarage</div>
</div>
CSS:
body
{
background-color:black;
color:rgb(0,255,0);
font-family:"Comic Sans MS";
font-weight:bold;
}
.center
{
text-align:center;
}
.menu
{
font-size:1.35em;
display:inline;
width:250px;
cursor:pointer;cursor:hand;
border:5px solid #00FF00;
}
div
{
margin-bottom:15px;
}
Does anyone know what I'm doing wrong? Thanks for all the help!
try changing your CSS for your menu tag to this:
.center .menu
{
font-size:1.35em;
display:inline-block;
width:250px;
cursor:pointer;cursor:hand;
border:5px solid #00FF00;
}
also you should change your onclick events to window.location.href = "link"
Use
display:block
or
display:inline-block
instead of inline in your menu class.
To fix the width of a div, you need to set
.menu {
display: inline-block;
Now you can define div's width, height and vertical-align.
width: 250px; height: 1.4em; /* height: auto inherit 130px */
vertical-align: middle;
}
If you have a outer box '.center', that's boxed or inline-boxed, but will be much higher as a .menu is, it will be aligned in middle of the outer '.center' box.
Related
I've been trying to make a page in which there will be one image that needs to be the same height as the viewport while the width would stretch accordingly. The img needs to be centered.
Here's the tricky part (for me anyway): I would need to place a div at the bottom of that image which would have some buttons. I thought that it would be best if I can set the width of that div to be the same as the width of the img so that whenever the screen size changes, everything would stay at the same position.
Here is what I have so far in the HTML:
<div id="main_container">
<div class="exercises">
<img class="bg" src="image.png"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
So: height is always == viewport, width is variable.
I thought about placing a div as parent to the img, but I would still need to make that div somehow fit the size of its child (the image).
I've read some posts here, but none were too related to my issue.
edit:
I'm sorry if I wasn't clear enough. I've made an illustration of what the issue is. I hope this helps:
You can try this:
#main_container {
width:600px;
}
.exercises {
width: 100%;
}
.exercises img.bg {
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.footer .buttons {
width: 100%;
}
.buttons {
padding:0;
margin:0;
}
.buttons li {
width:100%;
height:50px;
border:1px solid #000;
list-style:none;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Obviously, edit the image URL to your own :)
Consider it a start. Change size of image in inspector and see what happens.
.exercises{background: silver; display: inline-block;}
img{ border: 1px solid black;}
ul{
margin: 0;
padding: 0;}
li{
float: left;
width: 33%;
background: #ccff00;
}
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://www.techwibe.com/wp-content/uploads/2015/04/chrome_medium.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
Try this one may help
<div id="main_container">
<div class="exercises">
<img class="bg" src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg"/>
<div class="footer">
<ul class="buttons">
<li>Reset</li>
<li>Next</li>
<li>Sortie</li>
</ul>
</div>
</div>
</div>
<style>
#main_container{
/*Make the container follow the width of body*/
position:relative;
width:100%;
}
#exercises{
/*Make the this div follow the width of #main_container*/
width:100%;
}
.bg{
/*Make the the image follow the width of #exercises*/
width:100%;
height:auto;
}
.buttons{
/*modifying ul to the bottom position*/
position:absolute;
width:100%;
bottom:0;
}
.buttons li{
/*Style the button whatever you want*/
list-style:none;
margin:10px 2%;
padding:8px 12px;
background:orange;
width:20%;
color:white;
float:left;
}
</style>
Run code snippet to see the result
I apologize again if I've set the question in a vague manner. It was a bit complicated (for me) to formulate it. And thanks to the people who tried to help me with their solutions.
However, I decided to got with JQuery on this one and set the sizes dynamically.
This is the code with which I managed to set the width of the parent div the same size as the width of it's child img (after the img's height has been rescaled relative to the window height):
var imageResize = function () {
var screenHeight = $(window).height();
$('.bg').height(screenHeight);
var resizedImgWidth = $('.bg').width();
$('.exercises').width(resizedImgWidth);
}
$(window).resize(imageResize);
$(window).load(imageResize);
As always, anyone is welcome to give their two cents regarding my solution. (perhaps its very heavy and could be better optimized. I'm new at JS, so feel free :))
This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}
so I am starting to learn CSS and I can't wrap my head around this.
I want to make a horizontal navigation bar composed of 3 images. These are the beggining image, the "filler image", and the ending image.
Here is a picture for further reference:
I really don't know how to go about doing this and I havn't been able to find any examples on the web for this.
Thanks in advance!
I'm preparing a jsfiddle demo for you, hang on.
It's pretty ugly, but it should give you a starting point on how to tweak it so it works as you wanted. http://jsfiddle.net/T9FXD/
Markup:
<div>
<div class="first"></div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="last"></div>
CSS:
div {width:600px;height:61px;}
div.first {background-color:red; width:20px;float:left;}
li {display:inline; color: #fff}
nav {width: 500px; background:url('http://placekitten.com/g/1/61') repeat-x top; float:left;}
div.last {background-color:green; width:20px;float:left;}
I'm an hour late to this party, but most of these answers are markup overkill. An unordered list of links has all the styling hooks you need. Basically, padding left on the first li and put in the left image. Padding right on the last li and put in the right image. Main image on the a.
html:
<ul class="example">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
css:
ul.example {
margin:0;
padding:0;
font-size:0; /*this gets rid of the gaps between the items*/
}
ul.example li {
display:inline-block; /*this puts them all in a row*/
margin:0;
}
ul.example li:first-child {
padding-left:10px; /*set this to the width of your left image*/
background-image: url(http://dummyimage.com/10x61/f00/fff);
background-repeat:no-repeat;
}
ul.example li:last-child {
padding-right: 10px; /*set this to the width of your right image*/
background-image: url(http://dummyimage.com/10x61/00f/fff);
background-repeat:no-repeat;
background-position: top right;
}
ul.example li a {
font-size:16px; /*important to set this, as the ul has 0 height text*/
display:block;
height:61px;
line-height:61px;
text-align:center;
width:100px;
background-image: url(http://dummyimage.com/1x61/0f0/fff);
}
http://jsfiddle.net/EKacC/
HTML:
<div class="wrapper">
<div class="firstImage">
<!-- no content, simply assign a background-image -->
</div>
<div class="headerContent">
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<!-- as many as items as you have -->
</div>
<div class="lastImage">
<!-- no content, simply assign a background-image -->
</div>
</div>
CSS:
.firstImage {
float: left;
background-color: red;
width: 50px;
height: 150px;
}
.lastImage {
background-color: blue;
float: left;
min-width: 50px;
height: 150px;
}
.headerElement {
float: left;
background-color: yellow;
width: 50px;
height: 150px;
border: 1px solid black;
}
Not the most elegant solution, but should do it for the beginning. There are - of course - more elaborate solutions... but I think this might work as well for you at the moment.
EDIT
Here is the above markup and css as a working example. I've put borders around the inner (yellow) cells for better visibility.
Stick with using <div> elements for this. Even though tables handle it well, it's more depreciated as they load slower.
It's literally as you depicted the image, with 3 main boxes.
HTML:
<div class="element1"></div>
<div class="element2">
<ul>
<li>Home</li>
<li>About</li>
<li>Forum</li>
<li>Content</li>
</ul>
</div>
<div class="element3"></div>
CSS:
When you have empty div elements, be sure to set dimensions within CSS so that it can show the image you'd like to display.
.element1, .element2 {
width:10px; height:100px;
}
For the image itself.
background:url('...') no-repeat;
I've tried numerous of things to fix this. I cannot seem to get the nested div inside the parent div without having to use margin. I'm trying to get it in the regular way which is position:relative on parent and position:absolute on nested. It's not working though, anybody know why?
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
Portfolio
About
Contact
</div>
<div id="headerPro">
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
.logo {
text-align: center;
padding-top: 35px;
}
#nav {
position:absolute;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
}
It's hard to tell what exactly you want it to look like, but maybe I got you right:
I revised your HTML code to use ul for the nav which is best practice:
<div class="header">
<div class="logo">
<img src="/images/logo.png" alt="logo"/>
</div>
<ul id="nav">
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="headerPro">
</div>
</div>
With that your css code could look like that:
.logo > img {
display: inline-block;
width: 96px;
height: 82px;
}
#nav {
position:absolute;
list-style-type: none;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav > li {
display: inline;
}
#headerPro {
position:absolute;
top: 35px; /* assuming you want this to line up with the logo */
right: 0;
width:100px;
height:100px;
background-color:red;
}
Here is a demo.
See this fiddle
Example
I have made two changes added a float:left to the logo css:
.logo {
float:left;
}
and removed the position:absolute from the header pro css
Your div is flowing outside the header block because of the logo div, if you make that float left (as I have done in the fiddle) the Red Div will move up.
It would help if you could explain exactly where you want the #HeaderPro div..
Apparently the browser positions your div#headerPro just below the previous(sibling) div. If you want it to be part of the parent div, add top:2% to position the red div in the top right corner of the black div.
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
top: 1%;
}
#container {
background-color: #CCC;
height:100px;
}
.clear-fix
{
overflow: hidden;
_height:1%;
}
#navigation {
float: right;
margin-right: 10px;
background-color:Aqua;
}
#content {
float: left;
margin-left: 10px;
background-color:Orange;
}
#content div{display:inline; float:right;}
#content a {float:right; display:inline;margin-right:5px;}
<body style="direction:rtl">
<div id="container" class="clear-fix">
<div id="navigation">hi there ddd ddd</div>
<div id="content">
<div>somthing else</div>
<a target="_blank" href="#" ><img src="anything.jpg" style="width:32px; height:32px"/></a>
<a target="_blank" href="#" ><img src="anything.jpg" style="width:32px; height:32px" /></a>
</div>
</div>
</body>
IE6/7 not show correctly (left-side). i don't want set width for #content do you know any fixer for IE?
if i float inner element of content to left, it is correct (after re arrange of element),
but i want float element to right.
please tell me your solution.
best regards
Not so sure, but from the top of my head... try this
You can add these and see
#container{
width:[your width];
}
#content{
display: inline-block;
}