I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.
Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it.
<div id="navigation">
<ul>
<li>
main menu
<ul>
<li>section 1</li>
<li>section 2</li>
<li>section 3</li>
</ul>
</li>
</ul>
</div>
that's my code for one part of the menu, here's the scrollbox with images:
<div class="scroll" style="float:left;border: 1px solid black; width: 40em;
height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden;
text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff;
color: #ffffff;">
<img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%;
padding: 3%; padding-right: 3%; display: block" alt="image1">
<a name="section1"><img src="http://websiteurl.com/image2.jpg"
style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>
So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.
How would that be possible? or: where's the error in the anchoring? Thank you all for answers!
It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.
Have you tested without the images or without the scroll box?
An anchor tag is normally just
Click Here
or if using images instead of links
<img scr="imageLocation"/>
and then the anchor part is
<a name="myAnchorName"></a>
Related
my html is
<div id="heading1">
<ul class="heading">
<li>Geelong</li>
</ul>
</div>
and css is
.heading {
font-size: 24px;
text-align: center;
list-style-image: url('img/stationary/marker.png');
}
If I do the css inline it works but not otherwise.
With that code:
<div id="heading1">
<ul class="heading">
<li>Geelong</li>
</ul>
</div>
.heading{
font-size: 24px;
text-align: center;
list-style-image: url('https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
}
The list is displaying correctly with Google logo as bullet.
It seems that your problem is the image's URL that is wrong. You may verify that it points to an image that exists (think that it's a relative link)
I have a horizontal list of color swatches, and each list item has the following markup:
<li class="ws-filter">
<a class="ws-swatch-link" title="Black" href="#">
<div title="Black" class="ws-filter-swatch" style="background-color: #000000;"></div>
</a>
</li>
However, a selected color swatch has the following markup (no anchor tag):
<li class="ws-filter ws-selected">
<div title="Silver" class="ws-filter-swatch" style="background-color: #c0c0c0;"></div>
</li>
Here's the CSS:
.ws-filter-list .ws-filter {
display: inline-block;
}
.ws-filter-swatch {
width: 20px;
height: 20px;
border: 1px solid #dcdcdc;
margin: 2px;
}
And here's the JSFiddle: http://jsfiddle.net/nHk27/2/
This works just fine in most browsers, and looks like the following:
However, in IE8, the selected swatch pops out of line, like this:
This is a project I'm working on, and I can't change the markup. I've tried experimenting with changing the display of the div, anchor and list item in different combinations. I'm pretty sure I could get it to work using float, but is there any way to fix this without using float?
Try
vertical-align: middle;
I have a strong hunch IE8's default puts the content up on top.
Since you're not posting any relevant CSS, I can only suggest you to use IE hacks technique to target IE8 in your case, try something like this:
.ws-filter div[title="Silver"] {
margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}
I'm using a bit of javascript to create a dropdown that appears when an image is clicked. Currently the initial image is centered, but the drop down is appearing at the left of the frame... and I'm stumped. Help would be greatly appreciated. My code is below:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
Arbuckle</li>
<li>
Country Estates</li>
<li>
Strawberry</li>
<li>
Walnut Ranch</li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
Site can be seen here: http://www.waterutilitymanagementservices.com/deloro/water-districts.html
EDIT: CSS for dropdown-menu added. FYI, this site is using joomla beez template with bootstrap, with css heavily modified. the code below comes from bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
EDIT 2: More CSS - After scouring all my css files, it looks like all the references to dropdowns are in bootstrap.css. Rather than past all of them here (which would be long), i posted the CSS as a txt file here: http://www.waterutilitymanagementservices.com/boostrap.txt
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.