link to image
The ordered list is supposed to look like this:
link
EDIT: Weird, the code won't display properly here...
<table width="1098"> <tr>
<td width="479" height="147"><img src="NYPLogo.png" width="459" height="100" /></td>
<td width="29" id = "name">Products</td>
<td width="574"> </td></tr> <tr>
<td> </td>
<td colspan="2"><div id = "words">Announcements<br />
<br />
GSM Registrration Round 1 : xx-Apr-2011 to xx-Apr-2011<br />
<br />
GSM Registration Round 2: xx-Apr-2011 to xx-Apr-2011<br />
<br />
<ul id = "courselist">
<li><img src = "NYPLogo.png" alt = "" width= "200" height="44" /></li>
<li><img src = "NYPLogo.png" alt = "" width= "200" height="43" /></li>
<li><img src = "NYPLogo.png" alt = "" width= "200" height="41" /></li>
<li><img src = "NYPLogo.png" alt = "" width= "200" /></li>
</ul>
</div>
<p><br />
</p></td> </tr></table>
Try setting the li to display:inline; like so:
#courselist li{
display:inline;
}
That way they appear next to each other instead of on new lines.
The last image has no specified height? I assume you want the images to line up?
Instead of using a table to get the 3x2 layout, try floating div blocks:
<style>
.box{ float:left; height:100px; width:100px;
</style>
<div class=box>box 1</div>
<div class=box>box 2</div>
<div class=box>box 3</div>
<br>
<div class=box>box 4</div>
<div class=box>box 5</div>
<div class=box>box 6</div>
>/pre<
display: inline; will ignore width and height variables. You have to use display: inline-block; instead.
I created a quick fiddle for you. You will get the idea. http://jsfiddle.net/hobobne/gq9e8/
Related
I am currently trying to create some kind of movie info page like what you see in cinemas where I grab images and titles from another source.
What my code should do is when the pictures from image slide change, it should highlight the corresponding title to show what movie it is but I am not sure how to properly connect between the images and the texts.
Any help would be appreciated thanks.
html:
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<c:forEach var="img" items="${moviedata }" varStatus="no">
<a href="../movielist/MDetail?mid=${img.mid }"><li class="home_li"><img src="../m_img/movie/${img.imgurl}"
alt="" width="500px" height="600px" name="color${no.index }" /></li></a>
</c:forEach>
</ul>
</div>
</td>
<td>
<!-- movielist-->
<div>
<ul class = "mlist">
<c:forEach var="rank" items="${moviedata }" varStatus="no">
<li>
${no.index + 1 }. ${rank.name }
</li>
</c:forEach>
</ul>
</div>
</td>
</tr>
</table>
html Result :
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<a href="../movielist/MDetail?mid=11"><li class="home_li"><img src="../m_img/movie/82019_1000.jpg"
alt="" width="500px" height="600px" name="color1" /></li></a>
<a href="../movielist/MDetail?mid=25"><li class="home_li"><img src="../m_img/movie/82060_1000.jpg"
alt="" width="500px" height="600px" name="color2" /></li></a>
<a href="../movielist/MDetail?mid=1"><li class="home_li"><img src="../m_img/movie/82078_1000.jpg"
alt="" width="500px" height="600px" name="color3" /></li></a>
<a href="../movielist/MDetail?mid=5"><li class="home_li"><img src="../m_img/movie/82133_1000.jpg"
alt="" width="500px" height="600px" name="color4" /></li></a>
<a href="../movielist/MDetail?mid=23"><li class="home_li"><img src="../m_img/movie/82093_1000.jpg"
alt="" width="500px" height="600px" name="color5" /></li></a>
<a href="../movielist/MDetail?mid=4"><li class="home_li"><img src="../m_img/movie/81905_1000.jpg"
alt="" width="500px" height="600px" name="color6" /></li></a>
<a href="../movielist/MDetail?mid=6"><li class="home_li"><img src="../m_img/movie/82190_1000.jpg"
alt="" width="500px" height="600px" name="color7" /></li></a>
<a href="../movielist/MDetail?mid=3"><li class="home_li"><img src="../m_img/movie/82224_1000.jpg"
alt="" width="500px" height="600px" name="color8" /></li></a>
<a href="../movielist/MDetail?mid=7"><li class="home_li"><img src="../m_img/movie/82129_1000.jpg"
alt="" width="500px" height="600px" name="color9" /></li></a>
</ul>
</div>
</td>
<td>
<!-- movielist -->
<div>
<ul class = "mlist">
<li>
1. Movie Name 1
</li>
<li>
2. Movie Name 2
</li>
<li>
3. Movie Name 3
</li>
<li>
4. Movie Name 4
</li>
<li>
5. Movie Name 5
</li>
<li>
6. Movie Name 6
</li>
<li>
7. Movie Name 7
</li>
<li>
8. Movie Name 8
</li>
<li>
9. Movie Name 9
</li>
<li>
10. Movie Name 10
</li>
</ul>
</div>
</td>
</tr>
</table>
CSS:
<style>
.mlist{
list-style:none;
display:flex;
align-content:flex-start;
flex-direction: column;
flex-wrap: wrap;
width: 250px;
text-align: left;
}
.mlist li {
display:inline-block;
border:1px solid black;
border-top: 1px solid black;
width:260px;
height:50px;
margin:3px 0 0;
}
.mlist li:hover {
border:1px solid red; height:50px;
}
</style>
JavaScript:
const all = ele => document.querySelectorAll(ele)
const one = ele => document.querySelector(ele)
const slide = _ => {
const wrap = one('.slide')
const target = wrap.children[0]
const len = target.children.length
target.style.cssText = width:calc(100% * ${len});display:flex;transition:1s
Array.from(target.children)
.forEach(ele => ele.style.cssText = width:calc(100% / ${len});)
let pos = 0
setInterval(() => {
pos = (pos + 1) % len
target.style.marginLeft = ${-pos * 100}% }, 3000)
}
window.onload = function () {
slide()
}
I suggest you keep track of your slide with variables.
When you navigate you could use these 2 variables to hold the ID of the element you want to highlight now and the element on which you want to remove the highlight. And run this script every time you change the slide.
In your case i believe your using positions. so apply the style to that new position and remove it from the old position.
Now for what is linking the text to the image depends on what your doing. The could share a same position value or they could share a container element. And if you plan on using you position with the ID attribute, remember that an id attribute can not start with a number. So I usualy concatenate a string with a numeric value.
"myElementId_"+ pos
Result in myElementId_1 which is valid html
Now just add style to this element and remove it from last.
Hi Im making a theme for my website which has a user menu in the top right corner of the page. This is inside a purple bar which also holds the title of the page. I have managed to get the user menu on the right hand side but I'm unable to get it into the top bar, it just sits bellow the bar. To see exactly what I mean here's a link to my site http://cpanel.gaigo.org
I believe it has something to do with the header div spreading accross the whole page but im unable to get it to shrink down to only fill 250px.
The HTML code is bellow:
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30"/>
</div>
</div>
Thanks for any responses in advance I'm sure they will help me figure this out.
You just try this code inside your body tag.I maked some changes inside your inline css in header,userbutton div id's
<div id="container">
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;float:left">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;margin-top:25px;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30">
</div>
</div>
<div id="menuWrap" style="position:fixed; height:100%; z-index:0;">
<div id="menuHolder" style="background-color:#77bb66;height:inherit;width:50px;float:left;margin-top:21px;position:relative;">
<table class="menu" style="margin:0 auto; margin-top:38px;">
<tbody>
<tr>
<td class="sideMenuOption" id="dashboardButton" onclick="menuSlider('dashboardSubMenu')">
<img src="/style/images/designer-icons/Home-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="pagesButton" onclick="menuSlider('pagesSubMenu')">
<img src="/style/images/designer-icons/Multi-Page-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="mediaButton" onclick="menuSlider('mediaSubMenu')">
<img src="/style/images/designer-icons/Picture-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="stylesButton" onclick="menuSlider('stylesSubMenu')">
<img src="/style/images/designer-icons/Brush-01-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="settingsButton" onclick="menuSlider('settingsSubMenu')">
<img src="/style/images/designer-icons/Settings-02-48.png" width="40" height="40">
</td>
</tr>
</tbody>
</table>
</div>
<div id="subMenuHolder" class="hide">
<ul class="subMenu dashboardSubMenu" id="dashboardSubMenu">
<li>Home</li>
<li>My Site</li>
<li>Stats</li>
</ul>
<ul class="subMenu pagesSubMenu" id="pagesSubMenu">
<li>Pages</li>
<li>New page</li>
</ul>
<ul class="subMenu mediaSubMenu" id="mediaSubMenu">
<li>Library</li>
<li>Upload</li>
</ul>
<ul class="subMenu stylesSubMenu" id="stylesSubMenu">
<li>Themes</li>
<li>Customise</li>
<li>Menus</li>
<li>Mobile</li>
</ul>
<ul class="subMenu settingsSubMenu" id="settingsSubMenu">
<li>General</li>
<li>Site</li>
<li>Account</li>
</ul>
<div id="closeSubMenuButton" onclick="subMenuClose()">
<img src="/style/images/designer-icons/Arrowhead-Left-01-48.png" height="30" width="30">
</div>
</div>
</div>
<div id="contentWrap" style="width:100%;height:2000px;">
<div id="content" style="background-color:#EEEEEE;float:left;width:100%;height:2000px;margin-top:59px;margin-left:0px;">
<div id="contentHolder" style="margin-left:50px;">Content goes here</div>
</div>
</div>
</div>
The div element automatically is given the display:block property/value. Try display:inline-block. Some additional tweaks may be necessary but this should get you on your way. You may also consider wrapping the code with span elements instead of div elements.
i would like to create html like this :
text start with "we all grew up, reiterating to oursleves...." have 2 lines with image, and 3rd like start with left alignment
i take following elements for this ;
<ul class ="ariticaldiv">
<li>
<div>
<img src="../Images/DefaultPhotoMale.png" alt="" />
<span>Think About there benefits , Your Brand is your Equity</span>
<span><span>By : xxxxx</span><span>Director Of HR</span></span>
<span><span>Post:</span><span>March 3,2014</span></span>
<label>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx some long text here xxxxxxxxxxxxxx</label>
</div>
</li>
</ul>
how could i do that ?
If you render float the image, you'l obtain what you desire:
HTML:
<img src="../Images/DefaultPhotoMale.png" alt="" class='floated_image' />
CSS:
.floated_image
{
float:left;
margin-right:10px;
}
try this
<div>
<p style="width: 250px">
<img src="../Images/DefaultPhotoMale.jpg" alt="" style="float: left; width: 50px; height: 50px;margin:2px" />
<span>Think About there benefits , Your Brand is your Equity
By : xxxxx Director Of HR
Post: March 3,2014
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx some long text here xxxxxxxxxxxxxx
</span>
</p>
I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK
I've got 5 images I'd like to organize in an ASP.NET MVC view. So what I need is an HTML+CSS solution (I prefer not to use jQuery for this, for maximal compatibility).
I want to organize the images like so:
Image1 Image2
Image3 Image4
Image5
At first I tried using tables, with the HTML being:
<div class="table1">
<table border=1>
<tbody>
<tr>
<td>
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" />
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table2">
<table border=1>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" />
</p>
</td>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table3">
<table border=5>
<tbody>
<tr>
<td>
<p class="ImageCenterContainer">
<img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" />
</p>
</td>
</tr>
</tbody>
</table>
</div>
and the css part:
.mainArticleImage {
height: 95px;
width: 120px;
}
.ImageCenterContainer {
margin: 0 auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
}
but that doesn't work on IE.
This approach also didn't work too well either.
What is the best, simplest, cross-browser way to carry out what would seem to be an easy task?
How about this: http://jsfiddle.net/um6d7/
#Brian Flanagan
(this reply was too long for a comment)
I'm using IE8, but this solution should work for older IE versions as well. Shouldn't it to be fairly simple to organize 5 pictures on a screen? :-P
I should also mention that I didn't copy and paste your solution "as is", since I didn't want my css to refer to general tags such as img and div, but the changes are meaningless in terms of logic. The actual code I used:
HTML:
<div id="imagesContainer">
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" />
<img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/>
</div>
CSS:
#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}
any suggestions?