Do Dreamweaver's design and live view display contrasting elements?

Question

Do Dreamweaver's design and live view display contrasting elements?

Check out the images below:

http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png (Design view) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png (Live & browser view)

In the design view, everything appears as intended and looks great. However, in the live view or when previewing in a web browser, some content overlaps with my navigation. I'm not sure what to do next. Here is the code I've used:

HTML:

<nav>
        <ul>
          <li> <a href="index.html">Home</a></li>
          <li> <a href="news.html">News</a></li>
          <li> <a href="events.html">Events</a></li>
          <li> <a href="galleries.html">Galleries</a></li>
          <li> <a href="videos.html">Video </a></li>
          <li> <a href="history.html">History</a></li>
          <li> <a href="contact.html"> Contact</a></li>

        </ul>    
      </nav>    



   <div id="contactheader">
        <p>Get in touch with FIFAScene: </p>
   </div>     


    <p>&nbsp;</p>

  <div id="contactcontent">    
         <p>If you have any feedback regarding our website, or wish to comment on anything FIFA eSport related, then please contact us via:</p>
  </div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <ul>
          <div id="contacthotmail">
               <li><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80c6c9c6c1d3e3e5eee5c0e8eff4ede1e9ecaee3efed">[email protected]</a><img src="images/icons/outlook.png" width="112" height="95"></li>
          </div>

          <div id="contactsm">
                 <li><a href="http://www.twitter.com/FIFAScene">www.twitter.com/FIFAScene<img src="images/icons/twitter.png" width="94" height="78"></a>
                 <a href="http://www.facebook.com/FIFAScene">www.facebook.com/FIFAScene<img src="images/icons/facebook.png" width="67" height="63"></a></li>
          </div>
   </ul>

CSS:

nav {
float:left;
position:relative;
}

nav ul li {
display:block;
margin:20%;
padding:30%;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
text-align: center;
}

#contactheader {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:20px;
}

#contactcontent {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}

#contacthotmail {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}

#contactsm {
text-align:center;
    color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
margin-top:40px;

}

I apologize if this is too much information. I am still learning about web design and programming!

Thank you.

html css

Answer 1

Answer №1

It seems that your version of DW may not recognize certain HTML5 elements as block type elements. As a workaround, you can add a line to the nav element in your CSS:

display: block;

This will improve the display in the design view while typing.

Starting from here: Personally, I find the Design-View useful for typing content, especially with special characters like quotes. It also comes in handy when working with lists or without visual aids and CSS enabled. While Adobe has provided tutorials on achieving consistent previews in design-view, having a browser open alongside is recommended for a better standard via Live View.

Upon a suggestion, I tested the code in DW5.5 to maintain the nav and main tags as floats. Using a wrapper to clear the float helped achieve consistency between design-view preview and Live View (ALT+11).

I attempted a pyramid layout for contact logos using floats but faced difficulty centering the links below without too much effort. To resolve this, I set them as inline-blocks for proper centering.

Additionally, the padding on navigation list items seemed unusual with 50% on both sides.

... and the rest of the code follows.

Answer 2

It seems that your version of DW may not recognize certain HTML5 elements as block type elements. As a workaround, you can add a line to the nav element in your CSS:

display: block;

This will improve the display in the design view while typing.

Starting from here: Personally, I find the Design-View useful for typing content, especially with special characters like quotes. It also comes in handy when working with lists or without visual aids and CSS enabled. While Adobe has provided tutorials on achieving consistent previews in design-view, having a browser open alongside is recommended for a better standard via Live View.

Upon a suggestion, I tested the code in DW5.5 to maintain the nav and main tags as floats. Using a wrapper to clear the float helped achieve consistency between design-view preview and Live View (ALT+11).

I attempted a pyramid layout for contact logos using floats but faced difficulty centering the links below without too much effort. To resolve this, I set them as inline-blocks for proper centering.

Additionally, the padding on navigation list items seemed unusual with 50% on both sides.

... and the rest of the code follows.

Answer 3

Answer №2

If you're diving into Dreamweaver, it's best to shift away from the design view and start previewing everything in your browser while troubleshooting with the browser's web inspector.

To get a real-time look at your CSS and positioning, you can utilize some features in the web inspector. If you have a Mac, consider checking out Espresso <Link> developed by the team at macrabbit.

Be cautious of the non-breaking space returns (<p> </p>) tags that Dreamweaver inserts, remove them and opt for using CSS instead.

Answer 4

If you're diving into Dreamweaver, it's best to shift away from the design view and start previewing everything in your browser while troubleshooting with the browser's web inspector.

To get a real-time look at your CSS and positioning, you can utilize some features in the web inspector. If you have a Mac, consider checking out Espresso <Link> developed by the team at macrabbit.

Be cautious of the non-breaking space returns (<p> </p>) tags that Dreamweaver inserts, remove them and opt for using CSS instead.

Do Dreamweaver's design and live view display contrasting elements?

Answer №1

Answer №2

Similar questions

Implementing a filter in React with data fetched from MongoDB

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

Is there a way to prevent the splash screen from appearing every time I navigate using a navbar link in a single page application (SPA)?

Tips for locating a webpage element with Selenium?

Tips for arranging columns and rows in a mat-dialog box

Cannot retrace steps in file tree using ../

Why does the Autofocus Attribute in HTML5 fail to work specifically in FireFox when <Form><input> elements are dynamically loaded using Ajax?

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

When selecting an option in the burger menu, the dropdown does not react properly

Keep rolling the dice until you hit the target number

Troubleshooting problem with table reflow in Bootstrap v4.0.0-alpha.3 on mobile devices

Centering an unordered list and ensuring the image is responsive across different screen sizes are both top priorities for this design

The height of each Bootstrap column is equal to the height of its corresponding

Steer clear of altering line spacing in CSS

Showing code snippets with possible markup or malicious content as plain text strings

What techniques can be used to create logos that adapt and transform seamlessly as the screen size varies?

Using jquery to remove textbox value when checkbox is unchecked

Rendering images in Next.js version 10

How can I transfer data from a text box to a combo box?

if there is an error in a JavaScript statement