Jsfiddle
Im very new to HTML and CSS and my weakest points are positioning things.
1)Each picture has its respective green button but my question is how do i put these pictures next to each other instead of on top of each other?
2) how would I code it so that if I hovered over the picture, the corresponding button would still change color up and allow me to click the picture to go to the link?
HTML
<!DOCTYPE html>
<div id="chewning">
<img src="http://scontent-b.cdninstagram.com/hphotos-xap1/t51.2885-15/10518156_366963580136787_506416400_a.jpg" </img>
<a href="https://www.youtube.com/user/maxxchewning">
<div id="EFGREEN">
</div>
</a>
<div id="CG">
<img src="http://cdn.shopify.com/s/files/1/0232/0959/products/575757_10152033748519359_1620549997_n_2.jpg?v=1398666646"></img>
</div>
<a href="https://www.youtube.com/user/Christianguzmanfitne">
<div id="CGGreen">
</div></a>
</html>
CSS
#chewning {
display:inline-block;
margin-right:1000px;
margin-top:-40;
}
#EFGREEN {
background-color:green;
width:306px;
height:100px;
display:block;
}
#EFGREEN:hover{
background-color:red;
}
a:{
display:block;
}
#CG{
float:right;
}
#CGGreen{
background-color:green;
width:414px;
height:500px;
}
#CGGreen:hover{
background-color:red;
}
As already mentioned in some comments, the markup and CSS of your demo
could be improved and there are plenty of online resources (won't recommend
any specific).
But as you have 2 specific questions - how to display both images next to
each other and how to change the link in a way that also the image is linked and the button is displayed in hover state (changes the background color) when the image is hovered - I'd just like to give an answer as well as maybe providing some information on how to improve your code.
In this adjusted Fiddle I've kept but commented out your CSS and added the following new CSS instead:
.button {
background-color:green;
width:100%;
height:100px;
}
.item {
float:left;
}
.item:hover .button {
background-color:red;
}
To display both images next to each other, I've wrapped both items (image and button)
in a div with the class item. These items float left, so they're displayed
next to each other. I've added the class button to both buttons so it's not
necessary to repeat styles based on the buttons' ids.
You've set the width of both buttons to the different widths of the images which
can be handled in a more dynamic approach by just setting the width of the
buttons to 100% - based on the image width the surrounding item container
will have the width of the image, and the div with the class button automatically
has the same width (100% of the container).
I've moved the anchor tags that previously only wrapped the button div to wrap the
whole divs (which contain the image and the button) contained in each item, so the whole content is linked.
Adding .item:hover .button { background-color:red}, the buttons will be displayed
in red when hovering an item container.
Note that there are different ways to display content next to each other - just
to mention one of them using display:inline-block - Fiddle - instead of floats. As
you'll notice, then also the buttons are displayed aligned next to each other.
It depends on the required layout (and maybe also on one's personal preferences)
which to choose.
Related
i have a div that in some cases may be populated with a video. I tried to use
height:auto;
on the container div but when the video appears it passes outside the div container.
A fixed height solves the problem, but leaves a large area when the video does not appear.
You can try one of the two options listed below.
You can view the JSFiddle here. I also provide more comments within the JSFiddle to help guide you better.
Option 1 - Leave the height of that div holding the video blank and CSS will adjust automatically.
CSS:
.videoDivOption1 {
/* blank */
}
HTML:
<div class="videoDivOption1">
The text represents your video. Once your delete the text it represents no video.
</div>
Or you can use min-height for that div, but the parent div must have a property of height:100%; or the min-height will not work.
CSS:
.videoDivOption2_Container {
height:100%;
}
.videoDivOption2 {
min-height:0px;
}
HTML:
<div class="videoDivOption2_Container">
<div class="videoDivOption2">
The text represents your video. Once your delete the text it represents no video.
</div>
</div>
you need to set a min-height also for this div in which video appears for expmple
height:auto;
min-height:50px; /* or something else*/
I'm creating a navigation bar and I want the text, which is going to be on the right, to be inline with the end of the image. I want it to stay aligned and in position regardless of whether the window is resized or not.
I've included an image incase I haven't explained it very well:
http://i.stack.imgur.com/QWR6L.png
Hopefully you guys can help!
Is this something that you are looking to achieve ?... http://jsfiddle.net/65fBD/ Now the way i achieved it is to float the image to the right and wrap the image and the links inside a div and give it a min-width attribute. what this does that as soon as it hits the minimum width specified in viewport, the division will not shrink after that thus maintaining the inline look.
here is the css
#navcontainer {
width:100%;
min-width:400px;
height:40px
}
#image {
float: left;
}
#links {
float:right;
}
and the html...
<div id="navcontainer">
<img src="http://dummyimage.com/230x40/123dfe/fff" id="image"/>
<p id="links"> Link | Link | Link </p>
</div>
But on another note, please clarify what you mean by if window is resized the link should stay aligned....are you referring to responsive design?
I am working on a wordpress site.
I have these decorative titles that are constructed like this:
(the following is not the real html structure, it is just as example purpose)
<div class="decoration-left"> <div class="title"> <div class="decoration-right">
.title has a h1 title inside.
.decoration-left, and .decoration-right, are empty divs, with a decorative background.
I need the title to be centered all the time.
I first tried to give all the three divs a 33.3% width, which worked nice on big screens, but as i reduce the window the title breaks into two lines, and it looks ugly. I need the title to have a constant width therefore. I dont want the text to be smaller.
Right now, i have the .title div with "width:auto" which works fine. however i need the left and right decorative divs to take each one, half of the remaining space in a responsive/fluid way.
attaching picture for better understunding.!
My guess is: put your DECORATIVE divs inside the TITLE div, and your TITLE div inside a WRAP div. Make the TITLE div with 'position: relative; display:inline-block; background:#fff;' the DECORATIVE ones with 'position:absolute; left:-50px;' and 'position:absolute; right:-50px;', and the WRAP with 'text-align:center; background:url(LINE IMAGE LINK) center repeat-x;'.
I know it's hard to understand, but I am mostly sure it will work that way. I'll try making it look better by coding some of it:
HTML:
<div class="title-warpper">
<div class="title">
<div class="decoration-left"></div>
<span>YOUR TITLE HERE</span>
<div class="decoration-right"></div>
</div>
</div>
CSS:
div.title-wrapper {
background:url(LINE IMAGE LINK) center repeat-x;
text-align: center;
}
div.title {
position:relative;
background:#fff;
display:inline-block;
}
div.decoration-right{
position:absolute;
right:-25px;
background:url(DECORATION BG LINK);
width:25px;
height:25px;
}
div.decoration-left{
position:absolute;
left:-25px;
background:url(DECORATION BG LINK);
width:25px;
height:25px;
}
I set the decoration divs for 25px, but use what you need. Just remember to adjust them and the left and right properties to fit your needs.
if you don't mind the title overlapping the decorative divs on some screen sizes then you can absolute position the decorative divs with
position:absolute;
left:0px; (OR right:0px;)
give them whatever width and height you like.
I am very new to html and css. I am trying to build my first website. I would like to have a picture on the same line as a nav bar, with the picture to the left. I first tried using some prewritten code for a drop down nav bar, but I was unable to position an image to the left of it. I tried some very basic code, but I still cannot figure our how to put a div (my image) next to a nav. I don't quite know when to use position and when to use float. My goal is simple to start. Get a div and nav to sit side-by side. Here is the html I am using to test:
<!DOCTYPE html>
<html>
<head>
<title>
Nav and div
</title>
<link rel="stylesheet" type="text/css" href="styleside.css">
</head>
<body>
<div>
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%">
</div>
<nav>
<ul>
<li>Home</li>
<li>Big Friendly Button</li>
<li>TARDIS</li>
</ul>
</nav>
</body>
</html>
Can Anyone point me to a starting place for how to move these elements around? Thank you!
<sytle> // Put this in css
.anynames{ // this css is for position an image to the left
position:relative;
float:left;
}
</sytle>
<div id="anynames"> //<---- Id this use to indicate specific DIV
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%" />
</div>
If this is correct Mark it if this is not We Finds ways :D
There are two common methods of forcing two block (commonly div) elements to sit beside each other.
Floats
Floats are used to force elements to strictly align along the left or right of a page. However, they are also useful for placing two block elements beside one another:
div.image {
float: left;
}
nav {
float: left;
}
See this Fiddle
One key advantage floating elements over inline blocks is that floating elements don't have a default margin to space text (see Inline blocks section).
You can also change the code under nav to float: right; which will separate the image and nav on separate sides of the screen.
Inline blocks
Inline blocks are often used to display block elements inside a paragraph. But since two inline elements are placed beside each other given enough room, we can use these to position blocks horizontally:
div.image {
display: inline-block;
}
nav {
display: inline-block;
}
And the Fiddle.
In the Fiddle I've colored the nav red to show the space in between the two elements. If you did the same for the floating elements, you'll see no space between the image and the nav. However, here there is a small margin caused by the default spacing given to inline-block elements - the browser wants to put space between an inline element and the surrounding text. To get rid of the space, you must add
body {
font-size: 0;
}
nav {
font-size: 12pt;
}
Why would you want no spacing? We often want widths described in percentages. However, if you were to keep the spacing while specifying percentages that add up to 100%, the second element would spill over onto the next line because we didn't take the extra spacing into account: see this Fiddle.
Your two elements div and nav need to be formated in CSS. Like this:
<style>
.myDiv{
display:inline-block;
width:50%;
}
nav{
display:inline-block;
width:50%;
}
</style>
You must enter in a class for div to understand this code
<div class="myDiv">
The code inline-block will allow elements that are smaller then the remaining width of the page to be stacked beside it.
Hope this helps!
Im trying to achieve a heading effect link on bbc: http://www.bbc.co.uk/
scroll down to most popular/whats on/explore
I'm after an effect where the heading is with text on the left and the arrow on the right.
and on hover both change color.
how can it be done so the heading fills the container and has the behaviour described?
thanks
You can use floats to make the arrow stick to the right side by floating it to the right
.arrow { float:right; }
For the color change you will need to change the contained elements when the mouse is hovered on the container
.container:hover .title, .container:hover .arrow { color:green; }
You can check my example here.
Update
Working with hyperlinks does not make it any different. All you have to do is wrap the two containers inside a hyperlink and then apply changes to the hyperlink like
http://jsfiddle.net/pZtGw/3/
The new html markup would look similar to this
<div class="container">
<a href="your_link_here">
<div class="title"> This is a title </div>
<div class="arrow"> > </div>
</a>
</div>
And instead of applying the color change to the two contained elements, we change the hyperlinks color property through our CSS flie
.container:hover a { color:green; }
http://jsfiddle.net/2yYyL/1/ here is an example on jsfiddle
what you want to do is add a sudo class of :hover on the wrapper and change the color of the text then have a have a sudo class of :hover on the parent element of a span like so
div:hover span{ background-image:url();}
so when you hover over the parent element it changes the background image of the child element