Code that should get me to div with id "contact":
<a href="index.html#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black"><i class="fa fa-envelope w3-xxlarge"></i>
div:
<div class="w3-padding-64 w3-content w3-text-light-grey" id="contact">
I this moves me to:
<div class="w3-half w3-margin-bottom"><ul class="w3-ul w3-black w3-center w3-opacity w3-hover-opacity-off"><li class="w3-dark-grey w3-xlarge w3-padding-32">Voice Assistant</li><li><img src="https://opengraph.githubassets.com/08acf1b9b376cf16c3a6ec2b3bcfea4e8ed1e33a3291221dbaf5e18086213795/LudwikZimmenhof/Voice-Assistant" style="max-width: 432px"></li></ul></div>
Website: https://ludwikzimmenhof.github.io/Portfolio/index.html
Github respo: https://github.com/LudwikZimmenhof/Portfolio
Anybody know how to fix it?
You have at least two issues going on:
Since your #projects contains floated elements (float: left;) you need to use something to avoid it to collapse (a clear fix)
A large part of your projects aren't properly inside the #projects div, you current setup is:
<div id="projects">
<div id="project-1"></div>
<div id="project-2"></div>
<div id="project-3"></div>
</div><!-- the project div end here -->
<div id="project-4"></div>
<div id="project-5"></div>
<div id="project-6"></div>
PS: There is also an issue with your CSS reset:
I aggree with #Ben Souchet but if you want to fix it and you dont know how to resolve completely. You could point to this section for now...
Also: You can loose the 'index.html' in your href parameters ;)
Contact Info section
Related
Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.
From 2 hours I'm looking for what error is on my page because I have a huge blank space...the width is too big and I don't want to have that space. Could you help me to fix my code ?
Here is my website where you can check : https://andrei-my-codepen.000webhostapp.com/
I don't know if it's because of an unclosed tag, or from CSS. But, when I wanted to fix this problem, I saw that, at some divs with class row, if I cancel margin-left: -15px, that space disappear, maybe is because I have too much row class?
Use below code as using row as a child of class="reservation1" should resolve your problem.
<div class="reservation1">
<div class="row">
<div class="col-md-4">
<p class="menu-reservation">you want to stand here?</p>
</div>
<div class="col-sm-6 reservation-div">
<div class="button-reservation ">
<p class="reservation-text1 text-center">seat reservation</p>
<p class="reservation-text2 text-center">Reserve a place in "Good Food" restaurant</p>
</div>
</div>
</div>
</div>
I knew this answer at one time, but I can't for the life of me remember it. I've searched all over for the answer but I just can't find it. I have a webpage with some anchors that are as shown below:
<a onclick="make_ajax_request('list')">
<div class="viewbar ">
<div class="icon list">
<img src="/icons/list.png"/>
</div>
<p>List</p>
</div>
</a>
They basically are links with picture icons and text. They work most of the time, but every now and then you have to click on them twice to trigger the function. I remember that it had something to do with not having an "href" attribute or the anchors themselves being inline-blocks. But I've tried everything to no avail. Does anyone have any idea of what I am referring to?
You shouldn't be wrapping block level elements such as with inline elements like <a>. Actually this is fine now, my information was outdated. That could very well be causing the trouble. Some (all?) browsers will try to fix that when it loads, and you could effectively end up with something like this:
<a onclick="make_ajax_request('list')"></a>
<div class="viewbar ">
<div class="icon list">
<a><img src="#" /></a>
</div>
<p><a>List</a></p>
</div>
<a></a>
In any case, you might be better off wrapping the img in the tag, and then using javasript to interpret a click on the div as a click on the inner link. Or in your case where it's not actually a link, just do:
<div class="viewbar" onclick="make_ajax_request('list')">
<div class="icon list">
<img src="/icons/list.png"/>
</div>
<p>List</p>
</div>
and in your css
.viewbar { cursor: pointer; }
I'm doing a web on Bootstrap and I'm getting into some serious troubles that I can't solve even with Bootstrap documentations. So, this is my code:
<div class="container">
<div class="hero-unit">
<h2>Two Rows</h2>
<div class="row">
<div class="span6">
<center>
<img src="../img/renders/example.png" style="position: absolute; width: 200px; height= 200px; margin-top: 80px">
<img src="../img/covers/some_image.jpg" title="Image title" class="img-rounded propiedades_imagenes">
</center>
</div>
</div>
<div class="span6">
<div class="well" style="margin-top:130px">
<a class="btn btn-large btn-primary" href="#link">
<i class="icon-download"></i> Download</a>
<a class="btn btn-large btn-inverse" href="#random.html" style="margin-left:272px">
<i class="icon-random icon-white"></i></a>
</div>
</div>
</div>
I'm trying to create two rows inside of a Hero-Unit, the thing is it worked when I had the responsive design activated but when I activate it the page just do some crazy stuff with the design in smaller and bigger screens than mine, so I just deleted the link to bootstrap-responsive.css and I put a "class=row" instead of "class=row-fluid", but now it just creates one row instead of two and put all the content of the second row under the first one.
Am I doing something wrong? I know how to do this with responsive, but it messes up all my work.
Image of what I want and what I get with the responsive design: http://i1129.photobucket.com/albums/m518/ZoxSoft/Capturadepantalla2013-08-13alas000037_zps064f71b1.png
I am not familiar with Bootstrap or Hero-unit
but I think that you need another Div with class="row"
it is hard to troubleshoot with out a visual of what is going on and what it is supposed to be doing. but first glance to me says you need another div tag with the class of row.
you have 3 </div> at the end of the code snippet that you gave and only 2 that need to be closed?
NEW
in your first image link it looks like you have a lot of styling but no Title Attribute and no Class Attribute
with out that class attribute your responsive and Hero-Unit won't know to grab it
So I finally figured it out. I created two new classes for each div, one for the left one and another for the right one, I put this code into de first one:
width: 50%;
float:left;
And for the right one:
width: 50%;
float:right;
After that, did a few changes in the margin of the objects to fit in the page and finally got it!
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.